feat: Placeholder DOM elements

[matthewlipski]

Summary

Currently, DOM elements are rendered as CSS pseudo elements. This is a problem for a11y accessibility testing as we cannot use an axe-core scan to check its contrast. This is because axe only checks contrast for DOM elements. Therefore, this PR changes the implementation to use real DOM elements for placeholders.

This comes with a performance overhead. A script has been added in this PR which benchmarks the render time between the old & new implementations, using a document of 1000 empty paragraphs and 1000 empty list items. It measures the initial render times, as well as re-renders on selection and content changes. The table below shows the performance overhead tested locally.

Document	Operation	Old	New
Paragraphs	Initial render	32.80 ms	32.55 ms
Paragraphs	Selection change	1.30 ms	1.60 ms
Paragraphs	Content change	1.75 ms	2.00 ms
List items	Initial render	50.25 ms	68.95 ms
List items	Selection change	1.20 ms	2.70 ms
List items	Content change	1.95 ms	4.00 ms

The alternative solution to this problem is to have additional contrast check tests just for placeholders. To be honest, both that solution and the one in this PR don't seem the cleanest, so I would appreciate feedback r.e. this.

This PR is currently more of an experimental change as I'm unsure whether we want this.

Rationale

TODO

Changes

TODO

Impact

TODO

Testing

TODO

Screenshots/Video

TODO

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

TODO

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
blocknote	Ready	Preview	Oct 19, 2026 5:21pm UTC
blocknote-website	Ready	Preview	Oct 19, 2026 5:21pm UTC

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[YousefED]

I think (had a quick look), you should be able to keep the old code, but change Decoration.node into Decoration.widget (in the right position)?

Your performance regression is likely that the new version loops the document (doc.descendents). From a quick look, I don't understand why all the code needed to change and not just the decoration type