@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featuredarkthemesupportcmem7503.0

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,12 +1,11 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
-import { Compartment,EditorState, Extension } from "@codemirror/state";
+import { Compartment, EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
 import { Markdown } from "../../cmem/markdown/Markdown";
-import { EditorAppearanceConfigMenu } from "./toolbars/EditorAppearanceConfigMenu";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
@@ -34,6 +33,7 @@ import {
     adaptedSyntaxHighlighting,
     compartment,
 } from "./tests/codemirrorTestHelper";
+import { EditorAppearanceConfigMenu } from "./toolbars/EditorAppearanceConfigMenu";
 import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
 import { ExtensionCreator } from "./types";
 
@@ -47,7 +47,11 @@ interface EditorAppearance {
     wrapLines?: boolean;
 }
 
-export interface CodeEditorProps extends EditorAppearance, Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
+export interface CodeEditorProps
+    extends
+        EditorAppearance,
+        Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">,
+        TestableComponent {
     // Is called with the editor instance that allows access via the CodeMirror API
     setEditorView?: (editor: EditorView | undefined) => void;
     /**
@@ -108,7 +112,10 @@ export interface CodeEditorProps extends EditorAppearance, Omit<React.HTMLAttrib
      * Add properties to the `div` used as wrapper element.
      * @deprecated (v26) You can now use all properties directly on `CodeEditor`.
      */
-    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id" | "data-testid" | "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">;
+    outerDivAttributes?: Omit<
+        React.HTMLAttributes<HTMLDivElement>,
+        "id" | "data-test-id" | "data-testid" | "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll"
+    >;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -191,16 +198,19 @@ const ModeLinterMap: ReadonlyMap<SupportedCodeEditorModes, ReadonlyArray<Extensi
 const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"];
 
 const defaultAppearanceForModeWithToolbar: ReadonlyMap<SupportedCodeEditorModes, EditorAppearance> = new Map([
-    ["markdown", { wrapLines: true, preventLineNumbers: true }]
+    ["markdown", { wrapLines: true, preventLineNumbers: true }],
 ]);
 
-const getDefaultAppearanceForModeWithToolbar = (hasToolbar: boolean, mode?: SupportedCodeEditorModes): EditorAppearance | undefined => {
+const getDefaultAppearanceForModeWithToolbar = (
+    hasToolbar: boolean,
+    mode?: SupportedCodeEditorModes,
+): EditorAppearance | undefined => {
     if (hasToolbar && mode) {
         return defaultAppearanceForModeWithToolbar.get(mode);
     }
 
     return undefined;
-}
+};
 
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
@@ -244,37 +254,35 @@ export const CodeEditor = ({
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
     const defaultAppearanceForModeWithToolbar = getDefaultAppearanceForModeWithToolbar(useToolbar, mode);
-    const [editorAppearance, setEditorAppearance] = React.useState<{[s: string]: boolean;}>(
-        {
-            // we also set the fallback default here
-            wrapLines: wrapLines ?? defaultAppearanceForModeWithToolbar?.wrapLines ?? false,
-            preventLineNumbers: preventLineNumbers ?? defaultAppearanceForModeWithToolbar?.preventLineNumbers ?? false,
-        }
-    )
-    const currentView = React.useRef<EditorView>()
-    currentView.current = view
-    const currentReadOnly = React.useRef(readOnly)
-    currentReadOnly.current = readOnly
-    const currentOnChange = React.useRef(onChange)
-    currentOnChange.current = onChange
-    const currentDisabled = React.useRef(disabled)
-    currentDisabled.current = disabled
-    const currentIntent = React.useRef(intent)
-    currentIntent.current = intent
+    const [editorAppearance, setEditorAppearance] = React.useState<{ [s: string]: boolean }>({
+        // we also set the fallback default here
+        wrapLines: wrapLines ?? defaultAppearanceForModeWithToolbar?.wrapLines ?? false,
+        preventLineNumbers: preventLineNumbers ?? defaultAppearanceForModeWithToolbar?.preventLineNumbers ?? false,
+    });
+    const currentView = React.useRef<EditorView>(undefined);
+    currentView.current = view;
+    const currentReadOnly = React.useRef(readOnly);
+    currentReadOnly.current = readOnly;
+    const currentOnChange = React.useRef(onChange);
+    currentOnChange.current = onChange;
+    const currentDisabled = React.useRef(disabled);
+    currentDisabled.current = disabled;
+    const currentIntent = React.useRef(intent);
+    currentIntent.current = intent;
     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 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) {
@@ -324,7 +332,24 @@ export const CodeEditor = ({
             ...addToKeyMapConfigFor(supportCodeFolding, ...foldKeymap),
             ...addToKeyMapConfigFor(tabIndent, indentWithTab),
         ];
-    }
+    };
+
+    const syncIntentClass = React.useCallback(
+        (editorView: EditorView | undefined, nextIntent?: CodeEditorProps["intent"]) => {
+            if (!editorView?.dom) {
+                return;
+            }
+
+            Array.from(editorView.dom.classList)
+                .filter((className) => className.startsWith(`${eccgui}-intent--`))
+                .forEach((className) => editorView.dom.classList.remove(className));
+
+            if (nextIntent) {
+                editorView.dom.classList.add(`${eccgui}-intent--${nextIntent}`);
+            }
+        },
+        [],
+    );
 
     React.useEffect(() => {
         const domEventHandlers = {
@@ -332,7 +357,7 @@ export const CodeEditor = ({
             ...addHandlersFor(
                 !!onMouseDown,
                 "mousedown",
-                (_: any, view: EditorView) => onMouseDown && onMouseDown(view)
+                (_: any, view: EditorView) => onMouseDown && onMouseDown(view),
             ),
             ...addHandlersFor(!!onFocusChange, "blur", () => onFocusChange && onFocusChange(false)),
             ...addHandlersFor(!!onFocusChange, "focus", () => onFocusChange && onFocusChange(true)),
@@ -359,8 +384,12 @@ export const CodeEditor = ({
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
-                if (onFocusChange && currentIntent.current && !v.view.dom.classList?.contains(`${eccgui}-intent--${currentIntent.current}`)) {
-                    v.view.dom.classList.add(`${eccgui}-intent--${currentIntent.current}`);
+                if (
+                    onFocusChange &&
+                    currentIntent.current &&
+                    !v.view.dom.classList?.contains(`${eccgui}-intent--${currentIntent.current}`)
+                ) {
+                    syncIntentClass(v.view, currentIntent.current);
                 }
 
                 if (onCursorChange) {
@@ -377,16 +406,22 @@ export const CodeEditor = ({
                             cursorPosition,
                             { ...coords, left: relativeLeft, bottom: relativeBottom },
                             scrollInfo,
-                            v.view
+                            v.view,
                         );
                     }
                 }
             }),
             shouldHaveMinimalSetupCompartment.current.of(addExtensionsFor(shouldHaveMinimalSetup, minimalSetup)),
-            preventLineNumbersCompartment.current.of(addExtensionsFor(!editorAppearance.preventLineNumbers, adaptedLineNumbers())),
-            shouldHighlightActiveLineCompartment.current.of(addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine())),
-            wrapLinesCompartment.current.of(addExtensionsFor((editorAppearance.wrapLines!), EditorView?.lineWrapping)),
-            supportCodeFoldingCompartment.current.of(addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding())),
+            preventLineNumbersCompartment.current.of(
+                addExtensionsFor(!editorAppearance.preventLineNumbers, adaptedLineNumbers()),
+            ),
+            shouldHighlightActiveLineCompartment.current.of(
+                addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
+            ),
+            wrapLinesCompartment.current.of(addExtensionsFor(editorAppearance.wrapLines!, EditorView?.lineWrapping)),
+            supportCodeFoldingCompartment.current.of(
+                addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
+            ),
             useLintingCompartment.current.of(addExtensionsFor(useLinting, ...linters)),
             adaptedSyntaxHighlighting(defaultHighlightStyle),
             additionalExtensions,
@@ -410,9 +445,7 @@ export const CodeEditor = ({
                 view.dom.classList.add(`${eccgui}-disabled`);
             }
 
-            if (currentIntent.current) {
-                view.dom.className += ` ${eccgui}-intent--${currentIntent.current}`;
-            }
+            syncIntentClass(view, currentIntent.current);
 
             if (autoFocus) {
                 view.focus();
@@ -434,32 +467,32 @@ export const CodeEditor = ({
 
     // Updates an extension for a specific parameter that has changed after the initialization
     const updateExtension = (extension: Extension | undefined, parameterCompartment: Compartment): void => {
-        if(extension) {
+        if (extension) {
             currentView.current?.dispatch({
-                effects: parameterCompartment.reconfigure(extension)
-            })
+                effects: parameterCompartment.reconfigure(extension),
+            });
         }
-    }
+    };
 
     React.useEffect(() => {
-        updateExtension(EditorState?.readOnly.of(readOnly!), readOnlyCompartment.current)
-    }, [readOnly])
+        updateExtension(EditorState?.readOnly.of(readOnly!), readOnlyCompartment.current);
+    }, [readOnly]);
 
     React.useEffect(() => {
-        updateExtension(adaptedPlaceholder(placeholder), placeholderCompartment.current)
-    }, [placeholder])
+        updateExtension(adaptedPlaceholder(placeholder), placeholderCompartment.current);
+    }, [placeholder]);
 
     React.useEffect(() => {
-        updateExtension(useCodeMirrorModeExtension(mode), modeCompartment.current)
-    }, [mode])
+        updateExtension(useCodeMirrorModeExtension(mode), modeCompartment.current);
+    }, [mode]);
 
     React.useEffect(() => {
-        updateExtension(keymap?.of(createKeyMapConfigs()), keyMapConfigsCompartment.current)
-    }, [supportCodeFolding, mode, tabIntentStyle, (tabForceSpaceForModes ?? []).join(", "), enableTab])
+        updateExtension(keymap?.of(createKeyMapConfigs()), keyMapConfigsCompartment.current);
+    }, [supportCodeFolding, mode, tabIntentStyle, (tabForceSpaceForModes ?? []).join(", "), enableTab]);
 
     React.useEffect(() => {
-        updateExtension(EditorState?.tabSize.of(tabIntentSize ?? 2), tabIntentSizeCompartment.current)
-    }, [tabIntentSize])
+        updateExtension(EditorState?.tabSize.of(tabIntentSize ?? 2), tabIntentSizeCompartment.current);
+    }, [tabIntentSize]);
 
     React.useEffect(() => {
         updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current);
@@ -470,43 +503,62 @@ export const CodeEditor = ({
                 view.dom.classList.remove(`${eccgui}-disabled`);
             }
         }
-    }, [disabled])
+    }, [disabled]);
+
+    React.useEffect(() => {
+        syncIntentClass(view, intent);
+    }, [intent, view, syncIntentClass]);
 
     React.useEffect(() => {
         setEditorAppearance({
             ...editorAppearance,
             preventLineNumbers: preventLineNumbers ?? editorAppearance?.preventLineNumbers ?? false,
         });
-        updateExtension(addExtensionsFor(!editorAppearance.preventLineNumbers, adaptedLineNumbers()), preventLineNumbersCompartment.current)
-    }, [preventLineNumbers, editorAppearance.preventLineNumbers])
+        updateExtension(
+            addExtensionsFor(!editorAppearance.preventLineNumbers, adaptedLineNumbers()),
+            preventLineNumbersCompartment.current,
+        );
+    }, [preventLineNumbers, editorAppearance.preventLineNumbers]);
 
     React.useEffect(() => {
         setEditorAppearance({
             ...editorAppearance,
             wrapLines: wrapLines ?? editorAppearance?.wrapLines ?? false,
         });
-        updateExtension(addExtensionsFor(editorAppearance.wrapLines!, EditorView?.lineWrapping), wrapLinesCompartment.current)
-    }, [wrapLines, editorAppearance.wrapLines])
+        updateExtension(
+            addExtensionsFor(editorAppearance.wrapLines!, EditorView?.lineWrapping),
+            wrapLinesCompartment.current,
+        );
+    }, [wrapLines, editorAppearance.wrapLines]);
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup), shouldHaveMinimalSetupCompartment.current)
-    }, [shouldHaveMinimalSetup])
+        updateExtension(
+            addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup),
+            shouldHaveMinimalSetupCompartment.current,
+        );
+    }, [shouldHaveMinimalSetup]);
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(shouldHighlightActiveLine ?? false, adaptedHighlightActiveLine()), shouldHighlightActiveLineCompartment.current)
-    }, [shouldHighlightActiveLine])
+        updateExtension(
+            addExtensionsFor(shouldHighlightActiveLine ?? false, adaptedHighlightActiveLine()),
+            shouldHighlightActiveLineCompartment.current,
+        );
+    }, [shouldHighlightActiveLine]);
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(supportCodeFolding ?? false, adaptedFoldGutter(), adaptedCodeFolding()), supportCodeFoldingCompartment.current)
-    }, [supportCodeFolding])
+        updateExtension(
+            addExtensionsFor(supportCodeFolding ?? false, adaptedFoldGutter(), adaptedCodeFolding()),
+            supportCodeFoldingCompartment.current,
+        );
+    }, [supportCodeFolding]);
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(useLinting ?? false, ...linters), useLintingCompartment.current)
-    }, [mode, useLinting])
+        updateExtension(addExtensionsFor(useLinting ?? false, ...linters), useLintingCompartment.current);
+    }, [mode, useLinting]);
 
     const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
 
