@gooddata/sdk-ui-kit 10.28.0-alpha.45 → 10.28.0-alpha.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/esm/sdk-ui-kit.d.ts +4 -0
  2. package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts +4 -0
  3. package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts.map +1 -1
  4. package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js +2 -1
  5. package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js.map +1 -1
  6. package/esm/syntaxHighlightingInput/hooks/useAutocompletion.d.ts +16 -0
  7. package/esm/syntaxHighlightingInput/hooks/useAutocompletion.d.ts.map +1 -0
  8. package/esm/syntaxHighlightingInput/hooks/useAutocompletion.js +65 -0
  9. package/esm/syntaxHighlightingInput/hooks/useAutocompletion.js.map +1 -0
  10. package/esm/syntaxHighlightingInput/hooks/useChangeHandler.d.ts +8 -0
  11. package/esm/syntaxHighlightingInput/hooks/useChangeHandler.d.ts.map +1 -0
  12. package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js +21 -0
  13. package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js.map +1 -0
  14. package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts +11 -11
  15. package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts.map +1 -1
  16. package/esm/syntaxHighlightingInput/hooks/useCodemirror.js +39 -121
  17. package/esm/syntaxHighlightingInput/hooks/useCodemirror.js.map +1 -1
  18. package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts +4 -0
  19. package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts.map +1 -0
  20. package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js +35 -0
  21. package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js.map +1 -0
  22. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts +6 -0
  23. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts.map +1 -0
  24. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js +24 -0
  25. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js.map +1 -0
  26. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.d.ts +4 -0
  27. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.d.ts.map +1 -0
  28. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.js +20 -0
  29. package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.js.map +1 -0
  30. package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts +8 -0
  31. package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts.map +1 -0
  32. package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.js +20 -0
  33. package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.js.map +1 -0
  34. package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.d.ts +10 -0
  35. package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.d.ts.map +1 -0
  36. package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.js +21 -0
  37. package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.js.map +1 -0
  38. package/esm/syntaxHighlightingInput/hooks/useEventHandlers.d.ts +16 -0
  39. package/esm/syntaxHighlightingInput/hooks/useEventHandlers.d.ts.map +1 -0
  40. package/esm/syntaxHighlightingInput/hooks/useEventHandlers.js +19 -0
  41. package/esm/syntaxHighlightingInput/hooks/useEventHandlers.js.map +1 -0
  42. package/package.json +8 -8
@@ -4441,6 +4441,10 @@ export declare interface ISyntaxHighlightingInputProps {
4441
4441
  onApi?: (view: EditorView | null) => void;
4442
4442
  onCursor?: (from: number, to: number) => void;
4443
4443
  onKeyDown?: (event: KeyboardEvent, view: EditorView) => boolean;
4444
+ autocompletion?: {
4445
+ whenTyping?: boolean;
4446
+ aboveCursor?: boolean;
4447
+ };
4444
4448
  onCompletion?: CompletionSource;
4445
4449
  }
4446
4450
 
@@ -16,6 +16,10 @@ export interface ISyntaxHighlightingInputProps {
16
16
  onApi?: (view: EditorView | null) => void;
17
17
  onCursor?: (from: number, to: number) => void;
18
18
  onKeyDown?: (event: KeyboardEvent, view: EditorView) => boolean;
19
+ autocompletion?: {
20
+ whenTyping?: boolean;
21
+ aboveCursor?: boolean;
22
+ };
19
23
  onCompletion?: CompletionSource;
20
24
  }
21
25
  /**
@@ -1 +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;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,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,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA6B3E,CAAC"}
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;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,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,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,CA+B3E,CAAC"}
@@ -6,9 +6,10 @@ import { useCodemirror } from "./hooks/useCodemirror.js";
6
6
  * @internal
7
7
  */
