BugFix: render emoji with markdown-it-emoji

* specify the `defs` option
* add shrinked emoji_strategy.json

bin/shrink-emojione-strategy.js

@@ -0,0 +1,30 @@
+/**
+ * the tool to shrink emojione/emoji_strategy.json and output
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ */
+const fs = require('graceful-fs');
+const normalize = require('normalize-path');
+const helpers = require('../config/helpers');
+
+const OUT = helpers.root('tmp/emoji_strategy_shrinked.json');
+
+const emojiStrategy = require('emojione/emoji_strategy.json');
+const markdownItEmojiFull = require('markdown-it-emoji/lib/data/full.json');
+
+let shrinkedMap = {};
+for (let unicode in emojiStrategy) {
+  const data = emojiStrategy[unicode];
+  const shortname = data.shortname.replace(/\:/g, '');
+
+  // ignore if it isn't included in markdownItEmojiFull
+  if (markdownItEmojiFull[shortname] == null) {
+    continue;
+  }
+
+  // add
+  shrinkedMap[unicode] = data;
+}
+
+// write
+fs.writeFileSync(OUT, JSON.stringify(shrinkedMap));

resource/js/components/PageEditor/EmojiAutoCompleteHelper.js

@@ -1,33 +1,23 @@
-import axios from 'axios';
+import emojiStrategy from '../../util/emojione/emoji_strategy_shrinked.json';
 
 class EmojiAutoCompleteHelper {
 
   constructor() {
-    this.emojiStrategy = {};
     this.emojiShortnameImageMap = {}
 
-    this.initEmojiImageMap()
-      .then(() => {
-        Object.freeze(this);  // freeze after initializing data
-      })
-
     this.initEmojiImageMap = this.initEmojiImageMap.bind(this);
     this.showHint = this.showHint.bind(this);
+
+    this.initEmojiImageMap()
   }
 
   initEmojiImageMap() {
-    const emojiStrategyUrl = 'https://cdn.jsdelivr.net/npm/emojione@3.1.2/emoji_strategy.json';
-
-    return axios.get(emojiStrategyUrl)
-      .then((res) => {
-        this.emojiStrategy = res.data;
-        for (let unicode in this.emojiStrategy) {
-          const data = this.emojiStrategy[unicode];
-          const shortname = data.shortname;
-          // add image tag
-          this.emojiShortnameImageMap[shortname] = emojione.shortnameToImage(shortname);
-        }
-      });
+    for (let unicode in emojiStrategy) {
+      const data = emojiStrategy[unicode];
+      const shortname = data.shortname;
+      // add image tag
+      this.emojiShortnameImageMap[shortname] = emojione.shortnameToImage(shortname);
+    }
   }
 
   /**
@@ -106,8 +96,8 @@ class EmojiAutoCompleteHelper {
     const countLen4 = () => { countLen3() + results4.length; }
     // TODO performance tune
     // when total length of all results is less than `maxLength`
-    for (let unicode in this.emojiStrategy) {
-      const data = this.emojiStrategy[unicode];
+    for (let unicode in emojiStrategy) {
+      const data = emojiStrategy[unicode];
 
       if (maxLength <= countLen1()) { break; }
       // prefix match to shortname
@@ -144,4 +134,5 @@ class EmojiAutoCompleteHelper {
 
 // singleton pattern
 const instance = new EmojiAutoCompleteHelper();
+Object.freeze(this);
 export default instance;

resource/js/util/markdown-it/emoji.js

@@ -1,3 +1,5 @@
+import emojiStrategy from '../emojione/emoji_strategy_shrinked.json';
+
 export default class EmojiConfigurer {
 
   constructor(crowi) {
@@ -5,7 +7,15 @@ export default class EmojiConfigurer {
   }
 
   configure(md) {
-    md.use(require('markdown-it-emoji'));
+    const emojiShortnameUnicodeMap = {};
+
+    for (let unicode in emojiStrategy) {
+      const data = emojiStrategy[unicode];
+      const shortname = data.shortname.replace(/\:/g, '');
+      emojiShortnameUnicodeMap[shortname] = String.fromCharCode(unicode);
+    }
+
+    md.use(require('markdown-it-emoji'), {defs: emojiShortnameUnicodeMap});
 
     // integrate markdown-it-emoji and emojione
     md.renderer.rules.emoji = (token, idx) => {