Y prosemirror v14 visualization fixes

[YousefED]

Improve suggestion (track-changes) diff rendering for y-prosemirror v14

Summary

Improves how BlockNote renders suggestion / track-changes diffs under the y-prosemirror v14 attribution system, and substantially expands the y-prosemirror visual test suite.

Previously, deleted blocks always showed a "DELETED" badge + author-color highlight regardless of content; several CSS chains broke when content was wrapped in suggestion marks (headings lost their level, list markers disappeared); and concurrent suggestions all rendered in a single color. This addresses all of those.

Rendering changes (packages/core/src/editor/Block.css)

Deletions are now decided per block, by content type:

• Blocks with inline content (paragraph, heading, list item, quote, code) → text struck through in the author's color.
• Blocks with no inline content (image, file, divider, table) → a padded, rounded "Deleted" card in the author's color. Media (image/video/audio/file) hugs its content; width-less blocks (divider) stay full width.
• Table cells → cell text struck through instead of the badge (a <tr>/<td> can't host the card).

Fixed CSS chains broken by suggestion-mark wrappers:

• paragraph → heading diffs now render the heading at the correct level.
• bullet/numbered list markers render again on suggestion-wrapped list items.

Insertions use the same per-block treatment: non-inline inserts (e.g. an inserted image) get the author-color card; inline inserts keep only their inline text highlight (no redundant block-level band).

Care was taken to keep anything layout-hazardous off the shared .bn-block-content — width: fit-content is gated on the media wrapper (:has(> .bn-file-block-content-wrapper)), so width-less blocks can't collapse.

Test changes (tests/src/end-to-end/y-prosemirror/)

• Expanded addRemoveBlocks with new scenarios: insert/delete image, delete divider / code block / mixed parent (paragraph + image), nested lists, colored blocks, etc.
• Re-enabled the type-change tests (typeChanges, nesting): the assertions checked the wrong document index — in suggestion mode a type change keeps the original as a deletion and inserts the new block, so the new type lives at document[1], not [0].
• Multi-user colors in concurrent tests: added an in-memory attribution store to concurrentSuggestionFixture (the local stand-in for YHub's server-side attribution). It records each transaction's author and feeds the DiffAttributionManager, so User A's and User B's changes render in distinct colors — including in the merged view.
• Regenerated 36 visual baselines.

Known limitations / follow-ups

• Baselines are chromium-only — firefox/webkit need a full 3-browser run / CI.
• One concurrent table case (A deletes a row, B adds a column) is kept test.fails: it intermittently crashes the merge with a yjs Unexpected case. Documented as a flaky, not-yet-pinned-down crash, with prosemirror-tables' fixTables as the leading (unconfirmed) suspect.
• Nested-bullet depth glyphs (•/◦/▪) still render as • at every level (TODO: needs a JS-computed data-bullet-level — the marker chains can't be fixed in CSS through the wrappers).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Jun 30, 2026 2:10pm
blocknote-website	Ready	Preview	Jun 30, 2026 2:10pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 56026868-6102-4cc1-86a4-d04fd2cb7d01

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch y-prosemirror-v14-visualization-fixes

---

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.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2875

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2875

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2875

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2875

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2875

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2875

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2875

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2875

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2875

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2875

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2875

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2875

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2875

commit: 26da98b