feat: Custom schemas for comment editors (#1976)

Author: matthewlipski

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: {

packages/core/src/editor/BlockNoteEditor.ts

@@ -201,6 +201,7 @@ export type BlockNoteEditorOptions<
    * @remarks `CommentsOptions`
    */
   comments?: {
+    schema?: BlockNoteSchema<any, any, any>;
     threadStore: ThreadStore;
   };
 

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<any, any, any>;
     threadStore: ThreadStore;
   };
   pasteHandler: BlockNoteEditorOptions<any, any, any>["pasteHandler"];
@@ -156,6 +158,7 @@ export const getBlockNoteExtensions = <
       opts.editor,
       opts.comments.threadStore,
       CommentMark.name,
+      opts.comments.schema,
     );
   }
 

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<any, any, any>,
     public readonly threadStore: ThreadStore,
     private readonly markType: string,
+    public readonly commentEditorSchema?: BlockNoteSchema<any, any, any>,
   ) {
     super();
 

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");
   }

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<any, any, any>;
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isEmpty, setIsEmpty] = useState(props.editor.isEmpty);

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 (

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 () => {

packages/react/src/components/Comments/schema.ts renamed to 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,
   },