Merge pull request #271 from eccenca/bugfix/text-marking-autocomplete-CMEM-6577

fixed text marking on text change

Author: andreas-schultz

CHANGELOG.md

@@ -10,6 +10,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `intent` property to `Button`, `FieldItem`, `FieldSet`, `Notification`, and `Spinner`
 
+### Fixed
+
+-   `<CodeAutocompleteField />` and `<AutoSuggestion />`:
+    -   Error highlighting is always visible by underlining the respective text
+
 ## [24.1.0] - 2025-04-16
 
 ### Added

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useMemo, useState } from "react";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
@@ -207,7 +208,7 @@ const AutoSuggestion = ({
     const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [pathValidationPending, setPathValidationPending] = React.useState(false);
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
-    const [, setErrorMarkers] = React.useState<any[]>([]);
+    const errorMarkers = React.useRef<any[]>([])
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
         undefined
     );
@@ -219,8 +220,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>()
-    currentCm.current = cm
+    const currentCm = React.useRef<EditorView>();
+    currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -242,16 +243,16 @@ const AutoSuggestion = ({
                 changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
             // Validate initial value change
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
     }, [initialValue, reInitOnInitialValueChange]);
 
     React.useEffect(() => {
-        if(currentCm.current) {
+        if (currentCm.current) {
             // Validate initial value
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
-    }, [currentCm.current!!])
+    }, [!!currentCm.current]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
@@ -263,10 +264,9 @@ const AutoSuggestion = ({
         editorState.cm = cm;
     }, [cm, editorState]);
 
-    const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-        (
-            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
-        ) as EditorView["dispatch"];
+    const dispatch = (
+        typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+    ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -288,8 +288,9 @@ const AutoSuggestion = ({
                 return () => removeMarkFromText({ view: cm, from, to });
             }
         } else {
-            //remove redundant markers
-            cm && removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            if (cm) {
+                removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            }
         }
         return;
     }, [highlightedElement, selectedTextRanges, cm]);
@@ -298,32 +299,32 @@ const AutoSuggestion = ({
     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 = []
+                }
+            }
             if (parseError) {
                 const { message, start, end } = parseError;
                 const { toOffset, fromOffset } = getOffsetRange(cm, start, end);
-                const { from, to } = markText({
+                clearCurrentErrorMarker()
+                const {from, to} = markText({
                     view: cm,
                     from: fromOffset,
                     to: toOffset,
                     className: `${eccgui}-autosuggestion__text--highlighted-error`,
                     title: message,
                 });
-
-                setErrorMarkers((previousMarkers) => {
-                    previousMarkers.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [from, to];
-                });
+                errorMarkers.current = [from, to]
             } else {
-                // Valid, clear all error markers
-                setErrorMarkers((previous) => {
-                    previous.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [];
-                });
+                clearCurrentErrorMarker()
             }
         }
 
         const isValid = validationResponse?.valid === undefined || validationResponse.valid;
-        onInputChecked && onInputChecked(isValid);
+        onInputChecked?.(isValid);
     }, [validationResponse?.valid, validationResponse?.parseError, cm, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -390,6 +391,7 @@ const AutoSuggestion = ({
             try {
                 const result: CodeAutocompleteFieldValidationResult | undefined = await checkInput(inputString);
                 setValidationResponse(result);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setValidationResponse(undefined);
                 // TODO: Error handling
@@ -425,6 +427,7 @@ const AutoSuggestion = ({
                         setSuggestionResponse(result);
                     }
                 }
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setSuggestionResponse(undefined);
                 // TODO: Error handling
@@ -534,8 +537,13 @@ const AutoSuggestion = ({
     };
 
     const handleInputFocus = (focusState: boolean) => {
-        onFocusChange && onFocusChange(focusState);
-        focusState ? setShouldShowDropdown(true) : closeDropDown();
+        onFocusChange?.(focusState);
+        if (focusState) {
+            setShouldShowDropdown(true);
+        } else {
+            closeDropDown();
+        }
+
         if (!isFocused.current && focusState) {
             // Just got focus
             // Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused