feat: translate colons to emoji with markdown

https://youtrack.weseek.co.jp/issue/GW-7732
- Add function to convert emoji with markdown-it
- Adjust implementation of convert method

packages/app/src/client/util/markdown-it/emoji-mart-data.ts

@@ -0,0 +1,34 @@
+import data from 'emoji-mart/data/all.json';
+import { Emoji } from 'emoji-mart';
+
+const DEFAULT_SKIN_TONE = 1;
+const DEFAULT_EMOJI_SIZE = 24;
+
+const getNativeEmoji = async(emoji, skin = DEFAULT_SKIN_TONE) => {
+  const elem = Emoji({
+    set: 'apple',
+    emoji,
+    skin,
+    size: DEFAULT_EMOJI_SIZE,
+  });
+  return elem ? elem.props['aria-label'].split(',')[0] : null;
+};
+
+export const emojiMartData = () => {
+  const results = {};
+  Object.entries(data.emojis).forEach(async(emoji) => {
+    const name = emoji[0];
+    if ('skin_variations' in emoji[1]) {
+      [...Array(6).keys()].forEach(async(index) => {
+        const emojiSkinTone = await getNativeEmoji(name, index + 1);
+        if (emojiSkinTone != null && index > 0) {
+          results[`${name}::skin-tone-${index + 1}`] = emojiSkinTone;
+        }
+      });
+    }
+    else {
+      results[name] = await getNativeEmoji(name);
+    }
+  });
+  return results;
+};

packages/app/src/client/util/markdown-it/emoji.js

@@ -1,3 +1,5 @@
+import { emojiMartData } from './emoji-mart-data';
+
 export default class EmojiConfigurer {
 
   constructor(crowi) {
@@ -5,7 +7,8 @@ export default class EmojiConfigurer {
   }
 
   configure(md) {
-    md.use(require('markdown-it-emoji-mart'));
+    const data = emojiMartData();
+    md.use(require('markdown-it-emoji-mart'), { defs: data });
   }
 
 }

packages/app/src/components/PageEditor/EmojiPickerHelper.ts

@@ -23,7 +23,7 @@ addEmojiOnSearch = (emoji) => {
   const currentPos = this.editor.getCursor();
   const sc = this.getSearchCursor();
   if (sc.findPrevious()) {
-    sc.replace(emoji.native, this.editor.getTokenAt(currentPos).string);
+    sc.replace(emoji.colons, this.editor.getTokenAt(currentPos).string);
     this.editor.focus();
     this.editor.refresh();
   }
@@ -34,7 +34,7 @@ addEmojiOnSearch = (emoji) => {
 addEmoji = (emoji) => {
   const currentPos = this.editor.getCursor();
   const doc = this.editor.getDoc();
-  doc.replaceRange(emoji.native, currentPos);
+  doc.replaceRange(emoji.colons, currentPos);
   this.editor.focus();
   this.editor.refresh();
 }