@dynatrace/strato-components 3.8.0 → 3.9.0

package/editors/base-code-editor/configuration/getDefaultConfigurations.js

@@ -98,19 +98,14 @@ const getDefaultConfiguration = (intlProps, options = {
     }
   };
   const selectOptionFromMouse = (option, view) => {
-    const optionList = option.parentElement;
-    if (!optionList) {
+    const match = /-(\d+)$/.exec(option.id);
+    if (!match?.length) {
       return;
     }
-    const options2 = Array.from(
-      optionList.querySelectorAll(':scope > li[role="option"]')
-    );
-    const index = options2.indexOf(option);
-    if (index >= 0) {
-      autocompleteInteractionMode = "mouse";
-      syncAutocompleteInteractionModeClass(autocompleteInteractionMode);
-      view.dispatch({ effects: (0, import_autocomplete.setSelectedCompletion)(index) });
-    }
+    const index = parseInt(match[1], 10);
+    autocompleteInteractionMode = "mouse";
+    syncAutocompleteInteractionModeClass(autocompleteInteractionMode);
+    view.dispatch({ effects: (0, import_autocomplete.setSelectedCompletion)(index) });
   };
   return [
     (0, import_commands.history)(),
@@ -138,6 +133,9 @@ const getDefaultConfiguration = (intlProps, options = {
               option.setAttribute("data-dt-name", "Suggestion");
               const optionPopup = option.closest(".cm-tooltip-autocomplete");
               if (optionPopup instanceof HTMLElement) {
+                if (optionPopup !== editorAutocompletePopup) {
+                  autocompleteInteractionMode = "keyboard";
+                }
                 editorAutocompletePopup = optionPopup;
                 syncAutocompleteInteractionModeClass(
                   autocompleteInteractionMode

package/editors/base-code-editor/utils/compute-minimal-change.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Computes the smallest replacement range that turns `oldValue` into `newValue`,
+ * trimming the common prefix and suffix so unaffected regions stay untouched.
+ */
+export declare function computeMinimalChange(oldValue: string, newValue: string): {
+    from: number;
+    to: number;
+    insert: string;
+};

package/{forms/hooks/useInputHint.js → editors/base-code-editor/utils/compute-minimal-change.js}

@@ -15,29 +15,21 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useInputHint_exports = {};
-__export(useInputHint_exports, {
-  useInputHint: () => useInputHint
+var compute_minimal_change_exports = {};
+__export(compute_minimal_change_exports, {
+  computeMinimalChange: () => computeMinimalChange
 });
-module.exports = __toCommonJS(useInputHint_exports);
-var import_useId = require("../../core/hooks/useId.js");
-function useInputHint({
-  id,
-  hint,
-  hasError,
-  ariaDescribedby: ariaDescribedbyProp
-}) {
-  const _hintId = (0, import_useId.useId)();
-  const hintId = id ?? _hintId;
-  const ariaDescribedby = [
-    ariaDescribedbyProp,
-    hint ? hintId : void 0
-  ].filter((value) => !!value);
-  return {
-    hintProps: { id: hintId, "aria-live": "polite" },
-    inputProps: {
-      "aria-describedby": ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : void 0,
-      "aria-invalid": hasError
-    }
-  };
+module.exports = __toCommonJS(compute_minimal_change_exports);
+function computeMinimalChange(oldValue, newValue) {
+  let from = 0;
+  while (from < oldValue.length && from < newValue.length && oldValue[from] === newValue[from]) {
+    from++;
+  }
+  let to = oldValue.length;
+  let newEnd = newValue.length;
+  while (to > from && newEnd > from && oldValue[to - 1] === newValue[newEnd - 1]) {
+    to--;
+    newEnd--;
+  }
+  return { from, to, insert: newValue.slice(from, newEnd) };
 }

package/editors/base-code-editor/utils/run-foldings.d.ts

@@ -1,7 +1,10 @@
 import { EditorView } from '@codemirror/view';
 /**
- * Moves the cursor to each folding section, and call foldCode on the view.
- * @param foldings - array of folding positions
+ * Sets the editor fold state to exactly the given positions.
+ * Positions present in `prevFoldings` but absent from `foldings` are unfolded;
+ * positions in `foldings` are folded (foldCode is idempotent for already-folded ranges).
+ * @param foldings - target set of folding positions
  * @param editorView - Editor view
+ * @param prevFoldings - previously active positions, used to compute which to unfold
  */
-export declare function runFoldings(foldings: number[], editorView: EditorView): void;
+export declare function runFoldings(foldings: number[], editorView: EditorView, prevFoldings?: number[]): void;

package/editors/base-code-editor/utils/run-foldings.js

@@ -22,26 +22,48 @@ __export(run_foldings_exports, {
 module.exports = __toCommonJS(run_foldings_exports);
 var import_language = require("@codemirror/language");
 var import_state = require("@codemirror/state");
-var import_is_node_environment = require("../../../core/utils/is-node-environment.js");
-function runFoldings(foldings, editorView) {
+var import_logging = require("../../../core/utils/logging.js");
+function runFoldings(foldings, editorView, prevFoldings = []) {
   const selection = editorView.state.selection;
-  for (const foldPosition of foldings) {
-    if (editorView.state.doc.length <= foldPosition) {
-      if ((0, import_is_node_environment.isDev)()) {
-        console.warn(
-          `Editor folding position [${foldPosition}] exceeds text length [${editorView.state.doc.length}]. Folding will be ignored.`
+  for (const pos of prevFoldings) {
+    if (!foldings.includes(pos)) {
+      if (editorView.state.doc.length <= pos) {
+        (0, import_logging.devLog)(
+          `Editor unfolding position [${pos}] exceeds text length [${editorView.state.doc.length}]. Unfolding will be ignored.`
         );
+        continue;
       }
-      continue;
+      editorView.dispatch(
+        editorView.state.update({ selection: import_state.EditorSelection.cursor(pos) })
+      );
+      (0, import_language.unfoldCode)(editorView);
     }
-    const transaction = editorView.state.update({
-      selection: import_state.EditorSelection.cursor(foldPosition)
-    });
-    if (transaction) {
-      editorView.dispatch(transaction);
+  }
+  for (const foldPosition of foldings) {
+    if (editorView.state.doc.length <= foldPosition) {
+      (0, import_logging.devLog)(
+        `Editor folding position [${foldPosition}] exceeds text length [${editorView.state.doc.length}]. Folding will be ignored.`
+      );
+      continue;
     }
+    editorView.dispatch(
+      editorView.state.update({
+        selection: import_state.EditorSelection.cursor(foldPosition)
+      })
+    );
     (0, import_language.foldCode)(editorView);
   }
-  const resetCursorTransaction = editorView.state.update({ selection });
-  editorView.dispatch(resetCursorTransaction);
+  const folded = (0, import_language.foldedRanges)(editorView.state);
+  let targetPos = selection.main.head;
+  const iter = folded.iter();
+  while (iter.value !== null) {
+    if (iter.from < targetPos && targetPos <= iter.to) {
+      targetPos = iter.from;
+      break;
+    }
+    iter.next();
+  }
+  editorView.dispatch(
+    editorView.state.update({ selection: import_state.EditorSelection.cursor(targetPos) })
+  );
 }

package/editors/code-editor/CodeEditor.js

@@ -38,6 +38,7 @@ const CodeEditorInner = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   const intl = (0, import_react_intl.useIntl)();
   const {
     id,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     defaultFolding,
     folding,

package/editors/dql-editor/DQLEditor.js

@@ -61,6 +61,7 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
       id,
       defaultValue,
       value,
+      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
       controlState,
       onChange,
       folding,
@@ -122,22 +123,20 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
         setFormatDqlFn(void 0);
       });
     }, []);
-    const [editorConfig, setEditorConfig] = (0, import_react.useState)();
     const [fireValidationStart, fireValidationEnd] = (0, import_useValidationCallbacks.useValidationCallbacks)(
       onValidationStart,
       onValidationEnd
     );
     const setValidityInfo = (0, import_useValidityInfo.useValidityInfo)(onValidityChange);
-    (0, import_react.useEffect)(() => {
-      setEditorConfig(
-        (0, import_dql_language.getDqlConfig)(
-          readOnly,
-          fireValidationStart,
-          fireValidationEnd,
-          setValidityInfo
-        )
-      );
-    }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);
+    const editorConfig = (0, import_react.useMemo)(
+      () => (0, import_dql_language.getDqlConfig)(
+        readOnly,
+        fireValidationStart,
+        fireValidationEnd,
+        setValidityInfo
+      ),
+      [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]
+    );
     let hasActionsMenu = false;
     let actionsMenuChildren;
     import_react.Children.forEach(children, (child) => {

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

@@ -1,38 +1,42 @@
-._1okebta0-3-8-0 {
+._1okebta0-3-9-0 {
   position: relative;
   width: 100%;
 }
-._1okebta1-3-8-0 {
+._1okebta1-3-9-0 {
   display: flex;
   flex-grow: 1;
   max-height: 100%;
   min-height: 100%;
 }
-._1okebta2-3-8-0 {
+._1okebta2-3-9-0 {
   position: absolute;
   z-index: var(--dt-elevations-default, 1);
   top: 0;
   right: 0;
 }
-._1okebta3-3-8-0 {
+._1okebta3-3-9-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));
 }
-._1jgl8s50-3-8-0 ._1okebta3-3-8-0 {
+._1jgl8s50-3-9-0 ._1okebta3-3-9-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));
 }
-._1okebta4-3-8-0 {
+._1okebta4-3-9-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));
 }
-._1jgl8s50-3-8-0 ._1okebta4-3-8-0 {
+._1jgl8s50-3-9-0 ._1okebta4-3-9-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 {
+._1okebta5-3-9-0 .cm-editor {
   padding-right: calc(var(--dt-spacings-size-40, 40px) + var(--dt-spacings-size-4, 4px));
 }
-._1okebta6-3-8-0 .cm-editor {
+._1okebta6-3-9-0 .cm-editor {
   padding-right: calc(var(--dt-spacings-size-28, 28px) + var(--dt-spacings-size-4, 4px));
+}
+._1okebta7-3-9-0 {
+  white-space: nowrap;
+  margin-left: var(--dt-spacings-size-8, 8px);
 }

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

@@ -39,6 +39,7 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_actions_menu_messages = require("./actions-menu-messages.js");
 var styles = __toESM(require("./ActionsMenu.sty.js"));
 var import_Button = require("../../../buttons/button/Button.js");
+var import_KeyboardShortcut = require("../../../content/keyboard-shortcut/KeyboardShortcut.js");
 var import_external_links = require("../../../core/external-links.js");
 var import_logging = require("../../../core/utils/logging.js");
 var import_Group = require("../../../navigation/menu/Group.js");
@@ -59,6 +60,9 @@ const ALLOWED_MENU_CHILDREN = /* @__PURE__ */ new Set([
 function isWrapperElement(child) {
   return child.type === import_react.Fragment || child.type === "div";
 }
+function isMacPlatform() {
+  return typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("mac");
+}
 function getValidChildren(children) {
   const validChildren = [];
   for (const child of import_react.Children.toArray(children)) {
@@ -122,7 +126,14 @@ const ActionsMenuInternal = ({
   );
   const formatQueryMenuItem = onFormat ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Item, { onSelect: onFormat, "data-dt-name": "FormatQuery", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CodeIcon, {}) }),
-    intl.formatMessage(import_actions_menu_messages.dqlEditorActionsMenuMessages.formatQuery)
+    intl.formatMessage(import_actions_menu_messages.dqlEditorActionsMenuMessages.formatQuery),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Suffix, { className: styles.formatQueryShortcut, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_KeyboardShortcut.KeyboardShortcut,
+      {
+        keys: isMacPlatform() ? "Cmd+Shift+F" : "Control+Shift+F",
+        variant: "minimal"
+      }
+    ) })
   ] }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.actionsMenuWrapper({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/editors/dql-editor/actions-menu/ActionsMenu.sty.d.ts

@@ -25,3 +25,4 @@ export declare const actionsMenuWrapper: import("@vanilla-extract/recipes").Runt
     };
 }>;
 export declare const editorWithActionsMenu: Record<"default" | "condensed", string>;
+export declare const formatQueryShortcut: string;

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

@@ -20,13 +20,15 @@ __export(ActionsMenu_css_exports, {
   actionsMenuWrapper: () => actionsMenuWrapper,
   editorWithActionsMenu: () => editorWithActionsMenu,
   editorWrapper: () => editorWrapper,
-  editorWrapperFullHeight: () => editorWrapperFullHeight
+  editorWrapperFullHeight: () => editorWrapperFullHeight,
+  formatQueryShortcut: () => formatQueryShortcut
 });
 module.exports = __toCommonJS(ActionsMenu_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_ActionsMenu_css_ts_vanilla = require("./ActionsMenu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ 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";
+var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-9-0", variantClassNames: { size: { "default": "_1okebta3-3-9-0", condensed: "_1okebta4-3-9-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-9-0", condensed: "_1okebta6-3-9-0" };
+var editorWrapper = "_1okebta0-3-9-0";
+var editorWrapperFullHeight = "_1okebta1-3-9-0";
+var formatQueryShortcut = "_1okebta7-3-9-0";

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

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

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

@@ -21,4 +21,4 @@ __export(SuggestionPart_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionPart_css_exports);
 var import_SuggestionPart_css_ts_vanilla = require("./SuggestionPart.css");
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-8-0";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-9-0";

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

@@ -1,8 +1,8 @@
 .cm-tooltip.cm-tooltip-autocomplete {
   container-type: inline-size;
-  container-name: _cpuf060-3-8-0;
+  container-name: _cpuf060-3-9-0;
 }
-._cpuf061-3-8-0 {
+._cpuf061-3-9-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-8-0 {
+._cpuf062-3-9-0 {
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf063-3-8-0 {
+._cpuf063-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-@container _cpuf060-3-8-0 (max-width: 289px) {
-  ._cpuf061-3-8-0 {
+@container _cpuf060-3-9-0 (max-width: 289px) {
+  ._cpuf061-3-9-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);
   }
-  ._cpuf062-3-8-0 {
+  ._cpuf062-3-9-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);

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

@@ -23,6 +23,6 @@ __export(SuggestionsInfoSection_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsInfoSection_css_exports);
 var import_SuggestionsInfoSection_css_ts_vanilla = require("./SuggestionsInfoSection.css");
-var container = "_cpuf061-3-8-0";
-var shortcutLabel = "_cpuf063-3-8-0";
-var shortcutsGroup = "_cpuf062-3-8-0";
+var container = "_cpuf061-3-9-0";
+var shortcutLabel = "_cpuf063-3-9-0";
+var shortcutsGroup = "_cpuf062-3-9-0";

package/editors/dql-editor/dql/dql-fold-service.d.ts

@@ -0,0 +1,9 @@
+import { StateField } from '@codemirror/state';
+/**
+ * Provides foldable regions for DQL:
+ *  - multi-line block comments
+ *  - multi-line subqueries
+ * Used with StreamLanguage which has no syntax tree and therefore no built-in fold ranges.
+ * @internal
+ */
+export declare const dqlFoldService: (import("@codemirror/state").Extension | StateField<readonly [number, number][]>)[];

package/editors/dql-editor/dql/dql-fold-service.js

@@ -0,0 +1,181 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dql_fold_service_exports = {};
+__export(dql_fold_service_exports, {
+  dqlFoldService: () => dqlFoldService
+});
+module.exports = __toCommonJS(dql_fold_service_exports);
+var import_language = require("@codemirror/language");
+var import_state = require("@codemirror/state");
+function computeBlockCommentRanges(state) {
+  const text = state.doc.sliceString(0, state.doc.length);
+  const ranges = [];
+  let i = 0;
+  while (i < text.length) {
+    if (text[i] === '"') {
+      i = skipStringLiteral(text, i);
+    } else if (text[i] === "/" && text[i + 1] === "/") {
+      i = skipLineComment(text, i);
+    } else if (text[i] === "/" && text[i + 1] === "*") {
+      const start = i;
+      i = skipBlockComment(text, i);
+      ranges.push([start, i]);
+    } else {
+      i++;
+    }
+  }
+  return ranges;
+}
+const blockCommentRangesField = import_state.StateField.define({
+  create: computeBlockCommentRanges,
+  update: (value, transaction) => transaction.docChanged ? computeBlockCommentRanges(transaction.state) : value
+});
+function isInsideBlockComment(ranges, lineStart) {
+  for (const [start, end] of ranges) {
+    if (start >= lineStart) {
+      break;
+    }
+    if (end > lineStart) {
+      return true;
+    }
+  }
+  return false;
+}
+function skipLineComment(docSlice, from) {
+  const newline = docSlice.indexOf("\n", from);
+  return newline >= 0 ? newline + 1 : docSlice.length;
+}
+function skipBlockComment(docSlice, from) {
+  const close = docSlice.indexOf("*/", from + 2);
+  return close >= 0 ? close + 2 : docSlice.length;
+}
+function skipStringLiteral(docSlice, from) {
+  let i = from + 1;
+  while (i < docSlice.length) {
+    const ch = docSlice[i];
+    if (ch === "\\") {
+      i += 2;
+    } else if (ch === '"') {
+      return i + 1;
+    } else if (ch === "\n") {
+      return i + 1;
+    } else {
+      i++;
+    }
+  }
+  return docSlice.length;
+}
+function scanLineTokens(lineText) {
+  let i = 0;
+  let blockComment = -1;
+  let bracket = -1;
+  while (i < lineText.length) {
+    const ch = lineText[i];
+    if (ch === '"') {
+      i = skipStringLiteral(lineText, i);
+      continue;
+    }
+    if (ch === "/" && lineText[i + 1] === "/") {
+      return { blockComment, lineComment: i, bracket };
+    }
+    if (ch === "/" && lineText[i + 1] === "*" && blockComment < 0) {
+      blockComment = i;
+    }
+    if (ch === "[" && bracket < 0) {
+      bracket = i;
+    }
+    i++;
+  }
+  return { blockComment, lineComment: -1, bracket };
+}
+function findMatchingBracketEnd(docSlice, lineStart, bracketIdx) {
+  let depth = 0;
+  let i = 0;
+  while (i < docSlice.length) {
+    const ch = docSlice[i];
+    if (ch === '"') {
+      i = skipStringLiteral(docSlice, i);
+      continue;
+    }
+    if (ch === "/" && docSlice[i + 1] === "/") {
+      i = skipLineComment(docSlice, i);
+      continue;
+    }
+    if (ch === "/" && docSlice[i + 1] === "*") {
+      i = skipBlockComment(docSlice, i);
+      continue;
+    }
+    if (ch === "[") {
+      depth++;
+    } else if (ch === "]") {
+      depth--;
+      if (depth === 0) {
+        return lineStart + bracketIdx + i;
+      }
+    }
+    i++;
+  }
+  return -1;
+}
+function findBlockCommentFold(state, lineStart, lineEnd, blockCommentIdx) {
+  if (blockCommentIdx < 0) {
+    return null;
+  }
+  const docSlice = state.doc.sliceString(lineStart + blockCommentIdx);
+  const closeOffset = docSlice.indexOf("*/", 2);
+  if (closeOffset < 0) {
+    return null;
+  }
+  const closeEnd = lineStart + blockCommentIdx + closeOffset + 2;
+  const closeLine = state.doc.lineAt(closeEnd - 1);
+  if (closeLine.from <= lineEnd) {
+    return null;
+  }
+  const closeLineText = state.doc.sliceString(closeLine.from, closeLine.to);
+  const delimOffset = closeLineText.indexOf("*/");
+  return {
+    from: lineEnd,
+    to: closeLine.from + (delimOffset >= 0 ? delimOffset : 0)
+  };
+}
+function findSubqueryFold(state, lineStart, lineEnd, bracketIdx) {
+  if (bracketIdx < 0) {
+    return null;
+  }
+  const docSlice = state.doc.sliceString(lineStart + bracketIdx);
+  const closePos = findMatchingBracketEnd(docSlice, lineStart, bracketIdx);
+  if (closePos < 0) {
+    return null;
+  }
+  const closeLine = state.doc.lineAt(closePos);
+  if (closeLine.from <= lineEnd) {
+    return null;
+  }
+  return { from: lineEnd, to: closePos };
+}
+const dqlFoldService = [
+  blockCommentRangesField,
+  import_language.foldService.of((state, lineStart, lineEnd) => {
+    if (isInsideBlockComment(state.field(blockCommentRangesField), lineStart)) {
+      return null;
+    }
+    const lineText = state.doc.sliceString(lineStart, lineEnd);
+    const { blockComment, bracket } = scanLineTokens(lineText);
+    return findBlockCommentFold(state, lineStart, lineEnd, blockComment) ?? findSubqueryFold(state, lineStart, lineEnd, bracket);
+  })
+];

package/editors/dql-editor/dql/dql-language.js

@@ -24,6 +24,7 @@ var import_autocomplete = require("@codemirror/autocomplete");
 var import_language = require("@codemirror/language");
 var import_lint = require("@codemirror/lint");
 var import_view = require("@codemirror/view");
+var import_dql_fold_service = require("./dql-fold-service.js");
 var import_dql_linter = require("./dql-linter.js");
 var import_dql = require("./dql.js");
 var import_open_autocomplete = require("./open-autocomplete.js");
@@ -32,9 +33,11 @@ var import_suggestions_info_section_extension = require("./suggestions-info-sect
 const VALIDATION_DELAY = 500;
 function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityInfo) {
   const language = import_language.StreamLanguage.define(import_dql.dql);
+  const suggestionCache = /* @__PURE__ */ new Map();
   return {
     language,
     extendWith: [
+      import_dql_fold_service.dqlFoldService,
       language.data.of({
         commentTokens: {
           block: {
@@ -109,7 +112,7 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
     autocompleteOptions: readOnly ? void 0 : {
       activateOnTyping: false,
       optionClass: (completion) => completion.label.length === 0 ? "cm-empty-option" : "",
-      providers: [import_suggestion_autocompletions.suggestionAutocompletion]
+      providers: [(0, import_suggestion_autocompletions.createSuggestionAutocompletion)(suggestionCache)]
     }
   };
 }

package/editors/dql-editor/dql/get-suggestions.d.ts

@@ -3,5 +3,8 @@ export type SuggestionCache = Map<string, {
     suggestions: AutocompleteSuggestion[];
     ttl?: number;
 }>;
-/** Gets memoized suggestions. */
-export declare const getSuggestions: (query: string, cursor?: number, maxDataSuggestions?: number, cache?: SuggestionCache) => Promise<AutocompleteSuggestion[]>;
+/**
+ * Gets memoized suggestions. The `cache` is owned by the calling editor
+ * instance so entries never outlive the editor or leak between editors.
+ */
+export declare const getSuggestions: (query: string, cursor: number | undefined, maxDataSuggestions: number | undefined, cache: SuggestionCache) => Promise<AutocompleteSuggestion[]>;

package/editors/dql-editor/dql/get-suggestions.js

@@ -21,8 +21,7 @@ __export(get_suggestions_exports, {
 });
 module.exports = __toCommonJS(get_suggestions_exports);
 var import_client_query = require("@dynatrace-sdk/client-query");
-const globalCache = /* @__PURE__ */ new Map();
-const getSuggestions = async (query, _cursor, maxDataSuggestions, cache = globalCache) => {
+const getSuggestions = async (query, _cursor, maxDataSuggestions, cache) => {
   const cursor = _cursor ?? query.length;
   const key = JSON.stringify({ query, cursor });
   const currentTime = (/* @__PURE__ */ new Date()).getTime();