Readonly crashes 'RangeError: Selection points outside of document' without Editable prop

[indicozy]

Hi there!
When I'm confugiring that a user cannot write in editor, I used to use readonly prop. However, It was still possible to create selection which may point ouside of document as in Video 1, link below, HEADPHONE WARNING. However, when I also add editable prop to be editable={!isReadonly}, everything works fine, Image 1.
The props of CodeMirror is a bit confusing since it has two explicit props.

Video 1:
https://user-images.githubusercontent.com/51142471/196690444-369a156f-7e19-4c83-9daf-15977340ff9c.mp4

Image 1:

In the video below, because I had only readOnly={false} prop, it broke. If I add editable={!isReadOnly} prop, everything works fine.

[jaywcjlove]

@indicozy https://codesandbox.io/embed/react-codemirror-example-codemirror-6-uiwjs-react-codemirror-issues-390-rz4rh?fontsize=14&hidenavigation=1&theme=dark

I have no way to reproduce your problem.

[indicozy]

I have an older version of the repo, I'll send the template project later

…

On Thu, Oct 20, 2022, 18:29 小弟调调™ ***@***.***> wrote: @indicozy <https://github.com/indicozy> https://codesandbox.io/embed/react-codemirror-example-codemirror-6-uiwjs-react-codemirror-issues-390-rz4rh?fontsize=14&hidenavigation=1&theme=dark I have no way to reproduce your problem. — Reply to this email directly, view it on GitHub <#390 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMGF6RZBZ5C635J2BM6YCP3WEE3KLANCNFSM6AAAAAARJCG6GY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[fr1n63]

Seeing the same issue - readonly doesn't stop key commands being sent to the editor. You only see the cursor move if you type in the middle of a doc, but if you type at the end new characters are appended to the doc and the error shows.

work around

onKeyDown={(event) => readOnly && event.preventDefault()}