@eccenca/gui-elements 24.3.0 → 24.4.0

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -81,6 +81,10 @@ export interface ActivityControlWidgetProps extends TestableComponent {
      * execution timer messages for waiting and running times.
      */
     timerExecutionMsg?: JSX.Element | null;
+    /**
+     * additional actions that can serve as a complex component, positioned between the default actions and the context menu
+     */
+    additionalActions?: React.ReactElement<unknown>[];
 }
 
 interface IActivityContextMenu extends TestableComponent {
@@ -110,11 +114,13 @@ interface IActivityMenuAction extends ActivityControlWidgetAction {
 /** Shows the status of activities and supports actions on these activities. */
 export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     const {
-        "data-test-id": dataTestId,
+        "data-test-id": dataTestIdLegacy,
+        "data-testid": dataTestId,
         progressBar,
         progressSpinner,
         activityActions,
         activityContextMenu,
+        additionalActions,
         small,
         border,
         hasSpacing,
@@ -126,10 +132,19 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     } = props;
     const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
-        <OverviewItem data-test-id={dataTestId} hasSpacing={border || hasSpacing} densityHigh={small}>
+        <OverviewItem
+            data-test-id={dataTestIdLegacy}
+            data-testid={dataTestId}
+            hasSpacing={border || hasSpacing}
+            densityHigh={small}
+        >
             {progressBar && <ProgressBar {...progressBar} />}
             {(progressSpinner || progressSpinnerFinishedIcon) && (
-                <OverviewItemDepiction keepColors>
+                <OverviewItemDepiction
+                    data-testid={dataTestId ? `${dataTestId}-progress-spinner` : undefined}
+                    data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-progress-spinner` : undefined}
+                    keepColors
+                >
                     {progressSpinnerFinishedIcon ? (
                         React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
                     ) : (
@@ -145,13 +160,21 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
             )}
             <OverviewItemDescription>
                 {props.label && (
-                    <OverviewItemLine small={small}>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-label` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-label` : undefined}
+                        small={small}
+                    >
                         {React.cloneElement(labelWrapper, {}, props.label)}
                         {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
-                    <OverviewItemLine small>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-status-message` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined}
+                        small
+                    >
                         {tags}
                         {props.statusMessage && (
                             <OverflowText passDown>
@@ -172,21 +195,35 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     </OverviewItemLine>
                 )}
                 {timerExecutionMsg && !(props.statusMessage || tags) && (
-                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-status-message` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined}
+                        small
+                    >
+                        {timerExecutionMsg}
+                    </OverviewItemLine>
                 )}
             </OverviewItemDescription>
-            <OverviewItemActions>
+            <OverviewItemActions
+                data-testid={dataTestId ? `${dataTestId}-actions` : undefined}
+                data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
+            >
                 {activityActions &&
                     activityActions.map((action, idx) => {
                         return (
                             <IconButton
-                                key={typeof action.icon === "string" ? action.icon : action["data-test-id"] ?? idx}
+                                key={
+                                    typeof action.icon === "string"
+                                        ? action.icon
+                                        : action["data-test-id"] ?? action["data-testid"] ?? idx
+                                }
                                 data-test-id={action["data-test-id"]}
+                                data-testid={action["data-testid"]}
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
                                 disabled={action.disabled}
-                                hasStateWarning={action.hasStateWarning}
+                                intent={action.hasStateWarning ? "warning" : undefined}
                                 tooltipProps={{
                                     hoverOpenDelay: 200,
                                     placement: "bottom",
@@ -194,6 +231,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                             />
                         );
                     })}
+                {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
                         data-test-id={activityContextMenu["data-test-id"]}

package/src/cmem/ActivityControl/tests/ActivityControlWidget.test.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { IconButton, Tag, TagList } from "../../../index";
+import { ActivityControlWidget, ActivityControlWidgetAction } from "../ActivityControlWidget";
+
+describe("ActivityControlWidget", () => {
+    it("Renders basic widget with actions and handles clicks", () => {
+        const mockAction1 = jest.fn();
+        const mockAction2 = jest.fn();
+        const actions: ActivityControlWidgetAction[] = [
+            {
+                "data-testid": "action-1",
+                icon: "item-reload",
+                action: mockAction1,
+                tooltip: "Action 1",
+            },
+            {
+                "data-testid": "action-2",
+                icon: "item-start",
+                action: mockAction2,
+                tooltip: "Action 2",
+            },
+        ];
+
+        render(
+            <ActivityControlWidget
+                label="Basic widget"
+                data-testid="basic-widget"
+                activityActions={actions}
+                statusMessage="Status message"
+            />
+        );
+
+        const button1 = screen.getByTestId("action-1");
+        const button2 = screen.getByTestId("action-2");
+
+        const label = screen.getByTestId("basic-widget-label");
+        const statusMessage = screen.getByTestId("basic-widget-status-message");
+        const actionsContainer = screen.getByTestId("basic-widget-actions");
+
+        expect(label).toBeInTheDocument();
+        expect(statusMessage).toBeInTheDocument();
+        expect(actionsContainer).toBeInTheDocument();
+
+        expect(label).toHaveTextContent("Basic widget");
+        expect(statusMessage).toHaveTextContent("Status message");
+
+        expect(button1).toBeInTheDocument();
+        expect(button2).toBeInTheDocument();
+
+        fireEvent.click(button1);
+        expect(mockAction1).toHaveBeenCalledTimes(1);
+
+        fireEvent.click(button2);
+        expect(mockAction2).toHaveBeenCalledTimes(1);
+    });
+
+    it("Renders widget with tags", () => {
+        const tags = (
+            <TagList>
+                <Tag>Tag one</Tag>
+                <Tag>Other tag</Tag>
+            </TagList>
+        );
+        render(<ActivityControlWidget label="Widget with tags" tags={tags} data-testid="widget-with-tags" />);
+
+        const label = screen.getByTestId("widget-with-tags-label");
+        const statusMessage = screen.getByTestId("widget-with-tags-status-message");
+
+        expect(label).toBeInTheDocument();
+        expect(statusMessage).toBeInTheDocument();
+
+        expect(label).toHaveTextContent("Widget with tags");
+        expect(statusMessage).toHaveTextContent("Tag one");
+        expect(statusMessage).toHaveTextContent("Other tag");
+    });
+
+    it("Renders widget with additional actions and handles click", () => {
+        const mockAction = jest.fn();
+        const additionalActions = [
+            <IconButton
+                key="add-btn"
+                name="application-explore"
+                onClick={mockAction}
+                data-testid="additional-action"
+            />,
+        ];
+        render(<ActivityControlWidget additionalActions={additionalActions} />);
+
+        const customButton = screen.getByTestId("additional-action");
+        expect(customButton).toBeInTheDocument();
+
+        fireEvent.click(customButton);
+        expect(mockAction).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -166,6 +166,12 @@ export interface AutoSuggestionProps {
     /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
      * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
     reInitOnInitialValueChange?: boolean;
+    /** Optional height of the component */
+    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
@@ -198,6 +204,9 @@ const AutoSuggestion = ({
     mode,
     multiline = false,
     reInitOnInitialValueChange = false,
+    height,
+    readOnly,
+    outerDivAttributes
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -354,7 +363,7 @@ const AutoSuggestion = ({
             editorState.suggestions = [];
             setSuggestions([]);
         }
-        editorState.index = 0;
+        setCurrentIndex(0);
     }, [suggestionResponse, editorState]);
 
     const getOffsetRange = (cm: EditorView, from: number, to: number) => {
@@ -368,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`);
@@ -482,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
@@ -619,6 +627,7 @@ const AutoSuggestion = ({
                     break;
                 default:
                 //do nothing
+                    closeDropDown();
             }
         }
     };
@@ -653,6 +662,8 @@ const AutoSuggestion = ({
                 showScrollBar={showScrollBar}
                 multiline={multiline}
                 onMouseDown={handleInputMouseDown}
+                height={height}
+                readOnly={readOnly}
             />
         );
     }, [
@@ -665,6 +676,7 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
+        readOnly
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
@@ -673,6 +685,7 @@ const AutoSuggestion = ({
             id={id}
             ref={autoSuggestionDivRef}
             className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+            {...outerDivAttributes}
         >
             <div
                 className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
@@ -703,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>

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -61,6 +61,10 @@ export interface ExtendedCodeEditorProps {
         | "additionalExtensions"
         | "outerDivAttributes"
     >;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -80,6 +84,8 @@ export const ExtendedCodeEditor = ({
     onCursorChange,
     onSelection,
     codeEditorProps,
+    height, 
+    readOnly
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -102,6 +108,8 @@ export const ExtendedCodeEditor = ({
             shouldHaveMinimalSetup={false}
             preventLineNumbers={!multiline}
             mode={mode}
+            height={height}
+            readOnly={readOnly}
             name=""
             enableTab={enableTab}
             additionalExtensions={[...multilineExtensions]}

package/src/components/Icon/IconButton.tsx

@@ -50,6 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
+        swapPlaceholderDelay: 1,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Tooltip/Tooltip.tsx

@@ -42,6 +42,12 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * You can prevent it in any case by setting it to `false`.
      */
     usePlaceholder?: boolean;
+    /**
+     * Time after the placeholder element is replaced by the actual tooltip component.
+     * Must be greater than 0.
+     * For the first display of the tooltip this time adds up to `hoverOpenDelay`.
+     */
+    swapPlaceholderDelay?: number;
 }
 
 export const Tooltip = ({
@@ -53,18 +59,21 @@ export const Tooltip = ({
     markdownEnabler = "\n\n",
     markdownProps,
     usePlaceholder,
-    hoverOpenDelay = 500,
+    swapPlaceholderDelay = 100,
+    hoverOpenDelay = 450,
     ...otherTooltipProps
 }: TooltipProps) => {
     const placeholderRef = React.useRef(null);
     const eventMemory = React.useRef<null | "afterhover" | "afterfocus">(null);
     const searchId = React.useRef<null | string>(null);
-    const swapDelayTime = 100;
+    const swapDelay = React.useRef<null | NodeJS.Timeout>(null);
+    const swapDelayTime = swapPlaceholderDelay;
     const [placeholder, setPlaceholder] = React.useState<boolean>(
         !otherTooltipProps.disabled &&
             !otherTooltipProps.defaultIsOpen &&
             !otherTooltipProps.isOpen &&
             otherTooltipProps.renderTarget === undefined &&
+            swapDelayTime > 0 &&
             hoverOpenDelay > swapDelayTime &&
             (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false))
     );
@@ -77,7 +86,10 @@ export const Tooltip = ({
     React.useEffect(() => {
         if (placeholderRef.current !== null) {
             const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
-                const swapDelay = setTimeout(() => {
+                if (swapDelay.current) {
+                    clearTimeout(swapDelay.current);
+                }
+                swapDelay.current = setTimeout(() => {
                     // we delay the swap to prevent unwanted effects
                     // (e.g. forced mouseover after the swap but the cursor is already somewhere else)
                     eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
@@ -93,7 +105,7 @@ export const Tooltip = ({
                         ) {
                             eventMemory.current = null;
                         }
-                        clearTimeout(swapDelay);
+                        clearTimeout(swapDelay.current as NodeJS.Timeout);
                     });
                 }
             };
@@ -166,7 +178,7 @@ export const Tooltip = ({
     ) : (
         <BlueprintTooltip
             lazy={true}
-            hoverOpenDelay={hoverOpenDelay - swapDelayTime}
+            hoverOpenDelay={hoverOpenDelay}
             {...otherTooltipProps}
             content={tooltipContent}
             className={targetClassName}

package/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;
 

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -9,7 +9,7 @@
 
 import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
-import { Extension } from "@codemirror/state";
+import {Extension, Compartment, StateEffect, EditorState} from "@codemirror/state";
 import { lintGutter } from "@codemirror/lint";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
@@ -34,6 +34,25 @@ export const AdaptedEditorView = isConstructor(EditorView)
           destroy() {}
       } as any);
 
+/** Creates a new compartment or a mock of a compartment. */
+export const compartment = () => {
+    if(isConstructor(Compartment)) {
+        return new Compartment()
+    } else {
+        let extension: Extension | undefined = undefined
+        return {
+            of: (ext: Extension): Extension => {
+                extension = ext
+                return ext
+            },
+            reconfigure: (_content: Extension): StateEffect<unknown> => {
+                return {} as StateEffect<any>
+            },
+            get: (_state: EditorState): Extension | undefined => extension
+        }
+    }
+}
+
 const emptyExtension = (() => {}) as any;
 /** extension adding event handlers, current error '(view, domEventHandlers) is not a function'  */
 export const AdaptedEditorViewDomEventHandlers =