use emojione from CDN

config/webpack.common.js

@@ -32,7 +32,8 @@ module.exports = function (options) {
     externals: {
       // require("jquery") is external and available
       //  on the global var jQuery
-      "jquery": "jQuery"
+      "jquery": "jQuery",
+      "emojione": "emojione",
     },
     resolve: {
       extensions: ['.js', '.json'],
@@ -100,6 +101,7 @@ module.exports = function (options) {
         jQuery: "jquery",
         $: "jquery",
         hljs: "reveal.js/plugin/highlight/highlight",
+        emojione: "emojione",
       }),
 
     ]

lib/views/layout/layout.html

@@ -33,8 +33,8 @@
     }
   </script>
 
-  <!-- jQuery -->
-  <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
+  <!-- jQuery, emojione -->
+  <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1"></script>
 
   {% if env === 'development' %}
     <script src="/dll/vendor.dll.js"></script>
@@ -54,7 +54,7 @@
   <!-- Google Fonts -->
   <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
   <!-- Font Awesome -->
-  <link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
 
   {% block html_additional_headers %}{% endblock %}
 

package.json

@@ -73,7 +73,6 @@
     "diff": "^3.3.0",
     "diff2html": "^2.3.0",
     "elasticsearch": "^14.0.0",
-    "emojione": "^3.1.2",
     "entities": "^1.1.1",
     "env-cmd": "^7.0.0",
     "escape-string-regexp": "^1.0.5",

resource/js/components/PageEditor/EmojiAutoCompleteHelper.js

@@ -1,23 +1,33 @@
-import emojione from 'emojione';
-import emojiStrategy from 'emojione/emoji_strategy.json';
+import axios from 'axios';
 
 class EmojiAutoCompleteHelper {
 
   constructor() {
-    this.initEmojiImageMap = this.initEmojiImageMap.bind(this);
-    this.showHint = this.showHint.bind(this);
+    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);
   }
 
   initEmojiImageMap() {
-    this.emojiShortnameImageMap = {};
-    for (let unicode in emojiStrategy) {
-      const data = emojiStrategy[unicode];
-      const shortname = data.shortname;
-      // add image tag
-      this.emojiShortnameImageMap[shortname] = emojione.shortnameToImage(shortname);
-    }
+    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);
+        }
+      });
   }
 
   /**
@@ -46,6 +56,7 @@ class EmojiAutoCompleteHelper {
     editor.showHint({
       completeSingle: false,
       // closeOnUnfocus: false,  // for debug
+      closeOnUnfocus: false,  // for debug
       hint: () => {
         const matched = editor.getDoc().getRange(sc.from(), sc.to());
         const term = matched.replace(':', '');  // remove ':' in the head
@@ -96,8 +107,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 emojiStrategy) {
-      const data = emojiStrategy[unicode];
+    for (let unicode in this.emojiStrategy) {
+      const data = this.emojiStrategy[unicode];
 
       if (maxLength <= countLen1()) { break; }
       // prefix match to shortname
@@ -134,5 +145,4 @@ class EmojiAutoCompleteHelper {
 
 // singleton pattern
 const instance = new EmojiAutoCompleteHelper();
-Object.freeze(instance);
 export default instance;

resource/js/util/PostProcessor/Emoji.js

@@ -1,5 +1,3 @@
-import emojione from 'emojione';
-
 export default class Emoji {
 
   process(markdown) {

yarn.lock

@@ -2001,10 +2001,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emojione@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/emojione/-/emojione-3.1.2.tgz#991e30c80db4b1cf15eacb257620a7edce9c6ef4"
-
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"