8
8
  export const SyntaxHighlightingInput = (props) => {
9
- const { value, label, placeholder, onApi, onChange, onCursor, onKeyDown, onCompletion, className, extensions = [], disabled, } = props;
9
+ const { value, label, placeholder, autocompletion, onApi, onChange, onCursor, onKeyDown, onCompletion, className, extensions = [], disabled, } = props;
10
10
  const { editorRef } = useCodemirror({
11
11
  placeholderText: placeholder,
12
+ autocompletion,
12
13
  label,
13
14
  extensions,
14
15
  disabled,
@@ -1 +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;AAK5B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAmBzD;;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,YAAY,EACZ,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;QACT,YAAY;KACf,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,oCAAoC,CAAC,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AACnG,CAAC,CAAC"}
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;AAK5B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAuBzD;;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,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;KACf,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,oCAAoC,CAAC,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AACnG,CAAC,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { MutableRefObject } from "react";
2
+ import { EditorView, ViewPlugin } from "@codemirror/view";
3
+ export declare function useAutocompletion({ handleCompletion, aboveCursor, whenTyping, }: {
4
+ handleCompletion: MutableRefObject<(context: any) => any>;
5
+ aboveCursor?: boolean;
6
+ whenTyping?: boolean;
7
+ }): {
8
+ autocompletionExtension: import("@codemirror/state").Extension;
9
+ autocompleteHoverExtension: ViewPlugin<{
10
+ readonly view: EditorView;
11
+ attachMouseListeners(): void;
12
+ onMouseMove: (event: MouseEvent) => void;
13
+ destroy(): void;
14
+ }>;
15
+ };
16
+ //# sourceMappingURL=useAutocompletion.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAutocompletion.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useAutocompletion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,iBAAiB,CAAC,EAC9B,gBAAgB,EAChB,WAAW,EACX,UAAU,GACb,EAAE;IACC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;;;uBAkB0C,UAAU;;6BASf,UAAU;;;EAwC/C"}
@@ -0,0 +1,65 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useMemo } from "react";
3
+ import { autocompletion, completionStatus, selectedCompletionIndex, setSelectedCompletion, } from "@codemirror/autocomplete";
4
+ import { ViewPlugin } from "@codemirror/view";
5
+ export function useAutocompletion({ handleCompletion, aboveCursor, whenTyping, }) {
6
+ const autocompletionExtension = useMemo(() => {
7
+ return autocompletion({
8
+ override: handleCompletion.current
9
+ ? [
10
+ (context) => {
11
+ return handleCompletion.current(context);
12
+ },
13
+ ]
14
+ : [],
15
+ activateOnTyping: whenTyping && Boolean(handleCompletion.current),
16
+ aboveCursor,
17
+ });
18
+ }, [handleCompletion, aboveCursor, whenTyping]);
19
+ const autocompleteHoverExtension = useMemo(() => {
20
+ return ViewPlugin.fromClass(class {
21
+ view;
22
+ constructor(view) {
23
+ this.view = view;
24
+ this.attachMouseListeners();
25
+ }
26
+ attachMouseListeners() {
27
+ const el = this.view.dom;
28
+ el.addEventListener("mousemove", this.onMouseMove);
29
+ }
30
+ onMouseMove = (event) => {
31
+ const target = event.target;
32
+ // Check if the completion menu is open
33
+ const open = completionStatus(this.view.state);
34
+ if (open !== "active") {
35
+ return;
36
+ }
37
+ // Matches autocomplete items (CM uses class `cm-completionLabel`, can vary with themes)
38
+ const itemEl = target.closest(".cm-completionLabel");
39
+ if (!itemEl) {
40
+ return;
41
+ }
42
+ const itemElement = itemEl.parentElement;
43
+ const parentElement = itemElement?.parentElement;
44
+ if (itemElement && parentElement) {
45
+ const children = Array.from(parentElement.children);
46
+ const index = children.indexOf(itemElement);
47
+ const selected = selectedCompletionIndex(this.view.state);
48
+ if (selected !== index) {
49
+ this.view.dispatch({
50
+ effects: setSelectedCompletion(index),
51
+ });
52
+ }
53
+ }
54
+ };
55
+ destroy() {
56
+ this.view.dom.removeEventListener("mousemove", this.onMouseMove);
57
+ }
58
+ });
59
+ }, []);
60
+ return {
61
+ autocompletionExtension,
62
+ autocompleteHoverExtension,
63
+ };
64
+ }
65
+ //# sourceMappingURL=useAutocompletion.js.map
@@ -0,0 +1 @@
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,EACd,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,GAKb;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,WAAW;SACd,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gBAAgB,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhD,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"}
@@ -0,0 +1,8 @@
1
+ import { MutableRefObject } from "react";
2
+ export declare function useChangeHandler({ handleChange, handleCursor, }: {
3
+ handleChange: MutableRefObject<(value: string) => void>;
4
+ handleCursor: MutableRefObject<(from: number, to: number) => void>;
5
+ }): {
6
+ changeHandlerExtension: import("@codemirror/state").Extension;
7
+ };
8
+ //# sourceMappingURL=useChangeHandler.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,21 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useMemo } from "react";
3
+ import { EditorView } from "@codemirror/view";
4
+ export function useChangeHandler({ handleChange, handleCursor, }) {
5
+ // Create an extension for handling changes
6
+ const changeHandlerExtension = useMemo(() => {
7
+ return EditorView.updateListener.of((update) => {
8
+ if (update.docChanged) {
9
+ handleChange.current?.(update.state.doc.toString());
10
+ }
11
+ if (handleCursor.current && update.selectionSet) {
12
+ const range = update.state.selection.main;
13
+ handleCursor.current(range.from, range.to);
14
+ }
15
+ });
16
+ }, [handleChange, handleCursor]);
17
+ return {
18
+ changeHandlerExtension,
19
+ };
20
+ }
21
+ //# sourceMappingURL=useChangeHandler.js.map
@@ -0,0 +1 @@
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"}
@@ -1,21 +1,21 @@
1
- import { MutableRefObject } from "react";
2
- import { Extension } from "@codemirror/state";
1
+ /// <reference types="react" />
3
2
  import { EditorView } from "@codemirror/view";
4
- import { CompletionSource } from "@codemirror/autocomplete";
5
- export interface IUseCodemirrorProps {
3
+ import { Extension } from "@codemirror/state";
4
+ import { IUseEventHandlersProps } from "./useEventHandlers.js";
5
+ export interface IUseCodemirrorProps extends IUseEventHandlersProps {
6
6
  value?: string;
7
7
  label?: string;
8
8
  placeholderText?: string;
9
9
  disabled?: boolean;
10
+ autocompletion?: {
11
+ aboveCursor?: boolean;
12
+ whenTyping?: boolean;
13
+ };
10
14
  extensions?: Extension[];
11
- onChange: (value: string) => void;
12
15
  onApi?: (view: EditorView | null) => void;
13
- onCursor?: (from: number, to: number) => void;
14
- onCompletion?: CompletionSource;
15
- onKeyDown?: (event: KeyboardEvent, view: EditorView) => boolean;
16
16
  }
17
- export declare function useCodemirror({ value, label, disabled, placeholderText, extensions, onCompletion, onApi, onKeyDown, onCursor, onChange, }: IUseCodemirrorProps): {
18
- editorRef: MutableRefObject<HTMLDivElement>;
19
- viewRef: MutableRefObject<EditorView>;
17
+ export declare function useCodemirror({ value, label, disabled, autocompletion, placeholderText, extensions, onCompletion, onApi, onKeyDown, onCursor, onChange, }: IUseCodemirrorProps): {
18
+ editorRef: import("react").MutableRefObject<HTMLDivElement>;
19
+ viewRef: import("react").MutableRefObject<EditorView>;
20
20
  };
21
21
  //# sourceMappingURL=useCodemirror.d.ts.map
@@ -1 +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;AAG/E,OAAO,EAAkB,gBAAgB,EAAoB,MAAM,0BAA0B,CAAC;AAc9F,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,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,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,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GACX,EAAE,mBAAmB;;;EA2HrB"}
1
+ {"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;KACxB,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,GACX,EAAE,mBAAmB;;;EA4ErB"}
@@ -1,11 +1,17 @@
1
1
  // (C) 2025 GoodData Corporation
2
- import { useEffect, useMemo, useRef } from "react";
3
- import { Compartment, EditorSelection, EditorState, Transaction } from "@codemirror/state";
4
- import { EditorView, keymap, placeholder } from "@codemirror/view";
2
+ import { useEffect, useRef } from "react";
3
+ import { EditorView } from "@codemirror/view";
4
+ import { EditorState } from "@codemirror/state";
5
5
  import { bracketMatching, HighlightStyle, syntaxHighlighting } from "@codemirror/language";
6
- import { defaultKeymap, historyKeymap } from "@codemirror/commands";
7
- import { autocompletion, completionStatus } from "@codemirror/autocomplete";
8
6
  import { tags as t } from "@lezer/highlight";
7
+ import { useEventHandlers } from "./useEventHandlers.js";
8
+ import { useCodemirrorEditable } from "./useCodemirrorEditable.js";
9
+ import { useCodemirrorChange } from "./useCodemirrorChange.js";
10
+ import { useChangeHandler } from "./useChangeHandler.js";
11
+ import { useCodemirrorOptions } from "./useCodemirrorOptions.js";
12
+ import { useCodemirrorKeymap } from "./useCodemirrorKeymap.js";
13
+ import { useCodemirrorEvents } from "./useCodemirrorEvents.js";
14
+ import { useAutocompletion } from "./useAutocompletion.js";
9
15
  // Custom syntax highlighting
10
16
  const customHighlightStyle = HighlightStyle.define([
11
17
  { tag: t.punctuation, color: "#94a1ad" },
@@ -16,64 +22,34 @@ const customHighlightStyle = HighlightStyle.define([
16
22
  { tag: t.standard(t.variableName), color: "#00c18e", fontWeight: "bold" },
17
23
  { tag: t.keyword, color: "#ab55a3", fontWeight: "bold" },
18
24
  ]);
19
- export function useCodemirror({ value = "", label, disabled, placeholderText, extensions, onCompletion, onApi, onKeyDown, onCursor, onChange, }) {
25
+ export function useCodemirror({ value = "", label, disabled, autocompletion, placeholderText, extensions, onCompletion, onApi, onKeyDown, onCursor, onChange, }) {
20
26
  const editorRef = useRef(null);
21
27
  const viewRef = useRef();
22
- const handleKeyDownRef = useRef(onKeyDown);
23
- handleKeyDownRef.current = onKeyDown;
24
- const handleChangeRef = useRef(onChange);
25
- handleChangeRef.current = onChange;
26
- const handleCursorRef = useRef(onCursor);
27
- handleCursorRef.current = onCursor;
28
- const handleCompletionRef = useRef(onCompletion);
29
- handleCompletionRef.current = onCompletion;
30
- // Create an extension for handling changes
31
- const changeHandler = useMemo(() => {
32
- return EditorView.updateListener.of((update) => {
33
- if (update.docChanged) {
34
- handleChangeRef.current?.(update.state.doc.toString());
35
- }
36
- if (handleCursorRef.current && update.selectionSet) {
37
- const range = update.state.selection.main;
38
- handleCursorRef.current(range.from, range.to);
39
- }
40
- });
41
- }, []);
42
- // Disable autofocus
43
- const disableAutofocus = useMemo(() => EditorView.contentAttributes.of({ autofocus: "false" }), []);
44
- // Placeholder
45
- const placeholderExtension = useMemo(() => {
46
- return placeholderText ? placeholder(placeholderText) : [];
47
- }, [placeholderText]);
48
- //ARIA
49
- const ariaExtension = EditorView.contentAttributes.of({
50
- "aria-label": label || placeholderText,
28
+ const { handleCompletion, handleChange, handleKeyDown, handleCursor } = useEventHandlers({
29
+ onChange,
30
+ onKeyDown,
31
+ onCursor,
32
+ onCompletion,
51
33
  });
52
- // Keymap extension
53
- const keymapExtension = useMemo(() => {
54
- return keymap.of([
55
- {
56
- any(view, event) {
57
- return handleKeyDownRef.current?.(event, view) ?? false;
58
- },
59
- },
60
- ...defaultKeymap,
61
- ...historyKeymap,
62
- ]);
63
- }, []);
64
- // Dom events handlers
65
- const domEvents = EditorView.domEventHandlers({
66
- keydown(event, view) {
67
- if (event.key === "Escape") {
68
- const open = completionStatus(view.state);
69
- if (open) {
70
- event.stopPropagation();
71
- }
72
- }
73
- },
34
+ // Create an extension for handling changes
35
+ const { changeHandlerExtension } = useChangeHandler({ handleChange, handleCursor });
36
+ // Create settings for the editor
37
+ const { placeholderExtension, ariaExtension, disableAutofocusExtension } = useCodemirrorOptions({
38
+ placeholderText,
39
+ labelText: label,
74
40
  });
75
- // Editable compartment
41
+ // Create keymap extension
42
+ const { keymapExtension } = useCodemirrorKeymap({ handleKeyDown });
43
+ // Create dom events extension
44
+ const { domEventsExtension } = useCodemirrorEvents();
45
+ // Create editable compartment extension
76
46
  const { editableCompartmentExtension } = useCodemirrorEditable(viewRef, disabled);
47
+ // Create autocompletion extension
48
+ const { autocompletionExtension, autocompleteHoverExtension } = useAutocompletion({
49
+ handleCompletion,
50
+ aboveCursor: autocompletion?.aboveCursor ?? false,
51
+ whenTyping: autocompletion?.whenTyping ?? true,
52
+ });
77
53
  // Create the editor only once
78
54
  useEffect(() => {
79
55
  if (!editorRef.current) {
@@ -84,25 +60,17 @@ export function useCodemirror({ value = "", label, disabled, placeholderText, ex
84
60
  doc: value,
85
61
  extensions: [
86
62
  bracketMatching(),
87
- domEvents,
63
+ domEventsExtension,
88
64
  keymapExtension,
89
65
  syntaxHighlighting(customHighlightStyle),
90
66
  EditorView.lineWrapping,
91
- disableAutofocus,
92
- changeHandler,
67
+ disableAutofocusExtension,
68
+ changeHandlerExtension,
93
69
  placeholderExtension,
94
70
  editableCompartmentExtension,
95
71
  ariaExtension,
96
- autocompletion({
97
- override: handleCompletionRef.current
98
- ? [
99
- (context) => {
100
- return handleCompletionRef.current(context);
101
- },
102
- ]
103
- : [],
104
- activateOnTyping: Boolean(handleCompletionRef.current),
105
- }),
72
+ autocompletionExtension,
73
+ autocompleteHoverExtension,
106
74
  ...extensions,
107
75
  ],
108
76
  }),
@@ -123,54 +91,4 @@ export function useCodemirror({ value = "", label, disabled, placeholderText, ex
123
91
  viewRef,
124
92
  };
125
93
  }
126
- function useCodemirrorEditable(viewRef, disabled) {
127
- // Editable compartment
128
- const editableCompartmentRef = useRef(new Compartment());
129
- const editableCompartmentExtension = editableCompartmentRef.current.of(EditorView.editable.of(!disabled));
130
- // Handle disabled state changes
131
- useEffect(() => {
132
- const view = viewRef.current;
133
- if (!view) {
134
- return;
135
- }
136
- // Update the editable compartment based on the disabled prop
137
- view.dispatch({
138
- effects: editableCompartmentRef.current.reconfigure(EditorView.editable.of(!disabled)),
139
- });
140
- }, [disabled, viewRef]);
141
- return {
142
- editableCompartmentExtension,
143
- };
144
- }
145
- function useCodemirrorChange(viewRef, value) {
146
- // Handle external value changes
147
- useEffect(() => {
148
- const view = viewRef.current;
149
- if (!view)
150
- return;
151
- const currentValue = view.state.doc.toString();
152
- if (currentValue !== value) {
153
- const selection = view.state.selection;
154
- const hasFocus = view.hasFocus;
155
- const newLength = value.length;
156
- // Adjust selection to stay within bounds of new content
157
- const adjustedSelection = EditorSelection.create(selection.ranges.map((range) => {
158
- const from = Math.min(range.from, newLength);
159
- const to = Math.min(range.to, newLength);
160
- return EditorSelection.range(from, to);
161
- }), selection.mainIndex);
162
- view.dispatch({
163
- changes: { from: 0, to: currentValue.length, insert: value },
164
- selection: adjustedSelection,
165
- annotations: [
166
- // Mark this as a remote change to avoid triggering the change handler
167
- Transaction.remote.of(true),
168
- ],
169
- });
170
- if (hasFocus) {
171
- view.focus();
172
- }
173
- }
174
- }, [value, viewRef]);
175
- }
176
94
  //# sourceMappingURL=useCodemirror.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useCodemirror.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useCodemirror.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ import { MutableRefObject } from "react";
2
+ import { EditorView } from "@codemirror/view";
3
+ export declare function useCodemirrorChange(viewRef: MutableRefObject<EditorView>, value: string): void;
4
+ //# sourceMappingURL=useCodemirrorChange.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,35 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useEffect } from "react";
3
+ import { EditorSelection, Transaction } from "@codemirror/state";
4
+ export function useCodemirrorChange(viewRef, value) {
5
+ // Handle external value changes
6
+ useEffect(() => {
7
+ const view = viewRef.current;
8
+ if (!view)
9
+ return;
10
+ const currentValue = view.state.doc.toString();
11
+ if (currentValue !== value) {
12
+ const selection = view.state.selection;
13
+ const hasFocus = view.hasFocus;
14
+ const newLength = value.length;
15
+ // Adjust selection to stay within bounds of new content
16
+ const adjustedSelection = EditorSelection.create(selection.ranges.map((range) => {
17
+ const from = Math.min(range.from, newLength);
18
+ const to = Math.min(range.to, newLength);
19
+ return EditorSelection.range(from, to);
20
+ }), selection.mainIndex);
21
+ view.dispatch({
22
+ changes: { from: 0, to: currentValue.length, insert: value },
23
+ selection: adjustedSelection,
24
+ annotations: [
25
+ // Mark this as a remote change to avoid triggering the change handler
26
+ Transaction.remote.of(true),
27
+ ],
28
+ });
29
+ if (hasFocus) {
30
+ view.focus();
31
+ }
32
+ }
33
+ }, [value, viewRef]);
34
+ }
35
+ //# sourceMappingURL=useCodemirrorChange.js.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,6 @@
1
+ import { MutableRefObject } from "react";
2
+ import { EditorView } from "@codemirror/view";
3
+ export declare function useCodemirrorEditable(viewRef: MutableRefObject<EditorView>, disabled?: boolean): {
4
+ editableCompartmentExtension: import("@codemirror/state").Extension;
5
+ };
6
+ //# sourceMappingURL=useCodemirrorEditable.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,24 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useEffect, useRef } from "react";
3
+ import { EditorView } from "@codemirror/view";
4
+ import { Compartment } from "@codemirror/state";
5
+ export function useCodemirrorEditable(viewRef, disabled) {
6
+ // Editable compartment
7
+ const editableCompartmentRef = useRef(new Compartment());
8
+ const editableCompartmentExtension = editableCompartmentRef.current.of(EditorView.editable.of(!disabled));
9
+ // Handle disabled state changes
10
+ useEffect(() => {
11
+ const view = viewRef.current;
12
+ if (!view) {
13
+ return;
14
+ }
15
+ // Update the editable compartment based on the disabled prop
16
+ view.dispatch({
17
+ effects: editableCompartmentRef.current.reconfigure(EditorView.editable.of(!disabled)),
18
+ });
19
+ }, [disabled, viewRef]);
20
+ return {
21
+ editableCompartmentExtension,
22
+ };
23
+ }
24
+ //# sourceMappingURL=useCodemirrorEditable.js.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,4 @@
1
+ export declare function useCodemirrorEvents(): {
2
+ domEventsExtension: import("@codemirror/state").Extension;
3
+ };
4
+ //# sourceMappingURL=useCodemirrorEvents.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCodemirrorEvents.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEvents.ts"],"names":[],"mappings":"AAIA,wBAAgB,mBAAmB;;EAgBlC"}
@@ -0,0 +1,20 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { EditorView } from "@codemirror/view";
3
+ import { completionStatus } from "@codemirror/autocomplete";
4
+ export function useCodemirrorEvents() {
5
+ // Dom events handlers
6
+ const domEventsExtension = EditorView.domEventHandlers({
7
+ keydown(event, view) {
8
+ if (event.key === "Escape") {
9
+ const open = completionStatus(view.state);
10
+ if (open) {
11
+ event.stopPropagation();
12
+ }
13
+ }
14
+ },
15
+ });
16
+ return {
17
+ domEventsExtension,
18
+ };
19
+ }
20
+ //# sourceMappingURL=useCodemirrorEvents.js.map
@@ -0,0 +1 @@
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;AAE5D,MAAM,UAAU,mBAAmB;IAC/B,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;KACJ,CAAC,CAAC;IAEH,OAAO;QACH,kBAAkB;KACrB,CAAC;AACN,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { MutableRefObject } from "react";
2
+ import { EditorView } from "@codemirror/view";
3
+ export declare function useCodemirrorKeymap({ handleKeyDown, }: {
4
+ handleKeyDown: MutableRefObject<(event: KeyboardEvent, view: EditorView) => boolean>;
5
+ }): {
6
+ keymapExtension: import("@codemirror/state").Extension;
7
+ };
8
+ //# sourceMappingURL=useCodemirrorKeymap.d.ts.map
@@ -0,0 +1 @@
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;AAGtD,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;;EAeA"}
@@ -0,0 +1,20 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useMemo } from "react";
3
+ import { keymap } from "@codemirror/view";
4
+ import { defaultKeymap, historyKeymap } from "@codemirror/commands";
5
+ export function useCodemirrorKeymap({ handleKeyDown, }) {
6
+ // Keymap extension
7
+ const keymapExtension = useMemo(() => {
8
+ return keymap.of([
9
+ {
10
+ any(view, event) {
11
+ return handleKeyDown.current?.(event, view) ?? false;
12
+ },
13
+ },
14
+ ...defaultKeymap,
15
+ ...historyKeymap,
16
+ ]);
17
+ }, [handleKeyDown]);
18
+ return { keymapExtension };
19
+ }
20
+ //# sourceMappingURL=useCodemirrorKeymap.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCodemirrorKeymap.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorKeymap.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAoB,OAAO,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAc,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,UAAU,mBAAmB,CAAC,EAChC,aAAa,GAGhB;IACG,mBAAmB;IACnB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,MAAM,CAAC,EAAE,CAAC;YACb;gBACI,GAAG,CAAC,IAAI,EAAE,KAAK;oBACX,OAAO,aAAa,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC;gBACzD,CAAC;aACJ;YACD,GAAG,aAAa;YAChB,GAAG,aAAa;SACnB,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,EAAE,eAAe,EAAE,CAAC;AAC/B,CAAC"}
@@ -0,0 +1,10 @@
1
+ export interface IUseCodemirrorOptions {
2
+ labelText?: string;
3
+ placeholderText?: string;
4
+ }
5
+ export declare function useCodemirrorOptions({ placeholderText, labelText }: IUseCodemirrorOptions): {
6
+ disableAutofocusExtension: import("@codemirror/state").Extension;
7
+ placeholderExtension: import("@codemirror/state").Extension;
8
+ ariaExtension: import("@codemirror/state").Extension;
9
+ };
10
+ //# sourceMappingURL=useCodemirrorOptions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCodemirrorOptions.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorOptions.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,qBAAqB;;;;EAsBzF"}
@@ -0,0 +1,21 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useMemo } from "react";
3
+ import { EditorView, placeholder } from "@codemirror/view";
4
+ export function useCodemirrorOptions({ placeholderText, labelText }) {
5
+ // Disable autofocus
6
+ const disableAutofocusExtension = useMemo(() => EditorView.contentAttributes.of({ autofocus: "false" }), []);
7
+ // Placeholder
8
+ const placeholderExtension = useMemo(() => {
9
+ return placeholderText ? placeholder(placeholderText) : [];
10
+ }, [placeholderText]);
11
+ // ARIA
12
+ const ariaExtension = EditorView.contentAttributes.of({
13
+ "aria-label": labelText || placeholderText,
14
+ });
15
+ return {
16
+ disableAutofocusExtension,
17
+ placeholderExtension,
18
+ ariaExtension,
19
+ };
20
+ }
21
+ //# sourceMappingURL=useCodemirrorOptions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCodemirrorOptions.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorOptions.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO3D,MAAM,UAAU,oBAAoB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAyB;IACtF,oBAAoB;IACpB,MAAM,yBAAyB,GAAG,OAAO,CACrC,GAAG,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAC7D,EAAE,CACL,CAAC;IAEF,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,OAAO;IACP,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAClD,YAAY,EAAE,SAAS,IAAI,eAAe;KAC7C,CAAC,CAAC;IAEH,OAAO;QACH,yBAAyB;QACzB,oBAAoB;QACpB,aAAa;KAChB,CAAC;AACN,CAAC"}
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { EditorView } from "@codemirror/view";
3
+ import { CompletionSource } from "@codemirror/autocomplete";
4
+ export interface IUseEventHandlersProps {
5
+ onChange: (value: string) => void;
6
+ onCursor?: (from: number, to: number) => void;
7
+ onCompletion?: CompletionSource;
8
+ onKeyDown?: (event: KeyboardEvent, view: EditorView) => boolean;
9
+ }
10
+ export declare function useEventHandlers({ onChange, onKeyDown, onCursor, onCompletion }: IUseEventHandlersProps): {
11
+ handleChange: import("react").MutableRefObject<(value: string) => void>;
12
+ handleCursor: import("react").MutableRefObject<(from: number, to: number) => void>;
13
+ handleKeyDown: import("react").MutableRefObject<(event: KeyboardEvent, view: EditorView) => boolean>;
14
+ handleCompletion: import("react").MutableRefObject<CompletionSource>;
15
+ };
16
+ //# sourceMappingURL=useEventHandlers.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useEventHandlers.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useEventHandlers.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,WAAW,sBAAsB;IACnC,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,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;CACnE;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,sBAAsB;;;;;EAmBvG"}
@@ -0,0 +1,19 @@
1
+ // (C) 2025 GoodData Corporation
2
+ import { useRef } from "react";
3
+ export function useEventHandlers({ onChange, onKeyDown, onCursor, onCompletion }) {
4
+ const handleKeyDown = useRef(onKeyDown);
5
+ handleKeyDown.current = onKeyDown;
6
+ const handleChange = useRef(onChange);
7
+ handleChange.current = onChange;
8
+ const handleCursor = useRef(onCursor);
9
+ handleCursor.current = onCursor;
10
+ const handleCompletion = useRef(onCompletion);
11
+ handleCompletion.current = onCompletion;
12
+ return {
13
+ handleChange,
14
+ handleCursor,
15
+ handleKeyDown,
16
+ handleCompletion,
17
+ };
18
+ }
19
+ //# sourceMappingURL=useEventHandlers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useEventHandlers.js","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useEventHandlers.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAW/B,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAA0B;IACpG,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,OAAO,GAAG,SAAS,CAAC;IAElC,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;IAEhC,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;IAEhC,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC9C,gBAAgB,CAAC,OAAO,GAAG,YAAY,CAAC;IAExC,OAAO;QACH,YAAY;QACZ,YAAY;QACZ,aAAa;QACb,gBAAgB;KACnB,CAAC;AACN,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gooddata/sdk-ui-kit",
3
- "version": "10.28.0-alpha.45",
3
+ "version": "10.28.0-alpha.47",
4
4
  "description": "GoodData SDK - UI Building Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -75,11 +75,11 @@
75
75
  "@codemirror/autocomplete": "^6.18.6",
76
76
  "@lezer/highlight": "~1.2.1",
77
77
  "@codemirror/commands": "~6.8.1",
78
- "@gooddata/sdk-backend-spi": "10.28.0-alpha.45",
79
- "@gooddata/sdk-ui": "10.28.0-alpha.45",
80
- "@gooddata/sdk-ui-theme-provider": "10.28.0-alpha.45",
81
- "@gooddata/sdk-model": "10.28.0-alpha.45",
82
- "@gooddata/util": "10.28.0-alpha.45"
78
+ "@gooddata/sdk-backend-spi": "10.28.0-alpha.47",
79
+ "@gooddata/sdk-model": "10.28.0-alpha.47",
80
+ "@gooddata/sdk-ui": "10.28.0-alpha.47",
81
+ "@gooddata/sdk-ui-theme-provider": "10.28.0-alpha.47",
82
+ "@gooddata/util": "10.28.0-alpha.47"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -137,8 +137,8 @@
137
137
  "typescript": "5.3.3",
138
138
  "vitest": "3.0.8",
139
139
  "vitest-dom": "0.1.1",
140
- "@gooddata/reference-workspace": "10.28.0-alpha.45",
141
- "@gooddata/sdk-backend-mockingbird": "10.28.0-alpha.45"
140
+ "@gooddata/reference-workspace": "10.28.0-alpha.47",
141
+ "@gooddata/sdk-backend-mockingbird": "10.28.0-alpha.47"
142
142
  },
143
143
  "scripts": {
144
144
  "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",