fix: disable default UI when no components context is found (#2611)

Author: matthewlipski

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 (
     <BlockNoteContext.Provider value={blockNoteContext}>