From 58b8d6be195a34c2f983ae416d98ea278fe92c6c Mon Sep 17 00:00:00 2001
From: Milan Poliak <milan.poliak@wize.sk>
Date: Tue, 18 Mar 2025 17:54:52 +0100
Subject: [PATCH 1/2] - Make it possible to pass custom schema to comments -
 Export comments components

---
 packages/react/src/components/Comments/Comment.tsx  |  6 +++++-
 .../react/src/components/Comments/CommentEditor.tsx |  7 +------
 .../src/components/Comments/FloatingComposer.tsx    |  9 +++++++--
 .../Comments/FloatingComposerController.tsx         |  5 ++++-
 .../Comments/FloatingThreadController.tsx           |  5 ++++-
 packages/react/src/components/Comments/Thread.tsx   |  7 ++++++-
 packages/react/src/components/Comments/schema.ts    |  2 +-
 packages/react/src/index.ts                         | 13 +++++++++++++
 8 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Comments/Comment.tsx b/packages/react/src/components/Comments/Comment.tsx
index 10f7d28730..b54fa9449a 100644
--- a/packages/react/src/components/Comments/Comment.tsx
+++ b/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
diff --git a/packages/react/src/components/Comments/CommentEditor.tsx b/packages/react/src/components/Comments/CommentEditor.tsx
index 1d79b334f3..4b184f1353 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.
@@ -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);
diff --git a/packages/react/src/components/Comments/FloatingComposer.tsx b/packages/react/src/components/Comments/FloatingComposer.tsx
index a53ecfa0cf..b9fbb6eaa6 100644
--- a/packages/react/src/components/Comments/FloatingComposer.tsx
+++ b/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) {
diff --git a/packages/react/src/components/Comments/FloatingComposerController.tsx b/packages/react/src/components/Comments/FloatingComposerController.tsx
index 307218ab6d..0db025d15b 100644
--- a/packages/react/src/components/Comments/FloatingComposerController.tsx
+++ b/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>
   );
 };
diff --git a/packages/react/src/components/Comments/FloatingThreadController.tsx b/packages/react/src/components/Comments/FloatingThreadController.tsx
index 42e8959e80..e53e8e7e16 100644
--- a/packages/react/src/components/Comments/FloatingThreadController.tsx
+++ b/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>
   );
 };
diff --git a/packages/react/src/components/Comments/Thread.tsx b/packages/react/src/components/Comments/Thread.tsx
index 3b173a85cf..b317dcf753 100644
--- a/packages/react/src/components/Comments/Thread.tsx
+++ b/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}
             />
           );
         })}
diff --git a/packages/react/src/components/Comments/schema.ts b/packages/react/src/components/Comments/schema.ts
index 7389f35793..8eb91fa9f8 100644
--- a/packages/react/src/components/Comments/schema.ts
+++ b/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,
   },
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index e697dc7734..d8ea79fc73 100644
--- a/packages/react/src/index.ts
+++ b/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";

From 479f517ed3fe5c7c6d99ca803bf71ea03b08aaf0 Mon Sep 17 00:00:00 2001
From: Milan Poliak <milan.poliak@wize.sk>
Date: Tue, 18 Mar 2025 18:06:06 +0100
Subject: [PATCH 2/2] fix comments option

---
 packages/react/src/editor/BlockNoteView.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx
index 4f44d9b262..ec82fb5db0 100644
--- a/packages/react/src/editor/BlockNoteView.tsx
+++ b/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 = {