update memo editor comman tool btns

web/src/components/Editor/Editor.tsx

@@ -14,22 +14,22 @@ export interface EditorRefActions {
   getContent: () => string;
 }
 
-interface Props {
+export interface EditorProps {
   className: string;
   initialContent: string;
   placeholder: string;
   showConfirmBtn: boolean;
   showCancelBtn: boolean;
   showTools: boolean;
-  showFileUpload: boolean;
   onConfirmBtnClick: (content: string) => void;
   onCancelBtnClick: () => void;
+  onTagTextBtnClick: () => void;
+  onUploadFileBtnClick: () => void;
   onContentChange: (content: string) => void;
-  onFileUpload: () => void;
 }
 
 // eslint-disable-next-line react/display-name
-const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefActions>) => {
+const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRefActions>) => {
   const {
     globalState: { useTinyUndoHistoryCache },
   } = useContext(appContext);
@@ -40,11 +40,11 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
     showConfirmBtn,
     showCancelBtn,
     showTools,
-    showFileUpload,
     onConfirmBtnClick: handleConfirmBtnClickCallback,
     onCancelBtnClick: handleCancelBtnClickCallback,
+    onTagTextBtnClick: handleTagTextBtnClickCallback,
+    onUploadFileBtnClick: handleUploadFileBtnClickCallback,
     onContentChange: handleContentChangeCallback,
-    onFileUpload: handleFileUpload,
   } = props;
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const tinyUndoRef = useRef<TinyUndo | null>(null);
@@ -173,23 +173,20 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
         onKeyDown={handleEditorKeyDown}
       ></textarea>
       <div className="common-tools-wrapper">
+        <div className="common-tools-container">
           <Only when={showTools}>
-          <div className={"common-tools-container"}>{/* nth */}</div>
+            <>
+              <img className="action-btn file-upload" src="/icons/tag.svg" onClick={handleTagTextBtnClickCallback} />
+              <img className="action-btn file-upload" src="/icons/image.svg" onClick={handleUploadFileBtnClickCallback} />
+            </>
           </Only>
+        </div>
         <div className="btns-container">
           <Only when={showCancelBtn}>
             <button className="action-btn cancel-btn" onClick={handleCommonCancelBtnClick}>
               撤销修改
             </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

@@ -4,7 +4,7 @@ import { globalStateService, locationService, memoService, resourceService } fro
 import utils from "../helpers/utils";
 import { storage } from "../helpers/storage";
 import toastHelper from "./Toast";
-import Editor, { EditorRefActions } from "./Editor/Editor";
+import Editor, { EditorProps, EditorRefActions } from "./Editor/Editor";
 import "../less/memo-editor.less";
 
 interface Props {}
@@ -131,13 +131,19 @@ const MemoEditor: React.FC<Props> = () => {
     setEditorContentCache(content);
   }, []);
 
-  const handleFileUpload = useCallback(() => {
+  const handleTagTextBtnClick = useCallback(() => {
-    console.warn("test fileUpload");
+    console.log("tag text btn clicked");
+    // ...wait to think how and where to show the tag list
+  }, []);
+
+  const handleUploadFileBtnClick = useCallback(() => {
+    console.log("file upload btn clicked");
+    // Do upload file operation right here.
   }, []);
 
   const showEditStatus = Boolean(globalState.editMemoId);
 
-  const editorConfig = useMemo(
+  const editorConfig: EditorProps = useMemo(
     () => ({
       className: "memo-editor",
       initialContent: getEditorContentCache(),
@@ -145,11 +151,11 @@ const MemoEditor: React.FC<Props> = () => {
       showConfirmBtn: true,
       showCancelBtn: showEditStatus,
       showTools: true,
-      showFileUpload: true,
       onConfirmBtnClick: handleSaveBtnClick,
       onCancelBtnClick: handleCancelBtnClick,
+      onTagTextBtnClick: handleTagTextBtnClick,
+      onUploadFileBtnClick: handleUploadFileBtnClick,
       onContentChange: handleContentChange,
-      onFileUpload: handleFileUpload,
     }),
     [showEditStatus]
   );

web/src/less/editor.less

@@ -10,7 +10,9 @@
   > .common-editor-inputer {
     display: inline-block;
     width: 100%;
-    min-height: 24px;
+    padding-top: 4px;
+    padding-bottom: 12px;
+    min-height: 40px;
     max-height: 300px;
     font-size: 15px;
     line-height: 24px;
@@ -19,7 +21,6 @@
     overflow-y: scroll;
     background-color: transparent;
     z-index: 1;
-    margin-bottom: 4px;
     white-space: pre-wrap;
     .hide-scroll-bar();
 
@@ -40,11 +41,23 @@
 
     > .common-tools-container {
       .flex(row, flex-start, center);
+
+      > .action-btn {
+        width: 18px;
+        height: auto;
+        margin-right: 8px;
+        user-select: none;
+        cursor: pointer;
+        opacity: 0.5;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
     }
 
     > .btns-container {
-      width: 100%;
+      .flex(row, flex-end, center);
-      .flex(row, space-between, center);
       flex-grow: 0;
       flex-shrink: 0;
 
@@ -68,16 +81,6 @@
         margin-right: 8px;
       }
 
-      > .image-upload {
-        > input {
-          display: none;
-        }
-      }
-
-      > .file-upload {
-        display: inline-block;
-      }
-
       > .confirm-btn {
         cursor: pointer;
         padding: 0 12px;