fix: Editors in comments not inheriting theme (#1890)

Author: matthewlipski

packages/ariakit/src/comments/Editor.tsx

@@ -4,6 +4,7 @@ import {
   FormattingToolbar,
   FormattingToolbarController,
   getFormattingToolbarItems,
+  useBlockNoteContext,
 } from "@blocknote/react";
 import { forwardRef } from "react";
 import { BlockNoteView } from "../BlockNoteView.js";
@@ -17,6 +18,8 @@ export const Editor = forwardRef<
 
   assertEmpty(rest, false);
 
+  const blockNoteContext = useBlockNoteContext();
+
   return (
     <BlockNoteView
       autoFocus={autoFocus}
@@ -28,6 +31,7 @@ export const Editor = forwardRef<
       filePanel={false}
       formattingToolbar={false}
       editable={editable}
+      theme={blockNoteContext?.colorSchemePreference}
       ref={ref}
       onFocus={onFocus}
       onBlur={onBlur}

packages/mantine/src/comments/Editor.tsx

@@ -4,6 +4,7 @@ import {
   FormattingToolbar,
   FormattingToolbarController,
   getFormattingToolbarItems,
+  useBlockNoteContext,
 } from "@blocknote/react";
 import { forwardRef } from "react";
 import { BlockNoteView } from "../BlockNoteView.js";
@@ -17,6 +18,8 @@ export const Editor = forwardRef<
 
   assertEmpty(rest, false);
 
+  const blockNoteContext = useBlockNoteContext();
+
   return (
     <BlockNoteView
       autoFocus={autoFocus}
@@ -28,6 +31,7 @@ export const Editor = forwardRef<
       filePanel={false}
       formattingToolbar={false}
       editable={editable}
+      theme={blockNoteContext?.colorSchemePreference}
       ref={ref}
       onFocus={onFocus}
       onBlur={onBlur}

packages/react/src/editor/BlockNoteView.tsx

@@ -159,8 +159,9 @@ function BlockNoteViewComponent<
       ...existingContext,
       editor,
       setContentEditableProps,
+      colorSchemePreference: editorColorScheme,
     };
-  }, [existingContext, editor]);
+  }, [existingContext, editor, editorColorScheme]);
 
   // We set defaultUIProps and editorProps on a different context, the BlockNoteViewContext.
   // This BlockNoteViewContext is used to render the editor and the default UI.

packages/shadcn/src/comments/Editor.tsx

@@ -4,6 +4,7 @@ import {
   FormattingToolbar,
   FormattingToolbarController,
   getFormattingToolbarItems,
+  useBlockNoteContext,
 } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -19,10 +20,13 @@ export const Editor = forwardRef<
 
   assertEmpty(rest);
 
+  const blockNoteContext = useBlockNoteContext();
+
   return (
     <BlockNoteView
       autoFocus={autoFocus}
       className={cn(className, "")}
+      theme={blockNoteContext?.colorSchemePreference}
       editor={props.editor}
       sideMenu={false}
       slashMenu={false}