chore: fix editor cache

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>
               </>

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

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

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 />

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}
               />