Open bigfly0416 opened 1 week ago
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
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
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.
I get some more info: I found a repo blocknote-mermaid has the same issue, look the follow video
https://github.com/TypeCellOS/BlockNote/assets/108911591/8352922f-4905-4e8c-80dd-9761024993c9
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.
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
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:
I expect the runtime effect to be as shown in the following image:
To Reproduce here is demo
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