From fd7043ea4049cf42c8e2e464cfc9ebe348d7ff7a Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 5 Oct 2023 14:20:35 +0800
Subject: [PATCH] chore: fix editor cache

---
 web/src/components/CreateTagDialog.tsx             | 9 ++++++---
 web/src/components/MemoEditor/MemoEditorDialog.tsx | 2 +-
 web/src/components/MemoEditor/index.tsx            | 5 +++--
 web/src/pages/Home.tsx                             | 2 +-
 web/src/pages/MemoDetail.tsx                       | 1 +
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/components/CreateTagDialog.tsx b/web/src/components/CreateTagDialog.tsx
index 4d380b1f..4667893a 100644
--- a/web/src/components/CreateTagDialog.tsx
+++ b/web/src/components/CreateTagDialog.tsx
@@ -124,9 +124,12 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
           <>
             <div className="mt-4 mb-1 text-sm w-full flex flex-row justify-start items-center">
               <span className="text-gray-400 mr-2">{t("tag-list.tag-suggestions")}</span>
-              <Button size="sm" variant="outlined" onClick={handleToggleShowSuggestionTags}>
+              <span
+                className="text-xs border border-gray-200 rounded-md px-1 leading-5 cursor-pointer text-gray-600 hover:shadow dark:border-zinc-700 dark:text-gray-400"
+                onClick={handleToggleShowSuggestionTags}
+              >
                 {showTagSuggestions ? t("tag-list.hide") : t("tag-list.show")}
-              </Button>
+              </span>
             </div>
             {showTagSuggestions && (
               <>
@@ -141,7 +144,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
                     </span>
                   ))}
                 </div>
-                <Button size="sm" onClick={handleSaveSuggestTagList}>
+                <Button size="sm" variant="outlined" onClick={handleSaveSuggestTagList}>
                   {t("tag-list.save-all")}
                 </Button>
               </>
diff --git a/web/src/components/MemoEditor/MemoEditorDialog.tsx b/web/src/components/MemoEditor/MemoEditorDialog.tsx
index 50bb7f07..a7ac8946 100644
--- a/web/src/components/MemoEditor/MemoEditorDialog.tsx
+++ b/web/src/components/MemoEditor/MemoEditorDialog.tsx
@@ -31,7 +31,7 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Pr
         </button>
       </div>
       <div className="flex flex-col justify-start items-start max-w-full w-[36rem]">
-        <MemoEditor memoId={memoId} relationList={relationList} onConfirm={handleCloseBtnClick} />
+        <MemoEditor cacheKey={`memo-editor-${memoId}`} memoId={memoId} relationList={relationList} onConfirm={handleCloseBtnClick} />
       </div>
     </>
   );
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 3b43da30..b0277042 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -23,6 +23,7 @@ const emptyOlReg = /^(\d+)\. $/;
 
 interface Props {
   className?: string;
+  cacheKey?: string;
   memoId?: MemoId;
   relationList?: MemoRelation[];
   onConfirm?: () => void;
@@ -37,10 +38,10 @@ interface State {
 }
 
 const MemoEditor = (props: Props) => {
-  const { className, memoId, onConfirm } = props;
+  const { className, cacheKey, memoId, onConfirm } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
-  const [contentCache, setContentCache] = useLocalStorage<string>(`memo-editor-${props.memoId || "0"}`, "");
+  const [contentCache, setContentCache] = useLocalStorage<string>(`memo-editor-${cacheKey}`, "");
   const {
     state: { systemStatus },
   } = useGlobalStore();
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index ccc39555..7d78d4f4 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -10,7 +10,7 @@ const Home = () => {
       <div className="flex-grow shrink w-auto px-4 sm:px-2 sm:pt-4">
         <MobileHeader />
         <div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
-          <MemoEditor className="mb-2" />
+          <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <MemoFilter />
         </div>
         <MemoList />
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 935c40eb..647f1001 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -205,6 +205,7 @@ const MemoDetail = () => {
               <MemoEditor
                 key={memo.id}
                 className="!border"
+                cacheKey={`comment-editor-${memo.id}`}
                 relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
                 onConfirm={handleCommentCreated}
               />