Adding toExternalHTML to ReactCustomInlineContentImplementation

[mbresson]

Why

Currently, for custom block types, it is possible to implement toExternalHTML as part of their ReactCustomBlockImplementation, so that the HTML can be output to e.g. a custom tag (e.g. a <video> tag for a custom Video block). This is useful especially when parsing back this HTML to blocks, thanks to the parse function.

However, we do not have the same ability for custom inline content. Let’s say that we have a Mention custom inline content (as in the docs 🙂) then when BlockNoteJS exports this to HTML, it uses its render method, which can be inconvenient.
A good example is when you want the HTML to be parsed or reused by other tools, it would be nice, in the example of our Mention inline content, to be able to export it to a <span class="mention" user="steve"></span>.

Ideal solution

Example with the Mention inline content from the docs:

export const Mention = createReactInlineContentSpec(
  {
    type: "mention",
    propSchema: {
      user: {
        default: "Unknown",
      },
    },
    content: "none",
  },
  {
    render: (props) => (
      <span style={{ backgroundColor: "#8400ff33" }}>
        @{props.inlineContent.props.user}
      </span>
    ),
    toExternalHTML: (props) => (
      <span className="mention" user={props.user}></span>
    ),
  }
);

Thanks!

[YousefED]

Thanks for the input - it's on our radar to review and improve this - likely this summer