feat: separate method of addEmoji

https://youtrack.weseek.co.jp/issue/GW-7652
- Adjust isInputtingEmoji setState
- Add method to add emoji when picker open from editor top bar
- Adjust EmojiPicker props

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

@@ -603,9 +603,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
     if (!emoji) {
       this.setState({ isEmojiPickerShown: false });
       this.setState({ emojiSearchText: null });
+      this.setState({ isInputtingEmoji: false });
     }
     else {
-
+      this.setState({ isInputtingEmoji: true });
       if (this.state.searchEmojiTimeout) {
         clearTimeout(this.state.searchEmojiTimeout);
       }
@@ -695,12 +696,16 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   renderEmojiPicker() {
-    const { emojiSearchText } = this.state;
+    const { emojiSearchText, isInputtingEmoji } = this.state;
     return this.state.isEmojiPickerShown
       ? (
         <div className="text-left">
           <div className="mb-2 d-none d-md-block">
-            <EmojiPicker close={this.toggleEmojiPicker} selectEmoji={this.emojiPickerHelper.addEmoji} emojiSearchText={emojiSearchText} />
+            <EmojiPicker
+              close={this.toggleEmojiPicker}
+              selectEmoji={isInputtingEmoji ? this.emojiPickerHelper.addEmojiOnSearch : this.emojiPickerHelper.addEmoji}
+              emojiSearchText={emojiSearchText}
+            />
           </div>
         </div>
       )

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

@@ -3,6 +3,7 @@ class EmojiPickerHelper {
   constructor(editor) {
     this.editor = editor;
     this.getSearchCursor = this.getSearchCursor.bind(this);
+    this.addEmojiOnSearch = this.addEmojiOnSearch.bind(this);
     this.addEmoji = this.addEmoji.bind(this);
   }
 
@@ -13,20 +14,24 @@ class EmojiPickerHelper {
     return sc;
   }
 
-  addEmoji(emoji) {
+  // Add emoji when triggered by search
+  addEmojiOnSearch(emoji) {
     const currentPos = this.editor.getCursor();
-    const doc = this.editor.getDoc();
     const sc = this.getSearchCursor();
     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();
-    }
+  }
+
+  // Add emoji when triggered by click emoji icon on top of editor
+  addEmoji(emoji) {
+    const currentPos = this.editor.getCursor();
+    const doc = this.editor.getDoc();
+    doc.replaceRange(emoji.colons, currentPos);
+    this.editor.focus();
+    this.editor.refresh();
   }
 
   getEmoji() {