@gooddata/sdk-ui-kit 10.28.0-alpha.9 → 10.28.0-alpha.91

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts

@@ -1,20 +1,29 @@
 import React from "react";
 import { EditorView } from "@codemirror/view";
 import { Extension } from "@codemirror/state";
+import { CompletionSource } from "@codemirror/autocomplete";
 /**
  * @internal
  */
 export interface ISyntaxHighlightingInputProps {
     value: string;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+    extensions?: Extension[];
     onChange: (value: string) => void;
+    onFocus?: (event: FocusEvent, view: EditorView) => void;
+    onBlur?: (event: FocusEvent, view: EditorView) => void;
     onApi?: (view: EditorView | null) => void;
     onCursor?: (from: number, to: number) => void;
     onKeyDown?: (event: KeyboardEvent, view: EditorView) => boolean;
-    placeholder?: string;
-    label?: string;
-    extensions?: Extension[];
-    className?: string;
-    disabled?: boolean;
+    autocompletion?: {
+        whenTyping?: boolean;
+        whenTypingDelay?: number;
+        aboveCursor?: boolean;
+    };
+    onCompletion?: CompletionSource;
 }
 /**
  * @internal

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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA2B3E,CAAC"}
+{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAChE,cAAc,CAAC,EAAE;QACb,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAmC3E,CAAC"}

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js

@@ -6,9 +6,10 @@ import { useCodemirror } from "./hooks/useCodemirror.js";
  * @internal
  */
 export const SyntaxHighlightingInput = (props) => {
-    const { value, label, placeholder, onApi, onChange, onCursor, onKeyDown, className, extensions = [], disabled, } = props;
+    const { value, label, placeholder, autocompletion, onApi, onChange, onCursor, onKeyDown, onCompletion, onFocus, onBlur, className, extensions = [], disabled, } = props;
     const { editorRef } = useCodemirror({
         placeholderText: placeholder,
+        autocompletion,
         label,
         extensions,
         disabled,
@@ -17,6 +18,9 @@ export const SyntaxHighlightingInput = (props) => {
         onApi,
         onChange,
         onKeyDown,
+        onCompletion,
+        onFocus,
+        onBlur,
     });
     return React.createElement("div", { className: cx(className, "gd-input-syntax-highlighting-input"), ref: editorRef });
 };

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAkBzD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA4C,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,EAAE,EACf,QAAQ,GACX,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;QAChC,eAAe,EAAE,WAAW;QAC5B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,SAAS;KACZ,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,oCAAoC,CAAC,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AACnG,CAAC,CAAC"}
+{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAK5B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AA0BzD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA4C,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,UAAU,GAAG,EAAE,EACf,QAAQ,GACX,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;QAChC,eAAe,EAAE,WAAW;QAC5B,cAAc;QACd,KAAK;QACL,UAAU;QACV,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,SAAS;QACT,YAAY;QACZ,OAAO;QACP,MAAM;KACT,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,oCAAoC,CAAC,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AACnG,CAAC,CAAC"}

package/esm/syntaxHighlightingInput/hooks/useAutocompletion.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from "react";
+import { CompletionSource } from "@codemirror/autocomplete";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+export declare function useAutocompletion({ handleCompletion, aboveCursor, whenTyping, activateOnTypingDelay, }: {
+    handleCompletion: MutableRefObject<CompletionSource>;
+    aboveCursor?: boolean;
+    whenTyping?: boolean;
+    activateOnTypingDelay?: number;
+}): {
+    autocompletionExtension: import("@codemirror/state").Extension;
+    autocompleteHoverExtension: ViewPlugin<{
+        readonly view: EditorView;
+        attachMouseListeners(): void;
+        onMouseMove: (event: MouseEvent) => void;
+        destroy(): void;
+    }>;
+};
+//# sourceMappingURL=useAutocompletion.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useAutocompletion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompletion.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useAutocompletion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,OAAO,CAAC;AAClD,OAAO,EAEH,gBAAgB,EAInB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,iBAAiB,CAAC,EAC9B,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,qBAAqB,GACxB,EAAE;IACC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC;;;uBAmB0C,UAAU;;6BASf,UAAU;;;EAwC/C"}

package/esm/syntaxHighlightingInput/hooks/useAutocompletion.js

@@ -0,0 +1,66 @@
+// (C) 2025 GoodData Corporation
+import { useMemo } from "react";
+import { autocompletion, completionStatus, selectedCompletionIndex, setSelectedCompletion, } from "@codemirror/autocomplete";
+import { ViewPlugin } from "@codemirror/view";
+export function useAutocompletion({ handleCompletion, aboveCursor, whenTyping, activateOnTypingDelay, }) {
+    const autocompletionExtension = useMemo(() => {
+        return autocompletion({
+            override: handleCompletion.current
+                ? [
+                    (context) => {
+                        return handleCompletion.current(context);
+                    },
+                ]
+                : [],
+            activateOnTyping: whenTyping && Boolean(handleCompletion.current),
+            activateOnTypingDelay,
+            aboveCursor,
+        });
+    }, [handleCompletion, aboveCursor, whenTyping, activateOnTypingDelay]);
+    const autocompleteHoverExtension = useMemo(() => {
+        return ViewPlugin.fromClass(class {
+            view;
+            constructor(view) {
+                this.view = view;
+                this.attachMouseListeners();
+            }
+            attachMouseListeners() {
+                const el = this.view.dom;
+                el.addEventListener("mousemove", this.onMouseMove);
+            }
+            onMouseMove = (event) => {
+                const target = event.target;
+                // Check if the completion menu is open
+                const open = completionStatus(this.view.state);
+                if (open !== "active") {
+                    return;
+                }
+                // Matches autocomplete items (CM uses class `cm-completionLabel`, can vary with themes)
+                const itemEl = target.closest(".cm-completionLabel");
+                if (!itemEl) {
+                    return;
+                }
+                const itemElement = itemEl.parentElement;
+                const parentElement = itemElement?.parentElement;
+                if (itemElement && parentElement) {
+                    const children = Array.from(parentElement.children);
+                    const index = children.indexOf(itemElement);
+                    const selected = selectedCompletionIndex(this.view.state);
+                    if (selected !== index) {
+                        this.view.dispatch({
+                            effects: setSelectedCompletion(index),
+                        });
+                    }
+                }
+            };
+            destroy() {
+                this.view.dom.removeEventListener("mousemove", this.onMouseMove);
+            }
+        });
+    }, []);
+    return {
+        autocompletionExtension,
+        autocompleteHoverExtension,
+    };
+}
+//# sourceMappingURL=useAutocompletion.js.map

package/esm/syntaxHighlightingInput/hooks/useAutocompletion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompletion.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useAutocompletion.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAoB,OAAO,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EACH,cAAc,EAEd,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,GACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAc,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,UAAU,iBAAiB,CAAC,EAC9B,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,qBAAqB,GAMxB;IACG,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,cAAc,CAAC;YAClB,QAAQ,EAAE,gBAAgB,CAAC,OAAO;gBAC9B,CAAC,CAAC;oBACI,CAAC,OAAO,EAAE,EAAE;wBACR,OAAO,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;oBAC7C,CAAC;iBACJ;gBACH,CAAC,CAAC,EAAE;YACR,gBAAgB,EAAE,UAAU,IAAI,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC;YACjE,qBAAqB;YACrB,WAAW;SACd,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEvE,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,UAAU,CAAC,SAAS,CACvB;YACyB;YAArB,YAAqB,IAAgB;gBAAhB,SAAI,GAAJ,IAAI,CAAY;gBACjC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAChC,CAAC;YAED,oBAAoB;gBAChB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;gBACzB,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACvD,CAAC;YAED,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;gBAChC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;gBAE3C,uCAAuC;gBACvC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;oBACpB,OAAO;gBACX,CAAC;gBAED,wFAAwF;gBACxF,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;gBACrD,IAAI,CAAC,MAAM,EAAE,CAAC;oBACV,OAAO;gBACX,CAAC;gBAED,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC;gBACzC,MAAM,aAAa,GAAG,WAAW,EAAE,aAAa,CAAC;gBACjD,IAAI,WAAW,IAAI,aAAa,EAAE,CAAC;oBAC/B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;oBAC5C,MAAM,QAAQ,GAAG,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC1D,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;wBACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;4BACf,OAAO,EAAE,qBAAqB,CAAC,KAAK,CAAC;yBACxC,CAAC,CAAC;oBACP,CAAC;gBACL,CAAC;YACL,CAAC,CAAC;YAEF,OAAO;gBACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACrE,CAAC;SACJ,CACJ,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACH,uBAAuB;QACvB,0BAA0B;KAC7B,CAAC;AACN,CAAC"}

package/esm/syntaxHighlightingInput/hooks/useChangeHandler.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from "react";
+export declare function useChangeHandler({ handleChange, handleCursor, }: {
+    handleChange: MutableRefObject<(value: string) => void>;
+    handleCursor: MutableRefObject<(from: number, to: number) => void>;
+}): {
+    changeHandlerExtension: import("@codemirror/state").Extension;
+};
+//# sourceMappingURL=useChangeHandler.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useChangeHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChangeHandler.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useChangeHandler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,OAAO,CAAC;AAGlD,wBAAgB,gBAAgB,CAAC,EAC7B,YAAY,EACZ,YAAY,GACf,EAAE;IACC,YAAY,EAAE,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACxD,YAAY,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;CACtE;;EAiBA"}

package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js

@@ -0,0 +1,21 @@
+// (C) 2025 GoodData Corporation
+import { useMemo } from "react";
+import { EditorView } from "@codemirror/view";
+export function useChangeHandler({ handleChange, handleCursor, }) {
+    // Create an extension for handling changes
+    const changeHandlerExtension = useMemo(() => {
+        return EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+                handleChange.current?.(update.state.doc.toString());
+            }
+            if (handleCursor.current && update.selectionSet) {
+                const range = update.state.selection.main;
+                handleCursor.current(range.from, range.to);
+            }
+        });
+    }, [handleChange, handleCursor]);
+    return {
+        changeHandlerExtension,
+    };
+}
+//# sourceMappingURL=useChangeHandler.js.map

