feat: close emoji-picker wrapper on click outside wrapper

https://youtrack.weseek.co.jp/issue/GW-7649
- close emoji-picker wrapper on click outside wrapper
- modify the wrapper component
- Modify render emoji picker component

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, Modal } from 'reactstrap';
+import { Button } from 'reactstrap';
 
 import { JSHINT } from 'jshint';
 
@@ -157,6 +157,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     this.onSaveForDrawio = this.onSaveForDrawio.bind(this);
     this.toggleEmojiPicker = this.toggleEmojiPicker.bind(this);
     this.emojiPickerOpened = this.emojiPickerOpened.bind(this);
+    this.closeEmojiPicker = this.closeEmojiPicker.bind(this);
   }
 
   init() {
@@ -664,22 +665,20 @@ export default class CodeMirrorEditor extends AbstractEditor {
     );
   }
 
-  renderEmojiPicker() {
-    return (
-      <div className="">
-        { this.state.isEmojiPickerShown
-          ? (
-            <div className="text-left">
+  closeEmojiPicker() {
+    this.setState({ isEmojiPickerShown: false });
+  }
 
-              <div className="mb-2 d-none d-md-block">
-                <EmojiPicker />
-              </div>
-            </div>
-          )
-          : ''
-        }
-      </div>
-    );
+  renderEmojiPicker() {
+    return this.state.isEmojiPickerShown
+      ? (
+        <div className="text-left">
+          <div className="mb-2 d-none d-md-block">
+            <EmojiPicker close={this.closeEmojiPicker} />
+          </div>
+        </div>
+      )
+      : '';
   }
 
   /**

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

@@ -5,12 +5,34 @@ import { withTranslation } from 'react-i18next';
 
 class EmojiPicker extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.emojiPicker = React.createRef();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  handleClickOutside(event) {
+    if (this.emojiPicker && !this.emojiPicker.current.contains(event.target)) {
+      this.props.close();
+    }
+  }
+
   render() {
     const { t } = this.props;
 
     return (
       <div className="overlay">
-        <Picker />
+        <div ref={this.emojiPicker}>
+          <Picker />
+        </div>
       </div>
     );
   }
@@ -19,6 +41,7 @@ class EmojiPicker extends React.Component {
 
 EmojiPicker.propTypes = {
   t: PropTypes.func.isRequired,
+  close: PropTypes.func,
 };
 
 export default withTranslation()(EmojiPicker);