-
-
Notifications
You must be signed in to change notification settings - Fork 683
Description
I would like to understand the parse callback of ReactCustomBlockImplementation, because the documentation barely mentions it, and no examples use it. The documentation states that its purpose is to parse HTML into a custom block when pasting from the clipboard, or, in my case, to parse markdown with custom formatting into a custom block. The parsing works, and the block is correctly rendered. However, drag and drop stop working correctly, and when the view is unmounted and remounted (I added a full-screen mode to my editor that displays the view in a modal), it crashes.
Also, I noticed that the parse callback is called during drag and drop and receives the dragged Blocknote HTML element, which was unexpected. So I would like to understand better how this parse callback is supposed to be used.
For reference, I'm trying to build a custom block that renders basic sanitized HTML (I'm dealing with editing a legacy GFM markdown + html + custom tags), so for now, I'm trying just to parse divs:
import { defaultProps } from "@blocknote/core";
import { createReactBlockSpec } from "@blocknote/react";
export const createHtmlBlock = createReactBlockSpec(
{
type: "htmlblock",
propSchema: {
...defaultProps,
html: { type: "string", default: "" },
} as const,
content: "none",
},
{
render: (props) => {
return <div
dangerouslySetInnerHTML={{ __html: props.block.props.html }}
/>
},
parse: (node) => {
if (!node.className.includes("bn-block") && node.tagName === "DIV") {
return {
html: node.outerHTML,
};
}
},
toExternalHTML: (props) => {
return props.block.props.html;
}
}
);I'm using v0.40.0 with Mantine