enhance(emoji): update to Unicode 17, unify and lazy-load emoji data (#39363)

Generate emoji data from Unicode 17's `emoji-test.txt`, keeping existing
aliases. `public/assets/emoji.json` is now the single emoji data file,
also loaded by the backend. Rendered emoji drop their `aria-label`, the
dark theme inverts key on a new `data-alias` attribute instead.

Skin tone variants and their Gitea-only aliases are removed, GitHub has
none either.

Emoji autocompletion is now lazy-loaded with the markdown editor,
shrinking the index JS chunk from 653KB to 563KB.

---------

Signed-off-by: silverwind <me@silverwind.io>
Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: bircni <bircni@icloud.com>

web_src/css/themes/theme-gitea-dark.css

@@ -313,25 +313,25 @@ gitea-theme-meta-info {
 }
 
 /* invert emojis that are hard to read otherwise */
-.emoji[aria-label="check mark"],
-.emoji[aria-label="currency exchange"],
-.emoji[aria-label="TOP arrow"],
-.emoji[aria-label="END arrow"],
-.emoji[aria-label="ON! arrow"],
-.emoji[aria-label="SOON arrow"],
-.emoji[aria-label="heavy dollar sign"],
-.emoji[aria-label="copyright"],
-.emoji[aria-label="registered"],
-.emoji[aria-label="trade mark"],
-.emoji[aria-label="multiply"],
-.emoji[aria-label="plus"],
-.emoji[aria-label="minus"],
-.emoji[aria-label="divide"],
-.emoji[aria-label="curly loop"],
-.emoji[aria-label="double curly loop"],
-.emoji[aria-label="wavy dash"],
-.emoji[aria-label="paw prints"],
-.emoji[aria-label="musical note"],
-.emoji[aria-label="musical notes"] {
+.emoji[data-alias="heavy_check_mark"],
+.emoji[data-alias="currency_exchange"],
+.emoji[data-alias="top"],
+.emoji[data-alias="end"],
+.emoji[data-alias="on"],
+.emoji[data-alias="soon"],
+.emoji[data-alias="heavy_dollar_sign"],
+.emoji[data-alias="copyright"],
+.emoji[data-alias="registered"],
+.emoji[data-alias="tm"],
+.emoji[data-alias="heavy_multiplication_x"],
+.emoji[data-alias="heavy_plus_sign"],
+.emoji[data-alias="heavy_minus_sign"],
+.emoji[data-alias="heavy_division_sign"],
+.emoji[data-alias="curly_loop"],
+.emoji[data-alias="loop"],
+.emoji[data-alias="wavy_dash"],
+.emoji[data-alias="feet"],
+.emoji[data-alias="musical_note"],
+.emoji[data-alias="notes"] {
   filter: invert(100%) hue-rotate(180deg);
 }

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -1,6 +1,5 @@
 import '@github/markdown-toolbar-element';
 import '@github/text-expander-element';
-import {attachTribute} from '../tribute.ts';
 import {hideElem, showElem, autosize, isElemVisible, generateElemId} from '../../utils/dom.ts';
 import {
   EventUploadStateChanged,
@@ -12,7 +11,6 @@ import {handleGlobalEnterQuickSubmit} from './QuickSubmit.ts';
 import {renderPreviewPanelContent} from '../repo-editor.ts';
 import {toggleTasklistCheckbox} from '../../markup/tasklist.ts';
 import {easyMDEToolbarActions, type EasyMdeToolbarAction} from './EasyMDEToolbarActions.ts';
-import {initTextExpander} from './TextExpander.ts';
 import {showErrorToast} from '../../modules/toast.ts';
 import {POST} from '../../modules/fetch.ts';
 import {
@@ -105,7 +103,10 @@ export class ComboMarkdownEditor {
     this.prepareEasyMDEToolbarActions();
     this.setupContainer();
     this.setupTab();
-    await this.setupDropzone(); // textarea depends on dropzone
+    await Promise.all([
+      this.setupDropzone(), // textarea depends on dropzone
+      this.setupTextExpander(),
+    ]);
     this.setupTextarea();
 
     await this.switchToUserPreference();
@@ -129,6 +130,10 @@ export class ComboMarkdownEditor {
     this.previewUrl = this.container.getAttribute('data-preview-url')!;
     this.previewContext = this.container.getAttribute('data-preview-context')!;
     this.updateEditorContainerTabPage('writer');
+  }
+
+  async setupTextExpander() {
+    const {initTextExpander} = await import('./TextExpander.ts');
     initTextExpander(this.container.querySelector('text-expander')!);
   }
 
@@ -343,8 +348,9 @@ export class ComboMarkdownEditor {
 
   async switchToEasyMDE() {
     if (this.easyMDE) return;
-    const [{default: EasyMDE}] = await Promise.all([
+    const [{default: EasyMDE}, {attachTribute}] = await Promise.all([
       import('easymde'),
+      import('../tribute.ts'),
       import('../../../css/easymde.css'),
     ]);
     const easyMDEOpt: EasyMDE.Options = {
@@ -386,7 +392,7 @@ export class ComboMarkdownEditor {
       },
     });
     this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll')!, this.options.editorHeights);
-    await attachTribute(this.easyMDE.codemirror.getInputField());
+    attachTribute(this.easyMDE.codemirror.getInputField());
     if (this.dropzone) {
       initEasyMDEPaste(this.easyMDE, this.dropzone);
     }

web_src/js/features/emoji.ts

@@ -1,4 +1,4 @@
-import emojis from '../../../assets/emoji.json' with {type: 'json'};
+import emojis from '../../../public/assets/emoji.json' with {type: 'json'};
 import {html} from '../utils/html.ts';
 
 const {assetUrlPrefix, customEmojis} = window.config;

web_src/js/features/tribute.ts

@@ -1,11 +1,10 @@
 import {emojiKeys, emojiHTML, emojiString} from './emoji.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {fetchMentions} from '../utils/match.ts';
-import type {TributeCollection} from 'tributejs';
+import Tribute, {type TributeCollection} from 'tributejs';
 import type {Mention} from '../types.ts';
 
-export async function attachTribute(element: HTMLElement) {
-  const {default: Tribute} = await import('tributejs');
+export function attachTribute(element: HTMLElement) {
   const mentionsUrl = element.closest('[data-mentions-url]')?.getAttribute('data-mentions-url');
 
   const emojiCollection: TributeCollection<string> = { // emojis

web_src/js/utils/match.ts

@@ -1,4 +1,4 @@
-import emojis from '../../../assets/emoji.json' with {type: 'json'};
+import emojis from '../../../public/assets/emoji.json' with {type: 'json'};
 import {GET} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {parseIssuePageInfo} from '../utils.ts';