Skip to content

Custom block parse #2076

@hackntest

Description

@hackntest

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions