diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx index dd5fe957fb..a4679af611 100644 --- a/packages/react/src/editor/BlockNoteView.tsx +++ b/packages/react/src/editor/BlockNoteView.tsx @@ -31,6 +31,7 @@ import { BlockNoteViewContext, useBlockNoteViewContext, } from "./BlockNoteViewContext.js"; +import { useComponentsContext } from "./ComponentsContext.js"; import { Portals, getContentComponent } from "./EditorContent.js"; import { ElementRenderer } from "./ElementRenderer.js"; @@ -138,6 +139,32 @@ 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: componentsContext ? formattingToolbar : false, + linkToolbar: componentsContext ? linkToolbar : false, + sideMenu: componentsContext ? sideMenu : false, + slashMenu: componentsContext ? slashMenu : false, + filePanel: componentsContext ? filePanel : false, + tableHandles: componentsContext ? tableHandles : false, + emojiPicker: componentsContext ? emojiPicker : false, + comments: componentsContext ? comments : false, + }), + [ + comments, + componentsContext, + emojiPicker, + filePanel, + formattingToolbar, + linkToolbar, + sideMenu, + slashMenu, + tableHandles, + ], + ); + useEditorChange(onChange || emptyFn, editor); useEditorSelectionChange(onSelectionChange || emptyFn, editor); @@ -180,30 +207,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 (