implement Storage Provider

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

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

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

@@ -1,11 +1,10 @@
-import { FC, Suspense, lazy } from "react";
-import { SimpleTextareaEditor } from "../../components/SimpleTextareaEditor";
-import { MarkdownViewer } from "../../components/MarkdownViewer";
-import { usePersistedValue } from "./hooks/usePersistedValue";
-import styles from "./styles.module.scss";
-import { useSettings } from "~/modules/settings/context/SettingsContext";
-import { EmptyViewer } from "../../components/EmptyViewer";
+import { FC, Suspense, useCallback } from "react";
 import { EditorWrapper } from "../../components/EditorWrapper";
+import { EmptyViewer } from "../../components/EmptyViewer";
+import { MarkdownViewer } from "../../components/MarkdownViewer";
+import { SimpleTextareaEditor } from "../../components/SimpleTextareaEditor";
+import styles from "./styles.module.scss";
+import { useStorage } from "../../../../modules/storage/StorageContext";
 
 interface MarkdownEditorContainerProps {
   id: string;
@@ -14,29 +13,22 @@ interface MarkdownEditorContainerProps {
   remove: VoidCallback;
 }
 
-const RichEditor = lazy(() =>
-  import("../../components/RemirrorEditor").then((module) => ({
-    default: module.RemirrorEditor,
-  }))
-);
-
 export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   id,
   locked,
   startEditing,
   remove,
 }) => {
-  const {
-    settings: { richEditorEnabled },
-  } = useSettings();
-
-  const { value, setValue, hydrated } = usePersistedValue(
-    id,
-    "MarkdownEditorContainer"
-  );
+  const { panels, setPanel, hydrated } = useStorage();
 
+  const value = panels[id] ?? "";
   const empty = !value.trim();
 
+  const onChange = useCallback(
+    (val: string) => setPanel(id, val),
+    [id, setPanel]
+  );
+
   const viewer = empty ? (
     <EmptyViewer startEditing={startEditing} />
   ) : (
@@ -45,15 +37,11 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
 
   const editor = (
     <EditorWrapper save={startEditing} remove={remove}>
-      {richEditorEnabled ? (
-        <RichEditor value={value} onChange={setValue} locked={locked} />
-      ) : (
-        <SimpleTextareaEditor
-          value={value}
-          onChange={setValue}
-          save={startEditing}
-        />
-      )}
+      <SimpleTextareaEditor
+        value={value}
+        onChange={onChange}
+        save={startEditing}
+      />
     </EditorWrapper>
   );