feat: use emoji-picker directly

- Replace modal implementation (show emoji-picker directly)
- create wrapper component for emoji-picker
- modify onSelect and onClose handler of emoji-picker

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

@@ -13,7 +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 EmojiPicker from './EmojiPicker';
 import InterceptorManager from '~/services/interceptor-manager';
 import loggerFactory from '~/utils/logger';
 
@@ -664,11 +664,21 @@ export default class CodeMirrorEditor extends AbstractEditor {
     );
   }
 
-  renderEmojiPickerModal() {
+  renderEmojiPicker() {
     return (
-      <Modal isOpen={this.state.isEmojiPickerShown} toggle={this.toggleEmojiPicker} onOpened={this.emojiPickerOpened}>
-        <Picker set="apple" autoFocus style={{ width: '100%', position: 'absolute' }} />
-      </Modal>
+      <div className="">
+        { this.state.isEmojiPickerShown
+          ? (
+            <div className="text-left">
+
+              <div className="mb-2 d-none d-md-block">
+                <EmojiPicker />
+              </div>
+            </div>
+          )
+          : ''
+        }
+      </div>
     );
   }
 
@@ -1024,7 +1034,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         { this.renderLoadingKeymapOverlay() }
 
         { this.renderCheatsheetOverlay() }
-        { this.renderEmojiPickerModal() }
+        { this.renderEmojiPicker() }
 
         <GridEditModal
           ref={this.gridEditModal}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Picker } from 'emoji-mart';
+import { withTranslation } from 'react-i18next';
+
+class EmojiPicker extends React.Component {
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="overlay">
+        <Picker />
+      </div>
+    );
+  }
+
+}
+
+EmojiPicker.propTypes = {
+  t: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(EmojiPicker);