How can I make custom rendered block readonly in Draft.js editor when its readOnly prop is true?

Question

I'm using Draft.js Editor component. I have a custom block renderer specified correctly via blockRendererFn prop. The component renders the EditorBlock imported from draft-js as advised in the Draft documentation. In the props I get in my custom block renderer I don't have the information whether the block is readonly or not. At least not by default. I could get it via blockProps, however I feel I am missing something. Like it should work naturally when using the EditorBlock. Like it could get the readOnly value from context or something.

Is it my responsibility to render my block without the EditorBlock when readOnly is true? And id it my responsibility to propagate the readOnly value to my custom block renderer via blockProps?

Philemon

Answer 1

Well I got this answered on the slack draftjs team so I'm going to sum it up here:

It should be enough to set readOnly to true to prevent any onChange callbacks in the entire editor. My problem was a kind of a bug, where I have set editable to true in the custom block renderer I have returned from the blockRendererFn. This caused the readOnly flag to be overridden and thus allowed for changes in my custom block. Isaac labeled this as potentially unwanted behavior.

The solution in my case was not to specify whether my block is editable or not on the custom block renderer. That way the readOnly is properly taken into account and there is nothing more I had to do.

Philemon

Answer 2

Passing readOnly={readOnly} to Editor fixes an issue.

<Editor
  readOnly={readOnly}
/>

Amplification