feat(emoji): allow the user to set the cdn address (#3908)

flarum · Sep 20, 2024 · c5b4ff7 · c5b4ff7
1 parent 9b9fd76
commit c5b4ff7
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 17 deletions.
diff --git a/extensions/emoji/extend.php b/extensions/emoji/extend.php
@@ -11,6 +11,9 @@
 use s9e\TextFormatter\Configurator;
 
 return [
+    (new Extend\Frontend('admin'))
+        ->js(__DIR__.'/js/dist/admin.js'),
+
     (new Extend\Frontend('forum'))
         ->js(__DIR__.'/js/dist/forum.js')
         ->css(__DIR__.'/less/forum.less')
@@ -30,4 +33,8 @@
         }),
 
     new Extend\Locales(__DIR__.'/locale'),
+
+    (new Extend\Settings)
+        ->serializeToForum('flarum-emoji.cdn', 'flarum-emoji.cdn')
+        ->default('flarum-emoji.cdn', 'https://cdn.jsdelivr.net/gh/twitter/twemoji@[version]/assets/'),
 ];
diff --git a/extensions/emoji/js/admin.js b/extensions/emoji/js/admin.js
@@ -0,0 +1 @@
+export * from './src/admin';
diff --git a/extensions/emoji/js/src/admin/index.js b/extensions/emoji/js/src/admin/index.js
@@ -0,0 +1,13 @@
+import app from 'flarum/admin/app';
+import { version } from '../common/cdn';
+
+app.initializers.add('flarum-emoji', () => {
+  app.extensionData.for('flarum-emoji').registerSetting({
+    setting: 'flarum-emoji.cdn',
+    type: 'text',
+    label: app.translator.trans('flarum-emoji.admin.settings.cdn_label'),
+    help: app.translator.trans('flarum-emoji.admin.settings.cdn_help', {
+      version: version,
+    }),
+  });
+});
diff --git a/extensions/emoji/js/src/common/cdn.js b/extensions/emoji/js/src/common/cdn.js
@@ -0,0 +1,7 @@
+import twemoji from 'twemoji';
+
+export const version = /([0-9]+).[0-9]+.[0-9]+/g.exec(twemoji.base)[1];
+
+export default function () {
+  return app.forum.attribute('flarum-emoji.cdn').replace('[version]', version);
+}
diff --git a/extensions/emoji/js/src/forum/addComposerAutocomplete.js b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
@@ -6,7 +6,7 @@ import AutocompleteReader from 'flarum/common/utils/AutocompleteReader';
 
 import AutocompleteDropdown from './fragments/AutocompleteDropdown';
 import getEmojiIconCode from './helpers/getEmojiIconCode';
-import cdn from './cdn';
+import cdn from '../common/cdn';
 
 export default function addComposerAutocomplete() {
   let emojiMap = null;
@@ -40,6 +40,7 @@ export default function addComposerAutocomplete() {
 
   extend('flarum/common/components/TextEditor', 'buildEditorParams', function (params) {
     const emojiKeys = Object.keys(emojiMap);
+    const resolvedCdn = cdn();
 
     const autocompleteReader = new AutocompleteReader(':');
 
@@ -75,7 +76,7 @@ export default function addComposerAutocomplete() {
                   emojiDropdown.setIndex($(this).parent().index() - 1);
                 }}
               >
-                <img alt={emoji} className="emoji" draggable="false" loading="lazy" src={`${cdn}72x72/${code}.png`} title={name} />
+                <img alt={emoji} className="emoji" draggable="false" loading="lazy" src={`${resolvedCdn}72x72/${code}.png`} title={name} />
               </button>
             </Tooltip>
           );

diff --git a/extensions/emoji/js/src/forum/cdn.js b/extensions/emoji/js/src/forum/cdn.js
diff --git a/extensions/emoji/js/src/forum/renderEmoji.js b/extensions/emoji/js/src/forum/renderEmoji.js
@@ -3,14 +3,16 @@ import twemoji from 'twemoji';
 import { override } from 'flarum/common/extend';
 import Post from 'flarum/common/models/Post';
 
-import base from './cdn';
-
-const options = {
-  base,
-  attributes: () => ({
-    loading: 'lazy',
-  }),
-};
+import cdn from '../common/cdn';
+
+function options() {
+  return {
+    base: cdn(),
+    attributes: () => ({
+      loading: 'lazy',
+    }),
+  };
+}
 
 /**
  * Parses an HTML string into a `<body>` node containing the HTML content.
@@ -40,7 +42,7 @@ export default function renderEmoji() {
       // element. This gets stripped below.
       //
       // See https://github.com/flarum/core/issues/2958
-      const emojifiedDom = twemoji.parse(parseHTML(contentHtml), options);
+      const emojifiedDom = twemoji.parse(parseHTML(contentHtml), options());
 
       // Steal the HTML string inside the emojified DOM `<body>` tag.
       this.emojifiedContentHtml = emojifiedDom.innerHTML;
@@ -54,6 +56,6 @@ export default function renderEmoji() {
   override(s9e.TextFormatter, 'preview', (original, text, element) => {
     original(text, element);
 
-    twemoji.parse(element, options);
+    twemoji.parse(element, options());
   });
 }
diff --git a/extensions/emoji/locale/en.yml b/extensions/emoji/locale/en.yml
@@ -4,6 +4,14 @@ flarum-emoji:
   # UNIQUE KEYS - The following keys are used in only one location each.
   ##
 
+  # Translations in this namespace are used by the admin interface.
+  admin:
+
+    # These translations are used in the Settings page of the admin interface.
+    settings:
+      cdn_label: CDN mirror address
+      cdn_help: "e.g. https://cdn.jsdelivr.net/gh/twitter/twemoji@[version]/assets/, The current version is: {version}"
+
   # Translations in this namespace are used by the forum user interface.
   forum: