add sync storage

src/modules/editor/containers/MarkdownEditorContainer/hooks/usePersistedValue.ts

@@ -1,35 +1,26 @@
-import { useEffect, useState } from "react";
-
-const safelyGetStringValue = (key: string) => {
-  try {
-    return localStorage.getItem(key) ?? "";
-  } catch (error) {
-    console.warn(error);
-    return "";
-  }
-};
-const safelySetStringValue = (key: string, value: string) => {
-  try {
-    return localStorage.setItem(key, value);
-  } catch (error) {
-    console.warn(error);
-  }
-};
+import { useEffect, useMemo, useState } from "react";
+import { BrowserSyncStorage } from '~/utils/index';
 
 export const usePersistedValue = (
   id: string,
   prefix: string
-): [string, (val: string) => void] => {
+) => {
+  const [hydrated, setHydrated] = useState(false);
+  const storage = useMemo(() => new BrowserSyncStorage(prefix), [prefix]);
   const key = `${prefix}${id}`;
-  const [value, setValue] = useState(safelyGetStringValue(key));
+  const [value, setValue] = useState('');
 
   useEffect(() => {
-    setValue(safelyGetStringValue(key));
-  }, [id, key]);
+    storage.get<string>(key).then(val => setValue(val ?? '')).finally(() => setHydrated(true));
+  }, [key, storage]);
 
   useEffect(() => {
-    safelySetStringValue(key, value);
-  }, [key, value]);
+    if (!hydrated) {
+      return;
+    }
 
-  return [value, setValue];
+    storage.set(key, value);
+  }, [key, value, storage, hydrated]);
+
+  return { value, setValue, hydrated };
 };

src/modules/editor/containers/MarkdownEditorContainer/index.tsx

@@ -30,7 +30,10 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
     settings: { richEditorEnabled },
   } = useSettings();
 
-  const [value, setValue] = usePersistedValue(id, "MarkdownEditorContainer");
+  const { value, setValue, hydrated } = usePersistedValue(
+    id,
+    "MarkdownEditorContainer"
+  );
 
   const empty = !value.trim();
 
@@ -52,7 +55,7 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
 
   return (
     <div className={styles.editor}>
-      <Suspense>{locked ? viewer : editor}</Suspense>
+      {hydrated && <Suspense>{locked ? viewer : editor}</Suspense>}
     </div>
   );
 };