Merge pull request #315 from eccenca/maintain/mergeReleaseTag-v24.4.0

haschek · web-flow · commit d2b885b1827b · 2025-08-11T12:56:51.000+02:00
Release process changes from v24.4.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,19 +6,39 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+## [24.4.0] - 2025-08-07
+
 ### Added
 
--   Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `<CodeAutocompleteField />`
+-   `<ExtendedCodeEditor />`
+    -   `height` and `readOnly` properties to forward them to `<CodeEditor/>`
+-   `<CodeAutocompleteField />`:
+    -   `outerDivAttributes` property: allows to set parameter of the container element
+    -   `height` and `readOnly` properties to forward them to `<ExtendedCodeEditor/>`
 -   `<ActivityControlWidget />`
     -   `additionalActions` property to include other more complex components between the action buttons and the context menu of the widget
 -   `<Tooltip />`
     -   `swapPlaceholderDelay` property to allow configuration of the delay time before the placeholder element is replaced by the actual tooltip component
 
+### Fixed
+
+-   `<CodeEditor />`
+    -   Editor is re-created after certain property changes and is reset, i.e. loses it current state.
+    -   Enter key handling (adding new line) was broken when `onKeyDown` is defined.
+-   `<CodeAutocompleteField />`
+    -   First auto-completion item not marked as active when drop down first shown.
+    -   Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button.
+
 ### Changed
 
 -   `<NodeContent />`
     -   prevent start of a react flow drag action of a node when user clicks in the node menu section
 
+### Deprecated
+
+-   `<CodeEditor />`
+    -   `onChange` property: support for `(v: any) => void` type will be exchanged to more specific `(v: string) => void`
+
 ## [24.3.0] - 2025-06-05
 
 ### Added
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.3.0",
+    "version": "24.4.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -149,8 +149,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest": "^30.0.5",
+        "jest-environment-jsdom": "^30.0.5",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",
diff --git a/src/components/AutoSuggestion/AutoSuggestion.tsx b/src/components/AutoSuggestion/AutoSuggestion.tsx
@@ -170,6 +170,8 @@ export interface AutoSuggestionProps {
     height?: number | string;
     /** Set read-only mode. Default: false */
     readOnly?: boolean;
+    /** Properties that should be added to the outer div container. */
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
 }
 
 // Meta data regarding a request
