Support custom schema for React comment editors

packages/react/src/components/Comments/Comment.tsx

@@ -25,8 +25,9 @@ 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 { defaultCommentSchema } from "./schema.js";
 import { useUser } from "./useUsers.js";
+import { BlockNoteSchema } from '@blocknote/core';
 
 export interface CommentProps extends ComponentPropsWithoutRef<"div"> {
   /**
@@ -58,6 +59,8 @@ export interface CommentProps extends ComponentPropsWithoutRef<"div"> {
    * Whether to show reactions.
    */
   showReactions?: boolean;
+
+  schema?: BlockNoteSchema<any, any, any>;
 }
 
 /**
@@ -74,6 +77,7 @@ export const Comment = ({
   showActions = "hover",
   showReactions = true,
   showResolveAction = false,
+  schema = defaultCommentSchema,
   className,
 }: CommentProps) => {
   // TODO: if REST API becomes popular, all interactions (click handlers) should implement a loading state and error state

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.
@@ -20,11 +19,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,14 +5,19 @@ 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 { defaultCommentSchema } from "./schema.js";
+import { BlockNoteSchema } from '@blocknote/core';
 
 /**
  * The FloatingComposer component displays a comment editor "floating" card.
  *
  * It's used when the user highlights a parts of the document to create a new comment / thread.
  */
-export function FloatingComposer() {
+export function FloatingComposer({
+  schema = defaultCommentSchema,
+}: {
+  schema?: BlockNoteSchema<any, any, any>;
+}) {
   const editor = useBlockNoteEditor();
 
   if (!editor.comments) {

packages/react/src/components/Comments/FloatingComposerController.tsx

@@ -14,6 +14,8 @@ import { useEditorSelectionBoundingBox } from "../../hooks/useEditorSelectionBou
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning.js";
 import { useUIPluginState } from "../../hooks/useUIPluginState.js";
 import { FloatingComposer } from "./FloatingComposer.js";
+import { defaultCommentSchema } from './schema.js';
+import { BlockNoteSchema } from '@blocknote/core';
 
 export const FloatingComposerController = <
   B extends BlockSchema = DefaultBlockSchema,
@@ -22,6 +24,7 @@ export const FloatingComposerController = <
 >(props: {
   floatingComposer?: FC<ComponentProps<typeof FloatingComposer>>;
   floatingOptions?: Partial<UseFloatingOptions>;
+  schema?: BlockNoteSchema<B, I, S>;
 }) => {
   const editor = useBlockNoteEditor<B, I, S>();
 
@@ -75,7 +78,7 @@ export const FloatingComposerController = <
 
   return (
     <div ref={ref} style={style} {...getFloatingProps()}>
-      <Component />
+      <Component schema={props.schema || defaultCommentSchema} />
     </div>
   );
 };

packages/react/src/components/Comments/FloatingThreadController.tsx

@@ -19,6 +19,8 @@ import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning.js";
 import { useUIPluginState } from "../../hooks/useUIPluginState.js";
 import { Thread } from "./Thread.js";
+import { BlockNoteSchema } from '@blocknote/core';
+import { defaultCommentSchema } from './schema.js';
 
 /**
  * This component is used to display a thread in a floating card.
@@ -31,6 +33,7 @@ export const FloatingThreadController = <
 >(props: {
   floatingThread?: FC<ComponentProps<typeof Thread>>;
   floatingOptions?: Partial<UseFloatingOptions>;
+  schema?: BlockNoteSchema<B, I, S>;
 }) => {
   const editor = useBlockNoteEditor<B, I, S>();
 
@@ -102,7 +105,7 @@ export const FloatingThreadController = <
 
   return (
     <div ref={ref} style={style} {...getFloatingProps()}>
-      <Component threadId={state.selectedThreadId} />
+      <Component schema={props.schema || defaultCommentSchema} threadId={state.selectedThreadId} />
     </div>
   );
 };

packages/react/src/components/Comments/Thread.tsx

@@ -7,9 +7,10 @@ import { useCreateBlockNote } from "../../hooks/useCreateBlockNote.js";
 import { useDictionary } from "../../i18n/dictionary.js";
 import { Comment, CommentProps } from "./Comment.js";
 import { CommentEditor } from "./CommentEditor.js";
-import { schema } from "./schema.js";
+import { defaultCommentSchema } from "./schema.js";
 import { useThreads } from "./useThreads.js";
 import { useUsers } from "./useUsers.js";
+import { BlockNoteSchema } from '@blocknote/core';
 
 export interface ThreadProps extends ComponentPropsWithoutRef<"div"> {
   /**
@@ -41,6 +42,8 @@ export interface ThreadProps extends ComponentPropsWithoutRef<"div"> {
    * Whether to show deleted comments.
    */
   showDeletedComments?: CommentProps["showDeleted"];
+
+  schema?: BlockNoteSchema<any, any, any>;
 }
 
 /**
@@ -55,6 +58,7 @@ export const Thread = ({
   showResolveAction = true,
   showReactions = true,
   showComposer = true,
+  schema = defaultCommentSchema,
   className,
   ...props
 }: ThreadProps) => {
@@ -139,6 +143,7 @@ export const Thread = ({
               showActions={showActions}
               showReactions={showReactions}
               showResolveAction={isFirstComment}
+              schema={schema}
             />
           );
         })}

packages/react/src/components/Comments/schema.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 defaultCommentSchema = BlockNoteSchema.create({
   blockSpecs: {
     paragraph,
   },

packages/react/src/editor/BlockNoteView.tsx

@@ -105,6 +105,7 @@ function BlockNoteViewComponent<
     filePanel,
     tableHandles,
     autoFocus,
+    comments,
     renderEditor = !editor.headless,
     ...rest
   } = props;
@@ -156,6 +157,7 @@ function BlockNoteViewComponent<
     sideMenu,
     filePanel,
     tableHandles,
+    comments,
   };
 
   const editorProps = {

packages/react/src/index.ts

@@ -98,6 +98,19 @@ export * from "./components/TableHandles/TableHandleMenu/DefaultButtons/DeleteBu
 export * from "./components/TableHandles/TableHandleMenu/TableHandleMenu.js";
 export * from "./components/TableHandles/TableHandleMenu/TableHandleMenuProps.js";
 
+export * from "./components/Comments/Comment.js";
+export * from "./components/Comments/CommentEditor.js";
+export * from "./components/Comments/EmojiMartPicker.js";
+export * from "./components/Comments/EmojiPicker.js";
+export * from "./components/Comments/FloatingComposer.js";
+export * from "./components/Comments/FloatingComposerController.js";
+export * from "./components/Comments/FloatingThreadController.js";
+export * from "./components/Comments/ReactionBadge.js";
+export * from "./components/Comments/schema.js";
+export * from "./components/Comments/Thread.js";
+export * from "./components/Comments/useThreads.js";
+export * from "./components/Comments/useUsers.js";
+
 export * from "./hooks/useActiveStyles.js";
 export * from "./hooks/useBlockNoteEditor.js";
 export * from "./hooks/useCreateBlockNote.js";