editor.IsEditable returns true for custom blocks when editable is set to false

[jacke99]

After the latest update editor.isEditable seem to always returns true for my custom blocks. I have added some conditional behavior for my custom blocks depending on whether the editor is editable or not. After the latest update the condition that triggers when the editor is in edit mode is always active.

I tried making a copy of the default image block and just logged the editor.isEditable in the render function while the block is being used in a non editable editor. Which returned true.

[YousefED]

@jacke99 is this still an issue? I see you closed #1476

[jacke99]

Yes, thought I fixed it and closed the other one but the issue is still present.

[jacke99]

I've done some testing and it seems to only affect blocks built like this. When using a block built like the alert block, editor.isEditable returns false when editable is false, as expected.

[matthewlipski]

Ah, this issue is caused because BlockNoteView is rendered using React whereas blocks like the image are rendered using vanilla JS. When you pass editable to BlockNoteView, it only sets editor.isEditable to that value on the initial render in a useEffect. So during the initial render, because the image is not rendered within React, it doesn't wait for this to happen and so the default value of editor.isEditable is used, which is true.

I'll see if this is fixable, but in the meantime there is an admittedly hacky workaround of re-checking the value of editor.isEditable in a short timeout and modifying the rendered dom element accordingly.