feat: create utility module for emoji picker

https://youtrack.weseek.co.jp/issue/GW-7652
- Update emoji search pattern
- Refresh editor after add emoji (to close emoji picker)
- add method getEmoji in emoji picker helper
- Remove unused method

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -158,7 +158,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     this.foldDrawioSection = this.foldDrawioSection.bind(this);
     this.onSaveForDrawio = this.onSaveForDrawio.bind(this);
     this.toggleEmojiPicker = this.toggleEmojiPicker.bind(this);
-
+    this.emojiPickerHandler = this.emojiPickerHandler.bind(this);
 
   }
 
@@ -570,7 +570,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     }
 
     this.updateCheatsheetStates(null, value);
-    this.searchEmojiPattern();
+    this.emojiPickerHandler();
   }
 
   /**
@@ -594,6 +594,30 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   }
 
+  /**
+   * Show emoji picker component when emoji pattern found
+   */
+  emojiPickerHandler() {
+    const emoji = this.emojiPickerHelper.getEmoji();
+
+    if (!emoji) {
+      this.setState({ isEmojiPickerShown: false });
+      this.setState({ emojiSearchText: null });
+    }
+    else {
+
+      if (this.state.searchEmojiTimeout) {
+        clearTimeout(this.state.searchEmojiTimeout);
+      }
+      // Show emoji picker after user stop typing
+      const timeout = setTimeout(() => {
+        this.setState({ isEmojiPickerShown: true });
+        this.setState({ emojiSearchText: emoji });
+      }, 700);
+      this.setState({ searchEmojiTimeout: timeout });
+    }
+  }
+
   /**
    * update states which related to cheatsheet
    * @param {boolean} isGfmModeTmp (use state.isGfmMode if null is set)
@@ -932,41 +956,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
     ];
   }
 
-  searchEmojiPattern() {
-    const cm = this.getCodeMirror();
-    const sc = this.emojiPickerHelper.getSearchCursor();
-    const currentPos = cm.getCursor();
-
-    if (sc.findPrevious()) {
-      const isInputtingEmoji = (currentPos.line === sc.to().line && currentPos.ch === sc.to().ch);
-      this.setState({ isInputtingEmoji });
-      // current search cursor position
-      const pos = {
-        line: sc.to().line,
-        ch: sc.to().ch,
-      };
-      // Add delay between search emoji and display emoji picker
-      if (this.state.searchEmojiTimeout) {
-        clearTimeout(this.state.searchEmojiTimeout);
-      }
-      const timeout = setTimeout(() => {
-        const currentSearchText = sc.matches(true, pos).match[0];
-        const searchValue = currentSearchText.replace(':', '');
-        this.setState({ isEmojiPickerShown: isInputtingEmoji });
-        this.setState({ emojiSearchText: searchValue });
-      }, 700);
-      this.setState({ searchEmojiTimeout: timeout });
-      // return if it isn't inputting emoji
-      if (!isInputtingEmoji) {
-        return;
-      }
-    }
-    else {
-      return;
-    }
-
-  }
-
 
   render() {
     const lint = this.props.isTextlintEnabled ? this.codemirrorLintConfig : false;

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

@@ -7,7 +7,7 @@ class EmojiPickerHelper {
   }
 
   getSearchCursor() {
-    const pattern = /:[^:\s]+/;
+    const pattern = /:[^:\s]+(?<!:)$/;
     const currentPos = this.editor.getCursor();
     const sc = this.editor.getSearchCursor(pattern, currentPos, { multiline: false });
     return sc;
@@ -20,11 +20,36 @@ class EmojiPickerHelper {
     if (sc.findPrevious()) {
       sc.replace(emoji.colons, this.editor.getTokenAt(currentPos).string);
       this.editor.focus();
+      this.editor.refresh();
     }
     else {
       doc.replaceRange(emoji.colons, currentPos);
       this.editor.focus();
+      this.editor.refresh();
     }
+  }
+
+  getEmoji() {
+    const cm = this.editor;
+    const sc = this.getSearchCursor();
+    const currentPos = cm.getCursor();
+
+    if (sc.findPrevious()) {
+      const isInputtingEmoji = (currentPos.line === sc.to().line && currentPos.ch === sc.to().ch);
+      // current search cursor position
+      if (!isInputtingEmoji) {
+        return;
+      }
+      const pos = {
+        line: sc.to().line,
+        ch: sc.to().ch,
+      };
+      const currentSearchText = sc.matches(true, pos).match[0];
+      const searchValue = currentSearchText.replace(':', '');
+      return searchValue;
+    }
+
+    return;
 
   }