@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/components/VisualTour/VisualTour.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { createPortal } from "react-dom";
-import { Classes as BlueprintClasses } from "@blueprintjs/core";
-import { createPopper } from "@popperjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
@@ -14,6 +12,7 @@ import {
     CardHeader,
     CardOptions,
     CardTitle,
+    DecoupledOverlay,
     IconButton,
     Markdown,
     ModalSize,
@@ -71,10 +70,6 @@ export const VisualTour = ({
     usableStepTarget = false,
     isOpen = false,
 }: VisualTourProps) => {
-    if (isOpen === false) {
-        return null;
-    }
-
     const [currentStepIndex, setCurrentStepIndex] = React.useState<number>(0);
     const [currentStepComponent, setCurrentStepComponent] = React.useState<React.JSX.Element | null>(null);
 
@@ -130,7 +125,7 @@ export const VisualTour = ({
                     <Button
                         key={"next"}
                         variant="outlined"
-                        intent={"primary"}
+                        elevated
                         onClick={() => {
                             setCurrentStepIndex(currentStepIndex + 1);
                         }}
@@ -144,7 +139,7 @@ export const VisualTour = ({
                         text={closeLabel}
                         onClick={closeTour}
                         variant="outlined"
-                        intent={"primary"}
+                        elevated
                         rightIcon={"navigation-close"}
                     />
                 ),
@@ -235,7 +230,11 @@ export const VisualTour = ({
         };
     }, [currentStepIndex, usableStepTarget]);
 
-    return currentStepComponent;
+    if (isOpen === false) {
+        return null;
+    } else {
+        return currentStepComponent;
+    }
 };
 
 interface StepModalProps {
@@ -292,25 +291,6 @@ interface StepPopoverProps {
 
 /** Popover that is displayed and points at the highlighted element. */
 const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: StepPopoverProps) => {
-    const tooltipRef = React.useCallback(
-        (tooltip: HTMLDivElement | null) => {
-            if (tooltip) {
-                createPopper(highlightedElement, tooltip, {
-                    placement: "auto",
-                    modifiers: [
-                        {
-                            name: "offset",
-                            options: {
-                                offset: [0, 15],
-                            },
-                        },
-                    ],
-                });
-            }
-        },
-        [highlightedElement]
-    );
-
     const backdropRef = React.useCallback(
         (backdrop: HTMLDivElement | null) => {
             const highlightStencil = () => {
@@ -340,39 +320,39 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
         [highlightedElement]
     );
 
+    // map to only tooltip size because the `DecoupledOverlay` only supports them
+    let overlaySize: TooltipSize = "large";
+    switch (step.size) {
+        case "tiny":
+            overlaySize = "small";
+            break;
+        case "regular":
+            overlaySize = "medium";
+            break;
+        case "xlarge":
+        case "fullscreen":
+            overlaySize = "large";
+            break;
+    }
+
     return createPortal(
         <div className={`${eccgui}-visual-tour`}>
             <div className={`${eccgui}-visual-tour__focushelper`} ref={backdropRef} />
             <div>
                 <div className={`${eccgui}-visual-tour__backdrop`} />
             </div>
-            <div
-                className={
-                    `${eccgui}-visual-tour__overlay` +
-                    ` ${eccgui}-visual-tour__overlay--${step.size ?? "large"}` +
-                    ` ${BlueprintClasses.POPOVER}`
-                }
-                role="tooltip"
-                ref={tooltipRef}
-            >
-                <div
-                    className={`${eccgui}-visual-tour__arrow ${BlueprintClasses.POPOVER_ARROW}`}
-                    data-popper-arrow
-                    aria-hidden
-                />
-                <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-visual-tour__overlay__content`}>
-                    <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
-                        <CardHeader>
-                            <CardTitle>{step.title}</CardTitle>
-                            <CardOptions>{titleOption}</CardOptions>
-                        </CardHeader>
-                        <CardContent>
-                            <StepContent step={step} />
-                        </CardContent>
-                        <CardActions inverseDirection>{actionButtons}</CardActions>
-                    </Card>
-                </div>
-            </div>
+            <DecoupledOverlay targetSelectorOrElement={highlightedElement} size={overlaySize} usePortal={false}>
+                <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
+                    <CardHeader>
+                        <CardTitle>{step.title}</CardTitle>
+                        <CardOptions>{titleOption}</CardOptions>
+                    </CardHeader>
+                    <CardContent>
+                        <StepContent step={step} />
+                    </CardContent>
+                    <CardActions inverseDirection>{actionButtons}</CardActions>
+                </Card>
+            </DecoupledOverlay>
         </div>,
         document.body
     );

package/src/components/VisualTour/visualTour.scss

@@ -31,40 +31,6 @@
     opacity: 0;
 }
 
-.#{$eccgui}-visual-tour__arrow {
-    &::before {
-        background: $card-background-color;
-    }
-
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
-        bottom: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
-        left: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
-        top: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
-        right: -0.5 * $eccgui-size-block-whitespace;
-    }
-}
-
-.#{$eccgui}-visual-tour__overlay {
-    z-index: 8002; // 2 over application header
-    &--small {
-        @extend .#{$eccgui}-tooltip--small;
-    }
-
-    &--medium {
-        @extend .#{$eccgui}-tooltip--medium;
-    }
-
-    &--large {
-        @extend .#{$eccgui}-tooltip--large;
-    }
-}
-
 .#{$eccgui}-card__content {
     .#{$eccgui}-visual-tour__overlay__content & {
         max-height: 45vh;

package/src/components/index.scss

@@ -5,6 +5,7 @@
 @import "./Card/card";
 @import "./Chat/chat";
 @import "./Checkbox/checkbox";
+@import "./DecoupledOverlay/decoupledoverlay";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
 @import "./FlexibleLayout/flexiblelayout";
@@ -32,6 +33,7 @@
 @import "./Tabs/tabs";
 @import "./Tag/tag";
 @import "./TextField/textfield";
+@import "./ColorField/colorfield";
 @import "./TagInput/taginput";
 @import "./Toolbar/toolbar";
 @import "./Tooltip/tooltip";

package/src/components/index.ts

@@ -7,8 +7,10 @@ export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
 export * from "./CodeAutocompleteField";
+export * from "./ColorField/ColorField";
 export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
+export * from "./DecoupledOverlay/DecoupledOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
 export * from "./FlexibleLayout";
@@ -23,6 +25,7 @@ export * from "./Link/Link";
 export * from "./List/List";
 export * from "./Menu";
 export * from "./MultiSuggestField";
+export * from "./NotAvailable/NotAvailable";
 export * from "./Notification";
 export * from "./OverviewItem";
 export * from "./Pagination/Pagination";

package/src/configuration/_customproperties.scss

@@ -0,0 +1,32 @@
+/**
+ * We mirror our SCSS variables here to improve availability in inline styles
+ * and module styles without included SCSS config stack.
+ * Colors are set in `src/components/Application/_colors.scss`.
+ */
+
+:root {
+    --#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption};
+    --#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
+    --#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text};
+    --#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
+    --#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
+    --#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
+    --#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title};
+    --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
+    --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline};
+    --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
+    --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light};
+    --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular};
+    --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold};
+    --#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
+    --#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular};
+    --#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide};
+    --#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace};
+    --#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
+    --#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular};
+    --#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow};
+    --#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted};
+    --#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled};
+    --#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly};
+    --#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible};
+}

package/src/configuration/stories/customproperties.stories.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import CssCustomProperties from "../../common/utils/CssCustomProperties";
+import {
+    Section,
+    SectionHeader,
+    Spacing,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    TitleSubsection,
+} from "../../components";
+import { CLASSPREFIX as eccgui } from "../../index";
+
+const groups: { title: string; filterName: (name: string) => boolean }[] = [
+    {
+        title: "Typography",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-typo`),
+    },
+    {
+        title: "Font weights and spacing",
+        filterName: (name) => name.startsWith(`--${eccgui}-font`),
+    },
+    {
+        title: "Whitespace",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-block`) || name.startsWith(`--${eccgui}-size-inline`),
+    },
+    {
+        title: "Color aliases",
+        filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
+    },
+    {
+        title: "Accessibility",
+        filterName: (name) => name.startsWith(`--${eccgui}-a11y`),
+    },
+    {
+        title: "Opacity",
+        filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
+    },
+    {
+        title: "Palette colors",
+        filterName: (name) => name.startsWith(`--${eccgui}-color-palette`),
+    },
+];
+
+const CssCustomPropertiesOverview = () => {
+    return (
+        <>
+            {groups.map(({ title, filterName }) => {
+                const properties = new CssCustomProperties({
+                    selectorText: ":root",
+                    filterName,
+                    removeDashPrefix: false,
+                    returnObject: false,
+                }).customProperties() as string[][];
+
+                return (
+                    <React.Fragment key={title}>
+                        <Section>
+                            <SectionHeader>
+                                <TitleSubsection>{title}</TitleSubsection>
+                            </SectionHeader>
+                            <Spacing size="tiny" />
+                            <TableContainer>
+                                <Table columnWidths={["60%", "40%"]}>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableHeader>CSS custom property</TableHeader>
+                                            <TableHeader>Current value</TableHeader>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {properties.map(([name, value]) => (
+                                            <TableRow key={name}>
+                                                <TableCell>
+                                                    <code>{name}</code>
+                                                </TableCell>
+                                                <TableCell>
+                                                    {name.startsWith(`--${eccgui}-color`) && (
+                                                        <span
+                                                            style={{
+                                                                display: "inline-block",
+                                                                width: `var(--${eccgui}-size-block-whitespace)`,
+                                                                height: `var(--${eccgui}-size-block-whitespace)`,
+                                                                backgroundColor: value,
+                                                                verticalAlign: "middle",
+                                                                marginRight: `var(--${eccgui}-size-inline-whitespace)`,
+                                                                border: "1px solid currentColor",
+                                                            }}
+                                                        />
+                                                    )}
+                                                    <code>{value}</code>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Section>
+                        <Spacing size="large" />
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+};
+
+/**
+ * We mirror our SCSS configuration variables as CSS custom vars.
+ * This way they can be easily used for inline styles or in CSS modules without SCSS includes.
+ */
+export default {
+    title: "Configuration/CSS Custom Properties",
+    component: CssCustomPropertiesOverview,
+} as Meta<typeof CssCustomPropertiesOverview>;
+
+export const Default: StoryFn = () => <CssCustomPropertiesOverview />;

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -24,17 +24,22 @@ const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args}
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {
-    name: "codeinput",
+    name: "jsinput",
+    mode: "json",
+    defaultValue: '{ json: "true" }',
+};
+
+export const MarkdownWithToolbar = TemplateFull.bind({});
+MarkdownWithToolbar.args = {
+    name: "mdinput",
     mode: "markdown",
     defaultValue: "**test me**",
     useToolbar: true,
-    disabled: false,
-    readOnly: true,
 };
 
 export const LinterExample = TemplateFull.bind({});
 LinterExample.args = {
-    name: "codeinput",
+    name: "lintinput",
     defaultValue: "**test me**",
     mode: "javascript",
     useLinting: true,

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
-import { EditorState, Extension, Compartment } 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";
-import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
-import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -31,12 +31,23 @@ import {
     adaptedLineNumbers,
     adaptedLintGutter,
     adaptedPlaceholder,
-    compartment,
     adaptedSyntaxHighlighting,
+    compartment,
 } from "./tests/codemirrorTestHelper";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
 import { ExtensionCreator } from "./types";
 
-export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
+interface EditorAppearance {
+    /**
+     * If enabled the code editor won't show numbers before each line.
+     */
+    preventLineNumbers?: boolean;
+
+    /** Long lines are wrapped and displayed on multiple lines */
+    wrapLines?: boolean;
+}
+
+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;
     /**
@@ -86,10 +97,6 @@ export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * Default value used first when the editor is instanciated.
      */
     defaultValue?: string;
-    /**
-     * If enabled the code editor won't show numbers before each line.
-     */
-    preventLineNumbers?: boolean;
 
     /** Set read-only mode. Default: false */
     readOnly?: boolean;
@@ -97,11 +104,8 @@ export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /** Optional height of the component */
     height?: number | string;
 
-    /** Long lines are wrapped and displayed on multiple lines */
-    wrapLines?: boolean;
-
     /**
-     * Add properties to the `div` used as warpper element.
+     * 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">;
@@ -186,6 +190,18 @@ const ModeLinterMap: ReadonlyMap<SupportedCodeEditorModes, ReadonlyArray<Extensi
 
 const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"];
 
+const defaultAppearanceForModeWithToolbar: ReadonlyMap<SupportedCodeEditorModes, EditorAppearance> = new Map([
+    ["markdown", { wrapLines: true, preventLineNumbers: true }]
+]);
+
+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.
  */
@@ -200,11 +216,11 @@ export const CodeEditor = ({
     name,
     id,
     mode,
-    preventLineNumbers = false,
+    preventLineNumbers,
+    wrapLines,
     defaultValue = "",
     readOnly = false,
     shouldHaveMinimalSetup = true,
-    wrapLines = false,
     onScroll,
     setEditorView,
     supportCodeFolding = false,
@@ -221,16 +237,30 @@ export const CodeEditor = ({
     autoFocus = false,
     disabled = false,
     intent,
-    useToolbar,
+    useToolbar = false,
     translate,
     ...otherCodeEditorProps
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
-    const currentView = React.useRef<EditorView>()
+    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>(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())
@@ -319,18 +349,18 @@ export const CodeEditor = ({
             disabledCompartment.current.of(EditorView?.editable.of(!disabled)),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
-                if (disabled) return;
+                if (currentDisabled.current) return;
 
-                if (onChange && v.docChanged) {
+                if (currentOnChange.current && v.docChanged) {
                     // Only fire if the text has actually been changed
-                    onChange(v.state.doc.toString());
+                    currentOnChange.current(v.state.doc.toString());
                 }
 
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
-                if (onFocusChange && intent && !v.view.dom.classList?.contains(`${eccgui}-intent--${intent}`)) {
-                    v.view.dom.classList.add(`${eccgui}-intent--${intent}`);
+                if (onFocusChange && currentIntent.current && !v.view.dom.classList?.contains(`${eccgui}-intent--${currentIntent.current}`)) {
+                    v.view.dom.classList.add(`${eccgui}-intent--${currentIntent.current}`);
                 }
 
                 if (onCursorChange) {
@@ -353,9 +383,9 @@ export const CodeEditor = ({
                 }
             }),
             shouldHaveMinimalSetupCompartment.current.of(addExtensionsFor(shouldHaveMinimalSetup, minimalSetup)),
-            preventLineNumbersCompartment.current.of(addExtensionsFor(!preventLineNumbers, adaptedLineNumbers())),
+            preventLineNumbersCompartment.current.of(addExtensionsFor(!editorAppearance.preventLineNumbers, adaptedLineNumbers())),
             shouldHighlightActiveLineCompartment.current.of(addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine())),
-            wrapLinesCompartment.current.of(addExtensionsFor(wrapLines, EditorView?.lineWrapping)),
+            wrapLinesCompartment.current.of(addExtensionsFor((editorAppearance.wrapLines!), EditorView?.lineWrapping)),
             supportCodeFoldingCompartment.current.of(addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding())),
             useLintingCompartment.current.of(addExtensionsFor(useLinting, ...linters)),
             adaptedSyntaxHighlighting(defaultHighlightStyle),
@@ -377,11 +407,11 @@ export const CodeEditor = ({
             }
 
             if (disabled) {
-                view.dom.className += ` ${eccgui}-disabled`;
+                view.dom.classList.add(`${eccgui}-disabled`);
             }
 
-            if (intent) {
-                view.dom.className += ` ${eccgui}-intent--${intent}`;
+            if (currentIntent.current) {
+                view.dom.className += ` ${eccgui}-intent--${currentIntent.current}`;
             }
 
             if (autoFocus) {
@@ -432,24 +462,39 @@ export const CodeEditor = ({
     }, [tabIntentSize])
 
     React.useEffect(() => {
-        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current)
+        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current);
+        if (view?.dom) {
+            if (disabled) {
+                view.dom.classList.add(`${eccgui}-disabled`);
+            } else {
+                view.dom.classList.remove(`${eccgui}-disabled`);
+            }
+        }
     }, [disabled])
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup), shouldHaveMinimalSetupCompartment.current)
-    }, [shouldHaveMinimalSetup])
+        setEditorAppearance({
+            ...editorAppearance,
+            preventLineNumbers: preventLineNumbers ?? editorAppearance?.preventLineNumbers ?? false,
+        });
+        updateExtension(addExtensionsFor(!editorAppearance.preventLineNumbers, adaptedLineNumbers()), preventLineNumbersCompartment.current)
+    }, [preventLineNumbers, editorAppearance.preventLineNumbers])
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(!preventLineNumbers, adaptedLineNumbers()), preventLineNumbersCompartment.current)
-    }, [preventLineNumbers])
+        setEditorAppearance({
+            ...editorAppearance,
+            wrapLines: wrapLines ?? editorAppearance?.wrapLines ?? false,
+        });
+        updateExtension(addExtensionsFor(editorAppearance.wrapLines!, EditorView?.lineWrapping), wrapLinesCompartment.current)
+    }, [wrapLines, editorAppearance.wrapLines])
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(shouldHighlightActiveLine ?? false, adaptedHighlightActiveLine()), shouldHighlightActiveLineCompartment.current)
-    }, [shouldHighlightActiveLine])
+        updateExtension(addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup), shouldHaveMinimalSetupCompartment.current)
+    }, [shouldHaveMinimalSetup])
 
     React.useEffect(() => {
-        updateExtension(addExtensionsFor(wrapLines ?? false, EditorView?.lineWrapping), wrapLinesCompartment.current)
-    }, [wrapLines])
+        updateExtension(addExtensionsFor(shouldHighlightActiveLine ?? false, adaptedHighlightActiveLine()), shouldHighlightActiveLineCompartment.current)
+    }, [shouldHighlightActiveLine])
 
     React.useEffect(() => {
         updateExtension(addExtensionsFor(supportCodeFolding ?? false, adaptedFoldGutter(), adaptedCodeFolding()), supportCodeFoldingCompartment.current)
@@ -461,7 +506,7 @@ export const CodeEditor = ({
 
     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 (
@@ -474,6 +519,17 @@ export const CodeEditor = ({
                                 translate={getTranslation}
                                 disabled={disabled}
                                 readonly={readOnly}
+                                configMenu={(
+                                    <EditorAppearanceConfigMenu
+                                        config={{...editorAppearance}}
+                                        configLocked={{
+                                            wrapLines,
+                                            preventLineNumbers,
+                                        }}
+                                        setConfig={setEditorAppearance}
+                                        configPropertyTranslate={getTranslation}
+                                    />
+                                )}
                             />
                         </div>
                         {showPreview && (