Use modal to open/close emojiPicker

https://youtrack.weseek.co.jp/issue/GW-7782
- Implement Modal to open / close emojiPicker
- Adjust EmojiPicker props
- Remove handleClickOutside method
- Remove useEffect and emojiPickerContainer ref

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

@@ -699,6 +699,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
               emojiSearchText={emojiSearchText}
               editor={this.getCodeMirror()}
               emojiPickerHelper={this.emojiPickerHelper}
+              isOpen={this.state.isEmojiPickerShown}
             />
           </div>
         </div>

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

@@ -1,52 +1,25 @@
-import React, { FC, useRef, useEffect } from 'react';
-import i18n from 'i18next';
+import React, { FC } from 'react';
+
 import { Picker } from 'emoji-mart';
+import i18n from 'i18next';
+import { Modal } from 'reactstrap';
+
 import EmojiPickerHelper from './EmojiPickerHelper';
 
 type Props = {
   onClose: () => void,
   emojiSearchText: string,
   editor: any
-  emojiPickerHelper: EmojiPickerHelper
+  emojiPickerHelper: EmojiPickerHelper,
+  isOpen: boolean
 }
 
 const EmojiPicker: FC<Props> = (props: Props) => {
 
   const {
-    onClose, emojiSearchText, emojiPickerHelper,
+    onClose, emojiSearchText, emojiPickerHelper, isOpen,
   } = props;
 
-  const emojiPickerContainer = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-
-    if (emojiSearchText != null) {
-      // Get input element of emoji picker search
-      const input = document.querySelector('[id^="emoji-mart-search"]') as HTMLInputElement;
-      const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-      // Set value to input of emoji picker search and trigger the search
-      valueSetter?.call(input, emojiSearchText);
-      const event = new Event('input', { bubbles: true });
-      input.dispatchEvent(event);
-    }
-  }, [emojiSearchText]);
-
-
-  // TODO: using blur event by GW-7770
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (emojiPickerContainer.current && !emojiPickerContainer.current.contains(event.target)) {
-        onClose();
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [emojiPickerContainer, onClose]);
-
-
   const selectEmoji = (emoji) => {
     if (emojiSearchText !== null) {
       emojiPickerHelper.addEmojiOnSearch(emoji);
@@ -54,7 +27,7 @@ const EmojiPicker: FC<Props> = (props: Props) => {
     else {
       emojiPickerHelper.addEmoji(emoji);
     }
-    props.onClose();
+    onClose();
   };
 
 
@@ -98,13 +71,10 @@ const EmojiPicker: FC<Props> = (props: Props) => {
   };
 
   const translation = getEmojiTranslation();
-
   return (
-    <div className="overlay">
-      <div ref={emojiPickerContainer}>
-        <Picker autoFocus onSelect={selectEmoji} i18n={translation} title={translation.title} emojiTooltip />
-      </div>
-    </div>
+    <Modal isOpen={isOpen} toggle={onClose}>
+      <Picker autoFocus onSelect={selectEmoji} i18n={translation} title={translation.title} emojiTooltip />
+    </Modal>
   );
 };