The program crashes when the cursor hovers over a custom block.

[bigfly0416]

In simple terms, I created a custom Mermaid block, but the program crashes when the mouse cursor passes over its middle section. In the console, I receive the following error message:

SideMenuPlugin.ts:568 Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at bn.update (SideMenuPlugin.ts:568:43)
    at EditorView.updatePluginViews (index.js:5407:32)
    at EditorView.updateStateInner (index.js:5354:14)
    at EditorView.updateState (index.js:5282:14)
    at Wn.dispatchTransaction (Editor.ts:368:15)
    at EditorView.dispatch (index.js:5637:33)
    at updateSelection (index.js:3145:10)
    at selectClickedLeaf (index.js:3152:9)
    at handleSingleClick (index.js:3186:57)
    at MouseDown.up (index.js:3327:18)

I expect the runtime effect to be as shown in the following image:

** To Reproduce **
here is demo

1. Following the tutorial, created a custom Mermaid block.
2. Add custom block schema to editor
3. Start programe open in the broswer
4. Resize broswer to 1024*768
5. Add the custom mermaid block in the editor
6. Use the cursor moves over the block, from top to bottom
7. Finally can get the error info

Unfortunately, as a backend programmer, I'm unable to provide more detailed information about the issue. However, I speculate that the issue might stem from modifications to the DOM elements during the Mermaid rendering process, which could be causing problems with the mouse event triggers. i do not sure...

Misc

• Node version: v20.12.1
• Package manager:
  npm: v20.12.1
• Browser:
  edge
  chrome
  safari

[Munna5553]

import { BlockNoteEditor, PartialBlock } from "@blocknote/core";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine"
import "@blocknote/mantine/style.css";

interface editorProps {
initialContent?: string;
editable?: boolean;
}

const TextEditor: React.FC = ({ initialContent, editable }) => {

const editor = useCreateBlockNote({
    initialContent: initialContent ? (JSON.parse(initialContent) as PartialBlock[]) : undefined,
}) as BlockNoteEditor;

return (
    <BlockNoteView
        onChange={() => { console.log(JSON.stringify(editor.domElement.innerHTML)) }}
        editor={editor}
        editable={editable}
        theme={"light"}
    />
)

}

export default TextEditor;

use this code i work now, but still one issue is that.
if you are call/use this component how to get the value from this

[bigfly0416]

import { BlockNoteEditor, PartialBlock } from "@blocknote/core"; import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine" import "@blocknote/mantine/style.css";

interface editorProps { initialContent?: string; editable?: boolean; }

const TextEditor: React.FC = ({ initialContent, editable }) => {

const editor = useCreateBlockNote({
    initialContent: initialContent ? (JSON.parse(initialContent) as PartialBlock[]) : undefined,
}) as BlockNoteEditor;

return (
    <BlockNoteView
        onChange={() => { console.log(JSON.stringify(editor.domElement.innerHTML)) }}
        editor={editor}
        editable={editable}
        theme={"light"}
    />
)

}

export default TextEditor;

use this code i work now, but still one issue is that. if you are call/use this component how to get the value from this

sorry， perhaps the question you answered is unrelated to this issue.

[bigfly0416]

I get some more info:
I found a repo blocknote-mermaid has the same issue, look the follow video

Kapture.2024-06-26.at.16.16.02.mp4

It looks like an exception happens when trying to get the block information as the cursor goes over it, leading to the block variable being undefined.

[mfanselmo]

Hey! Subscribing into this issue. I am having the same problem with a custom block. Tomorrow I will investigate more and see if I can give more information