@eccenca/gui-elements 25.1.0-rc.0 → 25.1.0-rc.2

package/src/extensions/codemirror/CodeMirror.tsx

@@ -6,6 +6,7 @@ import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } fr
 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";
@@ -36,7 +37,17 @@ import {
 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 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 [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)
@@ -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 && (

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

@@ -0,0 +1,138 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { CodeEditor } from "../CodeMirror";
+
+const contextOverlayClass = `${eccgui}-contextoverlay`;
+
+const setupDocumentRange = () => {
+    document.createRange = () => {
+        const range = new Range();
+        range.getBoundingClientRect = jest.fn();
+        range.getClientRects = () => ({
+            item: () => null,
+            length: 0,
+            [Symbol.iterator]: jest.fn(),
+        });
+        return range;
+    };
+};
+
+describe("CodeEditor - markdown mode with toolbar", () => {
+    beforeAll(() => {
+        setupDocumentRange();
+    });
+
+    // The toolbar contains a Paragraphs ContextMenu first, then the EditorAppearanceConfigMenu last.
+    const getConfigMenuOverlay = (container: HTMLElement) => {
+        const overlays = container.getElementsByClassName(contextOverlayClass);
+        return overlays[overlays.length - 1] as HTMLElement;
+    };
+
+    it("renders toolbar when mode is markdown and useToolbar is true", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+        expect(container.querySelector(`.${eccgui}-codeeditor__toolbar`)).not.toBeNull();
+    });
+
+    it("does not render toolbar when useToolbar is false", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={false} />);
+        expect(container.querySelector(`.${eccgui}-codeeditor__toolbar`)).toBeNull();
+    });
+
+    it("does not render toolbar for non-markdown modes even when useToolbar is true", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="yaml" useToolbar={true} />);
+        expect(container.querySelector(`.${eccgui}-codeeditor__toolbar`)).toBeNull();
+    });
+
+    it("includes the EditorAppearanceConfigMenu in the markdown toolbar", () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+        const toolbar = container.querySelector(`.${eccgui}-codeeditor__toolbar`);
+        // Toolbar contains at least the Paragraphs menu and the EditorAppearanceConfigMenu
+        expect(toolbar?.getElementsByClassName(contextOverlayClass).length).toBeGreaterThanOrEqual(2);
+    });
+
+    it("defaults wrapLines to true in markdown mode with toolbar", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    it("defaults preventLineNumbers to true in markdown mode with toolbar", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    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} />
+        );
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    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} />
+        );
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    it("does not lock wrapLines in config menu when wrapLines prop is not provided", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("does not lock preventLineNumbers in config menu when preventLineNumbers prop is not provided", async () => {
+        const { container } = render(<CodeEditor name="test-editor" mode="markdown" useToolbar={true} />);
+
+        fireEvent.click(getConfigMenuOverlay(container));
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("disables config menu trigger when both wrapLines and preventLineNumbers props are provided", () => {
+        const { container } = render(
+            <CodeEditor
+                name="test-editor"
+                mode="markdown"
+                useToolbar={true}
+                wrapLines={true}
+                preventLineNumbers={true}
+            />
+        );
+
+        const configMenuTrigger = getConfigMenuOverlay(container).querySelector("button");
+        expect(configMenuTrigger).toBeDisabled();
+    });
+
+    it("disables config menu trigger when editor is disabled", () => {
+        const { container } = render(
+            <CodeEditor name="test-editor" mode="markdown" useToolbar={true} disabled={true} />
+        );
+
+        const configMenuTrigger = getConfigMenuOverlay(container).querySelector("button");
+        expect(configMenuTrigger).toBeDisabled();
+    });
+});

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

@@ -0,0 +1,131 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { EditorAppearanceConfigMenu } from "../toolbars/EditorAppearanceConfigMenu";
+
+const contextOverlayClass = `${eccgui}-contextoverlay`;
+
+describe("EditorAppearanceConfigMenu", () => {
+    it("renders menu items for each config property, using key as fallback label", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        expect(await screen.findByText("wrapLines")).toBeVisible();
+        expect(await screen.findByText("preventLineNumbers")).toBeVisible();
+    });
+
+    it("uses configPropertyTranslate for menu item labels", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+        const translate = (key: string) => `Label_${key}` as string | false;
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} setConfig={setConfig} configPropertyTranslate={translate} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        expect(await screen.findByText("Label_wrapLines")).toBeVisible();
+        expect(await screen.findByText("Label_preventLineNumbers")).toBeVisible();
+    });
+
+    it("calls setConfig with the toggled value when a menu item is clicked", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        fireEvent.click(wrapLinesItem);
+
+        expect(setConfig).toHaveBeenCalledWith({ wrapLines: false, preventLineNumbers: false });
+    });
+
+    it("menu trigger is disabled when all config properties are locked", () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true, preventLineNumbers: true };
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
+        expect(trigger).toBeDisabled();
+    });
+
+    it("menu trigger is enabled when not all config properties are locked", () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true }; // only one locked
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
+        expect(trigger).not.toBeDisabled();
+    });
+
+    it("locked config property has a disabled menu item", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true };
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    it("unlocked config property has an enabled menu item", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true }; // only wrapLines is locked
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("selected config property is marked as selected in the menu", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    it("unselected config property is not marked as selected in the menu", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-selected='true']")).toBeNull();
+    });
+});

