chore: remove emoji picker (#667)

web/package.json

@@ -15,7 +15,6 @@
     "axios": "^0.27.2",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.3",
-    "emoji-picker-react": "^3.6.2",
     "highlight.js": "^11.6.0",
     "i18next": "^21.9.2",
     "lodash-es": "^4.17.21",

web/src/components/Editor/EmojiPicker.tsx

-import Picker, { IEmojiPickerProps } from "emoji-picker-react";
-import { useEffect, useState } from "react";
-
-interface Props {
-  shouldShow: boolean;
-  onEmojiClick: IEmojiPickerProps["onEmojiClick"];
-  onShouldShowEmojiPickerChange: (status: boolean) => void;
-}
-
-interface State {
-  hasShown: boolean;
-}
-
-export const EmojiPicker: React.FC<Props> = (props: Props) => {
-  const { shouldShow, onEmojiClick, onShouldShowEmojiPickerChange } = props;
-  const [state, setState] = useState<State>({
-    hasShown: false,
-  });
-
-  useEffect(() => {
-    if (shouldShow) {
-      const handleClickOutside = (event: MouseEvent) => {
-        event.stopPropagation();
-        const emojiWrapper = document.querySelector(".emoji-picker-react");
-        const isContains = emojiWrapper?.contains(event.target as Node);
-        if (!isContains) {
-          onShouldShowEmojiPickerChange(false);
-        }
-      };
-
-      window.addEventListener("click", handleClickOutside, {
-        capture: true,
-        once: true,
-      });
-      setState({
-        hasShown: true,
-      });
-    }
-  }, [shouldShow]);
-
-  return (
-    <>
-      {state.hasShown && (
-        <div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}>
-          <Picker onEmojiClick={onEmojiClick} disableSearchBar />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default EmojiPicker;

web/src/components/MemoEditor.tsx

-import { IEmojiData } from "emoji-picker-react";
 import { toLower } from "lodash";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,7 +10,6 @@ import Icon from "./Icon";
 import toastHelper from "./Toast";
 import Selector from "./common/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
-import EmojiPicker from "./Editor/EmojiPicker";
 import ResourceIcon from "./ResourceIcon";
 import showResourcesSelectorDialog from "./ResourcesSelectorDialog";
 import "../less/memo-editor.less";
@@ -242,10 +240,6 @@ const MemoEditor = () => {
     setEditorContentCache(content);
   };
 
-  const handleEmojiPickerBtnClick = () => {
-    handleChangeShouldShowEmojiPicker(!state.shouldShowEmojiPicker);
-  };
-
   const handleCheckBoxBtnClick = () => {
     if (!editorRef.current) {
       return;
@@ -320,22 +314,6 @@ const MemoEditor = () => {
     }
   }, []);
 
-  const handleChangeShouldShowEmojiPicker = (status: boolean) => {
-    setState({
-      ...state,
-      shouldShowEmojiPicker: status,
-    });
-  };
-
-  const handleEmojiClick = (_: any, emojiObject: IEmojiData) => {
-    if (!editorRef.current) {
-      return;
-    }
-
-    editorRef.current.insertText(`${emojiObject.emoji}`);
-    handleChangeShouldShowEmojiPicker(false);
-  };
-
   const handleDeleteResource = async (resourceId: ResourceId) => {
     editorStateService.setResourceList(editorState.resourceList.filter((resource) => resource.id !== resourceId));
     if (editorState.editMemoId) {
@@ -401,9 +379,6 @@ const MemoEditor = () => {
               )}
             </div>
           </div>
-          <button className="action-btn !hidden sm:!flex ">
-            <Icon.Smile className="icon-img" onClick={handleEmojiPickerBtnClick} />
-          </button>
           <button className="action-btn">
             <Icon.CheckSquare className="icon-img" onClick={handleCheckBoxBtnClick} />
           </button>
@@ -427,11 +402,6 @@ const MemoEditor = () => {
           <button className="action-btn" onClick={handleFullscreenBtnClick}>
             {state.fullscreen ? <Icon.Minimize className="icon-img" /> : <Icon.Maximize className="icon-img" />}
           </button>
-          <EmojiPicker
-            shouldShow={state.shouldShowEmojiPicker}
-            onEmojiClick={handleEmojiClick}
-            onShouldShowEmojiPickerChange={handleChangeShouldShowEmojiPicker}
-          />
         </div>
       </div>
       {editorState.resourceList && editorState.resourceList.length > 0 && (

web/src/css/tailwind.css

@@ -20,7 +20,7 @@
   }
 
   .btn-primary {
-    @apply btn-normal border-transparent bg-green-600 text-white dark:text-gray-200;
+    @apply btn-normal border-transparent bg-green-600 text-white dark:border-transparent dark:text-gray-200;
   }
 
   .btn-danger {
@@ -32,6 +32,6 @@
   }
 
   .input-text {
-    @apply w-full px-3 py-2 leading-6 text-sm rounded border dark:border-zinc-700 dark:bg-zinc-800;
+    @apply w-full px-3 py-2 leading-6 text-sm dark:text-gray-200 rounded border focus:outline focus:outline-2 dark:border-zinc-700 dark:bg-zinc-800;
   }
 }

web/src/less/auth.less

@@ -45,7 +45,7 @@
             @apply py-2;
 
             > input {
-              @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80 dark:bg-zinc-800 dark:text-gray-200 dark:border-gray-600;
+              @apply w-full py-3 px-3 text-base rounded-lg;
             }
           }
         }

web/src/less/memo-editor.less

@@ -17,11 +17,6 @@
       top: unset !important;
     }
 
-    .emoji-picker-react {
-      @apply !bottom-8;
-      top: unset !important;
-    }
-
     .items-wrapper {
       @apply mb-1 bottom-full top-auto;
     }
@@ -96,14 +91,6 @@
           @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
         }
       }
-
-      .emoji-picker-react {
-        @apply absolute shadow left-6 top-8;
-
-        li.emoji::before {
-          @apply hidden;
-        }
-      }
     }
   }
 

web/src/pages/Auth.tsx

@@ -126,11 +126,11 @@ const Auth = () => {
           <div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
             <div className="form-item-container input-form-container">
               <span className={`normal-text ${username ? "not-null" : ""}`}>{t("common.username")}</span>
-              <input type="text" value={username} onChange={handleUsernameInputChanged} required />
+              <input className="input-text" type="text" value={username} onChange={handleUsernameInputChanged} required />
             </div>
             <div className="form-item-container input-form-container">
               <span className={`normal-text ${password ? "not-null" : ""}`}>{t("common.password")}</span>
-              <input type="password" value={password} onChange={handlePasswordInputChanged} required />
+              <input className="input-text" type="password" value={password} onChange={handlePasswordInputChanged} required />
             </div>
           </div>
           <div className="action-btns-container">

web/yarn.lock

@@ -1736,11 +1736,6 @@ emittery@^0.10.2:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
   integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
 
-emoji-picker-react@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-3.6.2.tgz#e414971bf9421b0825484f3b82623fef995c3c4b"
-  integrity sha512-PK3dfljGxeyN8fDz2FAsDYKPYGgo6/tkRyzJjLVaw0fksJg7jA3OJPIlHq2IIzTmlC/NKhcI/oaf0uEo5azYGA==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"