feat: Versioning & suggesting changes example

[matthewlipski]

Summary

This PR adds an example which combines all available collaboration features, including comments, versioning, and suggesting changes.

There's a sidebar that can show the comments or saved version snapshots. The snapshots can be previewed, renamed and reverted. Reverting a snapshot also creates a backup snapshot just before the revert, and one just after.

If the sidebar is displaying comments, then clicking a comment in the editor will scroll to and select the comment in the sidebar (works vice-versa when clicking a comment in the sidebar). Otherwise, the floating comment viewer will be used.

Aside from being able to change users for editing/commenting rights, you can also change the editing mode from regular editing to suggesting changes. Suggested additions and removals are highlighted in green and red, and can be either individually applied/reverted or all at once.

Rationale

This is a nice showcase of everything collaboration related that BlockNote has to offer, and is useful for testing those features.

Changes

• Added example
• Added versioning and suggestions extensions
• Added versioning sidebar component
• Added example versioning backend implementation that uses local storage
• Made slight improvements to link toolbar behaviour

Impact

N/A

Testing

Did a decent amount of manual testing but there might still be some rough edges I haven't found, especially using the 3 different features together.

Screenshots/Video

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

TODOs:

• Replace versioning and suggestions extension logic with new Yjs code from @nperez0111.
• Fix bug where add comment button in the formatting toolbar doesn't show for users with only commenting rights.
• Fix bug where comments are removed after saving a snapshot and then reloading the page.
• Fix bug where hovering between adjacent additions and removals with the same ID causes weird behaviour.
  • The current suggestions implementation uses the @handlewithcare/prosemirror-suggest-changes package, which is ID based. This bug should be fixed after moving to the new Yjs implementation, but should be double checked.
• For suggestions, withSuggestChanges is applied to dispatch in the BlockNoteEditor constructor. It should really be in the suggestions extension mount method, but I couldn't get this to work.
  • Should be redundant after moving to the new Yjs implementation.
• Maybe move link toolbar improvements to a separate PR.
  • These improvements fix a bug where if a link is at the start of a block, hovering text in the same block will select it in the LinkToolbarController component. This is because hovering a text node in the block, the mouse event target will point to the parent .bn-inline-content rather than the text node itself. Therefore, posAtDOM resolves to a position at the start of the block's inline content, which is also the start of the link. Using posAtCoords and using the mouse coords fixes this.
• Add screenshots/videos to PR description.
• @nperez0111 needs to re-think the versioning API, to better support using Y.js snapshots vs. full-doc snapshots. See the re-think-snapshot branch for more thoughts
• @nperez0111 needs to come up with a migration strategy for going from y.js 13 to 14

[vercel]

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

Project	Deployment	Review	Updated (UTC)
blocknote	Ready	Preview	Dec 23, 2025 6:06pm
blocknote-website	Ready	Preview	Dec 23, 2025 6:06pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2312

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2312

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2312

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2312

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2312

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2312

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2312

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2312

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2312

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2312

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2312

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2312

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2312

commit: af6bf06

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2312

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2312

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2312

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2312

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2312

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2312

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2312

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2312

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2312

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2312

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2312

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2312

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2312

commit: 9d36465