package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChangeHandler.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useChangeHandler.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAoB,OAAO,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,UAAU,EAAc,MAAM,kBAAkB,CAAC;AAE1D,MAAM,UAAU,gBAAgB,CAAC,EAC7B,YAAY,EACZ,YAAY,GAIf;IACG,2CAA2C;IAC3C,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAkB,EAAE,EAAE;YACvD,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;gBACpB,YAAY,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YACxD,CAAC;YACD,IAAI,YAAY,CAAC,OAAO,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;gBAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;gBAC1C,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;YAC/C,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,OAAO;QACH,sBAAsB;KACzB,CAAC;AACN,CAAC"}

package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts

@@ -1,19 +1,22 @@
-import { MutableRefObject } from "react";
-import { Extension } from "@codemirror/state";
+/// <reference types="react" />
 import { EditorView } from "@codemirror/view";
-export interface IUseCodemirrorProps {
+import { Extension } from "@codemirror/state";
+import { IUseEventHandlersProps } from "./useEventHandlers.js";
+export interface IUseCodemirrorProps extends IUseEventHandlersProps {
     value?: string;
     label?: string;
     placeholderText?: string;
     disabled?: boolean;
+    autocompletion?: {
+        aboveCursor?: boolean;
+        whenTyping?: boolean;
+        whenTypingDelay?: number;
+    };
     extensions?: Extension[];
-    onChange: (value: string) => void;
     onApi?: (view: EditorView | null) => void;
-    onCursor?: (from: number, to: number) => void;
-    onKeyDown?: (event: KeyboardEvent, view: EditorView) => boolean;
 }
-export declare function useCodemirror({ value, label, disabled, placeholderText, extensions, onApi, onKeyDown, onCursor, onChange, }: IUseCodemirrorProps): {
-    editorRef: MutableRefObject<HTMLDivElement>;
-    viewRef: MutableRefObject<EditorView>;
+export declare function useCodemirror({ value, label, disabled, autocompletion, placeholderText, extensions, onCompletion, onApi, onKeyDown, onCursor, onChange, onBlur, onFocus, }: IUseCodemirrorProps): {
+    editorRef: import("react").MutableRefObject<HTMLDivElement>;
+    viewRef: import("react").MutableRefObject<EditorView>;
 };
 //# sourceMappingURL=useCodemirror.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodemirror.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAC;AACrE,OAAO,EAA6C,SAAS,EAAe,MAAM,mBAAmB,CAAC;AACtG,OAAO,EAAE,UAAU,EAAmC,MAAM,kBAAkB,CAAC;AAgB/E,MAAM,WAAW,mBAAmB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;CACnE;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAU,EACV,KAAK,EACL,QAAQ,EACR,eAAe,EACf,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GACX,EAAE,mBAAmB;;;EAiGrB"}
+{"version":3,"file":"useCodemirror.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAe,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI3D,OAAO,EAAE,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAoBjF,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACb,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAU,EACV,KAAK,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,EACV,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,GACV,EAAE,mBAAmB;;;EAgFrB"}

package/esm/syntaxHighlightingInput/hooks/useCodemirror.js

@@ -1,10 +1,17 @@
 // (C) 2025 GoodData Corporation
-import { useEffect, useMemo, useRef } from "react";
-import { Compartment, EditorSelection, EditorState, Transaction } from "@codemirror/state";
-import { EditorView, keymap, placeholder } from "@codemirror/view";
+import { useEffect, useRef } from "react";
+import { EditorView } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
 import { bracketMatching, HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { defaultKeymap, historyKeymap } from "@codemirror/commands";
 import { tags as t } from "@lezer/highlight";
+import { useEventHandlers } from "./useEventHandlers.js";
+import { useCodemirrorEditable } from "./useCodemirrorEditable.js";
+import { useCodemirrorChange } from "./useCodemirrorChange.js";
+import { useChangeHandler } from "./useChangeHandler.js";
+import { useCodemirrorOptions } from "./useCodemirrorOptions.js";
+import { useCodemirrorKeymap } from "./useCodemirrorKeymap.js";
+import { useCodemirrorEvents } from "./useCodemirrorEvents.js";
+import { useAutocompletion } from "./useAutocompletion.js";
 // Custom syntax highlighting
 const customHighlightStyle = HighlightStyle.define([
     { tag: t.punctuation, color: "#94a1ad" },
@@ -15,51 +22,37 @@ const customHighlightStyle = HighlightStyle.define([
     { tag: t.standard(t.variableName), color: "#00c18e", fontWeight: "bold" },
     { tag: t.keyword, color: "#ab55a3", fontWeight: "bold" },
 ]);
-export function useCodemirror({ value = "", label, disabled, placeholderText, extensions, onApi, onKeyDown, onCursor, onChange, }) {
+export function useCodemirror({ value = "", label, disabled, autocompletion, placeholderText, extensions, onCompletion, onApi, onKeyDown, onCursor, onChange, onBlur, onFocus, }) {
     const editorRef = useRef(null);
     const viewRef = useRef();
-    const handleKeyDownRef = useRef(onKeyDown);
-    handleKeyDownRef.current = onKeyDown;
-    const handleChangeRef = useRef(onChange);
-    handleChangeRef.current = onChange;
-    const handleCursorRef = useRef(onCursor);
-    handleCursorRef.current = onCursor;
+    const { handleCompletion, handleChange, handleKeyDown, handleCursor, handleFocus, handleBlur } = useEventHandlers({
+        onChange,
+        onKeyDown,
+        onCursor,
+        onCompletion,
+        onFocus,
+        onBlur,
+    });
     // Create an extension for handling changes
-    const changeHandler = useMemo(() => {
-        return EditorView.updateListener.of((update) => {
-            if (update.docChanged) {
-                handleChangeRef.current?.(update.state.doc.toString());
-            }
-            if (handleCursorRef.current && update.selectionSet) {
-                const range = update.state.selection.main;
-                handleCursorRef.current(range.from, range.to);
-            }
-        });
-    }, []);
-    // Disable autofocus
-    const disableAutofocus = useMemo(() => EditorView.contentAttributes.of({ autofocus: "false" }), []);
-    // Placeholder
-    const placeholderExtension = useMemo(() => {
-        return placeholderText ? placeholder(placeholderText) : [];
-    }, [placeholderText]);
-    //ARIA
-    const ariaExtension = EditorView.contentAttributes.of({
-        "aria-label": label || placeholderText,
+    const { changeHandlerExtension } = useChangeHandler({ handleChange, handleCursor });
+    // Create settings for the editor
+    const { placeholderExtension, ariaExtension, disableAutofocusExtension } = useCodemirrorOptions({
+        placeholderText,
+        labelText: label,
     });
-    // Keymap extension
-    const keymapExtension = useMemo(() => {
-        return keymap.of([
-            {
-                any(view, event) {
-                    return handleKeyDownRef.current?.(event, view) ?? false;
-                },
-            },
-            ...defaultKeymap,
-            ...historyKeymap,
-        ]);
-    }, []);
-    // Editable compartment
+    // Create keymap extension
+    const { keymapExtension } = useCodemirrorKeymap({ handleKeyDown });
+    // Create dom events extension
+    const { domEventsExtension } = useCodemirrorEvents({ handleFocus, handleBlur });
+    // Create editable compartment extension
     const { editableCompartmentExtension } = useCodemirrorEditable(viewRef, disabled);
+    // Create autocompletion extension
+    const { autocompletionExtension, autocompleteHoverExtension } = useAutocompletion({
+        handleCompletion,
+        aboveCursor: autocompletion?.aboveCursor ?? false,
+        whenTyping: autocompletion?.whenTyping ?? true,
+        activateOnTypingDelay: autocompletion?.whenTypingDelay,
+    });
     // Create the editor only once
     useEffect(() => {
         if (!editorRef.current) {
@@ -70,14 +63,17 @@ export function useCodemirror({ value = "", label, disabled, placeholderText, ex
                 doc: value,
                 extensions: [
                     bracketMatching(),
+                    domEventsExtension,
                     keymapExtension,
                     syntaxHighlighting(customHighlightStyle),
                     EditorView.lineWrapping,
-                    disableAutofocus,
-                    changeHandler,
+                    disableAutofocusExtension,
+                    changeHandlerExtension,
                     placeholderExtension,
                     editableCompartmentExtension,
                     ariaExtension,
+                    autocompletionExtension,
+                    autocompleteHoverExtension,
                     ...extensions,
                 ],
             }),
@@ -98,54 +94,4 @@ export function useCodemirror({ value = "", label, disabled, placeholderText, ex
         viewRef,
     };
 }
-function useCodemirrorEditable(viewRef, disabled) {
-    // Editable compartment
-    const editableCompartmentRef = useRef(new Compartment());
-    const editableCompartmentExtension = editableCompartmentRef.current.of(EditorView.editable.of(!disabled));
-    // Handle disabled state changes
-    useEffect(() => {
-        const view = viewRef.current;
-        if (!view) {
-            return;
-        }
-        // Update the editable compartment based on the disabled prop
-        view.dispatch({
-            effects: editableCompartmentRef.current.reconfigure(EditorView.editable.of(!disabled)),
-        });
-    }, [disabled, viewRef]);
-    return {
-        editableCompartmentExtension,
-    };
-}
-function useCodemirrorChange(viewRef, value) {
-    // Handle external value changes
-    useEffect(() => {
-        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, viewRef]);
-}
 //# sourceMappingURL=useCodemirror.js.map

package/esm/syntaxHighlightingInput/hooks/useCodemirror.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCodemirror.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAoB,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtG,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAc,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,IAAI,IAAI,CAAC,EAAE,MAAM,kBAAkB,CAAC;AAE7C,6BAA6B;AAC7B,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC;IAC/C,EAAE,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;IACxC,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE;IACpC,EAAE,GAAG,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE;IACzC,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE;IACxE,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE;IACzE,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE;CAC3D,CAAC,CAAC;AAcH,MAAM,UAAU,aAAa,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,KAAK,EACL,QAAQ,EACR,eAAe,EACf,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GACU;IAClB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,MAAM,EAAc,CAAC;IAErC,MAAM,gBAAgB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3C,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC;IAErC,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzC,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;IAEnC,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzC,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;IAEnC,2CAA2C;IAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAkB,EAAE,EAAE;YACvD,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;gBACpB,eAAe,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3D,CAAC;YACD,IAAI,eAAe,CAAC,OAAO,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;gBACjD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;gBAC1C,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;YAClD,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,oBAAoB;IACpB,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpG,cAAc;IACd,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/D,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM;IACN,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAClD,YAAY,EAAE,KAAK,IAAI,eAAe;KACzC,CAAC,CAAC;IAEH,mBAAmB;IACnB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,MAAM,CAAC,EAAE,CAAC;YACb;gBACI,GAAG,CAAC,IAAI,EAAE,KAAK;oBACX,OAAO,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC;gBAC5D,CAAC;aACJ;YACD,GAAG,aAAa;YAChB,GAAG,aAAa;SACnB,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uBAAuB;IACvB,MAAM,EAAE,4BAA4B,EAAE,GAAG,qBAAqB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAElF,8BAA8B;IAC9B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,UAAU,CAAC;YACxB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;gBACtB,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE;oBACR,eAAe,EAAE;oBACjB,eAAe;oBACf,kBAAkB,CAAC,oBAAoB,CAAC;oBACxC,UAAU,CAAC,YAAY;oBACvB,gBAAgB;oBAChB,aAAa;oBACb,oBAAoB;oBACpB,4BAA4B;oBAC5B,aAAa;oBACb,GAAG,UAAU;iBAChB;aACJ,CAAC;YACF,MAAM,EAAE,SAAS,CAAC,OAAO;SAC5B,CAAC,CAAC;QAEH,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,iDAAiD;QACjD,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO,GAAG,EAAE;YACR,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC;YACd,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;IAE1D,gCAAgC;IAChC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAEpC,OAAO;QACH,SAAS;QACT,OAAO;KACV,CAAC;AACN,CAAC;AAED,SAAS,qBAAqB,CAAC,OAAqC,EAAE,QAAkB;IACpF,uBAAuB;IACvB,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC;IACzD,MAAM,4BAA4B,GAAG,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE1G,gCAAgC;IAChC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,6DAA6D;QAC7D,IAAI,CAAC,QAAQ,CAAC;YACV,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;SACzF,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,OAAO;QACH,4BAA4B;KAC/B,CAAC;AACN,CAAC;AAED,SAAS,mBAAmB,CAAC,OAAqC,EAAE,KAAa;IAC7E,gCAAgC;IAChC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC/C,IAAI,YAAY,KAAK,KAAK,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;YACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE/B,wDAAwD;YACxD,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAC5C,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;gBAC7C,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;gBACzC,OAAO,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC3C,CAAC,CAAC,EACF,SAAS,CAAC,SAAS,CACtB,CAAC;YAEF,IAAI,CAAC,QAAQ,CAAC;gBACV,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;gBAC5D,SAAS,EAAE,iBAAiB;gBAC5B,WAAW,EAAE;oBACT,sEAAsE;oBACtE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC;iBAC9B;aACJ,CAAC,CAAC;YAEH,IAAI,QAAQ,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,CAAC;QACL,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;AACzB,CAAC"}
+{"version":3,"file":"useCodemirror.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"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"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from "react";
+import { EditorView } from "@codemirror/view";
+export declare function useCodemirrorChange(viewRef: MutableRefObject<EditorView>, value: string): void;
+//# sourceMappingURL=useCodemirrorChange.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorChange.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorChange.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,QAoCvF"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js

@@ -0,0 +1,35 @@
+// (C) 2025 GoodData Corporation
+import { useEffect } from "react";
+import { EditorSelection, Transaction } from "@codemirror/state";
+export function useCodemirrorChange(viewRef, value) {
+    // Handle external value changes
+    useEffect(() => {
+        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, viewRef]);
+}
+//# sourceMappingURL=useCodemirrorChange.js.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorChange.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorChange.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,MAAM,UAAU,mBAAmB,CAAC,OAAqC,EAAE,KAAa;IACpF,gCAAgC;IAChC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC/C,IAAI,YAAY,KAAK,KAAK,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;YACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE/B,wDAAwD;YACxD,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAC5C,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;gBAC7C,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;gBACzC,OAAO,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC3C,CAAC,CAAC,EACF,SAAS,CAAC,SAAS,CACtB,CAAC;YAEF,IAAI,CAAC,QAAQ,CAAC;gBACV,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;gBAC5D,SAAS,EAAE,iBAAiB;gBAC5B,WAAW,EAAE;oBACT,sEAAsE;oBACtE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC;iBAC9B;aACJ,CAAC,CAAC;YAEH,IAAI,QAAQ,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,CAAC;QACL,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;AACzB,CAAC"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from "react";
+import { EditorView } from "@codemirror/view";
+export declare function useCodemirrorEditable(viewRef: MutableRefObject<EditorView>, disabled?: boolean): {
+    editableCompartmentExtension: import("@codemirror/state").Extension;
+};
+//# sourceMappingURL=useCodemirrorEditable.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorEditable.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEditable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO;;EAqB9F"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js

@@ -0,0 +1,24 @@
+// (C) 2025 GoodData Corporation
+import { useEffect, useRef } from "react";
+import { EditorView } from "@codemirror/view";
+import { Compartment } from "@codemirror/state";
+export function useCodemirrorEditable(viewRef, disabled) {
+    // Editable compartment
+    const editableCompartmentRef = useRef(new Compartment());
+    const editableCompartmentExtension = editableCompartmentRef.current.of(EditorView.editable.of(!disabled));
+    // Handle disabled state changes
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view) {
+            return;
+        }
+        // Update the editable compartment based on the disabled prop
+        view.dispatch({
+            effects: editableCompartmentRef.current.reconfigure(EditorView.editable.of(!disabled)),
+        });
+    }, [disabled, viewRef]);
+    return {
+        editableCompartmentExtension,
+    };
+}
+//# sourceMappingURL=useCodemirrorEditable.js.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorEditable.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEditable.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAoB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,UAAU,qBAAqB,CAAC,OAAqC,EAAE,QAAkB;IAC3F,uBAAuB;IACvB,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC;IACzD,MAAM,4BAA4B,GAAG,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE1G,gCAAgC;IAChC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,6DAA6D;QAC7D,IAAI,CAAC,QAAQ,CAAC;YACV,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;SACzF,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,OAAO;QACH,4BAA4B;KAC/B,CAAC;AACN,CAAC"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.d.ts

@@ -0,0 +1,9 @@
+import { EditorView } from "@codemirror/view";
+import { MutableRefObject } from "react";
+export declare function useCodemirrorEvents({ handleFocus, handleBlur, }: {
+    handleFocus: MutableRefObject<(event: FocusEvent, view: EditorView) => void>;
+    handleBlur: MutableRefObject<(event: FocusEvent, view: EditorView) => void>;
+}): {
+    domEventsExtension: import("@codemirror/state").Extension;
+};
+//# sourceMappingURL=useCodemirrorEvents.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorEvents.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEvents.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEzC,wBAAgB,mBAAmB,CAAC,EAChC,WAAW,EACX,UAAU,GACb,EAAE;IACC,WAAW,EAAE,gBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC,CAAC;IAC7E,UAAU,EAAE,gBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC,CAAC;CAC/E;;EAsBA"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.js

@@ -0,0 +1,26 @@
+// (C) 2025 GoodData Corporation
+import { EditorView } from "@codemirror/view";
+import { completionStatus } from "@codemirror/autocomplete";
+export function useCodemirrorEvents({ handleFocus, handleBlur, }) {
+    // Dom events handlers
+    const domEventsExtension = EditorView.domEventHandlers({
+        keydown(event, view) {
+            if (event.key === "Escape") {
+                const open = completionStatus(view.state);
+                if (open) {
+                    event.stopPropagation();
+                }
+            }
+        },
+        focus(event, view) {
+            handleFocus.current?.(event, view);
+        },
+        blur(event, view) {
+            handleBlur.current?.(event, view);
+        },
+    });
+    return {
+        domEventsExtension,
+    };
+}
+//# sourceMappingURL=useCodemirrorEvents.js.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorEvents.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEvents.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,UAAU,mBAAmB,CAAC,EAChC,WAAW,EACX,UAAU,GAIb;IACG,sBAAsB;IACtB,MAAM,kBAAkB,GAAG,UAAU,CAAC,gBAAgB,CAAC;QACnD,OAAO,CAAC,KAAK,EAAE,IAAI;YACf,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACzB,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1C,IAAI,IAAI,EAAE,CAAC;oBACP,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC5B,CAAC;YACL,CAAC;QACL,CAAC;QACD,KAAK,CAAC,KAAK,EAAE,IAAI;YACb,WAAW,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,KAAK,EAAE,IAAI;YACZ,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC;KACJ,CAAC,CAAC;IAEH,OAAO;QACH,kBAAkB;KACrB,CAAC;AACN,CAAC"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from "react";
+import { EditorView } from "@codemirror/view";
+export declare function useCodemirrorKeymap({ handleKeyDown, }: {
+    handleKeyDown: MutableRefObject<(event: KeyboardEvent, view: EditorView) => boolean>;
+}): {
+    keymapExtension: import("@codemirror/state").Extension;
+};
+//# sourceMappingURL=useCodemirrorKeymap.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodemirrorKeymap.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorKeymap.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAItD,wBAAgB,mBAAmB,CAAC,EAChC,aAAa,GAChB,EAAE;IACC,aAAa,EAAE,gBAAgB,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC;CACxF;;EA0BA"}