feat: Versioning & suggesting changes example
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
- [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
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-changespackage, which is ID based. This bug should be fixed after moving to the new Yjs implementation, but should be double checked.
- The current suggestions implementation uses the
- [x] For suggestions,
withSuggestChangesis applied todispatchin theBlockNoteEditorconstructor. It should really be in the suggestions extensionmountmethod, 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
LinkToolbarControllercomponent. This is because hovering a text node in the block, the mouse event target will point to the parent.bn-inline-contentrather than the text node itself. Therefore,posAtDOMresolves to a position at the start of the block's inline content, which is also the start of the link. UsingposAtCoordsand using the mouse coords fixes this.
- 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
- [ ] 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-snapshotbranch for more thoughts - [ ] @nperez0111 needs to come up with a migration strategy for going from y.js 13 to 14