feat: Custom block serialization

[matthewlipski]

This PR fixes how custom blocks are converted into HTML by implementing a custom DOMSerializer. The custom DOMSerializer allows us to use the HTML rendered by a custom block to the editor using its render function also when copying or exporting HTML. Alternatively, consumers can implement a serialize function for their custom blocks, which lets them override how the HTML conversion is done when exporting and copying to clipboard.

The PR also adds a new method for converting the HTML rendered by BlockNote, which includes many div elements for structuring the document, to HTML that more closely complies with the spec (removes structuring divs, wraps list elements in ul/ol elements, and removes non-list-item nesting). This method is called cleanHTML, but its implementation is basically the same as the old blocksToHTML. There is also a new markdown method which converts "clean" HTML to Markdown, similarly to the old blocksToMarkdown.

In addition, copying and pasting content within BlockNote is improved. Now, BlockNote will attempt to read blocknote/html from the clipboard when pasting content, otherwise it will use text/html or text/plain. Copying from BlockNote will write the selected content to the clipboard in the following formats:

• text/plain: Markdown
• text/html: "clean" HTML
• blocknote/html: "structured" HTML

Since other editors & paste areas will generally read from text/plain or text/html, this ensures interoperability when copying content from BlockNote.

TODOs:

• Implement custom DOMSerializer which uses a block's render function to serialize it, if the block has one (i.e. if it's a custom block).
• Allow consumers to override the render function when serializing to export or clipboard.
• Implement functions to convert a "structured" HTML string to "clean" HTML, and "clean" HTML to Markdown.
• Write unit tests to ensure the custom DOMSerializer works with both default and custom blocks (just image for now).
• Write unit tests to ensure "structured" HTML is converted to "clean" HTML correctly.
• Write unit tests to ensure that overriding a block's render function when exporting and copying works.
• Handle copy/paste in the editor to read content from & write content to the correct formats on the clipboard.
• Ensure copy/paste handling works in Firefox and Safari.
• Ensure the "clean" HTML is sanitized from unnecessary classes & attributes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocknote-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 29, 2023 10:39am

[YousefED]

Quite nice!!

• Can you look into unit tests (not e2e) for the different scenarios (e.g.: vanilla / react, with / without inlinecontent, with / without children). We worked on these earlier, right?
• Can we use this for markdown and html serialization as well (besides just copy to clipboard)?
• What about parsing?