@eccenca/gui-elements 25.1.0-rc.1 → 25.1.0-rc.3

package/src/components/TextField/useTextValidation.ts

@@ -44,19 +44,28 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
         state.current.detectedCodePoints = new Set();
     }, []);
     const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), []);
+    const segmenter = React.useMemo(() => new Intl.Segmenter(undefined, { granularity: "grapheme" }), []);
+    const emojiRegex = React.useMemo(() => new RegExp("\\p{Extended_Pictographic}|\\u20E3", "u"), []);
+
     const detectIssues = React.useCallback(
         (value: string): void => {
-            detectionRegex.lastIndex = 0;
-            let matchArray = detectionRegex.exec(value);
-            while (matchArray) {
-                const codePoint = matchArray[0].codePointAt(0);
-                if (codePoint) {
-                    state.current.detectedCodePoints.add(codePoint);
+            for (const { segment } of segmenter.segment(value)) {
+                if (emojiRegex.test(segment)) {
+                    // skip emoji clusters since they legitimately contain variation selectors, ZWJ, tags, etc.
+                } else {
+                    detectionRegex.lastIndex = 0;
+                    let matchArray = detectionRegex.exec(segment);
+                    while (matchArray) {
+                        const codePoint = matchArray[0].codePointAt(0);
+                        if (codePoint) {
+                            state.current.detectedCodePoints.add(codePoint);
+                        }
+                        matchArray = detectionRegex.exec(segment);
+                    }
                 }
-                matchArray = detectionRegex.exec(value);
             }
         },
-        [detectionRegex]
+        [detectionRegex, segmenter, emojiRegex]
     );
     // Checks if the value contains any problematic characters with a small delay.
     const checkValue = React.useCallback(

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom";
 
@@ -45,19 +46,53 @@ describe("Tooltip", () => {
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
         checkForPlaceholderClass(container, 1);
         await waitFor(() => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
             checkForPlaceholderClass(container, 0);
         });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
     });
     it("should be displayed on two continues mouse hover when placeholder is used", async () => {
         const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
         checkForPlaceholderClass(container, 1);
-        await waitFor(async () => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+        await waitFor(() => {
+            checkForPlaceholderClass(container, 0);
+        });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed on focus when no placeholder is used", async () => {
+        // Blueprint ignores focus events with null relatedTarget (page-refocus guard), so we tab
+        // from a preceding element to produce a non-null relatedTarget.
+        render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={false} />
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses tooltip target, relatedTarget is non-null → Blueprint opens
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed after keyboard focus when placeholder is used", async () => {
+        // Use a focusable button child so refocus() can call .focus() on it after the swap.
+        // Tab from a preceding element so relatedTarget is non-null when Blueprint handles focus.
+        const { container } = render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={true}>
+                    <button>tooltip target</button>
+                </Tooltip>
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses placeholder inner button, triggers focusin swap
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
             checkForPlaceholderClass(container, 0);
-            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
-            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
         });
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
     });
 });

package/src/components/Tooltip/Tooltip.tsx

@@ -50,7 +50,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
-export type TooltipSize = "small" | "medium" | "large"
+export type TooltipSize = "small" | "medium" | "large";
 
 export const Tooltip = ({
     children,
@@ -100,15 +100,19 @@ export const Tooltip = ({
                 }, swapDelayTime);
                 if (placeholderRef.current !== null) {
                     const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
-                    (placeholderRef.current as HTMLElement).addEventListener(eventType, () => {
-                        if (
-                            (eventType === "focusout" && eventMemory.current === "afterfocus") ||
-                            (eventType === "mouseleave" && eventMemory.current === "afterhover")
-                        ) {
-                            eventMemory.current = null;
-                        }
-                        clearTimeout(swapDelay.current as NodeJS.Timeout);
-                    });
+                    const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")
+                        ?.children[0];
+                    if (innerFocusTarget) {
+                        (innerFocusTarget as HTMLElement).addEventListener(eventType, () => {
+                            if (
+                                (eventType === "focusout" && eventMemory.current === "afterfocus") ||
+                                (eventType === "mouseleave" && eventMemory.current === "afterhover")
+                            ) {
+                                eventMemory.current = null;
+                            }
+                            clearTimeout(swapDelay.current as NodeJS.Timeout);
+                        });
+                    }
                 }
             };
             (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);

package/src/components/index.scss

@@ -33,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,6 +7,7 @@ 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";

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

@@ -34,6 +34,10 @@ const groups: { title: string; filterName: (name: string) => boolean }[] = [
         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`),

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

@@ -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,12 +237,20 @@ 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)
@@ -235,6 +259,8 @@ export const CodeEditor = ({
     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())
@@ -333,8 +359,8 @@ export const CodeEditor = ({
                 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) {
@@ -357,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),
@@ -384,8 +410,8 @@ export const CodeEditor = ({
                 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) {
@@ -447,20 +473,28 @@ export const CodeEditor = ({
     }, [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)
@@ -485,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/_codemirror.scss

@@ -19,13 +19,13 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
     &__toolbar {
         position: absolute;
-        z-index: 3;
-        left: 1px;
-        right: 1px;
         top: 1px;
-        border-radius: $pt-border-radius $pt-border-radius 0 0;
-        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        right: 1px;
+        left: 1px;
+        z-index: 3;
         background-color: $eccgui-color-codeeditor-background;
+        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
     }
 
     &--has-toolbar {
@@ -37,9 +37,9 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
     &__preview {
         position: absolute;
         top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
-        left: 1px;
         right: 1px;
         bottom: 1px;
+        left: 1px;
         z-index: 2;
         padding: $button-padding;
         overflow-y: auto;
@@ -50,12 +50,12 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
     .cm-editor {
         width: 100%;
         height: $eccgui-size-codeeditor-height;
-        clip-path: unset !important; // we may check later why they set inset(0) now
         background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+        clip-path: unset !important; // we may check later why they set inset(0) now
 
         &.#{eccgui}-disabled {
             @extend .#{$ns}-input, .#{$ns}-disabled;
@@ -89,7 +89,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.#{eccgui}-intent--primary {
-            @include pt-input-intent($eccgui-color-info-text);
+            @include pt-input-intent($eccgui-color-primary);
         }
 
         &.#{eccgui}-intent--info {
@@ -97,7 +97,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.#{eccgui}-intent--accent {
-            @include pt-input-intent($eccgui-color-primary);
+            @include pt-input-intent($eccgui-color-accent);
         }
 
         &.#{eccgui}-intent--neutral {
@@ -124,39 +124,29 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.cm-focused {
-            outline: none;
-            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+            --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+            --#{$eccgui}-a11y-outline-offset: 0;
+
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
 
             &.#{eccgui}-intent--warning {
-                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
             }
 
             &.#{eccgui}-intent--success {
-                box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
             }
 
             &.#{eccgui}-intent--danger {
-                box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
             }
 
             &.#{eccgui}-intent--primary {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
             }
 
             &.#{eccgui}-intent--info {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--accent {
-                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--neutral {
-                box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--edited {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
             }
 
             &.#{eccgui}-intent--removed {

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();
+    });
+});