feat: emoji suggestions - show emoji picker

- create emoji picker component
- Implement emoji picker component in codemirror editor

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

@@ -12,7 +12,6 @@ import * as loadScript from 'simple-load-script';
 import * as loadCssSync from 'load-css-file';
 
 import { createValidator } from '@growi/codemirror-textlint';
-import { Picker } from 'emoji-mart';
 import 'emoji-mart/css/emoji-mart.css';
 import InterceptorManager from '~/services/interceptor-manager';
 import loggerFactory from '~/utils/logger';
@@ -21,7 +20,6 @@ import AbstractEditor from './AbstractEditor';
 import SimpleCheatsheet from './SimpleCheatsheet';
 
 import pasteHelper from './PasteHelper';
-import EmojiAutoCompleteHelper from './EmojiAutoCompleteHelper';
 import PreventMarkdownListInterceptor from './PreventMarkdownListInterceptor';
 import MarkdownTableInterceptor from './MarkdownTableInterceptor';
 import mlu from './MarkdownLinkUtil';
@@ -30,6 +28,7 @@ import mdu from './MarkdownDrawioUtil';
 import geu from './GridEditorUtil';
 import GridEditModal from './GridEditModal';
 import LinkEditModal from './LinkEditModal';
+import EmojiPickerModal from './EmojiPickerModal';
 import HandsontableModal from './HandsontableModal';
 import EditorIcon from './EditorIcon';
 import DrawioModal from './DrawioModal';
@@ -121,6 +120,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
     this.gridEditModal = React.createRef();
     this.linkEditModal = React.createRef();
+    this.emojiPickerModal = React.createRef();
     this.handsontableModal = React.createRef();
     this.drawioModal = React.createRef();
 
@@ -172,7 +172,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   componentWillMount() {
-    this.emojiAutoCompleteHelper = new EmojiAutoCompleteHelper();
     this.setState({ isEnabledEmojiAutoComplete: true });
     this.initializeTextlint();
   }
@@ -568,10 +567,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
     this.updateCheatsheetStates(null, value);
     this.searchEmojiPattern();
-    // Emoji AutoComplete
-    if (this.state.isEnabledEmojiAutoComplete) {
-      this.emojiAutoCompleteHelper.showHint(editor);
-    }
   }
 
   /**
@@ -995,10 +990,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
           }}
         />
 
-        {/* Todo: Show emoji-mart picker */}
-        {/* <Picker
-          set="apple"
-        /> */}
+        <EmojiPickerModal
+          ref={this.emojiPickerModal}
+        />
+
         { this.renderLoadingKeymapOverlay() }
 
         { this.renderCheatsheetOverlay() }

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Picker from 'emoji-mart';
+
+import {
+  Modal,
+  ModalBody,
+} from 'reactstrap';
+
+
+import AppContainer from '~/client/services/AppContainer';
+import PageContainer from '~/client/services/PageContainer';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+
+class EmojiPickerModal extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      show: false,
+    };
+
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.cancel = this.cancel.bind(this);
+  }
+
+  show() {
+    this.setState({
+      show: true,
+    });
+  }
+
+  cancel() {
+    this.hide();
+  }
+
+  hide() {
+    this.setState({
+      show: false,
+    });
+  }
+
+  render() {
+    return (
+      <Modal className="link-edit-modal" isOpen={this.state.show} toggle={this.cancel} size="lg" autoFocus={false}>
+        <ModalBody className="container">
+          <div className="row">
+            <div className="col-12">
+              <Picker set="apple" />
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+
+}
+
+EmojiPickerModal.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+const EmojiPickerModalWrapper = withUnstatedContainers(EmojiPickerModal, [AppContainer, PageContainer]);
+
+export default EmojiPickerModalWrapper;