Custom blocks do not rerender on editor.isEditable change

[kegesch]

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 💖

[nperez0111]

Hi @kegesch, can you explain to me the use-case for this?

I'm uncertain how this code ever worked at all. I think it may have only been a fluke that it worked, I would expect this to be using the editor APIs not just be resetting the prop value

[kegesch]

I use this in combination in with a button to make the editor non editable to avoid accidental changes, especially on mobile devices where touch gestures focus the editor or certain blocks.
But also to have the possibility to quickly re-enable the editing functionality to change the working document.
(Background: My app is a songwriting app and the readonly mode is for displaying the song for performances or practices)

Also using the editor API like

<button onClick={() => editor.isEditable = !editor.isEditable}>toggle</button>

does not directly trigger a rerender.

[nperez0111]

OK, I understand.
I suspect that this will be a larger issue to address so it may take some time.

I think we will need to consider that changing the editor from editable to not should re-evaluate the entire editor & force the custom blocks to re-render.

I'm uncertain how this was working before, but I think it is more likely incidentally than calculated.

[kegesch]

Okay, no problem.
I will use a context provider as a workaround in the mean time:

import React, {createContext, PropsWithChildren, useContext, useState} from "react";

interface ReadonlyContextType {
    readonly: boolean;
    setReadonly: React.Dispatch<React.SetStateAction<boolean>>;
}

const ReadonlyContext = createContext<ReadonlyContextType | undefined>(undefined);

export const ReadonlyProvider= ({children, initialValue, overrideValue}: PropsWithChildren & {
    initialValue: boolean,
    overrideValue?: boolean
}) => {
    const [readonly, setReadonly] = useState(initialValue);
    return (
        <ReadonlyContext.Provider value={{ readonly: readonly || (overrideValue ?? false), setReadonly }}>
            {children}
        </ReadonlyContext.Provider>
    );
};

export const useReadonly = () => {
    const context = useContext(ReadonlyContext);
    if (!context) {
        throw new Error("useReadonly must be used within a ReadonlyProvider");
    }
    return context;
};

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

export function Test() {
    return <ReadonlyProvider initialValue={false}>
        <Editor />
    </ReadonlyProvider>;
}


function Editor() {
    const editor = useCreateBlockNote({
        schema: BlockNoteSchema.create({
            blockSpecs: {
                test: createTestBlock(),
            },
        }),
        initialContent: [
            {
                type: "test",
            },
        ],
    });
    const { readonly, setReadonly } = useReadonly()
    return <div>
        <button onClick={() => setReadonly(r => !r)}>readonly {readonly.toString()}</button>
        <BlockNoteView editor={editor} editable={!readonly} />
    </div>
}