chore: update cancel editing button

web/src/components/Editor/Editor.tsx

@@ -18,10 +18,8 @@ interface EditorProps {
   placeholder: string;
   fullscreen: boolean;
   showConfirmBtn: boolean;
-  showCancelBtn: boolean;
   tools?: ReactNode;
   onConfirmBtnClick: (content: string) => void;
-  onCancelBtnClick: () => void;
   onContentChange: (content: string) => void;
 }
 
@@ -33,9 +31,7 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
     placeholder,
     fullscreen,
     showConfirmBtn,
-    showCancelBtn,
     onConfirmBtnClick: handleConfirmBtnClickCallback,
-    onCancelBtnClick: handleCancelBtnClickCallback,
     onContentChange: handleContentChangeCallback,
   } = props;
   const { t } = useI18n();
@@ -111,10 +107,6 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
     editorRef.current.value = "";
   }, []);
 
-  const handleCommonCancelBtnClick = useCallback(() => {
-    handleCancelBtnClickCallback();
-  }, []);
-
   return (
     <div className={"common-editor-wrapper " + className}>
       <textarea
@@ -130,11 +122,6 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
           <Only when={props.tools !== undefined}>{props.tools}</Only>
         </div>
         <div className="btns-container">
-          <Only when={showCancelBtn}>
-            <button className="action-btn cancel-btn" onClick={handleCommonCancelBtnClick}>
-              {t("editor.cancel-edit")}
-            </button>
-          </Only>
           <Only when={showConfirmBtn}>
             <button className="action-btn confirm-btn" disabled={editorRef.current?.value === ""} onClick={handleCommonConfirmBtnClick}>
               {t("editor.save")} <span className="icon-text">✍️</span>

web/src/components/MemoEditor.tsx

@@ -167,7 +167,7 @@ const MemoEditor: React.FC<Props> = () => {
     setEditorContentCache("");
   };
 
-  const handleCancelBtnClick = useCallback(() => {
+  const handleCancelEditingBtnClick = useCallback(() => {
     editorStateService.clearEditMemo();
     editorRef.current?.setContent("");
     setEditorContentCache("");
@@ -219,9 +219,7 @@ const MemoEditor: React.FC<Props> = () => {
       placeholder: t("editor.placeholder"),
       fullscreen: state.fullscreen,
       showConfirmBtn: true,
-      showCancelBtn: isEditing,
       onConfirmBtnClick: handleSaveBtnClick,
-      onCancelBtnClick: handleCancelBtnClick,
       onContentChange: handleContentChange,
     }),
     [isEditing, state.fullscreen, locale]
@@ -229,7 +227,12 @@ const MemoEditor: React.FC<Props> = () => {
 
   return (
     <div className={`memo-editor-container ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}>
-      <p className={"tip-text " + (isEditing ? "" : "hidden")}>Editing...</p>
+      <div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
+        <span className="tip-text">{t("editor.editing")}</span>
+        <button className="cancel-btn" onClick={handleCancelEditingBtnClick}>
+          {t("common.cancel")}
+        </button>
+      </div>
       <Editor
         ref={editorRef}
         {...editorConfig}

web/src/less/memo-editor.less

@@ -25,8 +25,16 @@
     border-color: @text-blue;
   }
 
-  > .tip-text {
-    @apply text-xs leading-5 text-gray-400;
+  > .tip-container {
+    @apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;
+
+    > .tip-text {
+      @apply text-blue-600 mr-2;
+    }
+
+    > .cancel-btn {
+      @apply px-2 border rounded-full leading-5 text-gray-600 hover:border-gray-600;
+    }
   }
 
   > .memo-editor {

web/src/locales/en.json

@@ -37,8 +37,8 @@
     "archived": "Archived"
   },
   "editor": {
+    "editing": "Editing...",
     "save": "Save",
-    "cancel-edit": "Cancel edit",
     "placeholder": "Any thoughts..."
   },
   "memo": {

web/src/locales/zh.json

@@ -38,8 +38,8 @@
     "archived": "已归档"
   },
   "editor": {
+    "editing": "编辑中...",
     "save": "记下",
-    "cancel-edit": "退出编辑",
     "placeholder": "现在的想法是..."
   },
   "memo": {