diff --git a/docs/content/docs/features/collaboration/comments.mdx b/docs/content/docs/features/collaboration/comments.mdx index 8b168d888a..3b7cfa9035 100644 --- a/docs/content/docs/features/collaboration/comments.mdx +++ b/docs/content/docs/features/collaboration/comments.mdx @@ -13,6 +13,7 @@ To enable comments in your editor, you need to: - provide a `resolveUsers` so BlockNote can retrieve and display user information (names and avatars). - provide a `ThreadStore` so BlockNote can store and retrieve comment threads. - enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) +- optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. ```tsx const editor = useCreateBlockNote({ @@ -21,6 +22,7 @@ const editor = useCreateBlockNote({ }, comments: { threadStore: yourThreadStore, // see below + schema: BlockNoteSchema.create(...) // optional, can be left undefined }, // ... collaboration: { diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts index 43c640794b..7a0d5c0d91 100644 --- a/packages/core/src/editor/BlockNoteEditor.ts +++ b/packages/core/src/editor/BlockNoteEditor.ts @@ -201,6 +201,7 @@ export type BlockNoteEditorOptions< * @remarks `CommentsOptions` */ comments?: { + schema?: BlockNoteSchema; threadStore: ThreadStore; }; diff --git a/packages/core/src/editor/BlockNoteExtensions.ts b/packages/core/src/editor/BlockNoteExtensions.ts index acb5078ca6..7258dc1130 100644 --- a/packages/core/src/editor/BlockNoteExtensions.ts +++ b/packages/core/src/editor/BlockNoteExtensions.ts @@ -57,6 +57,7 @@ import type { BlockNoteEditorOptions, SupportedExtension, } from "./BlockNoteEditor.js"; +import { BlockNoteSchema } from "./BlockNoteSchema.js"; import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js"; type ExtensionOptions< @@ -92,6 +93,7 @@ type ExtensionOptions< >; tabBehavior?: "prefer-navigate-ui" | "prefer-indent"; comments?: { + schema?: BlockNoteSchema; threadStore: ThreadStore; }; pasteHandler: BlockNoteEditorOptions["pasteHandler"]; @@ -156,6 +158,7 @@ export const getBlockNoteExtensions = < opts.editor, opts.comments.threadStore, CommentMark.name, + opts.comments.schema, ); } diff --git a/packages/core/src/extensions/Comments/CommentsPlugin.ts b/packages/core/src/extensions/Comments/CommentsPlugin.ts index c070fe0032..e5fb09d7d7 100644 --- a/packages/core/src/extensions/Comments/CommentsPlugin.ts +++ b/packages/core/src/extensions/Comments/CommentsPlugin.ts @@ -10,6 +10,7 @@ import type { } from "../../comments/index.js"; import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js"; import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js"; +import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js"; import { UserStore } from "./userstore/UserStore.js"; const PLUGIN_KEY = new PluginKey(`blocknote-comments`); @@ -134,6 +135,7 @@ export class CommentsPlugin extends BlockNoteExtension { private readonly editor: BlockNoteEditor, public readonly threadStore: ThreadStore, private readonly markType: string, + public readonly commentEditorSchema?: BlockNoteSchema, ) { super(); diff --git a/packages/react/src/components/Comments/Comment.tsx b/packages/react/src/components/Comments/Comment.tsx index b0a80f1c7d..0e8feba7ad 100644 --- a/packages/react/src/components/Comments/Comment.tsx +++ b/packages/react/src/components/Comments/Comment.tsx @@ -19,7 +19,7 @@ import { useDictionary } from "../../i18n/dictionary.js"; import { CommentEditor } from "./CommentEditor.js"; import { EmojiPicker } from "./EmojiPicker.js"; import { ReactionBadge } from "./ReactionBadge.js"; -import { schema } from "./schema.js"; +import { defaultCommentEditorSchema } from "./defaultCommentEditorSchema.js"; import { useUser } from "./useUsers.js"; export type CommentProps = { @@ -43,6 +43,12 @@ export const Comment = ({ // TODO: if REST API becomes popular, all interactions (click handlers) should implement a loading state and error state // (or optimistic local updates) + const editor = useBlockNoteEditor(); + + if (!editor.comments) { + throw new Error("Comments plugin not found"); + } + const dict = useDictionary(); const commentEditor = useCreateBlockNote( @@ -55,7 +61,7 @@ export const Comment = ({ emptyDocument: dict.placeholders.edit_comment, }, }, - schema, + schema: editor.comments.commentEditorSchema || defaultCommentEditorSchema, }, [comment.body], ); @@ -64,8 +70,6 @@ export const Comment = ({ const [isEditing, setEditing] = useState(false); - const editor = useBlockNoteEditor(); - if (!editor.comments) { throw new Error("Comments plugin not found"); } diff --git a/packages/react/src/components/Comments/CommentEditor.tsx b/packages/react/src/components/Comments/CommentEditor.tsx index abf8f9c311..4b22eb6c5c 100644 --- a/packages/react/src/components/Comments/CommentEditor.tsx +++ b/packages/react/src/components/Comments/CommentEditor.tsx @@ -2,7 +2,6 @@ import { BlockNoteEditor } from "@blocknote/core"; import { FC, useCallback, useEffect, useState } from "react"; import { useComponentsContext } from "../../editor/ComponentsContext.js"; import { useEditorChange } from "../../hooks/useEditorChange.js"; -import { schema } from "./schema.js"; /** * The CommentEditor component displays an editor for creating or editing a comment. @@ -21,11 +20,7 @@ export const CommentEditor = (props: { isFocused: boolean; isEmpty: boolean; }>; - editor: BlockNoteEditor< - typeof schema.blockSchema, - typeof schema.inlineContentSchema, - typeof schema.styleSchema - >; + editor: BlockNoteEditor; }) => { const [isFocused, setIsFocused] = useState(false); const [isEmpty, setIsEmpty] = useState(props.editor.isEmpty); diff --git a/packages/react/src/components/Comments/FloatingComposer.tsx b/packages/react/src/components/Comments/FloatingComposer.tsx index b6e57c66be..e756f902b0 100644 --- a/packages/react/src/components/Comments/FloatingComposer.tsx +++ b/packages/react/src/components/Comments/FloatingComposer.tsx @@ -5,7 +5,7 @@ import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js"; import { useCreateBlockNote } from "../../hooks/useCreateBlockNote.js"; import { useDictionary } from "../../i18n/dictionary.js"; import { CommentEditor } from "./CommentEditor.js"; -import { schema } from "./schema.js"; +import { defaultCommentEditorSchema } from "./defaultCommentEditorSchema.js"; /** * The FloatingComposer component displays a comment editor "floating" card. @@ -32,7 +32,7 @@ export function FloatingComposer() { emptyDocument: dict.placeholders.new_comment, }, }, - schema, + schema: editor.comments.commentEditorSchema || defaultCommentEditorSchema, }); return ( diff --git a/packages/react/src/components/Comments/Thread.tsx b/packages/react/src/components/Comments/Thread.tsx index fff3ce3142..3ad39cd306 100644 --- a/packages/react/src/components/Comments/Thread.tsx +++ b/packages/react/src/components/Comments/Thread.tsx @@ -8,7 +8,7 @@ import { useCreateBlockNote } from "../../hooks/useCreateBlockNote.js"; import { useDictionary } from "../../i18n/dictionary.js"; import { CommentEditor } from "./CommentEditor.js"; import { Comments } from "./Comments.js"; -import { schema } from "./schema.js"; +import { defaultCommentEditorSchema } from "./defaultCommentEditorSchema.js"; export type ThreadProps = { /** @@ -81,7 +81,7 @@ export const Thread = ({ emptyDocument: dict.placeholders.comment_reply, }, }, - schema, + schema: editor.comments.commentEditorSchema || defaultCommentEditorSchema, }); const onNewCommentSave = useCallback(async () => { diff --git a/packages/react/src/components/Comments/schema.ts b/packages/react/src/components/Comments/defaultCommentEditorSchema.ts similarity index 92% rename from packages/react/src/components/Comments/schema.ts rename to packages/react/src/components/Comments/defaultCommentEditorSchema.ts index 576aa2c3ef..38746304c2 100644 --- a/packages/react/src/components/Comments/schema.ts +++ b/packages/react/src/components/Comments/defaultCommentEditorSchema.ts @@ -20,7 +20,7 @@ const paragraph = createBlockSpecFromStronglyTypedTiptapNode( const { textColor, backgroundColor, ...styleSpecs } = defaultStyleSpecs; // the schema to use for comments -export const schema = BlockNoteSchema.create({ +export const defaultCommentEditorSchema = BlockNoteSchema.create({ blockSpecs: { paragraph, },