fix: serialize React content with existing React tree (#641)

* serialize React content with existing React tree

* fix tests

* Added case test to serialize custom block with React context

---------

Co-authored-by: Matthew Lipski <[email protected]>

Author: YousefED

packages/react/src/editor/EditorContent.tsx

@@ -1,7 +1,7 @@
 import { BlockNoteEditor } from "@blocknote/core";
 import { ReactRenderer } from "@tiptap/react";
 import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { createPortal, flushSync } from "react-dom";
 
 const Portals: React.FC<{ renderers: Record<string, ReactRenderer> }> = ({
   renderers,
@@ -26,13 +26,20 @@ export function EditorContent(props: {
   children: any;
 }) {
   const [renderers, setRenderers] = useState<Record<string, ReactRenderer>>({});
+  const [singleRenderData, setSingleRenderData] = useState<any>();
 
   useEffect(() => {
     props.editor._tiptapEditor.contentComponent = {
+      /**
+       * Used by TipTap
+       */
       setRenderer(id: string, renderer: ReactRenderer) {
         setRenderers((renderers) => ({ ...renderers, [id]: renderer }));
       },
 
+      /**
+       * Used by TipTap
+       */
       removeRenderer(id: string) {
         setRenderers((renderers) => {
           const nextRenderers = { ...renderers };
@@ -42,6 +49,18 @@ export function EditorContent(props: {
           return nextRenderers;
         });
       },
+
+      /**
+       * Render a single node to a container within the React context (used by BlockNote renderToDOMSpec)
+       */
+      renderToElement(node: React.ReactNode, container: HTMLElement) {
+        flushSync(() => {
+          setSingleRenderData({ node, container });
+        });
+
+        // clear after it's been rendered to `container`
+        setSingleRenderData(undefined);
+      },
     };
     // Without queueMicrotask, custom IC / styles will give a React FlushSync error
     queueMicrotask(() => {
@@ -55,6 +74,8 @@ export function EditorContent(props: {
   return (
     <>
       <Portals renderers={renderers} />
+      {singleRenderData &&
+        createPortal(singleRenderData.node, singleRenderData.container)}
       {props.children}
     </>
   );

packages/react/src/schema/@util/ReactRenderUtil.ts

@@ -1,15 +1,30 @@
+import { BlockNoteEditor } from "@blocknote/core";
 import { flushSync } from "react-dom";
-import { createRoot } from "react-dom/client";
+import { Root, createRoot } from "react-dom/client";
 
 export function renderToDOMSpec(
-  fc: (refCB: (ref: HTMLElement | null) => void) => React.ReactNode
+  fc: (refCB: (ref: HTMLElement | null) => void) => React.ReactNode,
+  editor: BlockNoteEditor<any, any, any> | undefined
 ) {
   let contentDOM: HTMLElement | undefined;
   const div = document.createElement("div");
-  const root = createRoot(div);
-  flushSync(() => {
-    root.render(fc((el) => (contentDOM = el || undefined)));
-  });
+
+  let root: Root | undefined;
+  if (!editor) {
+    // If no editor is provided, use a temporary root.
+    // This is currently only used for Styles. In this case, react context etc. won't be available inside `fc`
+    root = createRoot(div);
+    flushSync(() => {
+      root!.render(fc((el) => (contentDOM = el || undefined)));
+    });
+  } else {
+    // Render temporarily using `EditorContent` (which is stored somewhat hacky on `editor._tiptapEditor.contentComponent`)
+    // This way React Context will still work, as `fc` will be rendered inside the existing React tree
+    editor._tiptapEditor.contentComponent.renderToElement(
+      fc((el) => (contentDOM = el || undefined)),
+      div
+    );
+  }
 
   if (!div.childElementCount) {
     // TODO
@@ -28,7 +43,7 @@ export function renderToDOMSpec(
   ) as HTMLElement | null;
   contentDOMClone?.removeAttribute("data-tmp-find");
 
-  root.unmount();
+  root?.unmount();
 
   return {
     dom,

packages/react/src/schema/ReactBlockSpec.tsx

@@ -184,19 +184,22 @@ export function createReactBlockSpec<
         node.options.domAttributes?.blockContent || {};
 
       const BlockContent = blockImplementation.render;
-      const output = renderToDOMSpec((refCB) => (
-        <BlockContentWrapper
-          blockType={block.type}
-          blockProps={block.props}
-          propSchema={blockConfig.propSchema}
-          domAttributes={blockContentDOMAttributes}>
-          <BlockContent
-            block={block as any}
-            editor={editor as any}
-            contentRef={refCB}
-          />
-        </BlockContentWrapper>
-      ));
+      const output = renderToDOMSpec(
+        (refCB) => (
+          <BlockContentWrapper
+            blockType={block.type}
+            blockProps={block.props}
+            propSchema={blockConfig.propSchema}
+            domAttributes={blockContentDOMAttributes}>
+            <BlockContent
+              block={block as any}
+              editor={editor as any}
+              contentRef={refCB}
+            />
+          </BlockContentWrapper>
+        ),
+        editor
+      );
       output.contentDOM?.setAttribute("data-editable", "");
 
       return output;
@@ -221,7 +224,7 @@ export function createReactBlockSpec<
             />
           </BlockContentWrapper>
         );
-      });
+      }, editor);
       output.contentDOM?.setAttribute("data-editable", "");
 
       return output;

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -118,9 +118,10 @@ export function createReactInlineContentSpec<
         editor.schema.styleSchema
       ) as any as InlineContentFromConfig<T, S>; // TODO: fix cast
       const Content = inlineContentImplementation.render;
-      const output = renderToDOMSpec((refCB) => (
-        <Content inlineContent={ic} contentRef={refCB} />
-      ));
+      const output = renderToDOMSpec(
+        (refCB) => <Content inlineContent={ic} contentRef={refCB} />,
+        editor
+      );
 
       return addInlineContentAttributes(
         output,

packages/react/src/schema/ReactStyleSpec.tsx

@@ -43,9 +43,10 @@ export function createReactStyleSpec<T extends StyleConfig>(
       }
 
       const Content = styleImplementation.render;
-      const renderResult = renderToDOMSpec((refCB) => (
-        <Content {...props} contentRef={refCB} />
-      ));
+      const renderResult = renderToDOMSpec(
+        (refCB) => <Content {...props} contentRef={refCB} />,
+        undefined
+      );
 
       return addStyleAttributes(
         renderResult,

packages/react/src/test/__snapshots__/nodeConversion.test.tsx.snap

@@ -1,5 +1,30 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Test React BlockNote-Prosemirror conversion > Case: custom react block schema > Convert reactContextParagraph/basic to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "React Context Paragraph",
+          "type": "text",
+        },
+      ],
+      "type": "reactContextParagraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`Test React BlockNote-Prosemirror conversion > Case: custom react block schema > Convert reactCustomParagraph/basic to/from prosemirror 1`] = `
 {
   "attrs": {

packages/react/src/test/__snapshots__/reactContextParagraph/basic/external.html

@@ -0,0 +1 @@
+<div data-editable="">React Context Paragraph</div>

packages/react/src/test/__snapshots__/reactContextParagraph/basic/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="reactContextParagraph" data-node-view-wrapper="" style="white-space: normal;"><div data-editable="">React Context Paragraph</div></div></div></div></div>

packages/react/src/test/htmlConversion.test.tsx

@@ -11,8 +11,14 @@ import {
   createInternalHTMLSerializer,
   partialBlocksToBlocksForTesting,
 } from "@blocknote/core";
+import { flushSync } from "react-dom";
+import { Root, createRoot } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { customReactBlockSchemaTestCases } from "./testCases/customReactBlocks";
+import { BlockNoteView } from "../editor/BlockNoteView";
+import {
+  TestContext,
+  customReactBlockSchemaTestCases,
+} from "./testCases/customReactBlocks";
 import { customReactInlineContentTestCases } from "./testCases/customReactInlineContent";
 import { customReactStylesTestCases } from "./testCases/customReactStyles";
 
@@ -75,15 +81,26 @@ describe("Test React HTML conversion", () => {
   for (const testCase of testCases) {
     describe("Case: " + testCase.name, () => {
       let editor: BlockNoteEditor<any, any, any>;
+      let root: Root;
       const div = document.createElement("div");
 
       beforeEach(() => {
         editor = testCase.createEditor();
-        editor.mount(div);
+
+        const el = (
+          <TestContext.Provider value={true}>
+            <BlockNoteView editor={editor} />
+          </TestContext.Provider>
+        );
+        root = createRoot(div);
+        flushSync(() => {
+          // eslint-disable-next-line testing-library/no-render-in-setup
+          root.render(el);
+        });
       });
 
       afterEach(() => {
-        editor.mount(undefined);
+        root.unmount();
         editor._tiptapEditor.destroy();
         editor = undefined as any;
 

packages/react/src/test/nodeConversion.test.tsx

@@ -8,6 +8,9 @@ import {
   nodeToBlock,
   partialBlockToBlockForTesting,
 } from "@blocknote/core";
+import { flushSync } from "react-dom";
+import { Root, createRoot } from "react-dom/client";
+import { BlockNoteView } from "../editor/BlockNoteView";
 import { customReactBlockSchemaTestCases } from "./testCases/customReactBlocks";
 import { customReactInlineContentTestCases } from "./testCases/customReactInlineContent";
 import { customReactStylesTestCases } from "./testCases/customReactStyles";
@@ -59,15 +62,22 @@ describe("Test React BlockNote-Prosemirror conversion", () => {
   for (const testCase of testCases) {
     describe("Case: " + testCase.name, () => {
       let editor: BlockNoteEditor<any, any, any>;
+      let root: Root;
       const div = document.createElement("div");
 
       beforeEach(() => {
         editor = testCase.createEditor();
-        editor.mount(div);
+
+        const el = <BlockNoteView editor={editor} />;
+        root = createRoot(div);
+        flushSync(() => {
+          // eslint-disable-next-line testing-library/no-render-in-setup
+          root.render(el);
+        });
       });
 
       afterEach(() => {
-        editor.mount(undefined);
+        root.unmount();
         editor._tiptapEditor.destroy();
         editor = undefined as any;
 

packages/react/src/test/testCases/customReactBlocks.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext } from "react";
 import {
   BlockNoteEditor,
   BlockNoteSchema,
@@ -39,11 +40,34 @@ const SimpleReactCustomParagraph = createReactBlockSpec(
   }
 );
 
+export const TestContext = createContext<true | undefined>(undefined);
+
+const ReactContextParagraphComponent = (props: any) => {
+  const testData = useContext(TestContext);
+  if (testData === undefined) {
+    throw Error();
+  }
+
+  return <div ref={props.contentRef} />;
+};
+
+const ReactContextParagraph = createReactBlockSpec(
+  {
+    type: "reactContextParagraph",
+    propSchema: defaultProps,
+    content: "inline",
+  },
+  {
+    render: ReactContextParagraphComponent,
+  }
+);
+
 const schema = BlockNoteSchema.create({
   blockSpecs: {
     ...defaultBlockSpecs,
     reactCustomParagraph: ReactCustomParagraph,
     simpleReactCustomParagraph: SimpleReactCustomParagraph,
+    reactContextParagraph: ReactContextParagraph,
   },
 });
 
@@ -200,5 +224,14 @@ export const customReactBlockSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "reactContextParagraph/basic",
+      blocks: [
+        {
+          type: "reactContextParagraph",
+          content: "React Context Paragraph",
+        },
+      ],
+    },
   ],
 };

packages/react/vitestSetup.ts

@@ -32,4 +32,28 @@ class DragEventMock extends Event {
     },
   };
 }
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {
+      //
+    }, // Deprecated
+    removeListener: () => {
+      //
+    }, // Deprecated
+    addEventListener: () => {
+      //
+    },
+    removeEventListener: () => {
+      //
+    },
+    dispatchEvent: () => {
+      //
+    },
+  }),
+});
+
 (global as any).DragEvent = DragEventMock;