From 9ca00bb1bf3df4a8f74ad6c36bac9285f9e27905 Mon Sep 17 00:00:00 2001
From: lqwakeup <qiaobingxue1998@163.com>
Date: Sun, 19 Dec 2021 16:57:00 +0800
Subject: [PATCH] fileupload

---
 web/public/icons/image.svg           |  1 +
 web/src/components/Editor/Editor.tsx | 12 ++++++++++++
 web/src/components/MemoEditor.tsx    |  6 ++++++
 web/src/less/editor.less             | 13 ++++++++++++-
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 web/public/icons/image.svg

diff --git a/web/public/icons/image.svg b/web/public/icons/image.svg
new file mode 100644
index 000000000..4d5f44c81
--- /dev/null
+++ b/web/public/icons/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/></svg>
\ No newline at end of file
diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index 4a30d2596..b0a836fc1 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -21,9 +21,11 @@ interface Props {
   showConfirmBtn: boolean;
   showCancelBtn: boolean;
   showTools: boolean;
+  showFileUpload: boolean;
   onConfirmBtnClick: (content: string) => void;
   onCancelBtnClick: () => void;
   onContentChange: (content: string) => void;
+  onFileUpload: () => void;
 }
 
 // eslint-disable-next-line react/display-name
@@ -38,9 +40,11 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
     showConfirmBtn,
     showCancelBtn,
     showTools,
+    showFileUpload,
     onConfirmBtnClick: handleConfirmBtnClickCallback,
     onCancelBtnClick: handleCancelBtnClickCallback,
     onContentChange: handleContentChangeCallback,
+    onFileUpload: handleFileUpload,
   } = props;
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const tinyUndoRef = useRef<TinyUndo | null>(null);
@@ -178,6 +182,14 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
               撤销修改
             </button>
           </Only>
+          <Only when={showFileUpload}>
+            <div className="image-upload">
+              <label htmlFor="file-input">
+                <img className="action-btn file-upload" src="/icons/image.svg" onClick={handleFileUpload}></img>
+              </label>
+              <input id="file-input" type="file" />
+            </div>
+          </Only>
           <Only when={showConfirmBtn}>
             <button className="action-btn confirm-btn" disabled={!editorRef.current?.value} onClick={handleCommonConfirmBtnClick}>
               记下<span className="icon-text">✍️</span>
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 00aa329cb..1e80b732b 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -131,6 +131,10 @@ const MemoEditor: React.FC<Props> = () => {
     setEditorContentCache(content);
   }, []);
 
+  const handleFileUpload = useCallback(() => {
+    console.warn("test fileUpload");
+  }, []);
+
   const showEditStatus = Boolean(globalState.editMemoId);
 
   const editorConfig = useMemo(
@@ -141,9 +145,11 @@ const MemoEditor: React.FC<Props> = () => {
       showConfirmBtn: true,
       showCancelBtn: showEditStatus,
       showTools: true,
+      showFileUpload: true,
       onConfirmBtnClick: handleSaveBtnClick,
       onCancelBtnClick: handleCancelBtnClick,
       onContentChange: handleContentChange,
+      onFileUpload: handleFileUpload,
     }),
     [showEditStatus]
   );
diff --git a/web/src/less/editor.less b/web/src/less/editor.less
index e9d351f81..b9ca82de1 100644
--- a/web/src/less/editor.less
+++ b/web/src/less/editor.less
@@ -43,7 +43,8 @@
     }
 
     > .btns-container {
-      .flex(row, flex-end, center);
+      width: 100%;
+      .flex(row, space-between, center);
       flex-grow: 0;
       flex-shrink: 0;
 
@@ -67,6 +68,16 @@
         margin-right: 8px;
       }
 
+      > .image-upload {
+        > input {
+          display: none;
+        }
+      }
+
+      > .file-upload {
+        display: inline-block;
+      }
+
       > .confirm-btn {
         cursor: pointer;
         padding: 0 12px;