Search Functionality Not Working as Expected in Read-Only Documents with CodeMirror 6

[grolu]

Describe the issue

We use CodeMirror in our project to render and edit the YAML of Kubernetes resources. Sometimes, these resources are read-only in the UI to prevent users from accidentally modifying critical resources.

In CodeMirror 5, we used the native browser search. Since setting the viewport to infinity is no longer supported in CodeMirror 6 — and hacking around this by setting the editor state to 'printing' doesn't seem like a good idea (even though our documents aren't that large) — we adopted the CodeMirror 6 search functionality. It works pretty well, but not at all for read-only documents.

When I set the editor to read-only like this:

EditorView.editable.of(false)

Pressing CTRL-F / CMD-F no longer brings up the search plugin but instead triggers the native browser search (which doesn't work properly because the document isn't fully rendered). When I manually bring up the search panel via a button (or by manually adding the keybindings), the search works; however, replacing is still possible even though the document is read-only.

Am I doing something wrong here, or is this a bug?

Browser and platform

Chrome + MacOS

Reproduction link

https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQgeyBvcGVuU2VhcmNoUGFuZWwgfSBmcm9tICJAY29kZW1pcnJvci9zZWFyY2giCmltcG9ydCB7amF2YXNjcmlwdH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1qYXZhc2NyaXB0IgoKbGV0IGVkaXRvcnZpZXcgPSBuZXcgRWRpdG9yVmlldyh7CiAgZG9jOiAiY29uc29sZS5sb2coJ2hlbGxvJylcbiIsCiAgZXh0ZW5zaW9uczogW2Jhc2ljU2V0dXAsIGphdmFzY3JpcHQoKSwgRWRpdG9yVmlldy5lZGl0YWJsZS5vZihmYWxzZSldLAogIHBhcmVudDogZG9jdW1lbnQuYm9keQp9KQoKbGV0IGJ1dHRvbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImJ1dHRvbiIpCmJ1dHRvbi5pbm5lckhUTUwgPSAiT3BlbiBzZWFyY2giCmJ1dHRvbi5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsICgpID0+IHsKICAvLyBUSElTIElTIFRIRSBJTVBPUlRBTlQgUEFSVDoKICAvLyBXZSBjYWxsIG9wZW5TZWFyY2hQYW5lbCB3aXRoIHRoZSBlZGl0b3J2aWV3IGluc3RhbmNlLgogIC8vIEluIGNvZGVtaXJyb3Igdmlld3BsdWdpbnMgeW91IGhhdmUgYWNjZXNzIHRvIHRoaXMgYXMgd2VsbC4KICBvcGVuU2VhcmNoUGFuZWwoZWRpdG9ydmlldykKfSkKZG9jdW1lbnQuYm9keS5wcmVwZW5kKGJ1dHRvbik=

[marijnh]

An uneditable element will, by default, not be able to receive focus, and thus not capture key events. Use EditorView.contentAttributes.of({tabindex: "0"}) if what you want is to make read-only editor focusable.

[grolu]

Thank you for pointing me in the right direction. Setting tabIndex indeed solves the problem that the panel does not show up using the keys. However, the issue persists that the panel allows to search and replace. Those buttons should not be visible at all or greyed-out in case the editor is readonly. I captured a screenshot where I marked the elements that should not be visible. As you can see in the second screenshot using those buttons actually replace text in the readonly document.

[marijnh]

You're looking for EditorState.readOnly, I think. That signals that you don't want to allow the user to change the content. editable just controls the contenteditable property.

[grolu]

Thank you - sorry for the confusion.