Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
nperez0111
reviewed
Feb 27, 2025
packages/react/src/components/Comments/FloatingComposerController.tsx
Outdated
Show resolved
Hide resolved
nperez0111
reviewed
Feb 27, 2025
Comment on lines
+60
to
+74
| // Positioning with [data-bn-thread-id] attribute is a bit hacky, | ||
| // we could probably also use the thread position from the plugin state? | ||
| // for now, this works ok | ||
| const updateRef = useCallback(() => { | ||
| if (!state?.selectedThreadId) { | ||
| return; | ||
| } | ||
|
|
||
| const el = editor.domElement?.querySelector( | ||
| `[data-bn-thread-id="${state?.selectedThreadId}"]` | ||
| ); | ||
| if (el) { | ||
| setReference(el); | ||
| } | ||
| }, [setReference, editor, state?.selectedThreadId]); |
Contributor
There was a problem hiding this comment.
Definitely strange, I don't quite understand how this all works
Collaborator
There was a problem hiding this comment.
@YousefED can you explain what's happening here? Seems a bit hacky to use querySelector
nperez0111
reviewed
Feb 27, 2025
Comment on lines
+34
to
+63
| const handleFocusIn = (event: FocusEvent) => { | ||
| if (!focusedRef.current) { | ||
| _setFocused(true); | ||
| onFocus?.(event); | ||
| } | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| const handleFocusOut = (event: FocusEvent) => { | ||
| if (focusedRef.current && !containsRelatedTarget(event)) { | ||
| _setFocused(false); | ||
| onBlur?.(event); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const node = ref.current; | ||
|
|
||
| if (node) { | ||
| node.addEventListener("focusin", handleFocusIn); | ||
| node.addEventListener("focusout", handleFocusOut); | ||
|
|
||
| return () => { | ||
| node?.removeEventListener("focusin", handleFocusIn); | ||
| node?.removeEventListener("focusout", handleFocusOut); | ||
| }; | ||
| } | ||
|
|
||
| return undefined; | ||
| }, [handleFocusIn, handleFocusOut]); |
Contributor
There was a problem hiding this comment.
I know this was copied over, but just wanted to say that this is strangely wasteful, it constantly adds and removes the event listeners when it doesn't need to
This reverts commit a647ec3.
# Conflicts: # docs/pages/docs/editor-basics/setup.mdx # package-lock.json # packages/core/src/editor/BlockNoteEditor.ts # packages/react/package.json
YousefED
commented
Mar 3, 2025
YousefED
commented
Mar 3, 2025
Collaborator
Author
There was a problem hiding this comment.
why not use a getter / setter for this? (like we do for "isEditable")?
| } | ||
|
|
||
| const comments = editor.comments; | ||
| useEffect(() => { |
Collaborator
Author
There was a problem hiding this comment.
was this a code style preference to go from:
useEffect(() => {
editor.ForceSelectionVisible = !!state?.pendingComment;
}, [editor, state?.pendingComment]);
to
useEffect(() => {
comments.onUpdate((state) =>
editor.setForceSelectionVisible(state.pendingComment)
);
}, [comments, editor]);
or does it solve a bug?
In any case, we're not unsubscribing from onUpdate so that would need to be fixed I think
|
|
||
| await page.waitForTimeout(500); | ||
| expect(await page.screenshot()).toMatchSnapshot("dark-link-toolbar.png"); | ||
| // expect(await page.screenshot()).toMatchSnapshot("dark-link-toolbar.png"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💖 This feature is sponsored by DINUM 🇫🇷 and ZenDiS 🇩🇪
This PR adds comments to BlockNote!
See docs
ThreadStores
YjsThreadStore
The YjsThreadStore provides direct Yjs-based storage for comments, storing thread data directly in the Yjs document. This implementation is ideal for simple collaborative setups where all users have write access to the document.
The downside of this is that comments require a more advanced permission model than text documents, and Yjs doesn't provide a straightforward way to secure document updates.
RESTYjsThreadStore
The RESTYjsThreadStore combines Yjs storage with a REST API backend, providing secure comment management while maintaining real-time collaboration. This implementation is ideal when you have strong authentication requirements, but is a little more work to set up.
In this implementation, data is written to the Yjs document via a REST API which can handle access control. Data is still retrieved from the Yjs document directly (after it's been updated by the REST API), this way all comment information automatically syncs between clients using the existing collaboration provider.
We created a separate repository with an example server.
TipTap
We integrate directly with the TiptapCollabProvider with
TiptapThreadStore.LiveBlocks (later)
The UI Components are roughly based on the LiveBlocks open source components. LiveBlocks users will have two different ways to use LiveBlocks:
TODO
TBD:
Yjs next steps
To fix later
Important:
Nice to haves:
closes #695
closes #1109
closes #1148
closes #703
closes #1200