@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/editors/dql-editor/DQLEditor.js

@@ -5,9 +5,11 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState
 } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { useIntl } from "react-intl";
 import * as actionsMenuStyles from "./actions-menu/ActionsMenu.sty.js";
 import {
@@ -17,11 +19,16 @@ import {
 import { getDqlConfig } from "./dql/dql-language.js";
 import { useValidationCallbacks } from "./useValidationCallbacks.js";
 import { useValidityInfo } from "./useValidityInfo.js";
+import { ErrorFallback as EditorErrorFallback } from "../../core/components/error-fallback/ErrorFallback.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
+import { createStratoLogger } from "../../core/sdk/sdk-logger.js";
 import { isSlot } from "../../core/utils/is-slot.js";
-import { BaseCodeEditor } from "../base-code-editor/BaseCodeEditor.js";
+import {
+  BaseCodeEditor
+} from "../base-code-editor/BaseCodeEditor.js";
 const COMPONENT_NAME = "DQLEditor";
 const DQLEditorFwd = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
@@ -52,6 +59,9 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
       onBlur,
       size = "default",
       required,
+      // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      isControlled = false,
       children,
       className: consumerClassName,
       style: consumerStyle,
@@ -63,6 +73,11 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
     const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const ariaLabelingProps = useAriaLabelingProps(restProps);
     const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
+    const internalEditorRef = useRef(null);
+    const mergedEditorRef = useMergeRefs([
+      internalEditorRef,
+      forwardedRef
+    ]);
     const internalValueRef = useRef(value ?? defaultValue ?? "");
     useEffect(() => {
       if (value !== void 0) {
@@ -77,6 +92,17 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
       [onChange]
     );
     const getInternalValue = useCallback(() => internalValueRef.current, []);
+    const [formatDqlFn, setFormatDqlFn] = useState(void 0);
+    useEffect(() => {
+      import(
+        /* webpackIgnore: true */
+        "@dynatrace-sdk/dqlint"
+      ).then(({ formatDql }) => {
+        setFormatDqlFn(() => formatDql);
+      }).catch(() => {
+        setFormatDqlFn(void 0);
+      });
+    }, []);
     const [editorConfig, setEditorConfig] = useState();
     const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(
       onValidationStart,
@@ -107,11 +133,14 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
       actionsMenuStyles.editorWithActionsMenu[size]
     ) : consumerClassName;
     const valueProps = value !== void 0 ? { value } : { defaultValue };
+    const handleFormat = () => {
+      internalEditorRef.current?.format?.();
+    };
     const editor = /* @__PURE__ */ jsx(
       BaseCodeEditor,
       {
         id,
-        ref: forwardedRef,
+        ref: mergedEditorRef,
         onChange: handleChange,
         placeholder,
         controlState,
@@ -128,6 +157,8 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
         onBlur,
         size,
         required,
+        format: formatDqlFn,
+        isControlled,
         className: editorClassName,
         style: consumerStyle,
         "data-testid": dataTestId,
@@ -149,7 +180,15 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
           ),
           children: [
             editor,
-            /* @__PURE__ */ jsx(ActionsMenuInternal, { getValue: getInternalValue, size, children: actionsMenuChildren })
+            /* @__PURE__ */ jsx(
+              ActionsMenuInternal,
+              {
+                getValue: getInternalValue,
+                size,
+                onFormat: formatDqlFn ? handleFormat : void 0,
+                children: actionsMenuChildren
+              }
+            )
           ]
         }
       );
@@ -157,7 +196,21 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
     return editor;
   }
 );
-const DQLEditor = Object.assign(DQLEditorFwd, {
+const DQLEditorWithErrorBoundary = /* @__PURE__ */ forwardRef((props, ref) => {
+  const stratoLogger = useMemo(
+    () => createStratoLogger.bind({ id: props.id })(COMPONENT_NAME),
+    [props.id]
+  );
+  return /* @__PURE__ */ jsx(
+    ErrorBoundary,
+    {
+      onError: (error) => stratoLogger.error(error?.message, error),
+      FallbackComponent: (fbProps) => /* @__PURE__ */ jsx(EditorErrorFallback, { ...fbProps }),
+      children: /* @__PURE__ */ jsx(DQLEditorFwd, { ...props, ref })
+    }
+  );
+});
+const DQLEditor = Object.assign(DQLEditorWithErrorBoundary, {
   ActionsMenu
 });
 export {

package/esm/editors/dql-editor/DQLEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/editors/dql-editor/DQLEditor.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as actionsMenuStyles from './actions-menu/ActionsMenu.sty.js';\nimport {\n  ActionsMenu,\n  ActionsMenuInternal,\n} from './actions-menu/ActionsMenu.js';\nimport { getDqlConfig } from './dql/dql-language.js';\nimport type { DQLEditorValidityInfo } from './dql-editor-types.js';\nimport { useValidationCallbacks } from './useValidationCallbacks.js';\nimport { useValidityInfo } from './useValidityInfo.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { BaseCodeEditor } from '../base-code-editor/BaseCodeEditor.js';\nimport type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';\n\nconst COMPONENT_NAME = 'DQLEditor';\n\n/**\n * Props for the `DQLEditor` component.\n * @public\n */\nexport interface DQLEditorBaseProps\n  extends FormControlStateProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    WithChildren {\n  /**\n   * The ID for the DOM element.\n   */\n  id?: string;\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Displayed initially in the editor when there is no other content.\n   */\n  placeholder?: string;\n  /**\n   * Whether spellcheck should be enabled.\n   * @defaultValue false\n   */\n  spellCheck?: boolean;\n  /**\n   * If set to true, the DQL editor uses the full height available in its parent.\n   * @defaultValue false\n   */\n  fullHeight?: boolean;\n  /**\n   * The start indices (character position) that should be folded initially in uncontrolled scenarios.\n   */\n  defaultFolding?: number[];\n  /**\n   * The start indices (character position) that should be folded initially in controlled scenarios.\n   */\n  folding?: number[];\n  /**\n   * Callback that is called when folding changes.\n   */\n  onFoldingChange?: (values: number[]) => void;\n  /**\n   * Whether the input is readonly.\n   * @defaultValue false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether long lines should be wrapped.\n   * @defaultValue false\n   */\n  lineWrap?: boolean;\n  /**\n   * Callback that is called when the editor loses focus.\n   */\n  onBlur?: (e: FocusEvent) => void;\n  /**\n   * Callback that is called when the editor receives focus.\n   */\n  onFocus?: (e: FocusEvent) => void;\n  /**\n   * Callback fired when DQL validation starts.\n   * This can be used for setting a status that validation is in progress.\n   */\n  onValidationStart?: () => void;\n  /**\n   * Callback fired when DQL validation ends.\n   * This can be used for resetting a status that validation is in progress and to get the validation result.\n   */\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Callback fired when new diagnostic information is available.\n   * This can be used to get the validation result from outside the editor.\n   */\n  onValidityChange?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n  /**\n   * If set to true, `aria-required` will be set to true on the input element.\n   * @defaultValue false\n   */\n  required?: boolean;\n}\n\n/**\n * Props for the `DQLEditor` in controlled usage.\n * @public\n */\nexport type DQLEditorControlledProps = {\n  /**\n   * The contents of the editor in controlled mode.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Not allowed in controlled mode. */\n  defaultValue?: never;\n};\n\n/**\n * Props for the `DQLEditor` in uncontrolled usage.\n * @public\n */\nexport type DQLEditorUncontrolledProps = {\n  /** Not allowed in uncontrolled mode. */\n  value?: never;\n  /** The initial contents of the editor for uncontrolled usage. */\n  defaultValue?: string;\n};\n\n/**\n * Props for the `DQLEditor` component.\n * @public\n */\nexport type DQLEditorProps = DQLEditorBaseProps &\n  (DQLEditorControlledProps | DQLEditorUncontrolledProps);\n\n/**\n * Ref handle exposed by the `DQLEditor` component.\n * @public\n */\nexport type DQLEditorRef = {\n  /**\n   * Moves focus to the editor.\n   */\n  focus: () => void;\n  /**\n   * Selects the text within the given character-offset range.\n   */\n  selectRange: (range: { from: number; to: number }) => void;\n  /**\n   * The underlying editor container DOM element.\n   */\n  readonly element: HTMLDivElement | null;\n  /**\n   * Moves the cursor to the given character offset, or to the end of the document when `'end'` is passed.\n   */\n  setCursorPosition: (position: number | 'end') => void;\n};\n\n/**\n * @internal\n */\nconst DQLEditorFwd = /* @__PURE__ */ forwardRef<DQLEditorRef, DQLEditorProps>(\n  (props, forwardedRef) => {\n    const intl = useIntl();\n\n    const defaultPlaceholder = intl.formatMessage({\n      defaultMessage: 'Add DQL',\n      id: 'Ir0YCuBX6vOM4t0J',\n      description: 'Default placeholder for the DQLEditor.',\n    });\n\n    const {\n      id,\n      defaultValue,\n      value,\n      controlState,\n      onChange,\n      folding,\n      onFoldingChange,\n      defaultFolding,\n      fullHeight = false,\n      lineWrap = false,\n      placeholder = defaultPlaceholder,\n      readOnly = false,\n      spellCheck = false,\n      onValidationStart,\n      onValidationEnd,\n      onValidityChange,\n      onFocus,\n      onBlur,\n      size = 'default',\n      required,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    // Tracks the live editor content so the ActionsMenu can copy the current value,\n    // not the stale `value` prop (which never updates in uncontrolled usage).\n    const internalValueRef = useRef(value ?? defaultValue ?? '');\n    useEffect(() => {\n      if (value !== undefined) {\n        internalValueRef.current = value;\n      }\n    }, [value]);\n\n    const handleChange = useCallback(\n      (newValue: string) => {\n        internalValueRef.current = newValue;\n        onChange?.(newValue);\n      },\n      [onChange],\n    );\n\n    const getInternalValue = useCallback(() => internalValueRef.current, []);\n\n    const [editorConfig, setEditorConfig] =\n      useState<EditorLanguageConfiguration>();\n\n    const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(\n      onValidationStart,\n      onValidationEnd,\n    );\n    const setValidityInfo = useValidityInfo(onValidityChange);\n\n    useEffect(() => {\n      setEditorConfig(\n        getDqlConfig(\n          readOnly,\n          fireValidationStart,\n          fireValidationEnd,\n          setValidityInfo,\n        ),\n      );\n    }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);\n\n    // Detect ActionsMenu slot in children and extract any custom items it carries\n    let hasActionsMenu = false;\n    let actionsMenuChildren: ReactNode | undefined;\n    Children.forEach(children, (child) => {\n      if (isSlot(child, ActionsMenu)) {\n        hasActionsMenu = true;\n        actionsMenuChildren = child.props.children;\n      }\n    });\n\n    const editorClassName = hasActionsMenu\n      ? clsx(\n          consumerClassName,\n          // Apply right padding on .cm-editor to prevent overlap with the menu trigger\n          actionsMenuStyles.editorWithActionsMenu[size],\n        )\n      : consumerClassName;\n\n    const valueProps = (\n      value !== undefined ? { value } : { defaultValue }\n    ) satisfies Partial<{ value: string; defaultValue: string }>;\n\n    const editor = (\n      <BaseCodeEditor\n        id={id}\n        ref={forwardedRef}\n        onChange={handleChange}\n        placeholder={placeholder}\n        controlState={controlState}\n        readOnly={readOnly}\n        defaultFolding={defaultFolding}\n        lineWrap={lineWrap}\n        {...valueProps}\n        spellCheck={spellCheck}\n        fullHeight={fullHeight}\n        folding={folding}\n        onFoldingChange={onFoldingChange}\n        configuration={editorConfig}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        size={size}\n        required={required}\n        className={editorClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      />\n    );\n\n    if (hasActionsMenu) {\n      return (\n        <div\n          className={clsx(\n            actionsMenuStyles.editorWrapper,\n            fullHeight && actionsMenuStyles.editorWrapperFullHeight,\n          )}\n        >\n          {editor}\n          <ActionsMenuInternal getValue={getInternalValue} size={size}>\n            {actionsMenuChildren}\n          </ActionsMenuInternal>\n        </div>\n      );\n    }\n\n    return editor;\n  },\n);\n\n/**\n * The `DQLEditor` is specifically designed for editing DQL queries.\n *\n * It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language (DQL).\n * Once the editor is focused via the keyboard, the user must press \"Enter\" to start editing\n * and \"Escape\" to quit editing and return to the keyboard navigation flow.\n * @public\n */\nexport const DQLEditor = Object.assign(DQLEditorFwd, {\n  ActionsMenu,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { useIntl } from 'react-intl';\n\nimport * as actionsMenuStyles from './actions-menu/ActionsMenu.sty.js';\nimport {\n  ActionsMenu,\n  ActionsMenuInternal,\n} from './actions-menu/ActionsMenu.js';\nimport { getDqlConfig } from './dql/dql-language.js';\nimport type { DQLEditorValidityInfo } from './dql-editor-types.js';\nimport { useValidationCallbacks } from './useValidationCallbacks.js';\nimport { useValidityInfo } from './useValidityInfo.js';\nimport { ErrorFallback as EditorErrorFallback } from '../../core/components/error-fallback/ErrorFallback.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport {\n  BaseCodeEditor,\n  type BaseCodeEditorRef,\n  type SharedBaseCodeEditorProps,\n} from '../base-code-editor/BaseCodeEditor.js';\nimport type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';\n\nconst COMPONENT_NAME = 'DQLEditor';\n\n/**\n * Props for the `DQLEditor` component.\n * @public\n */\nexport interface DQLEditorBaseProps\n  extends SharedBaseCodeEditorProps,\n    WithChildren {\n  /**\n   * Callback fired when DQL validation starts.\n   * This can be used for setting a status that validation is in progress.\n   */\n  onValidationStart?: () => void;\n  /**\n   * Callback fired when DQL validation ends.\n   * This can be used for resetting a status that validation is in progress and to get the validation result.\n   */\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Callback fired when new diagnostic information is available.\n   * This can be used to get the validation result from outside the editor.\n   */\n  onValidityChange?: (validityInfo: DQLEditorValidityInfo[]) => void;\n}\n\n/**\n * Props for the `DQLEditor` in controlled usage.\n * @public\n */\nexport type DQLEditorControlledProps = {\n  /**\n   * The contents of the editor in controlled mode.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Not allowed in controlled mode. */\n  defaultValue?: never;\n};\n\n/**\n * Props for the `DQLEditor` in uncontrolled usage.\n * @public\n */\nexport type DQLEditorUncontrolledProps = {\n  /** Not allowed in uncontrolled mode. */\n  value?: never;\n  /** The initial contents of the editor for uncontrolled usage. */\n  defaultValue?: string;\n  /**\n   * `isControlled` has no effect without `value`.\n   * @deprecated [APPDEV-17404] BREAKING-CHANGE: Will be removed when controlled behaviour becomes the default.\n   */\n  isControlled?: never;\n};\n\n/**\n * Props for the `DQLEditor` component.\n * @public\n */\nexport type DQLEditorProps = DQLEditorBaseProps &\n  (DQLEditorControlledProps | DQLEditorUncontrolledProps);\n\n/**\n * Ref handle exposed by the `DQLEditor` component.\n * @public\n */\nexport type DQLEditorRef = {\n  /**\n   * Moves focus to the editor.\n   */\n  focus: () => void;\n  /**\n   * Selects the text within the given character-offset range.\n   */\n  selectRange: (range: { from: number; to: number }) => void;\n  /**\n   * The underlying editor container DOM element.\n   */\n  readonly element: HTMLDivElement | null;\n  /**\n   * Moves the cursor to the given character offset, or to the end of the document when `'end'` is passed.\n   */\n  setCursorPosition: (position: number | 'end') => void;\n};\n\n/**\n * @internal\n */\nconst DQLEditorFwd = /* @__PURE__ */ forwardRef<DQLEditorRef, DQLEditorProps>(\n  (props, forwardedRef) => {\n    const intl = useIntl();\n\n    const defaultPlaceholder = intl.formatMessage({\n      defaultMessage: 'Add DQL',\n      id: 'Ir0YCuBX6vOM4t0J',\n      description: 'Default placeholder for the DQLEditor.',\n    });\n\n    const {\n      id,\n      defaultValue,\n      value,\n      controlState,\n      onChange,\n      folding,\n      onFoldingChange,\n      defaultFolding,\n      fullHeight = false,\n      lineWrap = false,\n      placeholder = defaultPlaceholder,\n      readOnly = false,\n      spellCheck = false,\n      onValidationStart,\n      onValidationEnd,\n      onValidityChange,\n      onFocus,\n      onBlur,\n      size = 'default',\n      required,\n      // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      isControlled = false,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const internalEditorRef = useRef<BaseCodeEditorRef>(null);\n    const mergedEditorRef = useMergeRefs<BaseCodeEditorRef>([\n      internalEditorRef,\n      forwardedRef,\n    ]);\n\n    // Tracks the live editor content so the ActionsMenu can copy the current value,\n    // not the stale `value` prop (which never updates in uncontrolled usage).\n    const internalValueRef = useRef(value ?? defaultValue ?? '');\n    useEffect(() => {\n      if (value !== undefined) {\n        internalValueRef.current = value;\n      }\n    }, [value]);\n\n    const handleChange = useCallback(\n      (newValue: string) => {\n        internalValueRef.current = newValue;\n        onChange?.(newValue);\n      },\n      [onChange],\n    );\n\n    const getInternalValue = useCallback(() => internalValueRef.current, []);\n\n    const [formatDqlFn, setFormatDqlFn] = useState<\n      ((value: string) => string) | undefined\n    >(undefined);\n\n    useEffect(() => {\n      // `@dynatrace-sdk/dqlint` is an optional peer dependency. The static string\n      // lets Vite discover and pre-bundle it in dev mode when the consumer has it\n      // installed. `webpackIgnore` prevents webpack from erroring at build time\n      // when it is absent; the catch handles the runtime failure in that case.\n      import(/* webpackIgnore: true */ '@dynatrace-sdk/dqlint')\n        .then(({ formatDql }: { formatDql: (value: string) => string }) => {\n          setFormatDqlFn(() => formatDql);\n        })\n        .catch(() => {\n          setFormatDqlFn(undefined);\n        });\n    }, []);\n\n    const [editorConfig, setEditorConfig] =\n      useState<EditorLanguageConfiguration>();\n\n    const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(\n      onValidationStart,\n      onValidationEnd,\n    );\n    const setValidityInfo = useValidityInfo(onValidityChange);\n\n    useEffect(() => {\n      setEditorConfig(\n        getDqlConfig(\n          readOnly,\n          fireValidationStart,\n          fireValidationEnd,\n          setValidityInfo,\n        ),\n      );\n    }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);\n\n    // Detect ActionsMenu slot in children and extract any custom items it carries\n    let hasActionsMenu = false;\n    let actionsMenuChildren: ReactNode | undefined;\n    Children.forEach(children, (child) => {\n      if (isSlot(child, ActionsMenu)) {\n        hasActionsMenu = true;\n        actionsMenuChildren = child.props.children;\n      }\n    });\n\n    const editorClassName = hasActionsMenu\n      ? clsx(\n          consumerClassName,\n          // Apply right padding on .cm-editor to prevent overlap with the menu trigger\n          actionsMenuStyles.editorWithActionsMenu[size],\n        )\n      : consumerClassName;\n\n    const valueProps = (\n      value !== undefined ? { value } : { defaultValue }\n    ) satisfies Partial<{ value: string; defaultValue: string }>;\n\n    const handleFormat = () => {\n      internalEditorRef.current?.format?.();\n    };\n\n    const editor = (\n      <BaseCodeEditor\n        id={id}\n        ref={mergedEditorRef}\n        onChange={handleChange}\n        placeholder={placeholder}\n        controlState={controlState}\n        readOnly={readOnly}\n        defaultFolding={defaultFolding}\n        lineWrap={lineWrap}\n        {...valueProps}\n        spellCheck={spellCheck}\n        fullHeight={fullHeight}\n        folding={folding}\n        onFoldingChange={onFoldingChange}\n        configuration={editorConfig}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        size={size}\n        required={required}\n        format={formatDqlFn}\n        // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        isControlled={isControlled}\n        className={editorClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      />\n    );\n\n    if (hasActionsMenu) {\n      return (\n        <div\n          className={clsx(\n            actionsMenuStyles.editorWrapper,\n            fullHeight && actionsMenuStyles.editorWrapperFullHeight,\n          )}\n        >\n          {editor}\n          <ActionsMenuInternal\n            getValue={getInternalValue}\n            size={size}\n            onFormat={formatDqlFn ? handleFormat : undefined}\n          >\n            {actionsMenuChildren}\n          </ActionsMenuInternal>\n        </div>\n      );\n    }\n\n    return editor;\n  },\n);\n\nconst DQLEditorWithErrorBoundary = /* @__PURE__ */ forwardRef<\n  DQLEditorRef,\n  DQLEditorProps\n>((props, ref) => {\n  const stratoLogger = useMemo(\n    () => createStratoLogger.bind({ id: props.id })(COMPONENT_NAME),\n    [props.id],\n  );\n\n  return (\n    <ErrorBoundary\n      onError={(error) => stratoLogger.error(error?.message, error)}\n      FallbackComponent={(fbProps) => <EditorErrorFallback {...fbProps} />}\n    >\n      <DQLEditorFwd {...props} ref={ref} />\n    </ErrorBoundary>\n  );\n});\n\n/**\n * The `DQLEditor` is specifically designed for editing DQL queries.\n *\n * It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language (DQL).\n * Once the editor is focused via the keyboard, the user must press \"Enter\" to start editing\n * and \"Escape\" to quit editing and return to the keyboard navigation flow.\n * @public\n */\nexport const DQLEditor = Object.assign(DQLEditorWithErrorBoundary, {\n  ActionsMenu,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/editors/dql-editor/actions-menu/ActionsMenu.css

@@ -1,28 +1,38 @@
-._1okebta0-3-7-0 {
+._1okebta0-3-8-0 {
   position: relative;
   width: 100%;
 }
-._1okebta1-3-7-0 {
+._1okebta1-3-8-0 {
   display: flex;
   flex-grow: 1;
   max-height: 100%;
   min-height: 100%;
 }
-._1okebta2-3-7-0 {
+._1okebta2-3-8-0 {
   position: absolute;
   z-index: var(--dt-elevations-default, 1);
+  top: 0;
+  right: 0;
 }
-._1okebta3-3-7-0 {
-  top: var(--dt-spacings-size-8, 8px);
-  right: var(--dt-spacings-size-8, 8px);
+._1okebta3-3-8-0 {
+  top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
+  right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1okebta4-3-7-0 {
-  top: var(--dt-spacings-size-4, 4px);
-  right: var(--dt-spacings-size-4, 4px);
+._1jgl8s50-3-8-0 ._1okebta3-3-8-0 {
+  top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
+  right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
 }
-._1okebta5-3-7-0 .cm-editor {
-  padding-right: var(--dt-spacings-size-40, 40px);
+._1okebta4-3-8-0 {
+  top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
+  right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1okebta6-3-7-0 .cm-editor {
-  padding-right: var(--dt-spacings-size-28, 28px);
+._1jgl8s50-3-8-0 ._1okebta4-3-8-0 {
+  top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
+  right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
+}
+._1okebta5-3-8-0 .cm-editor {
+  padding-right: calc(var(--dt-spacings-size-40, 40px) + var(--dt-spacings-size-4, 4px));
+}
+._1okebta6-3-8-0 .cm-editor {
+  padding-right: calc(var(--dt-spacings-size-28, 28px) + var(--dt-spacings-size-4, 4px));
 }

package/esm/editors/dql-editor/actions-menu/ActionsMenu.js

@@ -7,6 +7,7 @@ import {
 import { useIntl } from "react-intl";
 import { isElement } from "react-is";
 import {
+  CodeIcon,
   CopyIcon,
   DotMenuIcon,
   ExternalLinkIcon
@@ -58,7 +59,8 @@ ActionsMenu.displayName = "DQLEditor.ActionsMenu";
 const ActionsMenuInternal = ({
   getValue,
   size,
-  children
+  children,
+  onFormat
 }) => {
   const intl = useIntl();
   const copyToClipboard = useCallback(async () => {
@@ -94,6 +96,10 @@ const ActionsMenuInternal = ({
       ]
     }
   );
+  const formatQueryMenuItem = onFormat ? /* @__PURE__ */ jsxs(Menu.Item, { onSelect: onFormat, "data-dt-name": "FormatQuery", children: [
+    /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(CodeIcon, {}) }),
+    intl.formatMessage(dqlEditorActionsMenuMessages.formatQuery)
+  ] }) : null;
   return /* @__PURE__ */ jsx("div", { className: styles.actionsMenuWrapper({ size }), children: /* @__PURE__ */ jsxs(Menu, { children: [
     /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(
       Button,
@@ -110,6 +116,7 @@ const ActionsMenuInternal = ({
     /* @__PURE__ */ jsxs(Menu.Content, { children: [
       /* @__PURE__ */ jsxs(Menu.Group, { children: [
         copyQueryMenuItem,
+        formatQueryMenuItem,
         validChildren
       ] }),
       /* @__PURE__ */ jsx(Menu.Group, { children: openDocumentationMenuItem })

package/esm/editors/dql-editor/actions-menu/ActionsMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/actions-menu/ActionsMenu.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  useCallback,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport {\n  CopyIcon,\n  DotMenuIcon,\n  ExternalLinkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { dqlEditorActionsMenuMessages } from './actions-menu-messages.js';\nimport * as styles from './ActionsMenu.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport { Group } from '../../../navigation/menu/Group.js';\nimport { Intent } from '../../../navigation/menu/Intent.js';\nimport { Item } from '../../../navigation/menu/Item.js';\nimport { Label } from '../../../navigation/menu/Label.js';\nimport { Link } from '../../../navigation/menu/Link.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Sub } from '../../../navigation/menu/Sub.js';\n\n// Menu slot components allowed as children of `DQLEditor.ActionsMenu`\nconst ALLOWED_MENU_CHILDREN = new Set<unknown>([\n  Item,\n  Group,\n  Label,\n  Link,\n  Intent,\n  Sub,\n]);\n\n/**\n * Type guard for transparent wrappers (fragments and divs) whose children are\n * flattened and validated individually.\n */\nfunction isWrapperElement(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment || child.type === 'div';\n}\n\n/**\n * Iterates over child nodes and keeps only supported Menu slot components.\n */\nfunction getValidChildren(children: ReactNode): ReactNode[] {\n  const validChildren: ReactNode[] = [];\n  for (const child of Children.toArray(children)) {\n    if (isElement(child)) {\n      if (isWrapperElement(child)) {\n        // Flatten fragments and divs so their children are validated individually.\n        validChildren.push(...getValidChildren(child.props.children));\n        continue;\n      }\n      if (ALLOWED_MENU_CHILDREN.has(child.type)) {\n        validChildren.push(child);\n        continue;\n      }\n    }\n    devLog(\n      'Only Menu component items are supported as children of DQLEditor.ActionsMenu.',\n    );\n  }\n\n  return validChildren;\n}\n\n/**\n * Slot component that enables the actions menu in the DQLEditor.\n *\n * Rendering this component as a child of `DQLEditor` displays a kebab menu\n * with built-in actions (Copy query, Open documentation). Custom menu items can be\n * passed as children and will be rendered between the two built-in actions.\n * @public\n */\nexport const ActionsMenu = (props: WithChildren): null => null;\n(ActionsMenu as typeof ActionsMenu & { displayName: string }).displayName =\n  'DQLEditor.ActionsMenu';\n\n/**\n * Props for the `ActionsMenuInternal` component.\n * @internal\n */\nexport interface ActionsMenuInternalProps extends PropsWithChildren {\n  /**\n   * Returns the editor's current content, copied to clipboard when the copy action is triggered.\n   */\n  getValue: () => string;\n  /**\n   * The editor's size variant affecting the trigger button and positioning.\n   */\n  size: 'default' | 'condensed';\n}\n\n/**\n * Internal component that renders the DQLEditor actions menu.\n * @internal\n */\nexport const ActionsMenuInternal = ({\n  getValue,\n  size,\n  children,\n}: ActionsMenuInternalProps) => {\n  const intl = useIntl();\n  // getValue() is called at copy time (not at render time) so it always reads\n  // the current editor content from the ref, regardless of re-renders.\n  const copyToClipboard = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(getValue());\n    } catch {\n      // For now, we silently ignore clipboard write errors.\n    }\n  }, [getValue]);\n\n  const validChildren = getValidChildren(children);\n\n  const copyQueryMenuItem = (\n    <Menu.Item\n      onSelect={() => {\n        copyToClipboard().catch(() => void 0);\n      }}\n      data-dt-name=\"CopyQuery\"\n    >\n      <Menu.Prefix>\n        <CopyIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)}\n    </Menu.Item>\n  );\n\n  const openDocumentationMenuItem = (\n    <Menu.Link\n      href={DQL_DOCUMENTATION_URL}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-dt-name=\"OpenDocumentation\"\n    >\n      <Menu.Prefix>\n        <ExternalLinkIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.openDocumentation)}\n    </Menu.Link>\n  );\n\n  return (\n    <div className={styles.actionsMenuWrapper({ size })}>\n      <Menu>\n        <Menu.Trigger>\n          <Button\n            variant=\"default\"\n            size={size}\n            aria-label={intl.formatMessage(\n              dqlEditorActionsMenuMessages.triggerLabel,\n            )}\n            data-dt-name=\"OpenActionsMenu\"\n          >\n            <Button.Prefix>\n              <DotMenuIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.Group>\n            {copyQueryMenuItem}\n            {validChildren}\n          </Menu.Group>\n          <Menu.Group>{openDocumentationMenuItem}</Menu.Group>\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
-  "mappings": "AA8HI,SAOI,KAPJ;AA9HJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAC7C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,WAAW;AAGpB,MAAM,wBAAwB,oBAAI,IAAa;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMD,SAAS,iBACP,OAC0C;AAC1C,SAAO,MAAM,SAAS,YAAY,MAAM,SAAS;AACnD;AAKA,SAAS,iBAAiB,UAAkC;AAC1D,QAAM,gBAA6B,CAAC;AACpC,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,UAAU,KAAK,GAAG;AACpB,UAAI,iBAAiB,KAAK,GAAG;AAE3B,sBAAc,KAAK,GAAG,iBAAiB,MAAM,MAAM,QAAQ,CAAC;AAC5D;AAAA,MACF;AACA,UAAI,sBAAsB,IAAI,MAAM,IAAI,GAAG;AACzC,sBAAc,KAAK,KAAK;AACxB;AAAA,MACF;AAAA,IACF;AACA;AAAA,MACE;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAUO,MAAM,cAAc,CAAC,UAA8B;AACzD,YAA6D,cAC5D;AAqBK,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AAGrB,QAAM,kBAAkB,YAAY,YAAY;AAC9C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,SAAS,CAAC;AAAA,IAChD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,QAAM,oBACJ;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC,UAAU,MAAM;AACd,wBAAgB,EAAE,MAAM,MAAM,MAAM;AAAA,MACtC;AAAA,MACA,gBAAa;AAAA,MAEb;AAAA,4BAAC,KAAK,QAAL,EACC,8BAAC,YAAS,GACZ;AAAA,QACC,KAAK,cAAc,6BAA6B,SAAS;AAAA;AAAA;AAAA,EAC5D;AAGF,QAAM,4BACJ;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,gBAAa;AAAA,MAEb;AAAA,4BAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,QACC,KAAK,cAAc,6BAA6B,iBAAiB;AAAA;AAAA;AAAA,EACpE;AAGF,SACE,oBAAC,SAAI,WAAW,OAAO,mBAAmB,EAAE,KAAK,CAAC,GAChD,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,cAAY,KAAK;AAAA,UACf,6BAA6B;AAAA,QAC/B;AAAA,QACA,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA;AAAA,IACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACC;AAAA,2BAAC,KAAK,OAAL,EACE;AAAA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,KAAK,OAAL,EAAY,qCAA0B;AAAA,OACzC;AAAA,KACF,GACF;AAEJ;",
+  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  useCallback,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport {\n  CodeIcon,\n  CopyIcon,\n  DotMenuIcon,\n  ExternalLinkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { dqlEditorActionsMenuMessages } from './actions-menu-messages.js';\nimport * as styles from './ActionsMenu.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport { Group } from '../../../navigation/menu/Group.js';\nimport { Intent } from '../../../navigation/menu/Intent.js';\nimport { Item } from '../../../navigation/menu/Item.js';\nimport { Label } from '../../../navigation/menu/Label.js';\nimport { Link } from '../../../navigation/menu/Link.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Sub } from '../../../navigation/menu/Sub.js';\n\n// Menu slot components allowed as children of `DQLEditor.ActionsMenu`\nconst ALLOWED_MENU_CHILDREN = new Set<unknown>([\n  Item,\n  Group,\n  Label,\n  Link,\n  Intent,\n  Sub,\n]);\n\n/**\n * Type guard for transparent wrappers (fragments and divs) whose children are\n * flattened and validated individually.\n */\nfunction isWrapperElement(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment || child.type === 'div';\n}\n\n/**\n * Iterates over child nodes and keeps only supported Menu slot components.\n */\nfunction getValidChildren(children: ReactNode): ReactNode[] {\n  const validChildren: ReactNode[] = [];\n  for (const child of Children.toArray(children)) {\n    if (isElement(child)) {\n      if (isWrapperElement(child)) {\n        // Flatten fragments and divs so their children are validated individually.\n        validChildren.push(...getValidChildren(child.props.children));\n        continue;\n      }\n      if (ALLOWED_MENU_CHILDREN.has(child.type)) {\n        validChildren.push(child);\n        continue;\n      }\n    }\n    devLog(\n      'Only Menu component items are supported as children of DQLEditor.ActionsMenu.',\n    );\n  }\n\n  return validChildren;\n}\n\n/**\n * Slot component that enables the actions menu in the DQLEditor.\n *\n * Rendering this component as a child of `DQLEditor` displays a kebab menu\n * with built-in actions (Copy query, Format query, Open documentation). Custom menu items\n * can be passed as children and will be rendered between the built-in actions.\n * @public\n */\nexport const ActionsMenu = (props: WithChildren): null => null;\n(ActionsMenu as typeof ActionsMenu & { displayName: string }).displayName =\n  'DQLEditor.ActionsMenu';\n\n/**\n * Props for the `ActionsMenuInternal` component.\n * @internal\n */\nexport interface ActionsMenuInternalProps extends PropsWithChildren {\n  /**\n   * Returns the editor's current content, copied to clipboard when the copy action is triggered.\n   */\n  getValue: () => string;\n  /**\n   * The editor's size variant affecting the trigger button and positioning.\n   */\n  size: 'default' | 'condensed';\n  /**\n   * When provided, a \"Format query\" item is shown in the menu.\n   */\n  onFormat?: () => void;\n}\n\n/**\n * Internal component that renders the DQLEditor actions menu.\n * @internal\n */\nexport const ActionsMenuInternal = ({\n  getValue,\n  size,\n  children,\n  onFormat,\n}: ActionsMenuInternalProps) => {\n  const intl = useIntl();\n  // getValue() is called at copy time (not at render time) so it always reads\n  // the current editor content from the ref, regardless of re-renders.\n  const copyToClipboard = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(getValue());\n    } catch {\n      // For now, we silently ignore clipboard write errors.\n    }\n  }, [getValue]);\n\n  const validChildren = getValidChildren(children);\n\n  const copyQueryMenuItem = (\n    <Menu.Item\n      onSelect={() => {\n        copyToClipboard().catch(() => void 0);\n      }}\n      data-dt-name=\"CopyQuery\"\n    >\n      <Menu.Prefix>\n        <CopyIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)}\n    </Menu.Item>\n  );\n\n  const openDocumentationMenuItem = (\n    <Menu.Link\n      href={DQL_DOCUMENTATION_URL}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-dt-name=\"OpenDocumentation\"\n    >\n      <Menu.Prefix>\n        <ExternalLinkIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.openDocumentation)}\n    </Menu.Link>\n  );\n\n  const formatQueryMenuItem = onFormat ? (\n    <Menu.Item onSelect={onFormat} data-dt-name=\"FormatQuery\">\n      <Menu.Prefix>\n        <CodeIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.formatQuery)}\n    </Menu.Item>\n  ) : null;\n\n  return (\n    <div className={styles.actionsMenuWrapper({ size })}>\n      <Menu>\n        <Menu.Trigger>\n          <Button\n            variant=\"default\"\n            size={size}\n            aria-label={intl.formatMessage(\n              dqlEditorActionsMenuMessages.triggerLabel,\n            )}\n            data-dt-name=\"OpenActionsMenu\"\n          >\n            <Button.Prefix>\n              <DotMenuIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.Group>\n            {copyQueryMenuItem}\n            {formatQueryMenuItem}\n            {validChildren}\n          </Menu.Group>\n          <Menu.Group>{openDocumentationMenuItem}</Menu.Group>\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/editors/dql-editor/actions-menu/ActionsMenu.sty.js

@@ -1,9 +1,10 @@
+import "../../../core/components/app-root/AppRoot.css";
 import "./ActionsMenu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var actionsMenuWrapper = _7a468({ defaultClassName: "_1okebta2-3-7-0", variantClassNames: { size: { "default": "_1okebta3-3-7-0", condensed: "_1okebta4-3-7-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWithActionsMenu = { "default": "_1okebta5-3-7-0", condensed: "_1okebta6-3-7-0" };
-var editorWrapper = "_1okebta0-3-7-0";
-var editorWrapperFullHeight = "_1okebta1-3-7-0";
+var actionsMenuWrapper = _7a468({ defaultClassName: "_1okebta2-3-8-0", variantClassNames: { size: { "default": "_1okebta3-3-8-0", condensed: "_1okebta4-3-8-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-8-0", condensed: "_1okebta6-3-8-0" };
+var editorWrapper = "_1okebta0-3-8-0";
+var editorWrapperFullHeight = "_1okebta1-3-8-0";
 export {
   actionsMenuWrapper,
   editorWithActionsMenu,

package/esm/editors/dql-editor/actions-menu/ActionsMenu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/actions-menu/ActionsMenu.css.ts"],
-  "sourcesContent": ["import './ActionsMenu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsMenuWrapper = _7a468({defaultClassName:'_1okebta2-3-7-0',variantClassNames:{size:{'default':'_1okebta3-3-7-0',condensed:'_1okebta4-3-7-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWithActionsMenu = {'default':'_1okebta5-3-7-0',condensed:'_1okebta6-3-7-0'};\nexport var editorWrapper = '_1okebta0-3-7-0';\nexport var editorWrapperFullHeight = '_1okebta1-3-7-0';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5M,IAAI,wBAAwB,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;AACpF,IAAI,gBAAgB;AACpB,IAAI,0BAA0B;",
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './ActionsMenu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsMenuWrapper = _7a468({defaultClassName:'_1okebta2-3-8-0',variantClassNames:{size:{'default':'_1okebta3-3-8-0',condensed:'_1okebta4-3-8-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWithActionsMenu = {'default':'_1okebta5-3-8-0',condensed:'_1okebta6-3-8-0'};\nexport var editorWrapper = '_1okebta0-3-8-0';\nexport var editorWrapperFullHeight = '_1okebta1-3-8-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5M,IAAI,wBAAwB,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;AACpF,IAAI,gBAAgB;AACpB,IAAI,0BAA0B;",
   "names": []
 }

package/esm/editors/dql-editor/actions-menu/actions-menu-messages.js

@@ -14,6 +14,11 @@ const dqlEditorActionsMenuMessages = defineMessages({
     defaultMessage: "Open documentation",
     id: "XmYqCKn9iEfBoSSL",
     description: "Menu item label to open the DQL documentation in a new browser tab."
+  },
+  formatQuery: {
+    defaultMessage: "Format query",
+    id: "7/hGI/teTlqSMko6",
+    description: "Menu item label to format the DQL query."
   }
 });
 export {

package/esm/editors/dql-editor/actions-menu/actions-menu-messages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/actions-menu/actions-menu-messages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const dqlEditorActionsMenuMessages = defineMessages({\n  triggerLabel: {\n    defaultMessage: 'DQL editor actions',\n    id: 'VYHp9Wzie7wOmBmf',\n    description: 'Aria label for the DQL editor actions menu trigger button.',\n  },\n  copyQuery: {\n    defaultMessage: 'Copy query',\n    id: 'NwDE2g2nYFjxPG9v',\n    description: 'Menu item label to copy the DQL query to the clipboard.',\n  },\n  openDocumentation: {\n    defaultMessage: 'Open documentation',\n    id: 'XmYqCKn9iEfBoSSL',\n    description:\n      'Menu item label to open the DQL documentation in a new browser tab.',\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,eAAe;AAAA,EACzD,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,IACjB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AACF,CAAC;",
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const dqlEditorActionsMenuMessages = defineMessages({\n  triggerLabel: {\n    defaultMessage: 'DQL editor actions',\n    id: 'VYHp9Wzie7wOmBmf',\n    description: 'Aria label for the DQL editor actions menu trigger button.',\n  },\n  copyQuery: {\n    defaultMessage: 'Copy query',\n    id: 'NwDE2g2nYFjxPG9v',\n    description: 'Menu item label to copy the DQL query to the clipboard.',\n  },\n  openDocumentation: {\n    defaultMessage: 'Open documentation',\n    id: 'XmYqCKn9iEfBoSSL',\n    description:\n      'Menu item label to open the DQL documentation in a new browser tab.',\n  },\n  formatQuery: {\n    defaultMessage: 'Format query',\n    id: '7/hGI/teTlqSMko6',\n    description: 'Menu item label to format the DQL query.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,eAAe;AAAA,EACzD,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,IACjB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,aAAa;AAAA,IACX,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AACF,CAAC;",
   "names": []
 }

package/esm/editors/dql-editor/dql/SuggestionPart.css

@@ -1,4 +1,4 @@
-._yhio8f0-3-7-0 {
+._yhio8f0-3-8-0 {
   display: inline;
   margin-right: 0.5ch;
 }

package/esm/editors/dql-editor/dql/SuggestionPart.sty.js

@@ -1,5 +1,5 @@
 import "./SuggestionPart.css";
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-7-0";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-8-0";
 export {
   suggestionPartSectionInfoCSS
 };

package/esm/editors/dql-editor/dql/SuggestionPart.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionPart.css.ts"],
-  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-7-0';"],
+  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;",
   "names": []
 }

package/esm/editors/dql-editor/dql/SuggestionsInfoSection.css

@@ -1,8 +1,8 @@
 .cm-tooltip.cm-tooltip-autocomplete {
   container-type: inline-size;
-  container-name: _cpuf060-3-7-0;
+  container-name: _cpuf060-3-8-0;
 }
-._cpuf061-3-7-0 {
+._cpuf061-3-8-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
@@ -15,20 +15,20 @@
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf062-3-7-0 {
+._cpuf062-3-8-0 {
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf063-3-7-0 {
+._cpuf063-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-@container _cpuf060-3-7-0 (max-width: 289px) {
-  ._cpuf061-3-7-0 {
+@container _cpuf060-3-8-0 (max-width: 289px) {
+  ._cpuf061-3-8-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);
   }
-  ._cpuf062-3-7-0 {
+  ._cpuf062-3-8-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);

package/esm/editors/dql-editor/dql/SuggestionsInfoSection.js

@@ -4,6 +4,7 @@ import { dqlEditorMessages as messages } from "./messages.js";
 import * as styles from "./SuggestionsInfoSection.sty.js";
 import { DQL_DOCUMENTATION_URL } from "../../../core/external-links.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
+import { textStyle } from "../../../styles/textStyle.sty.js";
 import { ExternalLink } from "../../../typography/external-link/ExternalLink.js";
 import { Text } from "../../../typography/text/Text.js";
 const SuggestionsInfoSection = () => {
@@ -26,7 +27,15 @@ const SuggestionsInfoSection = () => {
             /* @__PURE__ */ jsx(Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(messages.openPanel) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(ExternalLink, { href: DQL_DOCUMENTATION_URL, "data-dt-name": "DqlSyntax", children: intl.formatMessage(messages.dqlSyntaxLink) })
+        /* @__PURE__ */ jsx(
+          ExternalLink,
+          {
+            href: DQL_DOCUMENTATION_URL,
+            className: textStyle({ textStyle: "small" }),
+            "data-dt-name": "DqlSyntax",
+            children: intl.formatMessage(messages.dqlSyntaxLink)
+          }
+        )
       ]
     }
   );

package/esm/editors/dql-editor/dql/SuggestionsInfoSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionsInfoSection.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { dqlEditorMessages as messages } from './messages.js';\nimport * as styles from './SuggestionsInfoSection.sty.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../typography/text/Text.js';\n\nexport const SuggestionsInfoSection = () => {\n  const intl = useIntl();\n\n  return (\n    <Flex\n      className={styles.container}\n      data-dt-name=\"SuggestionsInfoSection\"\n      flexWrap=\"wrap\"\n      justifyContent=\"space-between\"\n    >\n      <Flex className={styles.shortcutsGroup}>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Esc</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.closePanel)}\n          </Text>\n        </Flex>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Ctrl+Space</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.openPanel)}\n          </Text>\n        </Flex>\n      </Flex>\n\n      <ExternalLink href={DQL_DOCUMENTATION_URL} data-dt-name=\"DqlSyntax\">\n        {intl.formatMessage(messages.dqlSyntaxLink)}\n      </ExternalLink>\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAoBQ,SACE,KADF;AApBR,SAAS,eAAe;AAExB,SAAS,qBAAqB,gBAAgB;AAC9C,YAAY,YAAY;AACxB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAEd,MAAM,yBAAyB,MAAM;AAC1C,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,UAAS;AAAA,MACT,gBAAe;AAAA,MAEf;AAAA,6BAAC,QAAK,WAAW,OAAO,gBACtB;AAAA,+BAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,iBAAG;AAAA,YACtC,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,UAAU,GACzC;AAAA,aACF;AAAA,UACA,qBAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,wBAAU;AAAA,YAC7C,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,SAAS,GACxC;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,gBAAa,MAAM,uBAAuB,gBAAa,aACrD,eAAK,cAAc,SAAS,aAAa,GAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { dqlEditorMessages as messages } from './messages.js';\nimport * as styles from './SuggestionsInfoSection.sty.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { textStyle } from '../../../styles/textStyle.sty.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../typography/text/Text.js';\n\nexport const SuggestionsInfoSection = () => {\n  const intl = useIntl();\n\n  return (\n    <Flex\n      className={styles.container}\n      data-dt-name=\"SuggestionsInfoSection\"\n      flexWrap=\"wrap\"\n      justifyContent=\"space-between\"\n    >\n      <Flex className={styles.shortcutsGroup}>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Esc</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.closePanel)}\n          </Text>\n        </Flex>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Ctrl+Space</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.openPanel)}\n          </Text>\n        </Flex>\n      </Flex>\n\n      <ExternalLink\n        href={DQL_DOCUMENTATION_URL}\n        className={textStyle({ textStyle: 'small' })}\n        data-dt-name=\"DqlSyntax\"\n      >\n        {intl.formatMessage(messages.dqlSyntaxLink)}\n      </ExternalLink>\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAqBQ,SACE,KADF;AArBR,SAAS,eAAe;AAExB,SAAS,qBAAqB,gBAAgB;AAC9C,YAAY,YAAY;AACxB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAEd,MAAM,yBAAyB,MAAM;AAC1C,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,UAAS;AAAA,MACT,gBAAe;AAAA,MAEf;AAAA,6BAAC,QAAK,WAAW,OAAO,gBACtB;AAAA,+BAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,iBAAG;AAAA,YACtC,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,UAAU,GACzC;AAAA,aACF;AAAA,UACA,qBAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,wBAAU;AAAA,YAC7C,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,SAAS,GACxC;AAAA,aACF;AAAA,WACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW,UAAU,EAAE,WAAW,QAAQ,CAAC;AAAA,YAC3C,gBAAa;AAAA,YAEZ,eAAK,cAAc,SAAS,aAAa;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/editors/dql-editor/dql/SuggestionsInfoSection.sty.js

@@ -1,7 +1,7 @@
 import "./SuggestionsInfoSection.css";
-var container = "_cpuf061-3-7-0";
-var shortcutLabel = "_cpuf063-3-7-0";
-var shortcutsGroup = "_cpuf062-3-7-0";
+var container = "_cpuf061-3-8-0";
+var shortcutLabel = "_cpuf063-3-8-0";
+var shortcutsGroup = "_cpuf062-3-8-0";
 export {
   container,
   shortcutLabel,

package/esm/editors/dql-editor/dql/SuggestionsInfoSection.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionsInfoSection.css.ts"],
-  "sourcesContent": ["import './SuggestionsInfoSection.css';\nexport var container = '_cpuf061-3-7-0';\nexport var shortcutLabel = '_cpuf063-3-7-0';\nexport var shortcutsGroup = '_cpuf062-3-7-0';"],
+  "sourcesContent": ["import './SuggestionsInfoSection.css';\nexport var container = '_cpuf061-3-8-0';\nexport var shortcutLabel = '_cpuf063-3-8-0';\nexport var shortcutsGroup = '_cpuf062-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/editors/dql-editor/dql/open-autocomplete.js

@@ -1,21 +1,30 @@
 import { CompletionContext } from "@codemirror/autocomplete";
 import { verifyQuery } from "./dql-linter.js";
+const SUBQUERY_PREFIX_LOOKBACK_CHARS = 100;
 function isStartOfCommandOrParameter(context) {
   return context.matchBefore(/[,|]\s+$/) !== null;
 }
 function isTypingCommandPrefixAtCommandBoundary(context) {
   return context.matchBefore(/(?:^|[|,]\s*|\*\/\s*)[A-Za-z][A-Za-z0-9]*$/) !== null;
 }
+function isTypingCommandPrefixAtSubqueryStart(context) {
+  const slice = context.state.doc.sliceString(
+    Math.max(0, context.pos - SUBQUERY_PREFIX_LOOKBACK_CHARS),
+    context.pos
+  );
+  return /\[\s*[A-Za-z]+$/.test(slice);
+}
 function isTypingParameterPrefixAfterCommand(context) {
   const commandAndParameter = context.matchBefore(
     /^[A-Za-z][A-Za-z0-9]*\s+[A-Za-z_][A-Za-z0-9_.]*\s*$/
   );
   return commandAndParameter !== null;
 }
-function isBeforeCommentOrEndOfContent(state) {
+function isAtTokenBoundary(state) {
   const afterCursor = state.doc.slice(state.selection.main.to).toString();
+  const immediateCharacterAfterCursor = afterCursor.slice(0, 1);
   const afterCursorTrimmed = afterCursor.trimStart();
-  return afterCursorTrimmed === "" || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
+  return immediateCharacterAfterCursor.trim().length === 0 || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
 }
 async function isInvalidAtEnd(query) {
   const trimmedQuery = query.trimEnd();
@@ -28,7 +37,16 @@ async function isInvalidAtEnd(query) {
 async function openAutocomplete(update, state) {
   const { isTyping, isDeleting, isFocused } = update;
   const context = new CompletionContext(state, state.selection.main.to, false);
-  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingParameterPrefixAfterCommand(context)) && isBeforeCommentOrEndOfContent(state)) {
+  if (isDeleting) {
+    const beforeCursor = state.doc.sliceString(
+      Math.max(0, state.selection.main.to - 2),
+      state.selection.main.to
+    );
+    if (/\s\s$/.test(beforeCursor)) {
+      return false;
+    }
+  }
+  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingCommandPrefixAtSubqueryStart(context) || isTypingParameterPrefixAfterCommand(context)) && isAtTokenBoundary(state)) {
     return true;
   }
   if (isFocused && state.doc.toString().trim() === "") {