fix: Improper accessing of editor DOM element (#2234)

Co-authored-by: yousefed <yousefdardiry@gmail.com>

Author: matthewlipski

packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts

@@ -160,7 +160,7 @@ export async function handleFileInsertion<
 
         insertedBlockId = editor.transact((tr) => {
           const posInfo = getNearestBlockPos(tr.doc, pos.pos);
-          const blockElement = editor.prosemirrorView.dom.querySelector(
+          const blockElement = editor.domElement?.querySelector(
             `[data-id="${posInfo.node.attrs.id}"]`,
           );
 

packages/core/src/editor/BlockNoteEditor.ts

@@ -777,7 +777,7 @@ export class BlockNoteEditor<
     if (this.headless) {
       return;
     }
-    this.prosemirrorView.dom.blur();
+    this.domElement?.blur();
   }
 
   // TODO move to extension

packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx

@@ -94,12 +94,12 @@ export const CreateLinkButton = () => {
       }
     };
 
-    editor.prosemirrorView.dom.addEventListener("keydown", callback);
+    editor.domElement?.addEventListener("keydown", callback);
 
     return () => {
-      editor.prosemirrorView.dom.removeEventListener("keydown", callback);
+      editor.domElement?.removeEventListener("keydown", callback);
     };
-  }, [editor.prosemirrorView, editor.headless]);
+  }, [editor.domElement]);
 
   if (state === undefined) {
     return null;

tests/src/unit/react/BlockNoteViewRemount.test.tsx

@@ -0,0 +1,72 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { FormattingToolbar } from "@blocknote/react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+describe("FormattingToolbar unmount", () => {
+  let div: HTMLDivElement;
+
+  beforeEach(() => {
+    div = document.createElement("div");
+    document.body.appendChild(div);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(div);
+  });
+
+  it("should not throw error when unmounting editor with FormattingToolbar", () => {
+    const editor = BlockNoteEditor.create();
+
+    const root = createRoot(div);
+
+    // Mount the editor with FormattingToolbar
+    // This will cause CreateLinkButton to mount and register its event listeners
+    flushSync(() => {
+      root.render(
+        <BlockNoteView editor={editor}>
+          <FormattingToolbar />
+        </BlockNoteView>,
+      );
+    });
+
+    // Unmount should not throw error
+    // Before the fix in commit 17bff6362, this would throw:
+    // "Cannot read properties of undefined (reading 'removeEventListener')"
+    // because CreateLinkButton's useEffect cleanup tries to  access
+    // editor.prosemirrorView.dom.removeEventListener()
+    // but prosemirrorView.dom is undefined when the editor is being destroyed
+    expect(() => {
+      root.unmount();
+    }).not.toThrow();
+
+    // Cleanup
+    editor._tiptapEditor.destroy();
+  });
+
+  it("should handle rapid mount/unmount cycles", () => {
+    // Test multiple mount/unmount cycles
+    for (let i = 0; i < 3; i++) {
+      const editor = BlockNoteEditor.create();
+      const root = createRoot(div);
+
+      flushSync(() => {
+        root.render(
+          <BlockNoteView editor={editor}>
+            <FormattingToolbar />
+          </BlockNoteView>,
+        );
+      });
+
+      // Should not throw on unmount
+      expect(() => {
+        root.unmount();
+      }).not.toThrow();
+
+      editor._tiptapEditor.destroy();
+    }
+  });
+});

tests/vite.config.ts

@@ -1,13 +1,12 @@
 import * as path from "path";
 import { defineConfig } from "vite";
-import eslintPlugin from "vite-plugin-eslint";
 
 // https://vitejs.dev/config/
 export default defineConfig((conf) => ({
   test: {
     environment: "jsdom",
     setupFiles: ["./vitestSetup.ts"],
-    include: ["./src/unit/**/*.test.ts"],
+    include: ["./src/unit/**/*.test.ts", "./src/unit/**/*.test.tsx"],
   },
   resolve: {
     alias:

tests/vitestSetup.ts

@@ -33,3 +33,18 @@ class DragEventMock extends Event {
   };
 }
 (global as any).DragEvent = DragEventMock;
+
+// Mock matchMedia for Mantine
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => {},
+  }),
+});