CodeEditor component should switch to/from read-only mode without losing its current state

- CodeAutocompleteField correctly supports read-only mode now.

Author: andreas-schultz

CHANGELOG.md

@@ -10,6 +10,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `<CodeAutocompleteField />`
 
+### Fixed
+
+-   <CodeMirror />:
+    -    Editor is re-created after certain property changes and is reset, i.e. loses it current state.
+
+
 ## [24.3.0] - 2025-06-05
 
 ### Added

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -673,6 +673,7 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
+        readOnly
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
@@ -716,6 +717,7 @@ const AutoSuggestion = ({
                             data-test-id={"value-path-clear-btn"}
                             name="operation-clear"
                             text={clearIconText}
+                            disabled={readOnly}
                             onClick={handleInputEditorClear}
                         />
                     </span>

src/extensions/codemirror/CodeMirror.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
-import { EditorState, Extension } from "@codemirror/state";
+import { EditorState, Extension, Compartment } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
@@ -221,7 +221,12 @@ export const CodeEditor = ({
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
+    const currentView = React.useRef<EditorView>()
+    currentView.current = view
+    const currentReadOnly = React.useRef(readOnly)
+    currentReadOnly.current = readOnly
     const [showPreview, setShowPreview] = React.useState<boolean>(false);
+    const readOnlyCompartment = React.useRef<Compartment>(new Compartment())
 
     const linters = useMemo(() => {
         if (!mode) {
@@ -240,7 +245,7 @@ export const CodeEditor = ({
 
     const onKeyDownHandler = (event: KeyboardEvent, view: EditorView) => {
         if (onKeyDown && !onKeyDown(event)) {
-            if (event.key === "Enter") {
+            if (event.key === "Enter" && !currentReadOnly.current) {
                 const cursor = view.state.selection.main.head;
                 const cursorLine = view.state.doc.lineAt(cursor).number;
                 const offsetFromFirstLine = view.state.doc.line(cursorLine).to;
@@ -291,7 +296,7 @@ export const CodeEditor = ({
             useCodeMirrorModeExtension(mode),
             keymap?.of(keyMapConfigs),
             EditorState?.tabSize.of(tabIntentSize),
-            EditorState?.readOnly.of(readOnly),
+            readOnlyCompartment.current.of(EditorState?.readOnly.of(readOnly)),
             EditorView?.editable.of(!disabled),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
@@ -377,6 +382,14 @@ export const CodeEditor = ({
         };
     }, [parent.current, mode, preventLineNumbers, wrapLines]);
 
+    React.useEffect(() => {
+        const v = EditorState?.readOnly.of(readOnly!)
+
+        currentView.current?.dispatch({
+            effects: readOnlyCompartment.current.reconfigure(v)
+        })
+    }, [readOnly])
+
     const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
 
     const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {