BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

fix: Visual differences between live editor and rendered exported HTML

Open matthewlipski opened this issue 1 month ago • 3 comments

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 transforms to createInternalHTMLSerializer. These are functions which modify the HTML element created from exporting blocks. See internalHTMLSerializer.ts for 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

Additional Notes

matthewlipski avatar Jan 13 '26 20:01 matthewlipski