optimize: share emoji_strategy_shrink.json data

.eslintrc.js

@@ -9,6 +9,10 @@ module.exports = {
     "eslint:recommended",
     "plugin:react/recommended"
   ],
+  "globals": {
+    "window": true,
+    "emojione": true
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,

resource/js/components/PageEditor.js

@@ -361,6 +361,8 @@ export default class PageEditor extends React.Component {
   }
 
   render() {
+    const emojiStrategy = this.props.crowi.getEmojiStrategy();
+
     return (
       <div className="row">
         <div className="col-md-6 col-sm-12 page-editor-editor-container">
@@ -368,6 +370,7 @@ export default class PageEditor extends React.Component {
             editorOptions={this.state.editorOptions}
             isUploadable={this.state.isUploadable}
             isUploadableFile={this.state.isUploadableFile}
+            emojiStrategy={emojiStrategy}
             onScroll={this.onEditorScroll}
             onScrollCursorIntoView={this.onEditorScrollCursorIntoView}
             onChange={this.onMarkdownChanged}

resource/js/components/PageEditor/Editor.js

@@ -30,7 +30,7 @@ require('codemirror/mode/gfm/gfm');
 import Dropzone from 'react-dropzone';
 
 import pasteHelper from './PasteHelper';
-import emojiAutoCompleteHelper from './EmojiAutoCompleteHelper';
+import EmojiAutoCompleteHelper from './EmojiAutoCompleteHelper';
 
 import InterceptorManager from '../../../../lib/util/interceptor-manager';
 
@@ -53,6 +53,7 @@ export default class Editor extends React.Component {
     this.state = {
       value: this.props.value,
       dropzoneActive: false,
+      isEnabledEmojiAutoComplete: false,
       isUploading: false,
       isLoadingKeymap: false,
     };
@@ -84,6 +85,12 @@ export default class Editor extends React.Component {
     this.renderLoadingKeymapOverlay = this.renderLoadingKeymapOverlay.bind(this);
   }
 
+  componentWillMount() {
+    if (this.props.emojiStrategy != null) {
+      this.emojiAutoCompleteHelper = new EmojiAutoCompleteHelper(this.props.emojiStrategy);
+      this.setState({isEnabledEmojiAutoComplete: true});
+    }
+  }
 
   componentDidMount() {
     // initialize caret line
@@ -495,7 +502,9 @@ export default class Editor extends React.Component {
               }
 
               // Emoji AutoComplete
-              emojiAutoCompleteHelper.showHint(editor);
+              if (this.state.isEnabledEmojiAutoComplete) {
+                this.emojiAutoCompleteHelper.showHint(editor);
+              }
             }}
             onDragEnter={this.onDragEnterForCM}
           />
@@ -525,6 +534,7 @@ Editor.propTypes = {
   editorOptions: PropTypes.object,
   isUploadable: PropTypes.bool,
   isUploadableFile: PropTypes.bool,
+  emojiStrategy: PropTypes.object,
   onChange: PropTypes.func,
   onScroll: PropTypes.func,
   onScrollCursorIntoView: PropTypes.func,

resource/js/components/PageEditor/EmojiAutoCompleteHelper.js

@@ -1,19 +1,19 @@
-import emojiStrategy from '../../util/emojione/emoji_strategy_shrinked.json';
-
 class EmojiAutoCompleteHelper {
 
-  constructor() {
-    this.emojiShortnameImageMap = {}
+  constructor(emojiStrategy) {
+    this.emojiStrategy = emojiStrategy;
+
+    this.emojiShortnameImageMap = {};
 
     this.initEmojiImageMap = this.initEmojiImageMap.bind(this);
     this.showHint = this.showHint.bind(this);
 
-    this.initEmojiImageMap()
+    this.initEmojiImageMap();
   }
 
   initEmojiImageMap() {
-    for (let unicode in emojiStrategy) {
-      const data = emojiStrategy[unicode];
+    for (let unicode in this.emojiStrategy) {
+      const data = this.emojiStrategy[unicode];
       const shortname = data.shortname;
       // add image tag
       this.emojiShortnameImageMap[shortname] = emojione.shortnameToImage(shortname);
@@ -26,7 +26,7 @@ class EmojiAutoCompleteHelper {
    */
   showHint(editor) {
     // see https://regex101.com/r/gy3i03/1
-    const pattern = /:[^:\s]+/
+    const pattern = /:[^:\s]+/;
 
     const currentPos = editor.getCursor();
     // find previous ':shortname'
@@ -77,7 +77,7 @@ class EmojiAutoCompleteHelper {
             `<div class="img-container">${this.emojiShortnameImageMap[shortname]}</div>` +
             `<span class="shortname-container">${shortname}</span>`;
         }
-      }
+      };
     });
   }
 
@@ -96,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 emojiStrategy) {
-      const data = emojiStrategy[unicode];
+    for (let unicode in this.emojiStrategy) {
+      const data = this.emojiStrategy[unicode];
 
       if (maxLength <= countLen1()) { break; }
       // prefix match to shortname
@@ -122,7 +122,7 @@ class EmojiAutoCompleteHelper {
       else if ((data.keywords != null) && data.keywords.find(elem => elem.indexOf(term) > -1)) {
         results4.push(data.shortname);
       }
-    };
+    }
 
     let results = results1.concat(results2).concat(results3).concat(results4);
     results = results.slice(0, maxLength);
@@ -132,7 +132,4 @@ class EmojiAutoCompleteHelper {
 
 }
 
-// singleton pattern
-const instance = new EmojiAutoCompleteHelper();
-Object.freeze(this);
-export default instance;
+export default EmojiAutoCompleteHelper;

resource/js/util/Crowi.js

@@ -2,7 +2,9 @@
  * Crowi context class for client
  */
 
-import axios from 'axios'
+import axios from 'axios';
+
+import emojiStrategy from './emojione/emoji_strategy_shrinked.json';
 import InterceptorManager from '../../../lib/util/interceptor-manager';
 
 import {
@@ -53,7 +55,7 @@ export default class Crowi {
   }
 
   getContext() {
-    return context;
+    return this.context;
   }
 
   setConfig(config) {
@@ -68,6 +70,10 @@ export default class Crowi {
     this.pageEditor = pageEditor;
   }
 
+  getEmojiStrategy() {
+    return emojiStrategy;
+  }
+
   recoverData() {
     const keys = [
       'userByName',

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

@@ -1,5 +1,3 @@
-import emojiStrategy from '../emojione/emoji_strategy_shrinked.json';
-
 export default class EmojiConfigurer {
 
   constructor(crowi) {
@@ -7,11 +5,13 @@ export default class EmojiConfigurer {
   }
 
   configure(md) {
+    const emojiStrategy = this.crowi.getEmojiStrategy();
+
     const emojiShortnameUnicodeMap = {};
 
     for (let unicode in emojiStrategy) {
       const data = emojiStrategy[unicode];
-      const shortname = data.shortname.replace(/\:/g, '');
+      const shortname = data.shortname.replace(/:/g, '');
       emojiShortnameUnicodeMap[shortname] = String.fromCharCode(unicode);
     }