wip: feat: comments #1376
wip: feat: comments #1376
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| text={reaction.usersIds.length.toString()} | ||
| icon={reaction.emoji} | ||
| isSelected={ | ||
| user && reaction.usersIds.includes(user.id) |
There was a problem hiding this comment.
TODO: user is the author of the comment, not the logged in user
| @@ -157,8 +157,14 @@ function BlockNoteViewComponent< | |||
| const mount = useCallback( | |||
| (element: HTMLElement | null) => { | |||
| editor.mount(element, portalManager); | |||
|
|
|||
| // Since we mount the editor ourselves, we also have to manually | |||
There was a problem hiding this comment.
why is this? shouldn't this automatically work if the contenteditable has an autofocus attribute?
| @@ -126,6 +128,9 @@ export const getBlockNoteExtensions = < | |||
|
|
|||
| ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin(); | |||
|
|
|||
| // TODO | |||
There was a problem hiding this comment.
todo, make optional / external?
| @@ -244,6 +251,7 @@ const getTipTapExtensions = < | |||
| ...(opts.trailingBlock === undefined || opts.trailingBlock | |||
| ? [TrailingNode] | |||
| : []), | |||
| CommentMark, | |||
There was a problem hiding this comment.
todo, only if comments are enabled?
| @@ -0,0 +1,278 @@ | |||
| import { Node } from "prosemirror-model"; | |||
There was a problem hiding this comment.
TODO: review + document
| @@ -0,0 +1,48 @@ | |||
| import { EventEmitter } from "../../../util/EventEmitter.js"; | |||
| import { User } from "../types.js"; | |||
| export class UserStore<U extends User> extends EventEmitter<any> { | |||
There was a problem hiding this comment.
todo: document and review
| import { BlockNoteEditor, ThreadData } from "@blocknote/core"; | ||
| import { useCallback, useRef, useSyncExternalStore } from "react"; | ||
|
|
||
| export function useThreadStore(editor: BlockNoteEditor<any, any, any>) { |
There was a problem hiding this comment.
todo, discuss with Nick
| @@ -0,0 +1,8 @@ | |||
| import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core"; | |||
|
|
|||
| // TODO: disable props on paragraph | |||
There was a problem hiding this comment.
todo: trim down further and decide if we want multi-line (multi-block) comments
| return useUsers(editor, [userId]).get(userId); | ||
| } | ||
|
|
||
| export function useUsers( |
There was a problem hiding this comment.
todo: document and review with Nick
| </> | ||
| ); | ||
| }; | ||
| export function getInstance() { |
There was a problem hiding this comment.
TODO: review new mounting system with nick
First POC of native comments in BlockNote.
Providers
YjsThreadStore
We store thread / comment information directly in yjs so it can be easily integrate with existing sync / storage mechanisms. The downside of this is that comments require a more advanced permission model than text documents; so we need to provide a workaround for this and clearly explain the pros / cons. Of course, users can always implement their own (e.g.: REST-based) ThreadStore with more advanced permissions built-in.
TODO:
LiveBlocks
The UI Components are roughly based on the LiveBlocks open source components. LiveBlocks users will have two different ways to use LiveBlocks:
TODO:
TipTap
We can probably integrate directly with the TiptapCollabProvider
TODO:
UX TODOs
Misc
TODO: