@gooddata/sdk-ui-kit 10.27.0-alpha.43 → 10.27.0-alpha.45

package/esm/measureNumberFormat/customFormatDialog/FormatInput.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 import { WrappedComponentProps } from "react-intl";
 import { ISeparators } from "@gooddata/sdk-ui";
+import { StreamLanguage } from "@codemirror/language";
 import { IFormatTemplate } from "../typings.js";
+type LanguageState = {
+    isInColor: boolean;
+    isInCustomColor: boolean;
+    isInCondition: boolean;
+    isInArithmeticExpression: boolean;
+};
+export declare const formattingLanguage: StreamLanguage<LanguageState>;
 interface IFormatInputOwnProps {
     format: string;
     onFormatChange: (format: string) => void;

package/esm/measureNumberFormat/customFormatDialog/FormatInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormatInput.d.ts","sourceRoot":"","sources":["../../../src/measureNumberFormat/customFormatDialog/FormatInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAkChD,UAAU,oBAAoB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAC9C;AAED,KAAK,iBAAiB,GAAG,oBAAoB,GAAG,qBAAqB,CAAC;AAgCtE,QAAA,MAAM,mBAAmB;;CAA0B,CAAC;AAEpD,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FormatInput.d.ts","sourceRoot":"","sources":["../../../src/measureNumberFormat/customFormatDialog/FormatInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,KAAK,aAAa,GAAG;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,wBAAwB,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,kBAAkB,+BAwG7B,CAAC;AAIH,UAAU,oBAAoB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAC9C;AAED,KAAK,iBAAiB,GAAG,oBAAoB,GAAG,qBAAqB,CAAC;AAgCtE,QAAA,MAAM,mBAAmB;;CAA0B,CAAC;AAEpD,eAAe,mBAAmB,CAAC"}

package/esm/measureNumberFormat/customFormatDialog/FormatInput.js

@@ -1,39 +1,101 @@
-// (C) 2020-2022 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 import React from "react";
 import { injectIntl } from "react-intl";
+import { StreamLanguage } from "@codemirror/language";
 import { FormatTemplatesDropdown } from "./formatTemplatesDropdown/FormatTemplatesDropdown.js";
 import { SyntaxHighlightingInput } from "../../syntaxHighlightingInput/SyntaxHighlightingInput.js";
-const formattingRules = {
-    start: [
-        { regex: /"(?:[^\\]|\\.)*?"/, token: "string" },
-        { regex: /(?:black|blue|cyan|green|magenta|red|yellow|white)\b/i, token: "keyword" },
-        {
-            regex: /(backgroundColor|color)(=)([a-f0-9]{6}|[a-f0-9]{3})/i,
-            token: ["variable-4", null, "keyword"],
-        },
-        {
-            // disabling for legibility
-            // eslint-disable-next-line regexp/prefer-character-class
-            regex: /(<|>|=|>=|<=)(-?)(\d*(\.|,)?\d+|Null)/i,
-            token: ["variable-5", "variable-5", "variable-5"],
-        },
-        { regex: /\/\/.*/, token: "comment" },
-        { regex: /\/(?:[^\\]|\\.)*?\//, token: "variable-3" },
-        { regex: /\/\*/, token: "comment", next: "comment" },
-        { regex: /[{[(]/, indent: true, token: "variable-brackets" },
-        { regex: /[}\])]/, dedent: true, token: "variable-brackets" },
-        { regex: /[a-z$][\w$]*/, token: "variable" },
-        { regex: /<</, token: "meta", mode: { spec: "xml", end: />>/ } },
-    ],
-    comment: [
-        { regex: /.*?\*\//, token: "comment", next: "start" },
-        { regex: /.*/, token: "comment" },
-    ],
-    meta: {
-        dontIndentStates: ["comment"],
-        lineComment: "//",
+export const formattingLanguage = StreamLanguage.define({
+    startState() {
+        return {
+            isInColor: false,
+            isInCustomColor: false,
+            isInCondition: false,
+            isInArithmeticExpression: false,
+        };
     },
-};
+    token(stream, state) {
+        // Arithmetic expressions
+        if (state.isInArithmeticExpression ||
+            stream.match(/^\{\{\{(?:\d+(?:\.\d+)?)?\|(?:\d+\.?)?\|[^}]+\}\}\}/, false)) {
+            if (stream.match("{{{")) {
+                state.isInArithmeticExpression = true;
+                return "bracket";
+            }
+            if (stream.match("}}}")) {
+                state.isInArithmeticExpression = false;
+                return "bracket";
+            }
+            if (stream.match(/^(?:\d+(?:\.\d+)?)?\|(?:\d+\.?)?\|/)) {
+                return "variableName";
+            }
+            // For the last section, fall through, as arithmetic expression can contain other tokens
+        }
+        // Colors
+        if (state.isInColor ||
+            stream.match(/^\[(?:black|blue|cyan|green|magenta|red|white|yellow|none)\]/i, false)) {
+            if (stream.match("[")) {
+                state.isInColor = true;
+                return "bracket";
+            }
+            if (stream.match(/^[^\]]+/)) {
+                return "keyword";
+            }
+            if (stream.match("]")) {
+                state.isInColor = false;
+                return "bracket";
+            }
+        }
+        // Custom colors
+        if (state.isInCustomColor ||
+            stream.match(/^\[(?:backgroundColor|color)=#?(?:[a-f0-9]{6}|[a-f0-9]{3})\]/i, false)) {
+            if (stream.match("[")) {
+                state.isInCustomColor = true;
+                return "bracket";
+            }
+            if (stream.match("]")) {
+                state.isInCustomColor = false;
+                return "bracket";
+            }
+            if (stream.match(/^(?:backgroundColor|color)/i)) {
+                return "variableName.special";
+            }
+            if (stream.match(/=/)) {
+                return "bracket";
+            }
+            if (stream.match(/^#?(?:[a-f0-9]{6}|[a-f0-9]{3})/i)) {
+                return "keyword";
+            }
+        }
+        // Condition separator
+        if (stream.match(";")) {
+            return "bracket";
+        }
+        // Explicit conditions
+        if (state.isInCondition || stream.match(/^\[(?:>=|<=|[<>=])-?(?:\d+(?:[.,]\d+)?|Null)\]/i, false)) {
+            if (stream.match("[")) {
+                state.isInCondition = true;
+                return "bracket";
+            }
+            if (stream.match("]")) {
+                state.isInCondition = false;
+                return "bracket";
+            }
+            stream.eat(/^[^\]]/);
+            return "variableName.standard";
+        }
+        // Escaping special characters
+        if (stream.match(/^\\[0#?,.\\[\];]/)) {
+            return "variableName";
+        }
+        // Number formatting
+        if (stream.match(/^[0#?,]+(?:\.[0#?,]*)?/)) {
+            return "string";
+        }
+        stream.next(); // Move the stream forward
+        return "variableName";
+    },
+});
+const codeMirrorExtensions = [formattingLanguage];
 class FormatInput extends React.PureComponent {
     render() {
         const { format, onFormatChange, separators, templates, intl } = this.props;
@@ -41,7 +103,7 @@ class FormatInput extends React.PureComponent {
             React.createElement("div", { className: "gd-measure-custom-format-dialog-section-title" },
                 React.createElement("span", null, intl.formatMessage({ id: "measureNumberCustomFormatDialog.definition" })),
                 templates ? (React.createElement(FormatTemplatesDropdown, { onChange: onFormatChange, separators: separators, templates: templates })) : null),
-            React.createElement(SyntaxHighlightingInput, { value: format, formatting: formattingRules, onChange: this.handleInputChange, className: "s-custom-format-input" })));
+            React.createElement(SyntaxHighlightingInput, { value: format, extensions: codeMirrorExtensions, onChange: this.handleInputChange, className: "s-custom-format-input" })));
     }
     handleInputChange = (value) => {
         this.props.onFormatChange(value);

package/esm/measureNumberFormat/customFormatDialog/FormatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatInput.js","sourceRoot":"","sources":["../../../src/measureNumberFormat/customFormatDialog/FormatInput.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,YAAY,CAAC;AAG/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,sDAAsD,CAAC;AAC/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,0DAA0D,CAAC;AAGnG,MAAM,eAAe,GAAG;IACpB,KAAK,EAAE;QACH,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC/C,EAAE,KAAK,EAAE,uDAAuD,EAAE,KAAK,EAAE,SAAS,EAAE;QACpF;YACI,KAAK,EAAE,sDAAsD;YAC7D,KAAK,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC;SACzC;QACD;YACI,2BAA2B;YAC3B,yDAAyD;YACzD,KAAK,EAAE,wCAAwC;YAC/C,KAAK,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;SACpD;QACD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE;QACrC,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,YAAY,EAAE;QACrD,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;QACpD,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE;QAC5D,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE;QAC7D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE;QAC5C,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;KACnE;IACD,OAAO,EAAE;QACL,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;QACrD,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;KACpC;IACD,IAAI,EAAE;QACF,gBAAgB,EAAE,CAAC,SAAS,CAAC;QAC7B,WAAW,EAAE,IAAI;KACpB;CACJ,CAAC;AAWF,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAgC;IACrD,MAAM;QACT,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3E,OAAO,CACH,6BAAK,SAAS,EAAE,yCAAyC;YACrD,6BAAK,SAAS,EAAE,+CAA+C;gBAC3D,kCAAO,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,4CAA4C,EAAE,CAAC,CAAQ;gBACtF,SAAS,CAAC,CAAC,CAAC,CACT,oBAAC,uBAAuB,IACpB,QAAQ,EAAE,cAAc,EACxB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACtB,CACL,CAAC,CAAC,CAAC,IAAI,CACN;YACN,oBAAC,uBAAuB,IACpB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,eAAe,EAC3B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,uBAAuB,GACpC,CACA,CACT,CAAC;IACN,CAAC;IAEO,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;CACL;AAED,MAAM,mBAAmB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAEpD,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FormatInput.js","sourceRoot":"","sources":["../../../src/measureNumberFormat/customFormatDialog/FormatInput.tsx"],"names":[],"mappings":"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"}

package/esm/sdk-ui-kit.d.ts

@@ -16,6 +16,7 @@ import { ColorFormats } from 'tinycolor2';
 import { Component } from 'react';
 import { CSSProperties } from 'react';
 import { DebouncedFunc } from 'lodash';
+import { Extension } from '@codemirror/state';
 import { GoodDataSdkError } from '@gooddata/sdk-ui';
 import { IAccessControlAware } from '@gooddata/sdk-model';
 import { IAccessGrantee } from '@gooddata/sdk-model';
@@ -4296,8 +4297,8 @@ export declare interface ISyntaxHighlightingInputProps {
     value: string;
     onChange: (value: string) => void;
     onCursor?: (from: number, to: number) => void;
-    formatting?: any;
-    customOptions?: any;
+    placeholder?: string;
+    extensions?: Extension[];
     className?: string;
 }
 

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-import "codemirror/addon/mode/simple.js";
-import "codemirror/addon/edit/matchbrackets.js";
-import "codemirror/addon/display/placeholder.js";
+import { Extension } from "@codemirror/state";
 /**
  * @internal
  */
@@ -9,8 +7,8 @@ export interface ISyntaxHighlightingInputProps {
     value: string;
     onChange: (value: string) => void;
     onCursor?: (from: number, to: number) => void;
-    formatting?: any;
-    customOptions?: any;
+    placeholder?: string;
+    extensions?: Extension[];
     className?: string;
 }
 /**

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,iCAAiC,CAAC;AAEzC,OAAO,wCAAwC,CAAC;AAEhD,OAAO,yCAAyC,CAAC;AAUjD;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAkD3E,CAAC"}
+{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAe,SAAS,EAAgC,MAAM,mBAAmB,CAAC;AAmBzF;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAkF3E,CAAC"}

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js

@@ -1,70 +1,93 @@
-// (C) 2020-2023 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 import React, { useRef, useEffect } from "react";
 import cx from "classnames";
-import CodeMirror from "codemirror";
-// eslint-disable-next-line import/no-unassigned-import
-import "codemirror/addon/mode/simple.js";
-// eslint-disable-next-line import/no-unassigned-import
-import "codemirror/addon/edit/matchbrackets.js";
-// eslint-disable-next-line import/no-unassigned-import
-import "codemirror/addon/display/placeholder.js";
-const CODE_MIRROR_EOL = "\n";
-const defaultOptions = {
-    autofocus: false,
-    lineWrapping: true,
-    matchBrackets: true,
-};
-const findCursorIndexAcrossMultipleLines = (text, cursorLineIndex, cursorLineCharacterIndex) => {
-    const getLineLengthToCursor = (line, lineIndex) => {
-        if (lineIndex > cursorLineIndex) {
-            return 0;
-        }
-        return lineIndex < cursorLineIndex ? line.length + CODE_MIRROR_EOL.length : cursorLineCharacterIndex;
-    };
-    return text
-        .split(CODE_MIRROR_EOL)
-        .map(getLineLengthToCursor)
-        .reduce((sum, lineLength) => sum + lineLength, 0);
-};
+import { EditorView, keymap, placeholder } from "@codemirror/view";
+import { EditorState, Transaction, EditorSelection } from "@codemirror/state";
+import { bracketMatching, syntaxHighlighting, HighlightStyle } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+import { defaultKeymap, historyKeymap } from "@codemirror/commands";
+// Disable autofocus
+const disableAutofocus = EditorView.contentAttributes.of({ autofocus: "false" });
+// Custom syntax highlighting
+const customHighlightStyle = HighlightStyle.define([
+    { tag: t.punctuation, color: "#94a1ad" },
+    { tag: t.bracket, color: "#94a1ad" },
+    { tag: t.variableName, color: "#464e56" },
+    { tag: t.string, color: "#a11" },
+    { tag: t.special(t.variableName), color: "#13b1e2", fontWeight: "bold" },
+    { tag: t.standard(t.variableName), color: "#00c18e", fontWeight: "bold" },
+    { tag: t.keyword, color: "#ab55a3", fontWeight: "bold" },
+]);
 /**
  * @internal
  */
 export const SyntaxHighlightingInput = (props) => {
-    const { value, onChange, onCursor, customOptions, className, formatting } = props;
-    const ref = useRef();
-    const view = useRef();
-    const reportCursorPosition = (editor) => {
-        if (onCursor) {
-            const from = editor.getCursor("from");
-            const to = editor.getCursor("to");
-            const currentValue = editor.getValue();
-            onCursor(findCursorIndexAcrossMultipleLines(currentValue, from.line, from.ch), findCursorIndexAcrossMultipleLines(currentValue, to.line, to.ch));
-        }
-    };
-    const handleOnChange = () => {
-        onChange(view.current.getValue());
-    };
+    const { value, onChange, onCursor, placeholder: placeholderText, className, extensions = [] } = props;
+    const editorRef = useRef(null);
+    const viewRef = useRef();
+    // Create the editor only once
     useEffect(() => {
-        CodeMirror.defineSimpleMode("syntaxHighlight", formatting);
-        view.current = CodeMirror(ref.current, {
-            ...customOptions,
-            ...defaultOptions,
-            mode: "syntaxHighlight",
-            value,
+        if (!editorRef.current) {
+            return undefined;
+        }
+        // Create an extension for handling changes
+        const changeHandler = EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+                onChange(update.state.doc.toString());
+            }
+            if (onCursor && update.selectionSet) {
+                const range = update.state.selection.main;
+                onCursor(range.from, range.to);
+            }
+        });
+        const view = new EditorView({
+            state: EditorState.create({
+                doc: value,
+                extensions: [
+                    bracketMatching(),
+                    keymap.of([...defaultKeymap, ...historyKeymap]),
+                    syntaxHighlighting(customHighlightStyle),
+                    EditorView.lineWrapping,
+                    disableAutofocus,
+                    changeHandler,
+                    placeholderText ? placeholder(placeholderText) : [],
+                    ...extensions,
+                ],
+            }),
+            parent: editorRef.current,
         });
-        view.current.on("change", handleOnChange);
-        view.current.on("cursorActivity", reportCursorPosition);
-        return () => {
-            view.current.off("change", handleOnChange);
-            view.current.off("cursorActivity", reportCursorPosition);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        viewRef.current = view;
+        return () => view.destroy();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Handle external value changes
     useEffect(() => {
-        const cursor = view.current.getCursor();
-        view.current.setValue(value);
-        view.current.setCursor(cursor);
+        const view = viewRef.current;
+        if (!view)
+            return;
+        const currentValue = view.state.doc.toString();
+        if (currentValue !== value) {
+            const selection = view.state.selection;
+            const hasFocus = view.hasFocus;
+            const newLength = value.length;
+            // Adjust selection to stay within bounds of new content
+            const adjustedSelection = EditorSelection.create(selection.ranges.map((range) => {
+                const from = Math.min(range.from, newLength);
+                const to = Math.min(range.to, newLength);
+                return EditorSelection.range(from, to);
+            }), selection.mainIndex);
+            view.dispatch({
+                changes: { from: 0, to: currentValue.length, insert: value },
+                selection: adjustedSelection,
+                annotations: [
+                    // Mark this as a remote change to avoid triggering the change handler
+                    Transaction.remote.of(true),
+                ],
+            });
+            if (hasFocus) {
+                view.focus();
+            }
+        }
     }, [value]);
-    return React.createElement("div", { className: cx(className, "gd-input-syntax-highlighting-input"), ref: ref });
+    return React.createElement("div", { className: cx(className, "gd-input-syntax-highlighting-input"), ref: editorRef });
 };
 //# sourceMappingURL=SyntaxHighlightingInput.js.map

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.27.0-alpha.43",
+  "version": "10.27.0-alpha.45",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -41,7 +41,6 @@
     "@gooddata/number-formatter": "^1.0.6",
     "@tanstack/react-virtual": "^3.11.1",
     "classnames": "^2.3.1",
-    "codemirror": "^5.54.0",
     "copy-to-clipboard": "^3.3.1",
     "cron-parser": "^5.1.1",
     "date-fns": "^2.22.1",
@@ -70,11 +69,16 @@
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
     "unified": "^11.0.5",
-    "@gooddata/sdk-backend-spi": "10.27.0-alpha.43",
-    "@gooddata/sdk-model": "10.27.0-alpha.43",
-    "@gooddata/sdk-ui": "10.27.0-alpha.43",
-    "@gooddata/sdk-ui-theme-provider": "10.27.0-alpha.43",
-    "@gooddata/util": "10.27.0-alpha.43"
+    "@codemirror/language": "~6.11.0",
+    "@codemirror/state": "~6.5.2",
+    "@codemirror/view": "~6.36.4",
+    "@lezer/highlight": "~1.2.1",
+    "@codemirror/commands": "~6.8.1",
+    "@gooddata/sdk-backend-spi": "10.27.0-alpha.45",
+    "@gooddata/sdk-model": "10.27.0-alpha.45",
+    "@gooddata/sdk-ui": "10.27.0-alpha.45",
+    "@gooddata/sdk-ui-theme-provider": "10.27.0-alpha.45",
+    "@gooddata/util": "10.27.0-alpha.45"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -88,7 +92,6 @@
     "@testing-library/dom": "~9.2.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
-    "@types/codemirror": "^5.60.7",
     "@types/debounce-promise": "^3.1.4",
     "@types/kefir": "^3.8.5",
     "@types/lodash": "^4.14.202",
@@ -133,8 +136,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.27.0-alpha.43",
-    "@gooddata/sdk-backend-mockingbird": "10.27.0-alpha.43"
+    "@gooddata/reference-workspace": "10.27.0-alpha.45",
+    "@gooddata/sdk-backend-mockingbird": "10.27.0-alpha.45"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",
@@ -158,6 +161,6 @@
     "validate-locales": "cd ../sdk-ui && npm run validate-locales",
     "validate-locales-ci": "cd ../sdk-ui && npm run validate-locales-ci",
     "validate-theming": "npm run scss && node scripts/validateCss.js",
-    "scss": "sass --load-path=node_modules --load-path=node_modules/fixed-data-table-2/dist --load-path=node_modules/codemirror/lib styles/scss:styles/css"
+    "scss": "sass --load-path=node_modules --load-path=node_modules/fixed-data-table-2/dist styles/scss:styles/css"
   }
 }

package/src/@ui/UiMenu/UiMenu.scss

@@ -86,6 +86,11 @@
         margin: 0;
         padding: 0;
         outline: none;
+
+        // Focus ring when not controlling by mouse
+        #{$root}:not(#{$root}--controlType-mouse) &:focus-visible #{$root}__item-wrapper--isFocused {
+            @include mixins.focus-ring;
+        }
     }
 
     &__item {
@@ -104,20 +109,6 @@
             color: variables.$is-focused-color;
         }
 
-        // Controlled by keyboard and has focus, not disabled
-        #{$root}--controlType-keyboard #{$root}__items:focus &--isFocused:not(&--isDisabled) {
-            background-color: variables.$is-focused-background;
-            color: variables.$is-focused-color;
-
-            @include mixins.focus-ring;
-        }
-        // Controlled by keyboard and has focus, disabled
-        #{$root}--controlType-keyboard #{$root}__items:focus &--isFocused#{&}--isDisabled {
-            background-color: variables.$is-focused-background;
-
-            @include mixins.focus-ring;
-        }
-
         &--isDisabled {
             color: variables.$gd-color-disabled;
             cursor: not-allowed;