diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx index d810fafcbe..1c8511bc23 100644 --- a/packages/react/src/editor/BlockNoteView.tsx +++ b/packages/react/src/editor/BlockNoteView.tsx @@ -30,6 +30,7 @@ import { BlockNoteViewContext, useBlockNoteViewContext, } from "./BlockNoteViewContext.js"; +import { useComponentsContext } from "./ComponentsContext.js"; import { Portals, getContentComponent } from "./EditorContent.js"; import { ElementRenderer } from "./ElementRenderer.js"; @@ -137,6 +138,33 @@ function BlockNoteViewComponent< const editorColorScheme = theme || (defaultColorScheme === "dark" ? "dark" : "light"); + // Disable default UI components if no components context is found. + const componentsContext = useComponentsContext(); + const defaultUIProps: BlockNoteDefaultUIProps = useMemo( + () => ({ + formattingToolbar: + formattingToolbar ?? (componentsContext ? undefined : false), + linkToolbar: linkToolbar ?? (componentsContext ? undefined : false), + sideMenu: sideMenu ?? (componentsContext ? undefined : false), + slashMenu: slashMenu ?? (componentsContext ? undefined : false), + filePanel: filePanel ?? (componentsContext ? undefined : false), + tableHandles: tableHandles ?? (componentsContext ? undefined : false), + emojiPicker: emojiPicker ?? (componentsContext ? undefined : false), + comments: comments ?? (componentsContext ? undefined : false), + }), + [ + comments, + componentsContext, + emojiPicker, + filePanel, + formattingToolbar, + linkToolbar, + sideMenu, + slashMenu, + tableHandles, + ], + ); + useEditorChange(onChange || emptyFn, editor); useEditorSelectionChange(onSelectionChange || emptyFn, editor); @@ -167,30 +195,9 @@ function BlockNoteViewComponent< contentEditableProps, editable, }, - defaultUIProps: { - formattingToolbar, - linkToolbar, - slashMenu, - emojiPicker, - sideMenu, - filePanel, - tableHandles, - comments, - }, + defaultUIProps, }; - }, [ - autoFocus, - contentEditableProps, - editable, - formattingToolbar, - linkToolbar, - slashMenu, - emojiPicker, - sideMenu, - filePanel, - tableHandles, - comments, - ]); + }, [autoFocus, contentEditableProps, editable, defaultUIProps]); return (