feat: show emoji picker

- Add function to render emoji picker
- Add timeout between search and display emoji picker
- Create custom css / style to override emoji-mart style

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import urljoin from 'url-join';
 import * as codemirror from 'codemirror';
 
-import { Button } from 'reactstrap';
+import { Button, Modal } from 'reactstrap';
 
 import { JSHINT } from 'jshint';
 
@@ -13,6 +13,7 @@ import * as loadCssSync from 'load-css-file';
 
 import { createValidator } from '@growi/codemirror-textlint';
 import 'emoji-mart/css/emoji-mart.css';
+import { Picker } from 'emoji-mart';
 import InterceptorManager from '~/services/interceptor-manager';
 import loggerFactory from '~/utils/logger';
 
@@ -28,7 +29,6 @@ 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';
@@ -120,7 +120,6 @@ 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();
 
@@ -155,6 +154,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);
   }
 
   init() {
@@ -662,6 +662,14 @@ export default class CodeMirrorEditor extends AbstractEditor {
     );
   }
 
+  renderEmojiPickerModal() {
+    return (
+      <Modal isOpen={this.state.isEmojiPickerShown} toggle={this.toggleEmojiPicker}>
+        <Picker set="apple" autoFocus="true" style={{ width: '100%', position: 'absolute' }} />
+      </Modal>
+    );
+  }
+
   /**
    * return a function to replace a selected range with prefix + selection + suffix
    *
@@ -754,6 +762,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
     });
   }
 
+  toggleEmojiPicker() {
+    this.setState({ isEmojiPickerShown: !this.state.isEmojiPickerShown });
+  }
+
   onSaveForDrawio(drawioData) {
     const range = mdu.replaceFocusedDrawioWithEditor(this.getCodeMirror(), drawioData);
     // Fold the section after the drawio section (:::drawio) has been updated.
@@ -909,8 +921,11 @@ export default class CodeMirrorEditor extends AbstractEditor {
     const sc = cm.getSearchCursor(pattern, currentPos, { multiline: false });
     if (sc.findPrevious()) {
       const isInputtingEmoji = (currentPos.line === sc.to().line && currentPos.ch === sc.to().ch);
+      // Add delay between search emoji and display emoji picker
+      setTimeout(() => {
+        this.setState({ isEmojiPickerShown: isInputtingEmoji });
+      }, 300);
       // return if it isn't inputting emoji
-      this.isEmojiPickerShown = isInputtingEmoji;
       if (!isInputtingEmoji) {
         return;
       }
@@ -990,13 +1005,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
           }}
         />
 
-        <EmojiPickerModal
-          ref={this.emojiPickerModal}
-        />
-
         { this.renderLoadingKeymapOverlay() }
 
         { this.renderCheatsheetOverlay() }
+        { this.renderEmojiPickerModal() }
 
         <GridEditModal
           ref={this.gridEditModal}

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

@@ -1,69 +0,0 @@
-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;

packages/app/src/styles/_emoji-mart.scss

@@ -0,0 +1,13 @@
+// Override emoji-mart style
+nav.emoji-mart-anchors {
+  display: flex !important;
+}
+
+button.emoji-mart-anchors {
+  display: inline-block !important;
+  color: #858585 !important;
+}
+
+:root button {
+  overflow: hidden;
+}

packages/app/src/styles/style-app.scss

@@ -73,6 +73,7 @@
 @import 'wiki';
 @import 'sharelink';
 @import 'linkedit-preview';
+@import 'emoji-mart';
 
 /*
  * for Guest User Mode