diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx index 5cd52fe877..ae51de952d 100644 --- a/packages/react/src/editor/BlockNoteView.tsx +++ b/packages/react/src/editor/BlockNoteView.tsx @@ -10,7 +10,6 @@ import React, { ReactNode, Ref, useCallback, - useEffect, useMemo, useState, } from "react"; @@ -141,10 +140,6 @@ function BlockNoteViewComponent< useEditorChange(onChange || emptyFn, editor); useEditorSelectionChange(onSelectionChange || emptyFn, editor); - useEffect(() => { - editor.isEditable = editable !== false; - }, [editable, editor]); - const setElementRenderer = useCallback( (ref: (typeof editor)["elementRenderer"]) => { editor.elementRenderer = ref; @@ -170,6 +165,7 @@ function BlockNoteViewComponent< editorProps: { autoFocus, contentEditableProps, + editable, }, defaultUIProps: { formattingToolbar, @@ -185,6 +181,7 @@ function BlockNoteViewComponent< }, [ autoFocus, contentEditableProps, + editable, formattingToolbar, linkToolbar, slashMenu, @@ -202,7 +199,6 @@ function BlockNoteViewComponent< , "onChange" | "onSelectionChange" | "children" > ->( - ( - { className, renderEditor, editable, editorColorScheme, children, ...rest }, - ref, - ) => ( -
- {renderEditor ? ( - - {children} - - ) : ( - children - )} -
- ), -); +>(({ className, renderEditor, editorColorScheme, children, ...rest }, ref) => ( +
+ {renderEditor ? ( + {children} + ) : ( + children + )} +
+)); // https://fettblog.eu/typescript-react-generic-forward-refs/ export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as < @@ -269,10 +257,7 @@ export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as < * Renders the contentEditable editor itself (.bn-editor element) and the * default UI elements. */ -export const BlockNoteViewEditor = (props: { - editable?: boolean; - children?: ReactNode; -}) => { +export const BlockNoteViewEditor = (props: { children?: ReactNode }) => { const ctx = useBlockNoteViewContext()!; const editor = useBlockNoteEditor(); @@ -282,12 +267,8 @@ export const BlockNoteViewEditor = (props: { const mount = useCallback( (element: HTMLElement | null) => { - if ( - props.editable !== undefined && - props.editable !== editor.isEditable - ) { - editor.isEditable = props.editable; - } + // Set editable state of the actual editor. + editor.isEditable = ctx.editorProps.editable !== false; // Since we are not using TipTap's React Components, we need to set up the contentComponent it expects // This is a simple replacement for the state management that Tiptap does internally editor._tiptapEditor.contentComponent = portalManager; @@ -297,7 +278,7 @@ export const BlockNoteViewEditor = (props: { editor.unmount(); } }, - [editor, portalManager, props.editable], + [ctx.editorProps.editable, editor, portalManager], ); return ( diff --git a/packages/react/src/editor/BlockNoteViewContext.ts b/packages/react/src/editor/BlockNoteViewContext.ts index c96e197afa..44adcefe12 100644 --- a/packages/react/src/editor/BlockNoteViewContext.ts +++ b/packages/react/src/editor/BlockNoteViewContext.ts @@ -5,6 +5,7 @@ export type BlockNoteViewContextValue = { editorProps: { autoFocus?: boolean; contentEditableProps?: Record; + editable?: boolean; }; defaultUIProps: BlockNoteDefaultUIProps; };