From 7ec5d07cb8de7014ec42a5350a53a9ab10beca75 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 10 Sep 2023 10:48:08 +0800
Subject: [PATCH] chore: remove fullscreen button

---
 .../components/MemoEditor/Editor/index.tsx    |  7 ++--
 web/src/components/MemoEditor/index.tsx       | 37 +++----------------
 web/src/less/memo-editor.less                 | 26 -------------
 3 files changed, 8 insertions(+), 62 deletions(-)

diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
index e6fbb5d0..db634da3 100644
--- a/web/src/components/MemoEditor/Editor/index.tsx
+++ b/web/src/components/MemoEditor/Editor/index.tsx
@@ -18,14 +18,13 @@ interface Props {
   className: string;
   initialContent: string;
   placeholder: string;
-  fullscreen: boolean;
   tools?: ReactNode;
   onContentChange: (content: string) => void;
   onPaste: (event: React.ClipboardEvent) => void;
 }
 
 const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<EditorRefActions>) {
-  const { className, initialContent, placeholder, fullscreen, onPaste, onContentChange: handleContentChangeCallback } = props;
+  const { className, initialContent, placeholder, onPaste, onContentChange: handleContentChangeCallback } = props;
   const editorRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -36,10 +35,10 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
   }, []);
 
   useEffect(() => {
-    if (editorRef.current && !fullscreen) {
+    if (editorRef.current) {
       updateEditorHeight();
     }
-  }, [editorRef.current?.value, fullscreen]);
+  }, [editorRef.current?.value]);
 
   const updateEditorHeight = () => {
     if (editorRef.current) {
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 9157c5fb..26d1667e 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -31,7 +31,6 @@ interface State {
   memoVisibility: Visibility;
   resourceList: Resource[];
   relationList: MemoRelation[];
-  fullscreen: boolean;
   isUploadingResource: boolean;
   isRequesting: boolean;
 }
@@ -53,7 +52,6 @@ const MemoEditor = (props: Props) => {
     memoVisibility: "PRIVATE",
     resourceList: [],
     relationList: props.relationList ?? [],
-    fullscreen: false,
     isUploadingResource: false,
     isRequesting: false,
   });
@@ -139,12 +137,6 @@ const MemoEditor = (props: Props) => {
       }
       return;
     }
-    if (event.key === "Escape") {
-      if (state.fullscreen) {
-        handleFullscreenBtnClick();
-      }
-      return;
-    }
     if (event.key === "Tab") {
       event.preventDefault();
       const tabSpace = " ".repeat(TAB_SPACE_WIDTH);
@@ -304,12 +296,6 @@ const MemoEditor = (props: Props) => {
       await tagStore.upsertTag(tagName);
     }
 
-    setState((state) => {
-      return {
-        ...state,
-        fullscreen: false,
-      };
-    });
     setState((prevState) => ({
       ...prevState,
       resourceList: [],
@@ -352,15 +338,6 @@ const MemoEditor = (props: Props) => {
     editorRef.current?.scrollToCursor();
   };
 
-  const handleFullscreenBtnClick = useCallback(() => {
-    setState((state) => {
-      return {
-        ...state,
-        fullscreen: !state.fullscreen,
-      };
-    });
-  }, []);
-
   const handleTagSelectorClick = useCallback((tag: string) => {
     editorRef.current?.insertText(`#${tag} `);
   }, []);
@@ -374,18 +351,17 @@ const MemoEditor = (props: Props) => {
       className: `memo-editor`,
       initialContent: "",
       placeholder: t("editor.placeholder"),
-      fullscreen: state.fullscreen,
       onContentChange: handleContentChange,
       onPaste: handlePasteEvent,
     }),
-    [state.fullscreen, i18n.language]
+    [i18n.language]
   );
 
   const allowSave = (hasContent || state.resourceList.length > 0) && !state.isUploadingResource && !state.isRequesting;
 
   return (
     <div
-      className={`${className ?? ""} memo-editor-container ${state.fullscreen ? "fullscreen" : ""}`}
+      className={`${className ?? ""} memo-editor-container`}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onDrop={handleDropEvent}
@@ -398,16 +374,13 @@ const MemoEditor = (props: Props) => {
         <div className="common-tools-container">
           <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
           <button className="action-btn">
-            <Icon.CheckSquare className="icon-img" onClick={handleCheckBoxBtnClick} />
+            <Icon.Image className="icon-img" onClick={handleUploadFileBtnClick} />
           </button>
           <button className="action-btn">
-            <Icon.Code className="icon-img" onClick={handleCodeBlockBtnClick} />
+            <Icon.CheckSquare className="icon-img" onClick={handleCheckBoxBtnClick} />
           </button>
           <button className="action-btn">
-            <Icon.Image className="icon-img" onClick={handleUploadFileBtnClick} />
-          </button>
-          <button className="action-btn" onClick={handleFullscreenBtnClick}>
-            {state.fullscreen ? <Icon.Minimize className="icon-img" /> : <Icon.Maximize className="icon-img" />}
+            <Icon.Code className="icon-img" onClick={handleCodeBlockBtnClick} />
           </button>
         </div>
       </div>
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index c51d93b5..287884e9 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -1,32 +1,6 @@
 .memo-editor-container {
   @apply relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;
 
-  &.fullscreen {
-    @apply transition-all fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8 dark:bg-zinc-800;
-
-    > .memo-editor {
-      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white dark:bg-zinc-700 dark:border-zinc-600;
-
-      > .common-editor-inputer {
-        @apply flex-grow w-full !h-full max-h-full;
-      }
-    }
-
-    .tag-suggestions {
-      margin-left: 6px;
-      margin-top: 18px;
-    }
-
-    .tag-action > .tag-list {
-      @apply bottom-7;
-      top: unset !important;
-    }
-
-    .items-wrapper {
-      @apply mb-1 bottom-full top-auto;
-    }
-  }
-
   .tag-suggestions {
     margin-left: -10px;
     margin-top: 2px;