fix state sync

Author: renardeinside

src/components/Editor.tsx

@@ -58,9 +58,9 @@ const Editor = () => {
 
   const editor = useEditor({
     extensions,
-    content: content,
+    content: content ? JSON.parse(content) : "",
     onUpdate: ({ editor }) => {
-      setContent(editor.getHTML());
+      setContent(JSON.stringify(editor.getJSON()));
     },
     editorProps: {
       attributes: {
@@ -73,7 +73,7 @@ const Editor = () => {
   useEffect(() => {
     const unsubscribe = $storage.subscribe!('st-content', (value) => {
       if (editor) {
-        editor.commands.setContent(value);
+        editor.commands.setContent(value ? JSON.parse(value) : "");
       }
     }, null);
 

src/lib/stores.ts

@@ -73,9 +73,17 @@ export const $storage = getStorage();
 
 const ST_CONTENT_KEY = "st-content";
 
+
+const defaultContent = {
+  "type": "doc",
+  "content": Array(20).fill({
+    "type": "paragraph"
+  })
+};
+
 export const contentAtom = atomWithStorage<string | null>(
   ST_CONTENT_KEY,
-  "<p></p>".repeat(20),
+  JSON.stringify(defaultContent),
   $storage,
   {
     getOnInit: true,