fix: Vanilla blocks return true for editor.isEditable on initial render (#1925)

Author: matthewlipski

packages/react/src/editor/BlockNoteView.tsx

@@ -202,6 +202,7 @@ function BlockNoteViewComponent<
         <BlockNoteViewContainer
           className={className}
           renderEditor={renderEditor}
+          editable={editable}
           editorColorScheme={editorColorScheme}
           ref={ref}
           {...rest}
@@ -221,26 +222,34 @@ const BlockNoteViewContainer = React.forwardRef<
   HTMLDivElement,
   {
     renderEditor: boolean;
+    editable?: boolean;
     editorColorScheme: "light" | "dark";
     children: ReactNode;
   } & Omit<
     HTMLAttributes<HTMLDivElement>,
     "onChange" | "onSelectionChange" | "children"
   >
->(({ className, renderEditor, editorColorScheme, children, ...rest }, ref) => (
-  <div
-    className={mergeCSSClasses("bn-container", editorColorScheme, className)}
-    data-color-scheme={editorColorScheme}
-    {...rest}
-    ref={ref}
-  >
-    {renderEditor ? (
-      <BlockNoteViewEditor>{children}</BlockNoteViewEditor>
-    ) : (
-      children
-    )}
-  </div>
-));
+>(
+  (
+    { className, renderEditor, editable, editorColorScheme, children, ...rest },
+    ref,
+  ) => (
+    <div
+      className={mergeCSSClasses("bn-container", editorColorScheme, className)}
+      data-color-scheme={editorColorScheme}
+      {...rest}
+      ref={ref}
+    >
+      {renderEditor ? (
+        <BlockNoteViewEditor editable={editable}>
+          {children}
+        </BlockNoteViewEditor>
+      ) : (
+        children
+      )}
+    </div>
+  ),
+);
 
 // https://fettblog.eu/typescript-react-generic-forward-refs/
 export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as <
@@ -260,7 +269,10 @@ export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as <
  * Renders the contentEditable editor itself (.bn-editor element) and the
  * default UI elements.
  */
-export const BlockNoteViewEditor = (props: { children?: ReactNode }) => {
+export const BlockNoteViewEditor = (props: {
+  editable?: boolean;
+  children?: ReactNode;
+}) => {
   const ctx = useBlockNoteViewContext()!;
   const editor = useBlockNoteEditor();
 
@@ -270,9 +282,15 @@ export const BlockNoteViewEditor = (props: { children?: ReactNode }) => {
 
   const mount = useCallback(
     (element: HTMLElement | null) => {
+      if (
+        props.editable !== undefined &&
+        props.editable !== editor.isEditable
+      ) {
+        editor.isEditable = props.editable;
+      }
       editor.mount(element, portalManager);
     },
-    [editor, portalManager],
+    [editor, portalManager, props.editable],
   );
 
   return (