Fixed React custom block interactivity not working & added tests

Author: matthewlipski

packages/react/src/schema/ReactBlockSpec.tsx

@@ -7,12 +7,14 @@ import {
   BlockSpec,
   camelToDataKebab,
   CustomBlockImplementation,
+  getBlockFromPos,
   inheritedProps,
   mergeCSSClasses,
   Props,
   PropSchema,
 } from "@blocknote/core";
 import {
+  NodeViewProps,
   NodeViewWrapper,
   ReactNodeViewRenderer,
   useReactNodeView,
@@ -192,7 +194,19 @@ export function createReactBlockSpec<
         render(block, editor) {
           if (this.renderType === "nodeView") {
             return ReactNodeViewRenderer(
-              () => {
+              (props: NodeViewProps) => {
+                // Vanilla JS node views are recreated on each update. However,
+                // using `ReactNodeViewRenderer` makes it so the node view is
+                // only created once, so the block we get in the node view will
+                // be outdated. Therefore, we have to get the block in the
+                // `ReactNodeViewRenderer` instead.
+                const block = getBlockFromPos(
+                  props.getPos,
+                  editor,
+                  props.editor,
+                  blockConfig.type,
+                );
+
                 const ref = useReactNodeView().nodeViewContentRef;
 
                 if (!ref) {

tests/src/end-to-end/customblocks/customblocks.test.ts

@@ -0,0 +1,41 @@
+import { expect } from "@playwright/test";
+import { test } from "../../setup/setupScript.js";
+import {
+  CUSTOM_BLOCKS_REACT_URL,
+  CUSTOM_BLOCKS_VANILLA_URL,
+} from "../../utils/const.js";
+import { compareDocToSnapshot } from "../../utils/editor.js";
+
+test.describe("Check custom block functionality", () => {
+  test("Should be able to interactively update vanilla custom blocks", async ({
+    page,
+  }) => {
+    await page.goto(CUSTOM_BLOCKS_VANILLA_URL);
+
+    await page.waitForTimeout(500);
+    await page.locator("select").click();
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Enter");
+    await page.waitForTimeout(500);
+
+    await compareDocToSnapshot(page, "vanillaInteractivity");
+    expect(await page.screenshot()).toMatchSnapshot(
+      "vanilla-interactivity.png",
+    );
+  });
+
+  test("Should be able to interactively update React custom blocks", async ({
+    page,
+  }) => {
+    await page.goto(CUSTOM_BLOCKS_REACT_URL);
+
+    await page.waitForTimeout(500);
+    await page.locator("select").click();
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Enter");
+    await page.waitForTimeout(500);
+
+    await compareDocToSnapshot(page, "reactInteractivity");
+    expect(await page.screenshot()).toMatchSnapshot("react-interactivity.png");
+  });
+});

tests/src/utils/const.ts

@@ -15,6 +15,14 @@ export const STATIC_URL = !process.env.RUN_IN_DOCKER
   ? `http://localhost:${PORT}/backend/rendering-static-documents?hideMenu`
   : `http://host.docker.internal:${PORT}/backend/rendering-static-documents?hideMenu`;
 
+export const CUSTOM_BLOCKS_VANILLA_URL = !process.env.RUN_IN_DOCKER
+  ? `http://localhost:${PORT}/vanilla-js/react-vanilla-custom-blocks`
+  : `http://host.docker.internal:${PORT}/vanilla-js/react-vanilla-custom-blocks`;
+
+export const CUSTOM_BLOCKS_REACT_URL = !process.env.RUN_IN_DOCKER
+  ? `http://localhost:${PORT}/custom-schema/react-custom-blocks`
+  : `http://host.docker.internal:${PORT}/custom-schema/react-custom-blocks`;
+
 export const PASTE_ZONE_SELECTOR = "#pasteZone";
 
 export const EDITOR_SELECTOR = `.bn-editor`;