fix: Visual differences between live editor and rendered exported HTML
Summary
This PR fixes some visual & DOM inconsistencies between the rendered HTML from a live editor, and the rendered static HTML from exporting blocks.
These differences come mostly from plugins/extensions that use decorations not running when doing an export, as well as a few other fixes due to the HTML being static.
Rationale
One of the use cases of BlockNote is writing content in the editor, taking advantage of its UX and formatting, then exporting that content to HTML so it can be displayed read-only without requiring an editor instance.
However, this is only useful if the static HTML output closely matches what a user sees when editing content in BlockNote.
Changes
- Fixed alignment issue with check list items.
- Added
transformstocreateInternalHTMLSerializer. These are functions which modify the HTML element created from exporting blocks. SeeinternalHTMLSerializer.tsfor more info. - Added example with a live editor to its exported & rendered static HTML side-by-side.
- Added example with the blocks from the Default Schema Showcase example exported to static HTML & rendered (for e2e testing).
Impact
N/A
Testing
An e2e test has been added which tests that the Default Schema Showcase example page is visually identical to the new Rendering HTML Converted From Blocks example page.
Screenshots/Video
N/A
Checklist
- [X] Code follows the project's coding standards.
- [X] Unit tests covering the new feature have been added.
- [X] All existing tests pass.
- [X] The documentation has been updated to reflect the new feature