Fixed issues when editor is not editable

Author: matthewlipski

packages/core/src/blocks/File/helpers/render/createAddFileButton.ts

@@ -38,6 +38,10 @@ export const createAddFileButton = (
   };
   // Opens the file toolbar.
   const addFileButtonClickHandler = () => {
+    if (!editor.isEditable) {
+      return;
+    }
+
     editor.getExtension(FilePanelExtension)?.showMenu(block.id);
   };
   addFileButton.addEventListener(

packages/core/src/blocks/ToggleWrapper/createToggleWrapper.ts

@@ -62,6 +62,7 @@ export const createToggleWrapper = (
       toggledState.set(editor.getBlock(block)!, true);
 
       if (
+        editor.isEditable &&
         editor.getBlock(block)?.children.length === 0 &&
         !dom.contains(toggleAddBlockButton)
       ) {
@@ -139,7 +140,7 @@ export const createToggleWrapper = (
   if (toggledState.get(block)) {
     toggleWrapper.setAttribute("data-show-children", "true");
 
-    if (block.children.length === 0) {
+    if (editor.isEditable && block.children.length === 0) {
       // If the toggle is set to show children, but there are no children,
       // we add the "add block" button.
       dom.appendChild(toggleAddBlockButton);

packages/react/src/blocks/File/helpers/render/AddFileButton.tsx

@@ -6,6 +6,7 @@ import { RiFile2Line } from "react-icons/ri";
 import { useDictionary } from "../../../../i18n/dictionary.js";
 import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
 import { useExtension } from "../../../../hooks/useExtension.js";
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor.js";
 
 export const AddFileButton = (
   props: Omit<
@@ -19,6 +20,7 @@ export const AddFileButton = (
     buttonIcon?: ReactNode;
   },
 ) => {
+  const editor = useBlockNoteEditor<any, any, any>();
   const dict = useDictionary();
 
   const filePanel = useExtension(FilePanelExtension);
@@ -32,8 +34,12 @@ export const AddFileButton = (
   );
   // Opens the file toolbar.
   const addFileButtonClickHandler = useCallback(() => {
+    if (!editor.isEditable) {
+      return;
+    }
+
     props.editor.transact(() => filePanel.showMenu(props.block.id));
-  }, [filePanel, props.block.id, props.editor]);
+  }, [editor.isEditable, filePanel, props.block.id, props.editor]);
 
   return (
     <div

packages/react/src/blocks/ToggleWrapper/ToggleWrapper.tsx

@@ -133,7 +133,7 @@ export const ToggleWrapper = (
         </button>
         {children}
       </div>
-      {showChildren && childCount === 0 && (
+      {editor.isEditable && showChildren && childCount === 0 && (
         <button
           className="bn-toggle-add-block-button"
           type="button"

packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx

@@ -26,10 +26,6 @@ export const FileDownloadButton = () => {
   const state = useEditorState({
     editor,
     selector: ({ editor }) => {
-      if (!editor.isEditable) {
-        return undefined;
-      }
-
       const selectedBlocks = editor.getSelection()?.blocks || [
         editor.getTextCursorPosition().block,
       ];

packages/react/src/components/LinkToolbar/LinkToolbarController.tsx

@@ -164,6 +164,10 @@ export const LinkToolbarController = (props: {
     mountedBoundingClientRect.current = link.element.getBoundingClientRect();
   }
 
+  if (!editor.isEditable) {
+    return null;
+  }
+
   const Component = props.linkToolbar || LinkToolbar;
 
   return (