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 https://github.com/uiwjs/react-codemirror/issues/390#issuecomment-1285461212, 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()}