package/src/extensions/codemirror/toolbars/EditorAppearanceConfigMenu.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { ContextMenu, ContextMenuProps, MenuItem } from "../../../components";
+
+export interface EditorAppearanceConfigMenuProps {
+    /** Object containing a `true`/`false` value for each property */
+    config: { [s: string]: boolean };
+    /** Object containing `true` for each property that cannot be changed by user */
+    configLocked?: { [s: string]: boolean | undefined };
+    /** Handler that returns a translation for each config property key */
+    configPropertyTranslate?: (key: string) => string | false;
+    /** Handler to update config after user changes */
+    setConfig: React.Dispatch<React.SetStateAction<{ [s: string]: boolean }>>;
+    /** Additional properties used for the included `ContextMenu` */
+    contextMenuProps?: ContextMenuProps;
+}
+
+/**
+ * Returns a simple context menu that provides switches to control the editor appearance.
+ */
+export function EditorAppearanceConfigMenu({
+    config,
+    configLocked = {},
+    configPropertyTranslate = (s) => s,
+    setConfig,
+    contextMenuProps,
+}: EditorAppearanceConfigMenuProps) {
+    return (
+        <ContextMenu
+            togglerElement={"item-settings"}
+            {...contextMenuProps}
+            disabled={
+                contextMenuProps?.disabled ??
+                Object.values(config).length ===
+                    Object.values(configLocked).filter((value) => {
+                        return typeof value !== "undefined";
+                    }).length
+            }
+        >
+            {Object.entries(config).map(([key, value]) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        roleStructure={"listoption"}
+                        selected={value}
+                        text={configPropertyTranslate(key) || key}
+                        disabled={typeof configLocked[key] !== "undefined"}
+                        onClick={() => {
+                            setConfig({
+                                ...config,
+                                [key]: !value,
+                            });
+                        }}
+                    />
+                );
+            })}
+        </ContextMenu>
+    );
+}

package/src/extensions/codemirror/toolbars/markdown.toolbar.tsx

@@ -9,6 +9,7 @@ import { Spacing } from "../../../components/Separation/Spacing";
 import { Toolbar, ToolbarSection } from "../../../components/Toolbar";
 
 import MarkdownCommand from "./commands/markdown.command";
+import { EditorAppearanceConfigMenu } from "./EditorAppearanceConfigMenu";
 
 interface MarkdownToolbarProps {
     view?: EditorView;
@@ -17,6 +18,7 @@ interface MarkdownToolbarProps {
     translate: (key: string) => string | false;
     disabled?: boolean;
     readonly?: boolean;
+    configMenu?: React.ReactElement<typeof EditorAppearanceConfigMenu>;
 }
 
 export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
@@ -25,7 +27,8 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
     showPreview,
     disabled,
     readonly,
-    translate
+    translate,
+    configMenu,
 }) => {
     const commandRef = React.useRef<MarkdownCommand | null>(null);
 
@@ -35,10 +38,10 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
         }
     }, [view]);
 
-    const getTranslation = (fallback: string) : string => {
+    const getTranslation = (fallback: string): string => {
         const key = fallback.toLowerCase().replace(" ", "-");
         return translate(key) || fallback;
-    }
+    };
 
     const { basic, lists, attachments } = MarkdownCommand.commands;
     return (
@@ -112,6 +115,17 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
                     disabled={disabled}
                 />
             </ToolbarSection>
+            {configMenu && (
+                <ToolbarSection>
+                    <Spacing vertical size="small" hasDivider />
+                    {React.cloneElement(configMenu, {
+                        ...{
+                            ...configMenu.props,
+                            contextMenuProps: { disabled: showPreview || disabled ? true : undefined },
+                        },
+                    })}
+                </ToolbarSection>
+            )}
         </Toolbar>
     );
 };

package/src/extensions/react-flow/_config.scss

@@ -8,9 +8,9 @@ $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
 $reactflow-edge-rendering: geometricprecision !default;
-$reactflow-edge-stroke-width-default: 2px !default;
-$reactflow-edge-stroke-width-hover: 2px !default;
-$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-width-default: 1px !default;
+$reactflow-edge-stroke-width-hover: 1px !default;
+$reactflow-edge-stroke-width-selected: 1px !default;
 $reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
 $reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
 $reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -81,9 +81,11 @@ export const EdgeLabel = memo(
                         })}
                     </div>
                 )}
-                <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
-                    {typeof text === "string" ? <OverflowText>{text}</OverflowText> : text}
-                </div>
+                {(title || text) && (
+                    <div className={`${eccgui}-graphviz__edge-label__text`} title={title??undefined}>
+                        {text && (typeof text === "string" ? <OverflowText>{text}</OverflowText> : text)}
+                    </div>
+                )}
                 {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
         );