clean code for ToC and emoji

packages/app/src/client/services/PageContainer.js

@@ -17,7 +17,6 @@ import {
 import {
   DrawioInterceptor,
 } from '../util/interceptor/drawio-interceptor';
-import { emojiMartData } from '../util/markdown-it/emoji-mart-data';
 
 const { isTrashPage } = pagePathUtils;
 
@@ -197,30 +196,10 @@ export default class PageContainer extends Container {
 
   async setTocHtml(tocHtml) {
     if (this.state.tocHtml !== tocHtml) {
-      const tocHtmlWithEmoji = await this.colonsToEmoji(tocHtml);
-      this.setState({ tocHtml: tocHtmlWithEmoji });
+      this.setState({ tocHtml });
     }
   }
 
-  /**
-   *
-   * @param {*} html TOC html string
-   * @returns TOC html with emoji (emoji-mart) in URL
-   */
-  async colonsToEmoji(html) {
-    // Emoji colons matching
-    const colons = ':[a-zA-Z0-9-_+]+:';
-    // Emoji with skin tone matching
-    const skin = ':skin-tone-[2-6]:';
-    const colonsRegex = new RegExp(`(${colons}${skin}|${colons})`, 'g');
-    const emojiData = await emojiMartData();
-    return html.replace(colonsRegex, (index, match) => {
-      const emojiName = match.slice(1, -1);
-      return emojiData[emojiName];
-    });
-
-  }
-
   /**
    * save success handler
    * @param {object} page Page instance

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

@@ -3,24 +3,28 @@ import data from 'emoji-mart/data/apple.json';
 
 const DEFAULT_EMOJI_SIZE = 24;
 
+
+type EmojiMap = {
+  [key: string]: string,
+};
+
 /**
  *
  * Get native emoji with skin tone
- * @param emoji Emoji object
  * @param skin number
  * @returns emoji data with skin tone
  */
-const getEmojiSkinTone = async(emoji) => {
+const getEmojiSkinTone = (emojiName: string): EmojiMap => {
   const emojiData = {};
   [...Array(6).keys()].forEach((index) => {
     if (index > 0) {
       const elem = Emoji({
-        emoji,
+        emoji: emojiName,
         skin: index + 1,
         size: DEFAULT_EMOJI_SIZE,
       });
       if (elem) {
-        emojiData[`${emoji}::skin-tone-${index + 1}`] = elem.props['aria-label'].split(',')[0];
+        emojiData[`${emojiName}::skin-tone-${index + 1}`] = elem.props['aria-label'].split(',')[0];
       }
     }
   });
@@ -29,27 +33,29 @@ const getEmojiSkinTone = async(emoji) => {
 
 /**
  * Get native emoji from emoji array
- * @param emojis array of emoji
  * @returns emoji data
  */
 
-const getNativeEmoji = async(emojis) => {
+const getNativeEmoji = (): EmojiMap => {
   const emojiData = {};
-  emojis.forEach(async(emoji) => {
+  Object.entries(data.emojis).forEach((emoji) => {
     const emojiName = emoji[0];
-    const hasSkinVariation = emoji[1].skin_variations;
+    const hasSkinVariation = 'skin_variations' in emoji[1];
+
     const elem = Emoji({
       emoji: emojiName,
       size: DEFAULT_EMOJI_SIZE,
     });
+
     if (elem != null) {
       emojiData[emojiName] = elem.props['aria-label'].split(',')[0];
       if (hasSkinVariation) {
-        const emojiWithSkinTone = await getEmojiSkinTone(emojiName);
+        const emojiWithSkinTone = getEmojiSkinTone(emojiName);
         Object.assign(emojiData, emojiWithSkinTone);
       }
     }
   });
+
   return emojiData;
 };
 
@@ -57,10 +63,4 @@ const getNativeEmoji = async(emojis) => {
  * Get native emoji mart data
  * @returns native emoji mart data
  */
-
-export const emojiMartData = () => {
-  const emojis = Object.entries(data.emojis).map((emoji) => {
-    return emoji;
-  });
-  return getNativeEmoji(emojis);
-};
+export const emojiMartData = getNativeEmoji();

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

@@ -1,15 +1,12 @@
+import markdownItEmojiMart from 'markdown-it-emoji-mart';
+
 import { emojiMartData } from './emoji-mart-data';
 
-export default class EmojiConfigurer {
 
-  constructor(crowi) {
-    this.crowi = crowi;
-  }
+export default class EmojiConfigurer {
 
   configure(md) {
-    emojiMartData().then((data) => {
-      md.use(require('markdown-it-emoji-mart'), { defs: data });
-    });
+    md.use(markdownItEmojiMart, { defs: emojiMartData });
   }
 
 }

packages/app/src/client/util/markdown-it/toc-and-anchor.js

@@ -1,3 +1,8 @@
+import markdownItEmojiMart from 'markdown-it-emoji-mart';
+import markdownItToc from 'markdown-it-toc-and-anchor-with-slugid';
+
+import { emojiMartData } from './emoji-mart-data';
+
 export default class TocAndAnchorConfigurer {
 
   constructor(crowi, setHtml) {
@@ -6,13 +11,14 @@ export default class TocAndAnchorConfigurer {
   }
 
   configure(md) {
-    md.use(require('markdown-it-toc-and-anchor-with-slugid').default, {
-      tocLastLevel: 3,
-      anchorLinkBefore: false,
-      anchorLinkSymbol: '',
-      anchorLinkSymbolClassName: 'icon-link',
-      anchorClassName: 'revision-head-link',
-    });
+    md.use(markdownItEmojiMart, { defs: emojiMartData })
+      .use(markdownItToc, {
+        tocLastLevel: 3,
+        anchorLinkBefore: false,
+        anchorLinkSymbol: '',
+        anchorLinkSymbolClassName: 'icon-link',
+        anchorClassName: 'revision-head-link',
+      });
 
     // set toc render function
     if (this.setHtml != null) {