feat: Update markdown editor to render md live in editor

muzammil-irfan · Oct 19, 2024 · d528d2c · d528d2c
1 parent 6ad16db
commit d528d2c
Show file tree

Hide file tree

Showing 3 changed files with 1,746 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,10 @@
     "@assistant-ui/react": "^0.5.71",
     "@assistant-ui/react-markdown": "^0.2.18",
     "@assistant-ui/react-syntax-highlighter": "^0.0.13",
+    "@blocknote/core": "^0.17.1",
+    "@blocknote/mantine": "^0.17.1",
+    "@blocknote/react": "^0.17.1",
+    "@blocknote/shadcn": "^0.17.1",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-java": "^6.0.1",

diff --git a/src/components/artifacts/TextRenderer.tsx b/src/components/artifacts/TextRenderer.tsx
@@ -1,10 +1,12 @@
 import { Artifact } from "@/types";
-import MDEditor from "@uiw/react-md-editor";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 import { cleanContent } from "@/lib/normalize_string";
 
-import styles from "./TextRenderer.module.css";
-
+import "@blocknote/core/fonts/inter.css";
+import { getDefaultReactSlashMenuItems, SuggestionMenuController, useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/shadcn";
+import "@blocknote/shadcn/style.css";
+
 export interface TextRenderer {
   artifact: Artifact;
   isEditing: boolean;
@@ -13,20 +15,42 @@ export interface TextRenderer {
 }
 
 export function TextRenderer(props: TextRenderer) {
+  const editor = useCreateBlockNote({});
+
+  const onChange = async () => {
+    const markdown = await editor.blocksToMarkdownLossy(editor.document);
+    props.setArtifactContent(props.artifact.id, cleanContent(markdown));
+  };
+
+  useEffect(() => {
+    (async () => {
+      const blocks = await editor.tryParseMarkdownToBlocks(
+        props.artifact.content
+      );
+      editor.replaceBlocks(editor.document, blocks);
+    })();
+  }, [props.artifact.content, editor]);
+
   return (
     <div
-      className="w-full h-full mt-2 flex flex-col border-[1px] border-gray-200 rounded-2xl overflow-hidden"
+      className="w-full h-full mt-2 flex flex-col border-[1px] border-gray-200 rounded-2xl overflow-hidden py-5"
       data-color-mode="light"
     >
-      <MDEditor
-        preview={props.isEditing ? "edit" : "preview"}
-        hideToolbar
-        visibleDragbar={false}
-        value={cleanContent(props.artifact.content)}
-        onChange={(v) => props.setArtifactContent(props.artifact.id, v || "")}
-        className={`min-h-full border-none ${styles.mdEditorCustom} ${styles.fullHeightTextArea} ${styles.lightModeOnly}`}
-        height="100%"
-      />
+      <BlockNoteView
+        slashMenu={false}
+        editable={props.isEditing}
+        onChange={onChange}
+        editor={editor}
+      >
+        <SuggestionMenuController
+          getItems={async () =>
+            getDefaultReactSlashMenuItems(editor).filter(
+              (z) => z.group !== "Media"
+            )
+          }
+          triggerCharacter={"/"}
+        />
+      </BlockNoteView>
     </div>
   );
 }