fileupload

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>

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>

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]
   );

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;