Fix intermittent loss of validation error highlighting in CodeAutocompleteField

The suggestion-highlight lifecycle removed all marks including the
validation error marker: resetting the highlight cleared the whole
document, and the effect cleanup removed marks at line-local positions
although they were placed at offset-corrected positions. Mark removal
is now scoped to the mark class, the error marker is re-applied from
the latest validation result, and the initial validation effect depends
on the editor instance instead of a ref read during render.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: robertisele

CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - `<Tooltip />`:
     - Code markup inside tooltips was hardly readable because of low contrast.
+- `<CodeAutocompleteField />`:
+    - Validation error highlighting was intermittently removed and not re-rendered: resetting the suggestion highlighting cleared all marks including the error marker, and its cleanup removed marks at wrong positions on multi-line content. Mark removal is now scoped to the mark class.
 
 ## [26.0.0] - 2026-07-08
 

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -206,7 +206,6 @@ export const CodeAutocompleteField = ({
     const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [pathValidationPending, setPathValidationPending] = React.useState(false);
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
-    const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
         undefined,
     );
@@ -246,11 +245,11 @@ export const CodeAutocompleteField = ({
     }, [initialValue, reInitOnInitialValueChange]);
 
     React.useEffect(() => {
-        if (currentCm.current) {
+        if (cm) {
             // Validate initial value
             checkValuePathValidity(initialValue);
         }
-    }, [!!currentCm.current]);
+    }, [cm]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
@@ -272,6 +271,13 @@ export const CodeAutocompleteField = ({
 
     // Handle replacement highlighting
     useEffect(() => {
+        const highlightClassName = `${eccgui}-autosuggestion__text--highlighted`;
+        // Only removes the replacement highlighting: other marks, e.g. the error highlighting, must survive
+        const removeHighlight = () => {
+            if (cm) {
+                removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length, className: highlightClassName });
+            }
+        };
         if (highlightedElement && cm) {
             const { from, length } = highlightedElement;
             if (length > 0 && selectedTextRanges.current.length === 0) {
@@ -281,14 +287,12 @@ export const CodeAutocompleteField = ({
                     view: cm,
                     from: fromOffset,
                     to: toOffset,
-                    className: `${eccgui}-autosuggestion__text--highlighted`,
+                    className: highlightClassName,
                 });
-                return () => removeMarkFromText({ view: cm, from, to });
+                return removeHighlight;
             }
         } else {
-            if (cm) {
-                removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
-            }
+            removeHighlight();
         }
         return;
     }, [highlightedElement, selectedTextRanges, cm]);
@@ -297,26 +301,18 @@ export const CodeAutocompleteField = ({
     React.useEffect(() => {
         const parseError = validationResponse?.parseError;
         if (cm) {
-            const clearCurrentErrorMarker = () => {
-                if (errorMarkers.current.length) {
-                    const [from, to] = errorMarkers.current;
-                    removeMarkFromText({ view: cm, from, to });
-                    errorMarkers.current = [];
-                }
-            };
+            const errorClassName = `${eccgui}-autosuggestion__text--highlighted-error`;
+            // Remove a previous error marker first, so at most one error is marked at any time
+            removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length, className: errorClassName });
             if (parseError) {
                 const { message, start, end } = parseError;
-                clearCurrentErrorMarker();
-                const { from, to } = markText({
+                markText({
                     view: cm,
                     from: start,
                     to: end,
-                    className: `${eccgui}-autosuggestion__text--highlighted-error`,
+                    className: errorClassName,
                     title: message,
                 });
-                errorMarkers.current = [from, to];
-            } else {
-                clearCurrentErrorMarker();
             }
         }
 

src/components/AutoSuggestion/extensions/markText.ts

@@ -1,17 +1,17 @@
-import { StateEffect, StateField } from "@codemirror/state";
-import { Decoration, EditorView } from "@codemirror/view";
+import { Range, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, DecorationSet, EditorView } from "@codemirror/view";
 
-const addMarks = StateEffect?.define(),
-    filterMarks = StateEffect?.define();
+const addMarks = StateEffect.define<Range<Decoration>[]>(),
+    filterMarks = StateEffect.define<(from: number, to: number, value: Decoration) => boolean>();
 
 // This value must be added to the set of extensions to enable this
-export const markField = StateField?.define({
+export const markField = StateField.define<DecorationSet>({
     // Start with an empty set of decorations
     create() {
         return Decoration.none;
     },
     // This is called whenever the editor updates—it computes the new set
-    update(value: any, tr) {
+    update(value: DecorationSet, tr) {
         // Move the decorations to account for document changes
         value = value.map(tr.changes);
         // If this transaction adds or removes decorations, apply those changes
@@ -44,7 +44,7 @@ export const markText = (config: marksConfig) => {
     const stopRange = Math.min(config.to, docLength);
     if (!docLength || config.from === stopRange) return { from: 0, to: 0 };
     config.view.dispatch({
-        effects: addMarks.of([strikeMark.range(config.from, stopRange)] as any),
+        effects: addMarks.of([strikeMark.range(config.from, stopRange)]),
     });
     return { from: config.from, to: stopRange };
 };
@@ -55,8 +55,12 @@ export const removeMarkFromText = (config: marksConfig) => {
     ) as EditorView["dispatch"];
 
     dispatch({
-        effects: filterMarks?.of(
-            ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null,
+        effects: filterMarks.of(
+            (from, to, value) =>
+                to <= config.from ||
+                from >= config.to ||
+                // If a class name is given, only marks of that class are removed
+                (!!config.className && value.spec.class !== config.className),
         ),
     });
 };

src/components/AutoSuggestion/tests/AutoSuggestion.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
@@ -27,15 +27,15 @@ describe("AutoSuggestion", () => {
         props = {
             label: "test value path",
             initialValue: "",
-            onChange: jest.fn((value) => {}),
-            fetchSuggestions: jest.fn((inputString, cursorPosition) => undefined),
-            checkInput: jest.fn((inputString) => ({
+            onChange: jest.fn(),
+            fetchSuggestions: jest.fn(() => undefined),
+            checkInput: jest.fn(() => ({
                 valid: true,
             })),
-            onInputChecked: jest.fn((validInput) => {}),
+            onInputChecked: jest.fn(),
             validationErrorText: "",
             clearIconText: "",
-            onFocusChange: jest.fn((hasFocus) => {}),
+            onFocusChange: jest.fn(),
             id: "test-auto-suggestion",
         };
     });
@@ -49,4 +49,23 @@ describe("AutoSuggestion", () => {
         const { getByText } = render(<AutoSuggestion {...props} />);
         expect(getByText(props.label!)).toBeTruthy();
     });
+
+    it("should render the validation error highlighting for the reported range", async () => {
+        const { container } = render(
+            <AutoSuggestion
+                {...props}
+                initialValue={"{{project.testx}}"}
+                validationRequestDelay={1}
+                checkInput={() => ({
+                    valid: false,
+                    parseError: { message: "'project.testx' is not defined.", start: 2, end: 15 },
+                })}
+            />,
+        );
+        await waitFor(() => {
+            const errorMark = container.querySelector(".eccgui-autosuggestion__text--highlighted-error");
+            expect(errorMark).toBeTruthy();
+            expect(errorMark!.textContent).toBe("project.testx");
+        });
+    });
 });

src/components/AutoSuggestion/tests/markText.test.ts

@@ -0,0 +1,35 @@
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+
+import { markField, markText, removeMarkFromText } from "../extensions/markText";
+
+describe("markText extensions", () => {
+    const createView = (doc: string) => new EditorView({ state: EditorState.create({ doc, extensions: [markField] }) });
+
+    const markCount = (view: EditorView, className: string) => {
+        let count = 0;
+        view.state.field(markField).between(0, view.state.doc.length, (from, to, value) => {
+            if (value.spec.class === className) count += 1;
+        });
+        return count;
+    };
+
+    it("should remove all marks in the range if no class name is given", () => {
+        const view = createView("{{project.testx}} and more");
+        markText({ view, from: 2, to: 15, className: "error-mark" });
+        markText({ view, from: 4, to: 10, className: "highlight-mark" });
+        removeMarkFromText({ view, from: 0, to: view.state.doc.length });
+        expect(markCount(view, "error-mark")).toBe(0);
+        expect(markCount(view, "highlight-mark")).toBe(0);
+    });
+
+    it("should only remove marks of the given class if one is given", () => {
+        const view = createView("{{project.testx}} and more");
+        markText({ view, from: 2, to: 15, className: "error-mark" });
+        markText({ view, from: 4, to: 10, className: "highlight-mark" });
+        removeMarkFromText({ view, from: 0, to: view.state.doc.length, className: "highlight-mark" });
+        expect(markCount(view, "highlight-mark")).toBe(0);
+        // The error mark survives, e.g. the validation error marker when suggestion highlighting is removed
+        expect(markCount(view, "error-mark")).toBe(1);
+    });
+});