@@ -202,8 +204,9 @@ const AutoSuggestion = ({
     mode,
     multiline = false,
     reInitOnInitialValueChange = false,
-    height, 
-    readOnly
+    height,
+    readOnly,
+    outerDivAttributes
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -360,7 +363,7 @@ const AutoSuggestion = ({
             editorState.suggestions = [];
             setSuggestions([]);
         }
-        editorState.index = 0;
+        setCurrentIndex(0);
     }, [suggestionResponse, editorState]);
 
     const getOffsetRange = (cm: EditorView, from: number, to: number) => {
@@ -374,7 +377,7 @@ const AutoSuggestion = ({
         return { fromOffset, toOffset };
     };
 
-    const inputactionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
@@ -488,8 +491,7 @@ const AutoSuggestion = ({
         }, 1);
     };
 
-    //todo check out typings for event type
-    const handleInputEditorKeyPress = (event: any) => {
+    const handleInputEditorKeyPress = (event: KeyboardEvent) => {
         const overWrittenKeys: Array<string> = Object.values(OVERWRITTEN_KEYS);
         if (overWrittenKeys.includes(event.key) && (useTabForCompletions || event.key !== OVERWRITTEN_KEYS.Tab)) {
             //don't prevent when enter should create new line (multiline config) and dropdown isn't shown
@@ -625,6 +627,7 @@ const AutoSuggestion = ({
                     break;
                 default:
                 //do nothing
+                    closeDropDown();
             }
         }
     };
@@ -673,6 +676,7 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
+        readOnly
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
@@ -681,6 +685,7 @@ const AutoSuggestion = ({
             id={id}
             ref={autoSuggestionDivRef}
             className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+            {...outerDivAttributes}
         >
             <div
                 className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
@@ -711,11 +716,12 @@ const AutoSuggestion = ({
                     {codeEditor}
                 </ContextOverlay>
                 {!!value.current && (
-                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>
+                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputActionsDisplayed}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}
                             name="operation-clear"
                             text={clearIconText}
+                            disabled={readOnly}
                             onClick={handleInputEditorClear}
                         />
                     </span>
diff --git a/src/extensions/codemirror/CodeMirror.tsx b/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";
 
@@ -30,7 +30,7 @@ import {
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
     adaptedLintGutter,
-    adaptedPlaceholder,
+    adaptedPlaceholder, compartment,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
 
@@ -53,6 +53,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Handler method to receive onChange events.
      * As input the new value is given.
+     * @deprecated (v25) use `(v: string) => void` in future
      */
     onChange?: (v: any) => void;
     /**
@@ -74,7 +75,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Called when the cursor position changes
      */
-    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => void;
 
     /**
      * Syntax mode of the code editor.
@@ -83,7 +84,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Default value used first when the editor is instanciated.
      */
-    defaultValue?: any;
+    defaultValue?: string;
     /**
      * If enabled the code editor won't show numbers before each line.
      */
@@ -169,7 +170,7 @@ export interface CodeEditorProps extends TestableComponent {
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
-const addToKeyMapConfigFor = (flag: boolean, ...keys: any) => (flag ? [...keys] : []);
+const addToKeyMapConfigFor = (flag: boolean, ...keys: KeyBinding[]) => (flag ? [...keys] : []);
 const addHandlersFor = (flag: boolean, handlerName: string, handler: any) =>
     flag ? ({ [handlerName]: handler } as DOMEventHandlers<any>) : {};
 
@@ -221,7 +222,24 @@ 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);
+    // CodeMirror Compartments in order to allow for re-configuration after initialization
+    const readOnlyCompartment = React.useRef<Compartment>(compartment())
+    const wrapLinesCompartment = React.useRef<Compartment>(compartment())
+    const preventLineNumbersCompartment = React.useRef<Compartment>(compartment())
+    const shouldHaveMinimalSetupCompartment = React.useRef<Compartment>(compartment())
+    const placeholderCompartment = React.useRef<Compartment>(compartment())
+    const modeCompartment = React.useRef<Compartment>(compartment())
+    const keyMapConfigsCompartment = React.useRef<Compartment>(compartment())
+    const tabIntentSizeCompartment = React.useRef<Compartment>(compartment())
+    const disabledCompartment = React.useRef<Compartment>(compartment())
+    const supportCodeFoldingCompartment = React.useRef<Compartment>(compartment())
+    const useLintingCompartment = React.useRef<Compartment>(compartment())
+    const shouldHighlightActiveLineCompartment = React.useRef<Compartment>(compartment())
 
     const linters = useMemo(() => {
         if (!mode) {
@@ -240,17 +258,15 @@ 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;
                 view.dispatch({
                     changes: {
-                        from: offsetFromFirstLine,
+                        from: cursor,
                         insert: "\n",
                     },
                     selection: {
-                        anchor: offsetFromFirstLine + 1,
+                        anchor: cursor + 1,
                     },
                 });
             }
@@ -265,14 +281,17 @@ export const CodeEditor = ({
         return false;
     };
 
-    React.useEffect(() => {
+    const createKeyMapConfigs = () => {
         const tabIndent =
             !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
-        const keyMapConfigs = [
+        return [
             defaultKeymap as KeyBinding,
-            ...addToKeyMapConfigFor(supportCodeFolding, foldKeymap),
+            ...addToKeyMapConfigFor(supportCodeFolding, ...foldKeymap),
             ...addToKeyMapConfigFor(tabIndent, indentWithTab),
         ];
+    }
+
+    React.useEffect(() => {
         const domEventHandlers = {
             ...addHandlersFor(!!onScroll, "scroll", onScroll),
             ...addHandlersFor(
@@ -286,13 +305,13 @@ export const CodeEditor = ({
         } as DOMEventHandlers<any>;
         const extensions = [
             markField,
-            adaptedPlaceholder(placeholder),
+            placeholderCompartment.current.of(adaptedPlaceholder(placeholder)),
             adaptedHighlightSpecialChars(),
-            useCodeMirrorModeExtension(mode),
-            keymap?.of(keyMapConfigs),
-            EditorState?.tabSize.of(tabIntentSize),
-            EditorState?.readOnly.of(readOnly),
-            EditorView?.editable.of(!disabled),
+            modeCompartment.current.of(useCodeMirrorModeExtension(mode)),
+            keyMapConfigsCompartment.current.of(keymap?.of(createKeyMapConfigs())),
+            tabIntentSizeCompartment.current.of(EditorState?.tabSize.of(tabIntentSize)),
+            readOnlyCompartment.current.of(EditorState?.readOnly.of(readOnly)),
+            disabledCompartment.current.of(EditorView?.editable.of(!disabled)),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
                 if (disabled) return;
@@ -328,12 +347,12 @@ export const CodeEditor = ({
                     }
                 }
             }),
-            addExtensionsFor(shouldHaveMinimalSetup, minimalSetup),
-            addExtensionsFor(!preventLineNumbers, adaptedLineNumbers()),
-            addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
-            addExtensionsFor(wrapLines, EditorView?.lineWrapping),
-            addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
-            addExtensionsFor(useLinting, ...linters),
+            shouldHaveMinimalSetupCompartment.current.of(addExtensionsFor(shouldHaveMinimalSetup, minimalSetup)),
+            preventLineNumbersCompartment.current.of(addExtensionsFor(!preventLineNumbers, adaptedLineNumbers())),
+            shouldHighlightActiveLineCompartment.current.of(addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine())),
+            wrapLinesCompartment.current.of(addExtensionsFor(wrapLines, EditorView?.lineWrapping)),
+            supportCodeFoldingCompartment.current.of(addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding())),
+            useLintingCompartment.current.of(addExtensionsFor(useLinting, ...linters)),
             additionalExtensions,
         ];
 
@@ -375,7 +394,64 @@ export const CodeEditor = ({
                 setView(undefined);
             }
         };
-    }, [parent.current, mode, preventLineNumbers, wrapLines]);
+    }, [parent.current]);
+
+    // Updates an extension for a specific parameter that has changed after the initialization
+    const updateExtension = (extension: Extension | undefined, parameterCompartment: Compartment): void => {
+        if(extension) {
+            currentView.current?.dispatch({
+                effects: parameterCompartment.reconfigure(extension)
+            })
+        }
+    }
+
+    React.useEffect(() => {
+        updateExtension(EditorState?.readOnly.of(readOnly!), readOnlyCompartment.current)
+    }, [readOnly])
+
+    React.useEffect(() => {
+        updateExtension(adaptedPlaceholder(placeholder), placeholderCompartment.current)
+    }, [placeholder])
+
+    React.useEffect(() => {
+        updateExtension(useCodeMirrorModeExtension(mode), modeCompartment.current)
+    }, [mode])
+
+    React.useEffect(() => {
+        updateExtension(keymap?.of(createKeyMapConfigs()), keyMapConfigsCompartment.current)
+    }, [supportCodeFolding, mode, tabIntentStyle, (tabForceSpaceForModes ?? []).join(", "), enableTab])
+
+    React.useEffect(() => {
+        updateExtension(EditorState?.tabSize.of(tabIntentSize ?? 2), tabIntentSizeCompartment.current)
+    }, [tabIntentSize])
+
+    React.useEffect(() => {
+        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current)
+    }, [disabled])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup), shouldHaveMinimalSetupCompartment.current)
+    }, [shouldHaveMinimalSetup])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(!preventLineNumbers, adaptedLineNumbers()), preventLineNumbersCompartment.current)
+    }, [preventLineNumbers])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(shouldHighlightActiveLine ?? false, adaptedHighlightActiveLine()), shouldHighlightActiveLineCompartment.current)
+    }, [shouldHighlightActiveLine])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(wrapLines ?? false, EditorView?.lineWrapping), wrapLinesCompartment.current)
+    }, [wrapLines])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(supportCodeFolding ?? false, adaptedFoldGutter(), adaptedCodeFolding()), supportCodeFoldingCompartment.current)
+    }, [supportCodeFolding])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(useLinting ?? false, ...linters), useLintingCompartment.current)
+    }, [mode, useLinting])
 
     const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
 
diff --git a/src/extensions/codemirror/tests/codemirrorTestHelper.ts b/src/extensions/codemirror/tests/codemirrorTestHelper.ts
diff --git a/yarn.lock b/yarn.lock
