From b85af714f5638d5ff2e6c5c25d64cf526e45a97b Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sat, 9 Jul 2022 23:16:20 +0800
Subject: [PATCH] feat: fullscreen editor

---
 web/public/icons/close-fullscreen.svg |  1 +
 web/public/icons/open-fullscreen.svg  |  1 +
 web/src/components/Editor/Editor.tsx  |  6 ++--
 web/src/components/MemoEditor.tsx     | 44 +++++++++++++++++++++------
 web/src/less/memo-editor.less         | 15 ++++++++-
 web/src/less/siderbar.less            |  2 +-
 6 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 web/public/icons/close-fullscreen.svg
 create mode 100644 web/public/icons/open-fullscreen.svg

diff --git a/web/public/icons/close-fullscreen.svg b/web/public/icons/close-fullscreen.svg
new file mode 100644
index 00000000..ce825fa1
--- /dev/null
+++ b/web/public/icons/close-fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6.1 44 4 41.9 18.9 27H9v-3h15v15h-3v-9.9ZM24 24V9h3v9.9L41.9 4 44 6.1 29.1 21H39v3Z"/></svg>
\ No newline at end of file
diff --git a/web/public/icons/open-fullscreen.svg b/web/public/icons/open-fullscreen.svg
new file mode 100644
index 00000000..fbb88cf2
--- /dev/null
+++ b/web/public/icons/open-fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6 42V27h3v9.9L36.9 9H27V6h15v15h-3v-9.9L11.1 39H21v3Z"/></svg>
\ No newline at end of file
diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index feeb281b..bf947212 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -15,6 +15,7 @@ interface EditorProps {
   className: string;
   initialContent: string;
   placeholder: string;
+  fullscreen: boolean;
   showConfirmBtn: boolean;
   showCancelBtn: boolean;
   tools?: ReactNode;
@@ -29,6 +30,7 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
     className,
     initialContent,
     placeholder,
+    fullscreen,
     showConfirmBtn,
     showCancelBtn,
     onConfirmBtnClick: handleConfirmBtnClickCallback,
@@ -45,11 +47,11 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
   }, []);
 
   useEffect(() => {
-    if (editorRef.current) {
+    if (editorRef.current && !fullscreen) {
       editorRef.current.style.height = "auto";
       editorRef.current.style.height = (editorRef.current.scrollHeight ?? 0) + "px";
     }
-  }, [editorRef.current?.value]);
+  }, [editorRef.current?.value, fullscreen]);
 
   useImperativeHandle(
     ref,
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 8feeb4d1..74413832 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -1,19 +1,26 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { editorStateService, locationService, memoService, resourceService } from "../services";
 import { useAppSelector } from "../store";
 import * as storage from "../helpers/storage";
-import useToggle from "../hooks/useToggle";
 import toastHelper from "./Toast";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import "../less/memo-editor.less";
 
 interface Props {}
 
+interface State {
+  isUploadingResource: boolean;
+  fullscreen: boolean;
+}
+
 const MemoEditor: React.FC<Props> = () => {
   const editorState = useAppSelector((state) => state.editor);
   const tags = useAppSelector((state) => state.memo.tags);
-  const [isUploadingResource, setIsUploadingResource] = useToggle(false);
+  const [state, setState] = useState<State>({
+    isUploadingResource: false,
+    fullscreen: false,
+  });
   const editorRef = useRef<EditorRefActions>(null);
   const prevGlobalStateRef = useRef(editorState);
   const tagSeletorRef = useRef<HTMLDivElement>(null);
@@ -89,11 +96,14 @@ const MemoEditor: React.FC<Props> = () => {
 
   const handleUploadFile = useCallback(
     async (file: File) => {
-      if (isUploadingResource) {
+      if (state.isUploadingResource) {
         return;
       }
 
-      setIsUploadingResource(true);
+      setState({
+        ...state,
+        isUploadingResource: true,
+      });
       const { type } = file;
 
       if (!type.startsWith("image")) {
@@ -108,10 +118,13 @@ const MemoEditor: React.FC<Props> = () => {
       } catch (error: any) {
         toastHelper.error(error);
       } finally {
-        setIsUploadingResource(false);
+        setState({
+          ...state,
+          isUploadingResource: false,
+        });
       }
     },
-    [isUploadingResource]
+    [state]
   );
 
   const handleSaveBtnClick = useCallback(async (content: string) => {
@@ -175,6 +188,13 @@ const MemoEditor: React.FC<Props> = () => {
     inputEl.click();
   }, []);
 
+  const handleFullscreenBtnClick = () => {
+    setState({
+      ...state,
+      fullscreen: !state.fullscreen,
+    });
+  };
+
   const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
     if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
       editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
@@ -189,17 +209,18 @@ const MemoEditor: React.FC<Props> = () => {
       className: "memo-editor",
       initialContent: getEditorContentCache(),
       placeholder: "Any thoughts...",
+      fullscreen: state.fullscreen,
       showConfirmBtn: true,
       showCancelBtn: isEditing,
       onConfirmBtnClick: handleSaveBtnClick,
       onCancelBtnClick: handleCancelBtnClick,
       onContentChange: handleContentChange,
     }),
-    [isEditing]
+    [isEditing, state.fullscreen]
   );
 
   return (
-    <div className={"memo-editor-container " + (isEditing ? "edit-ing" : "")}>
+    <div className={`memo-editor-container ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}>
       <p className={"tip-text " + (isEditing ? "" : "hidden")}>Editting...</p>
       <Editor
         ref={editorRef}
@@ -216,8 +237,11 @@ const MemoEditor: React.FC<Props> = () => {
             </div>
             <div className="action-btn">
               <img className="icon-img" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
-              <span className={`tip-text ${isUploadingResource ? "!block" : ""}`}>Uploading</span>
+              <span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span>
             </div>
+            <button className="action-btn" onClick={handleFullscreenBtnClick}>
+              <img className="icon-img" src={`/icons/${state.fullscreen ? "close" : "open"}-fullscreen.svg`} alt="" />
+            </button>
           </>
         }
       />
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 614b83ec..47ae374e 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -1,7 +1,20 @@
 @import "./mixin.less";
 
 .memo-editor-container {
-  @apply relative w-full max-h-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
+  @apply transition-all relative w-full max-h-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
+
+  &.fullscreen {
+    @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
+    background-color: #f6f5f4;
+
+    > .memo-editor {
+      @apply p-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
+
+      > .common-editor-inputer {
+        @apply flex-grow w-full !h-full max-h-full;
+      }
+    }
+  }
 
   &.edit-ing {
     border-color: @text-blue;
diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less
index 0ef819c0..ffc143fd 100644
--- a/web/src/less/siderbar.less
+++ b/web/src/less/siderbar.less
@@ -1,7 +1,7 @@
 @import "./mixin.less";
 
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 left-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 z-10 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
+  @apply fixed sm:sticky top-0 left-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 z-10 sm:z-0 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
   .hide-scroll-bar();
 
   > .close-container {