feat: add content cache for memo editor

web/src/components/MemoEditor/index.tsx

@@ -2,6 +2,7 @@ import { isNumber, last, uniq } from "lodash-es";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { useLocalStorage } from "react-use";
 import { upsertMemoResource } from "@/helpers/api";
 import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
 import { clearContentQueryParam } from "@/helpers/utils";
@@ -39,6 +40,7 @@ const MemoEditor = (props: Props) => {
   const { className, memoId, onConfirm } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
+  const [contentCache, setContentCache] = useLocalStorage<string>(`memo-editor-${props.memoId || "0"}`, "");
   const {
     state: { systemStatus },
   } = useGlobalStore();
@@ -61,6 +63,10 @@ const MemoEditor = (props: Props) => {
   const user = userStore.state.user as User;
   const setting = user.setting;
 
+  useEffect(() => {
+    editorRef.current?.setContent(contentCache || "");
+  }, []);
+
   useEffect(() => {
     let visibility = setting.memoVisibility;
     if (systemStatus.disablePublicMemos && visibility === "PUBLIC") {
@@ -83,8 +89,10 @@ const MemoEditor = (props: Props) => {
             resourceList: memo.resourceList,
             relationList: memo.relationList,
           }));
+          if (!contentCache) {
             editorRef.current?.setContent(memo.content ?? "");
           }
+        }
       });
     }
   }, [memoId]);
@@ -242,6 +250,7 @@ const MemoEditor = (props: Props) => {
 
   const handleContentChange = (content: string) => {
     setHasContent(content !== "");
+    setContentCache(content);
   };
 
   const handleSaveBtnClick = async () => {

web/src/components/UpgradeVersionBanner.tsx

 import { useEffect, useState } from "react";
+import { useLocalStorage } from "react-use";
 import { compare } from "semver";
 import * as api from "@/helpers/api";
-import storage from "@/helpers/storage";
 import { useGlobalStore } from "@/store/module";
 import Icon from "./Icon";
 
@@ -12,6 +12,7 @@ interface State {
 
 const UpgradeVersionView: React.FC = () => {
   const globalStore = useGlobalStore();
+  const [skippedVersion, setSkippedVersion] = useLocalStorage<string>("skipped_version", "0.0.0");
   const profile = globalStore.state.systemStatus.profile;
   const [state, setState] = useState<State>({
     latestVersion: "",
@@ -20,7 +21,6 @@ const UpgradeVersionView: React.FC = () => {
 
   useEffect(() => {
     api.getRepoLatestTag().then((latestTag) => {
-      const { skippedVersion } = storage.get(["skippedVersion"]);
       const latestVersion = latestTag.slice(1) || "0.0.0";
       const currentVersion = profile.version;
       const skipped = skippedVersion ? skippedVersion === latestVersion : false;
@@ -32,7 +32,7 @@ const UpgradeVersionView: React.FC = () => {
   }, []);
 
   const onSkip = () => {
-    storage.set({ skippedVersion: state.latestVersion });
+    setSkippedVersion(state.latestVersion);
     setState((s) => ({
       ...s,
       show: false,

web/src/helpers/storage.ts

@@ -2,18 +2,12 @@
  * Define storage data type
  */
 interface StorageData {
-  // Editor content cache
-  editorContentCache: string;
-  // Editing memo id cache
-  editingMemoIdCache: MemoId;
   // locale
   locale: Locale;
   // appearance
   appearance: Appearance;
   // local setting
   localSetting: LocalSetting;
-  // skipped version
-  skippedVersion: string;
 }
 
 type StorageKey = keyof StorageData;