Browse Source

feat: show emoji mart dialog on icon click

https://youtrack.weseek.co.jp/issue/GW-7647
- Show emoji picker dialog when user click the emoji icon
mudana 4 years ago
parent
commit
0f3969123a
1 changed files with 5 additions and 10 deletions
  1. 5 10
      packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

+ 5 - 10
packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -155,9 +155,8 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
 
     this.foldDrawioSection = this.foldDrawioSection.bind(this);
     this.foldDrawioSection = this.foldDrawioSection.bind(this);
     this.onSaveForDrawio = this.onSaveForDrawio.bind(this);
     this.onSaveForDrawio = this.onSaveForDrawio.bind(this);
-    this.toggleEmojiPicker = this.toggleEmojiPicker.bind(this);
     this.emojiPickerOpened = this.emojiPickerOpened.bind(this);
     this.emojiPickerOpened = this.emojiPickerOpened.bind(this);
-    this.closeEmojiPicker = this.closeEmojiPicker.bind(this);
+    this.toggleEmojiPicker = this.toggleEmojiPicker.bind(this);
   }
   }
 
 
   init() {
   init() {
@@ -665,8 +664,8 @@ export default class CodeMirrorEditor extends AbstractEditor {
     );
     );
   }
   }
 
 
-  closeEmojiPicker() {
-    this.setState({ isEmojiPickerShown: false });
+  toggleEmojiPicker() {
+    this.setState({ isEmojiPickerShown: !this.state.isEmojiPickerShown });
   }
   }
 
 
   renderEmojiPicker() {
   renderEmojiPicker() {
@@ -674,7 +673,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       ? (
       ? (
         <div className="text-left">
         <div className="text-left">
           <div className="mb-2 d-none d-md-block">
           <div className="mb-2 d-none d-md-block">
-            <EmojiPicker close={this.closeEmojiPicker} />
+            <EmojiPicker close={this.toggleEmojiPicker} />
           </div>
           </div>
         </div>
         </div>
       )
       )
@@ -773,11 +772,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
     });
     });
   }
   }
 
 
-  toggleEmojiPicker() {
-    this.setState({ isEmojiPickerShown: !this.state.isEmojiPickerShown });
-    this.setState({ emojiSearchText: null });
-  }
-
   onSaveForDrawio(drawioData) {
   onSaveForDrawio(drawioData) {
     const range = mdu.replaceFocusedDrawioWithEditor(this.getCodeMirror(), drawioData);
     const range = mdu.replaceFocusedDrawioWithEditor(this.getCodeMirror(), drawioData);
     // Fold the section after the drawio section (:::drawio) has been updated.
     // Fold the section after the drawio section (:::drawio) has been updated.
@@ -937,6 +931,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         color={null}
         color={null}
         bssize="small"
         bssize="small"
         title="Emoji"
         title="Emoji"
+        onClick={this.toggleEmojiPicker}
       >
       >
         <EditorIcon icon="Emoji" />
         <EditorIcon icon="Emoji" />
       </Button>,
       </Button>,