feat: add persistence

src/Gargantext/Components/Router.purs

@@ -19,6 +19,7 @@ import Effect (Effect)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.ErrorsView as ErrorsView
 import Gargantext.Components.Forest (forestLayout)
+import Gargantext.Components.Editor as Editor
 import Gargantext.Components.Forest.Breadcrumb as Breadcrumb
 import Gargantext.Components.ForgotPassword (forgotPasswordLayout)
 import Gargantext.Components.Login (login)
@@ -113,8 +114,7 @@ routerCpt = here.component "router" cpt
         , treeSearch' boxes
         , TopBar.component
             {}
-        , ErrorsView.component
-            {}
+        , ErrorsView.component {}
         , H.div
             { className: "router__inner" }
             [ forest { boxes }
@@ -350,7 +350,7 @@ renderRouteCpt = R.memo' $ here.component "renderRoute" cpt
           GR.PGraphExplorer s g -> graphExplorer (sessionNodeProps s g) []
           GR.PhyloExplorer s g -> phyloExplorer (sessionNodeProps s g) []
           GR.RouteFile s n -> routeFile (sessionNodeProps s n) []
-          GR.RouteFrameWrite s n -> routeFrame (Record.merge { nodeType: Notes } $ sessionNodeProps s n) []
+          GR.RouteFrameWrite s n -> Editor.render { id: n } []
           GR.RouteFrameCalc s n -> routeFrame (Record.merge { nodeType: Calc } $ sessionNodeProps s n) []
           GR.RouteFrameCode s n -> routeFrame (Record.merge { nodeType: NodeFrameNotebook } $ sessionNodeProps s n) []
           GR.RouteFrameVisio s n -> routeFrame (Record.merge { nodeType: NodeFrameVisio } $ sessionNodeProps s n) []

src/external-deps/blocknote.js

@@ -2,16 +2,59 @@ import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
+import { Block, BlockNoteEditor, PartialBlock } from "@blocknote/core";
 import React from "react";
+import { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom/client"
 import { createRoot } from "react-dom/client";
 import r2wc from "react-to-webcomponent"
 
 
-function Editor() {
-  const editor = useCreateBlockNote();
-  return React.createElement(BlockNoteView, { editor });
+
+
+async function saveToStorage(id, jsonBlocks) {
+  localStorage.setItem(`editorContent-${id}`, JSON.stringify(jsonBlocks));
+}
+
+async function loadFromStorage(id) {
+  const storageString = localStorage.getItem(`editorContent-${id}`);
+  return storageString ? JSON.parse(storageString) : undefined;
 }
 
-const WCEditor = r2wc(Editor, React, ReactDOM)
+function Editor({ id }) {
+  const [initialContent, setInitialContent] = useState("loading");
+
+  useEffect(() => {
+    loadFromStorage(id).then((content) => {
+      setInitialContent(content);
+    });
+  }, [id]);
+
+  const editor = useMemo(() => {
+    if (initialContent === "loading") {
+      return undefined;
+    }
+    return BlockNoteEditor.create({ initialContent });
+  }, [initialContent]);
+
+  if (editor === undefined) {
+    return "Loading content...";
+  }
+
+  return (
+    <BlockNoteView
+      editor={editor}
+      onChange={() => {
+        saveToStorage(id, editor.document);
+      }}
+    />
+  );
+}
+
+const WCEditor = r2wc(Editor, React, ReactDOM, {props: {"id": "string"}});
+
 customElements.define("block-note-editor", WCEditor);
+
+
+
+