BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Custom blocks do not rerender on editor.isEditable change

Open kegesch opened this issue 3 months ago • 4 comments

Describe the bug In version 0.41.1 custom blocks directly reacted to changes to editor.isEditable and have rerendered. But at the latest main version they don't (until they are interacted with which forces a rerender). I suspect this is due to the fix (#2121) for (#2106).

To Reproduce block-spec:

export const createTestBlock = createReactBlockSpec(
    {
        type: 'test',
        propSchema: {
        },
        content: 'none',
    },
    {
        render: (props) => {
            return (
                <div>{props.editor.isEditable ? 'editable' : 'readonly'}</div>
            );
        },
    }
);

editor:

export function Test() {
    const [readonly, setReadonly] = useState(false);
    const editor = useCreateBlockNote({
        schema: BlockNoteSchema.create({
            blockSpecs: {
                test: createTestBlock(),
            },
        }),
        initialContent: [
            {
                type: "test",
            },
        ],
    });

    return <div>
        <button onClick={() => setReadonly(r => !r)}>toggle</button>
        <BlockNoteView editor={editor} editable={!readonly} />
    </div>;
}

Toggling the readonly button does not change block's content to readonly

Misc

  • Node version:
  • Package manager:
  • Browser:
  • [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

kegesch avatar Oct 27 '25 20:10 kegesch