-    const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {
+    const editorToolbar = (mode?: SupportedCodeEditorModes): React.JSX.Element => {
         switch (mode) {
             case "markdown":
                 return (
@@ -519,9 +571,9 @@ export const CodeEditor = ({
                                 translate={getTranslation}
                                 disabled={disabled}
                                 readonly={readOnly}
-                                configMenu={(
+                                configMenu={
                                     <EditorAppearanceConfigMenu
-                                        config={{...editorAppearance}}
+                                        config={{ ...editorAppearance }}
                                         configLocked={{
                                             wrapLines,
                                             preventLineNumbers,
@@ -529,7 +581,7 @@ export const CodeEditor = ({
                                         setConfig={setEditorAppearance}
                                         configPropertyTranslate={getTranslation}
                                     />
-                                )}
+                                }
                             />
                         </div>
                         {showPreview && (

package/src/extensions/codemirror/_codemirror.scss

@@ -114,6 +114,20 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             text-decoration: line-through $eccgui-color-danger-text 2px;
         }
 
+        .cm-gutters {
+            color: #{eccgui-color-var("identity", "text", "700")};
+            background-color: #{eccgui-color-var("identity", "background", "300")};
+            border-color: #{eccgui-color-var("identity", "text", "300")};
+        }
+
+        .cm-cursor {
+            border-left-color: currentcolor;
+        }
+
+        .ͼ5 {
+            color: #{eccgui-color-var("identity", "text", "700")};
+        }
+
         .cm-scroller {
             width: calc(100% - 2px);
             height: calc(100% - 2px);
@@ -123,6 +137,38 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             margin: 1px;
         }
 
+        .cm-tooltip {
+            font-size: $eccgui-size-typo-caption;
+            line-height: $eccgui-size-typo-caption-lineheight;
+            color: #{eccgui-color-var("identity", "text", "900")};
+            background-color: #{eccgui-color-var("identity", "background", "300")};
+            border-color: #{eccgui-color-var("identity", "text", "300")};
+
+            li {
+                padding: $eccgui-size-block-whitespace * 0.25 $eccgui-size-block-whitespace * 0.5;
+            }
+
+            .cm-diagnostic-error {
+                background-color: eccgui-color-var("semantic", "danger", "100");
+                border-color: eccgui-color-var("semantic", "danger", "900");
+            }
+
+            .cm-diagnostic-warning {
+                background-color: eccgui-color-var("semantic", "warning", "100");
+                border-color: eccgui-color-var("semantic", "warning", "900");
+            }
+
+            .cm-diagnostic-info {
+                background-color: eccgui-color-var("semantic", "info", "100");
+                border-color: eccgui-color-var("semantic", "info", "900");
+            }
+
+            .cm-diagnostic-hint {
+                background-color: eccgui-color-var("identity", "accent", "100");
+                border-color: eccgui-color-var("identity", "accent", "900");
+            }
+        }
+
         &.cm-focused {
             --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
             --#{$eccgui}-a11y-outline-offset: 0;
@@ -176,6 +222,19 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
 
+        .cm-activeLine {
+            background-color: rgba($blue3, 0.1);
+        }
+
+        .cm-line span[class^="ͼ"] {
+            @media (prefers-color-scheme: dark) {
+                filter: invert(1);
+            }
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                filter: invert(1);
+            }
+        }
+
         .cm-tab {
             position: relative;
 

package/src/extensions/codemirror/debouncedLinter.ts

@@ -10,12 +10,12 @@ export const debouncedLinter = (lintFunction: Linter, time = DEBOUNCE_TIME) => {
     const debouncedFn = debounce(
         (
             view: EditorView,
-            resolve: (diagnostics: ReadonlyArray<Diagnostic> | Promise<ReadonlyArray<Diagnostic>>) => void
+            resolve: (diagnostics: ReadonlyArray<Diagnostic> | Promise<ReadonlyArray<Diagnostic>>) => void,
         ) => {
             const diagnostics = lintFunction(view);
             resolve(diagnostics);
         },
-        time
+        time,
     );
 
     return (view: EditorView) => {

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,5 +1,5 @@
 //adapted v6 modes imports
-import {html} from "@codemirror/lang-html"
+import { html } from "@codemirror/lang-html";
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
@@ -31,7 +31,7 @@ const supportedModes = {
     mathematica,
     sql,
     javascript,
-    html
+    html,
 } as const;
 
 export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
@@ -44,13 +44,17 @@ const v6AdaptedModes: ReadonlyMap<SupportedCodeEditorModes, boolean> = new Map([
     ["sql", true],
     ["yaml", true],
     ["javascript", true],
-    ["html", true]
+    ["html", true],
 ]);
 
 export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
         : v6AdaptedModes.has(mode)
-        ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => null) as () => LanguageSupport)()
-        : StreamLanguage?.define(supportedModes[mode] as StreamParser<unknown>);
+          ? (
+                (typeof supportedModes[mode] === "function"
+                    ? supportedModes[mode]
+                    : () => null) as () => LanguageSupport
+            )()
+          : StreamLanguage?.define(supportedModes[mode] as StreamParser<unknown>);
 };

package/src/extensions/codemirror/tests/CodeEditor.test.tsx

@@ -74,7 +74,7 @@ describe("CodeEditor - markdown mode with toolbar", () => {
 
     it("locks wrapLines in config menu when wrapLines prop is explicitly provided", async () => {
         const { container } = render(
-            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} wrapLines={false} />
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} wrapLines={false} />,
         );
 
         fireEvent.click(getConfigMenuOverlay(container));
@@ -85,7 +85,7 @@ describe("CodeEditor - markdown mode with toolbar", () => {
 
     it("locks preventLineNumbers in config menu when preventLineNumbers prop is explicitly provided", async () => {
         const { container } = render(
-            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} preventLineNumbers={false} />
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} preventLineNumbers={false} />,
         );
 
         fireEvent.click(getConfigMenuOverlay(container));
@@ -120,7 +120,7 @@ describe("CodeEditor - markdown mode with toolbar", () => {
                 useToolbar={true}
                 wrapLines={true}
                 preventLineNumbers={true}
-            />
+            />,
         );
 
         const configMenuTrigger = getConfigMenuOverlay(container).querySelector("button");
@@ -129,7 +129,7 @@ describe("CodeEditor - markdown mode with toolbar", () => {
 
     it("disables config menu trigger when editor is disabled", () => {
         const { container } = render(
-            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} disabled={true} />
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} disabled={true} />,
         );
 
         const configMenuTrigger = getConfigMenuOverlay(container).querySelector("button");

package/src/extensions/codemirror/tests/EditorAppearanceConfigMenu.test.tsx

@@ -27,7 +27,7 @@ describe("EditorAppearanceConfigMenu", () => {
         const translate = (key: string) => `Label_${key}` as string | false;
 
         const { container } = render(
-            <EditorAppearanceConfigMenu config={config} setConfig={setConfig} configPropertyTranslate={translate} />
+            <EditorAppearanceConfigMenu config={config} setConfig={setConfig} configPropertyTranslate={translate} />,
         );
 
         fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
@@ -55,7 +55,7 @@ describe("EditorAppearanceConfigMenu", () => {
         const setConfig = jest.fn();
 
         const { container } = render(
-            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />,
         );
 
         const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
@@ -68,7 +68,7 @@ describe("EditorAppearanceConfigMenu", () => {
         const setConfig = jest.fn();
 
         const { container } = render(
-            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />,
         );
 
         const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
@@ -81,7 +81,7 @@ describe("EditorAppearanceConfigMenu", () => {
         const setConfig = jest.fn();
 
         const { container } = render(
-            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />,
         );
 
         fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
@@ -96,7 +96,7 @@ describe("EditorAppearanceConfigMenu", () => {
         const setConfig = jest.fn();
 
         const { container } = render(
-            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />,
         );
 
         fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);

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

@@ -7,10 +7,10 @@
  */
 //Todo this should become redundant with later patches that avoid this error
 
-import { codeFolding,foldGutter, syntaxHighlighting } from "@codemirror/language";
+import { codeFolding, foldGutter, syntaxHighlighting } from "@codemirror/language";
 import { lintGutter } from "@codemirror/lint";
-import {Compartment, EditorState,Extension, StateEffect} from "@codemirror/state";
-import { EditorView, highlightActiveLine,highlightSpecialChars, lineNumbers, placeholder } from "@codemirror/view";
+import { Compartment, EditorState, Extension, StateEffect } from "@codemirror/state";
+import { EditorView, highlightActiveLine, highlightSpecialChars, lineNumbers, placeholder } from "@codemirror/view";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>
@@ -36,22 +36,22 @@ export const AdaptedEditorView = isConstructor(EditorView)
 
 /** Creates a new compartment or a mock of a compartment. */
 export const compartment = () => {
-    if(isConstructor(Compartment)) {
-        return new Compartment()
+    if (isConstructor(Compartment)) {
+        return new Compartment();
     } else {
-        let extension: Extension | undefined = undefined
+        let extension: Extension | undefined = undefined;
         return {
             of: (ext: Extension): Extension => {
-                extension = ext
-                return ext
+                extension = ext;
+                return ext;
             },
             reconfigure: (_content: Extension): StateEffect<unknown> => {
-                return {} as StateEffect<any>
+                return {} as StateEffect<any>;
             },
-            get: (_state: EditorState): Extension | undefined => extension
-        }
+            get: (_state: EditorState): Extension | undefined => extension,
+        };
     }
-}
+};
 
 const emptyExtension = (() => {}) as any;
 /** extension adding event handlers, current error '(view, domEventHandlers) is not a function'  */