Testing blocknote for doc

package.json

@@ -8,6 +8,9 @@
     "start": "next start"
   },
   "dependencies": {
+    "@blocknote/core": "^0.42.0",
+    "@blocknote/react": "^0.42.0",
+    "@blocknote/shadcn": "^0.42.0",
     "@hello-pangea/dnd": "^18.0.1",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -29,7 +32,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
+    "@types/node": "^20.19.24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "tailwindcss": "^4",

src/app/globals.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@source "../../node_modules/@blocknote/shadcn/src/style.css";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {

src/components/Router.tsx

@@ -3,6 +3,7 @@
 import { Workspace } from "@/hooks/workspace";
 import { Task } from "@/lib/types";
 import TaskView from "./view/TaskView";
+import DocView from "./view/Doc";
 
 const id = (prefix = "t") =>
   `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
@@ -33,6 +34,6 @@ export default function Router({ workspace }: { workspace: Workspace }) {
         />
       );
     case "doc":
-      return entity.doc;
+      return <DocView doc={entity.doc} setDoc={entity.setDoc} />;
   }
 }

src/components/view/Doc.tsx

@@ -0,0 +1,35 @@
+import { SetState } from "@/lib/types";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/shadcn";
+import { useEffect } from "react";
+
+export default function DocView({
+  doc,
+  setDoc,
+}: {
+  doc: string;
+  setDoc: SetState<string>;
+}) {
+  const editor = useCreateBlockNote();
+
+  useEffect(() => {
+    if (editor && doc) {
+      editor.tryParseMarkdownToBlocks(doc);
+    }
+  }, [editor]);
+
+  return (
+    <BlockNoteView
+      defaultValue={doc}
+      editor={editor}
+      shadCNComponents={{}}
+      className="w-full h-svh px-6 mt-4"
+      onChange={async () => {
+        if (editor) {
+          console.log(editor.blocksToMarkdownLossy(editor.document));
+          setDoc(editor.blocksToMarkdownLossy(editor.document));
+        }
+      }}
+    />
+  );
+}