@dynatrace/strato-components 3.7.0 → 3.8.0

package/editors/base-code-editor/BaseCodeEditor.js

@@ -39,6 +39,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var styles = __toESM(require("./BaseCodeEditor.sty.js"));
+var import_configure_format_keymap = require("./configuration/configure-format-keymap.js");
 var import_configure_line_wrap = require("./configuration/configure-line-wrap.js");
 var import_configure_placeholder = require("./configuration/configure-placeholder.js");
 var import_configure_read_only = require("./configuration/configure-read-only.js");
@@ -57,16 +58,19 @@ var import_useControllableState = require("../../core/hooks/useControllableState
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
+var import_logging = require("../../core/utils/logging.js");
 var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useSyncedFormControlProps = require("../../forms/forms-core/hooks/useSyncedFormControlProps.js");
 var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
 import_view.EditorView.EDIT_CONTEXT = false;
+const controlledSyncAnnotation = import_state.Annotation.define();
 const languageCompartment = new import_state.Compartment();
 const editorBaseConfigCompartment = new import_state.Compartment();
 const lineWrappingCompartment = new import_state.Compartment();
 const keymapCompartment = new import_state.Compartment();
 const placeholderCompartment = new import_state.Compartment();
 const highlightOnChangeCompartment = new import_state.Compartment();
+const formatKeymapCompartment = new import_state.Compartment();
 const getEditorConfiguration = (intlProps, options) => {
   const { singleLine, gutterConfiguration, hideLineNumbers, required, size } = options;
   const isRequired = required ?? false;
@@ -103,6 +107,14 @@ function useLazyEditorViewRef() {
         return null;
       }
     });
+    const originalPosAndSideAtCoords = view.posAndSideAtCoords.bind(view);
+    view.posAndSideAtCoords = ((coords, precise) => {
+      try {
+        return originalPosAndSideAtCoords(coords, precise);
+      } catch {
+        return { pos: 0, assoc: 1 };
+      }
+    });
     viewRef.current = view;
   }
   return viewRef;
@@ -150,6 +162,10 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     gutterConfiguration,
     id: propId,
     required = false,
+    format,
+    // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    isControlled = false,
     style: consumerStyle,
     className: consumerClassName,
     "aria-label": ariaLabel,
@@ -173,6 +189,41 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     [onChange]
   );
   const viewRef = useLazyEditorViewRef();
+  const formatFunctionRef = (0, import_react.useRef)(format);
+  (0, import_react.useEffect)(() => {
+    formatFunctionRef.current = format;
+  }, [format]);
+  const handleFormat = (0, import_react.useCallback)(() => {
+    const currentFormatFunction = formatFunctionRef.current;
+    if (!currentFormatFunction) {
+      (0, import_logging.devLog)(
+        "BaseCodeEditor: format() called but no format function is provided."
+      );
+      return;
+    }
+    const editorView = viewRef.current;
+    const currentValue = editorView.state.doc.toString();
+    let formattedValue;
+    try {
+      formattedValue = currentFormatFunction(currentValue);
+    } catch (error) {
+      (0, import_logging.devLog)(
+        "BaseCodeEditor: format function threw an error, leaving content unchanged.",
+        error
+      );
+      return;
+    }
+    if (!formattedValue || formattedValue === currentValue) {
+      return;
+    }
+    editorView.dispatch({
+      changes: {
+        from: 0,
+        to: editorView.state.doc.length,
+        insert: formattedValue
+      }
+    });
+  }, [viewRef]);
   const { id } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
     propId
   });
@@ -183,6 +234,10 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
   const prevLangConfigRef = (0, import_react.useRef)(void 0);
   const [previousValue, setPreviousValue] = (0, import_react.useState)("");
   const transactionRef = (0, import_react.useRef)(void 0);
+  const isControlledRef = (0, import_react.useRef)(isControlled);
+  const isUserEventComposeRef = (0, import_react.useRef)(false);
+  const prevControlledValueRef = (0, import_react.useRef)(void 0);
+  const pendingStartCompletionRef = (0, import_react.useRef)(false);
   const { focusProps, isFocusVisible } = (0, import_useFocusRing.useFocusRing)({
     color: hasError ? "critical" : "neutral"
   });
@@ -226,7 +281,8 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
           scrollIntoView: true
         });
         viewRef.current.focus();
-      }
+      },
+      format: handleFormat
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -297,15 +353,47 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
         doc: value ?? defaultValue ?? "",
         extensions: [
           getDomEventHandlers(onFocus, onBlur),
+          // Track IME composition state so controlled mode does not block candidate characters.
+          import_view.EditorView.domEventObservers({
+            compositionstart: () => {
+              isUserEventComposeRef.current = true;
+            },
+            // Defer the reset by one microtask so the CodeMirror commit transaction
+            // (dispatched synchronously during compositionend processing) still sees
+            // isUserEventComposeRef as true and is not blocked in controlled mode.
+            compositionend: () => {
+              queueMicrotask(() => {
+                isUserEventComposeRef.current = false;
+              });
+            }
+          }),
           import_state.Prec.highest(keymapCompartment.of((0, import_key_maps.getKeyMaps)(viewRef))),
           languageCompartment.of([]),
           editorBaseConfigCompartment.of([]),
           // Indent unit is two spaces instead of tab
           import_language.indentUnit.of("  "),
-          // Filter for transactions that gets applied before they are processed. This allows us
-          // to control which transactions go through as well as adding/editing transactions if we please.
+          // Filter for transactions before they are applied. Controls which transactions
+          // go through and allows editing/augmenting them.
           import_state.EditorState.transactionFilter.of((transaction) => {
             if (transaction.docChanged) {
+              if (transaction.annotation(controlledSyncAnnotation)) {
+                return handleValueChange(transaction);
+              }
+              if (isControlledRef.current && !isUserEventComposeRef.current) {
+                if (transaction.isUserEvent("undo") || transaction.isUserEvent("redo")) {
+                  return handleValueChange(transaction);
+                }
+                if (transaction.isUserEvent("input.complete")) {
+                  return handleValueChange(transaction);
+                }
+                const newValue = transaction.newDoc.toString();
+                if (valueRef.current !== newValue) {
+                  transactionRef.current = transaction;
+                  valueChangeRef.current?.(newValue);
+                  pendingStartCompletionRef.current = true;
+                }
+                return [];
+              }
               return handleValueChange(transaction);
             }
             return transaction;
@@ -326,7 +414,8 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
           }),
           lineWrappingCompartment.of([]),
           placeholderCompartment.of([]),
-          highlightOnChangeCompartment.of([])
+          highlightOnChangeCompartment.of([]),
+          formatKeymapCompartment.of([])
         ]
       })
     );
@@ -402,10 +491,25 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
   (0, import_react.useEffect)(() => {
     (0, import_configure_spell_check.configureSpellCheck)(spellCheck, readOnly, viewRef);
   }, [viewRef, readOnly, spellCheck]);
+  (0, import_react.useEffect)(() => {
+    if (format) {
+      (0, import_configure_format_keymap.configureFormatKeymap)(handleFormat, viewRef, formatKeymapCompartment);
+    } else {
+      viewRef.current.dispatch({
+        effects: formatKeymapCompartment.reconfigure([])
+      });
+    }
+  }, [format]);
   (0, import_react.useEffect)(() => {
     valueChangeRef.current = onChange !== void 0 ? sanitizedOnChange : void 0;
   }, [onChange, sanitizedOnChange]);
   (0, import_react.useEffect)(() => {
+    isControlledRef.current = isControlled;
+  }, [isControlled]);
+  (0, import_react.useEffect)(() => {
+    if (isControlledRef.current) {
+      return;
+    }
     if (value === void 0) {
       return;
     }
@@ -544,6 +648,47 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       editorScrollContainer?.removeEventListener("keydown", handleKeyDown);
     };
   }, [focusProps, readOnly, viewRef]);
+  if (isControlled && value !== void 0) {
+    const sanitizedNew = (0, import_sanitize_value.sanitizeValue)(value);
+    if (prevControlledValueRef.current === void 0) {
+      prevControlledValueRef.current = sanitizedNew;
+    }
+    if (sanitizedNew !== prevControlledValueRef.current) {
+      prevControlledValueRef.current = sanitizedNew;
+      const valueToApply = sanitizedNew;
+      queueMicrotask(() => {
+        const shouldStartCompletion = pendingStartCompletionRef.current;
+        pendingStartCompletionRef.current = false;
+        if (viewRef.current.state.doc.toString() === valueToApply) {
+          if (shouldStartCompletion) {
+            (0, import_autocomplete.startCompletion)(viewRef.current);
+          }
+          return;
+        }
+        const lastTransaction = transactionRef.current;
+        const savedCursorAnchor = lastTransaction?.newSelection?.main?.anchor;
+        const anchor = savedCursorAnchor !== void 0 ? Math.min(savedCursorAnchor, valueToApply.length) : void 0;
+        valueRef.current = valueToApply;
+        try {
+          viewRef.current.dispatch(
+            viewRef.current.state.update({
+              changes: {
+                from: 0,
+                to: viewRef.current.state.doc.length,
+                insert: valueToApply
+              },
+              selection: anchor !== void 0 ? { anchor } : void 0,
+              annotations: controlledSyncAnnotation.of(true)
+            })
+          );
+        } catch {
+        }
+        if (shouldStartCompletion) {
+          (0, import_autocomplete.startCompletion)(viewRef.current);
+        }
+      });
+    }
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",

package/editors/base-code-editor/BaseCodeEditor.sty.js

@@ -24,5 +24,5 @@ module.exports = __toCommonJS(BaseCodeEditor_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_BaseCodeEditor_css_ts_vanilla = require("./BaseCodeEditor.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var autocompletionTypeText = "_mvxq7yx-3-7-0";
-var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yl-3-7-0", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-7-0" }, fullHeight: { true: "_mvxq7yn-3-7-0" }, hasError: { true: "_mvxq7yo-3-7-0" }, lineNumbers: { hidden: "_mvxq7yp-3-7-0", visible: "_mvxq7yq-3-7-0" }, readOnly: { true: "_mvxq7yr-3-7-0" }, size: { "default": "_mvxq7ys-3-7-0", condensed: "_mvxq7yt-3-7-0" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-7-0"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-7-0"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-7-0"]] });
+var autocompletionTypeText = "_mvxq7yx-3-8-0";
+var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yl-3-8-0", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-8-0" }, fullHeight: { true: "_mvxq7yn-3-8-0" }, hasError: { true: "_mvxq7yo-3-8-0" }, lineNumbers: { hidden: "_mvxq7yp-3-8-0", visible: "_mvxq7yq-3-8-0" }, readOnly: { true: "_mvxq7yr-3-8-0" }, size: { "default": "_mvxq7ys-3-8-0", condensed: "_mvxq7yt-3-8-0" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-8-0"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-8-0"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-8-0"]] });

package/editors/base-code-editor/configuration/configure-format-keymap.d.ts

@@ -0,0 +1,12 @@
+import { Compartment } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type MutableRefObject } from 'react';
+/**
+ * Configures the format keymap functionality on the editor.
+ * @param handleFormat - format function
+ * @param viewRef - Ref object for the editor
+ * @param formatKeymapCompartment - CodeMirror Compartment that holds the keymap extension, allowing it
+ *   to be swapped in at runtime once a format function is available (initialized empty, then
+ *   reconfigured here via dispatch).
+ */
+export declare const configureFormatKeymap: (handleFormat: () => void, viewRef: MutableRefObject<EditorView>, formatKeymapCompartment: Compartment) => void;

package/editors/base-code-editor/configuration/configure-format-keymap.js

@@ -0,0 +1,40 @@
+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 configure_format_keymap_exports = {};
+__export(configure_format_keymap_exports, {
+  configureFormatKeymap: () => configureFormatKeymap
+});
+module.exports = __toCommonJS(configure_format_keymap_exports);
+var import_view = require("@codemirror/view");
+const configureFormatKeymap = (handleFormat, viewRef, formatKeymapCompartment) => {
+  const editorView = viewRef.current;
+  editorView.dispatch({
+    effects: formatKeymapCompartment.reconfigure(
+      import_view.keymap.of([
+        {
+          key: "Ctrl-Shift-f",
+          mac: "Cmd-Shift-f",
+          run: () => {
+            handleFormat();
+            return true;
+          }
+        }
+      ])
+    )
+  });
+};

package/editors/base-code-editor/configuration/configure-placeholder.d.ts

@@ -1,10 +1,15 @@
 import { Compartment } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { type MutableRefObject } from 'react';
+/**
+ * Attribute used to expose the placeholder text on the content element so it can
+ * be rendered through a CSS `::after` pseudo-element.
+ */
+export declare const placeholderDataAttribute = "data-placeholder";
 /**
  * Configures the placeholder functionality on the editor.
  * @param placeholderText - string to be used as placeholder text for editor
  * @param viewRef - Ref object for the editor
- * @param placeholderCompartment -
+ * @param placeholderCompartment - compartment used to reconfigure the placeholder extension
  */
 export declare const configurePlaceholder: (placeholderText: string | undefined, viewRef: MutableRefObject<EditorView>, placeholderCompartment: Compartment) => void;

package/editors/base-code-editor/configuration/configure-placeholder.js

@@ -17,15 +17,44 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var configure_placeholder_exports = {};
 __export(configure_placeholder_exports, {
-  configurePlaceholder: () => configurePlaceholder
+  configurePlaceholder: () => configurePlaceholder,
+  placeholderDataAttribute: () => placeholderDataAttribute
 });
 module.exports = __toCommonJS(configure_placeholder_exports);
 var import_view = require("@codemirror/view");
+const placeholderDataAttribute = "data-placeholder";
+const createPlaceholderExtension = (placeholderText) => import_view.ViewPlugin.fromClass(
+  class {
+    contentDOM;
+    constructor(view) {
+      this.contentDOM = view.contentDOM;
+      this.sync(view);
+    }
+    update(update) {
+      if (update.docChanged) {
+        this.sync(update.view);
+      }
+    }
+    destroy() {
+      this.contentDOM.removeAttribute(placeholderDataAttribute);
+    }
+    sync(view) {
+      if (view.state.doc.length === 0) {
+        this.contentDOM.setAttribute(
+          placeholderDataAttribute,
+          placeholderText
+        );
+      } else {
+        this.contentDOM.removeAttribute(placeholderDataAttribute);
+      }
+    }
+  }
+);
 const configurePlaceholder = (placeholderText, viewRef, placeholderCompartment) => {
   const editorView = viewRef.current;
   editorView.dispatch({
     effects: placeholderCompartment.reconfigure(
-      placeholderText ? (0, import_view.placeholder)(placeholderText) : []
+      placeholderText ? createPlaceholderExtension(placeholderText) : []
     )
   });
 };

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

@@ -52,6 +52,22 @@ var import_Text = require("../../../typography/text/Text.js");
 var editorStyles = __toESM(require("../BaseCodeEditor.sty.js"));
 var import_testIds = require("../testIds.js");
 var import_render_node = require("../utils/render-node.js");
+const autocompleteMouseModeCSSClass = "cm-autocomplete-interaction-mouse";
+const autocompleteKeyboardModeCSSClass = "cm-autocomplete-interaction-keyboard";
+const keyboardNavigationKeys = /* @__PURE__ */ new Set([
+  "ArrowUp",
+  "ArrowDown",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End"
+]);
+function isAutocompleteKeyboardNavigationEvent(event) {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+    return false;
+  }
+  return keyboardNavigationKeys.has(event.key);
+}
 const Source = (source) => () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { fontStyle: "code", textStyle: "small-emphasized", style: { width: 30 }, children: source });
 const Type = (type) => () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_Text.Text,
@@ -68,6 +84,34 @@ const getDefaultConfiguration = (intlProps, options = {
   size: "default"
 }) => {
   const isSizeDefault = options.size === "default";
+  let autocompleteInteractionMode = "mouse";
+  let editorAutocompletePopup = null;
+  const syncAutocompleteInteractionModeClass = (mode) => {
+    if (editorAutocompletePopup instanceof HTMLElement) {
+      editorAutocompletePopup.classList.remove(
+        autocompleteMouseModeCSSClass,
+        autocompleteKeyboardModeCSSClass
+      );
+      editorAutocompletePopup.classList.add(
+        mode === "mouse" ? autocompleteMouseModeCSSClass : autocompleteKeyboardModeCSSClass
+      );
+    }
+  };
+  const selectOptionFromMouse = (option, view) => {
+    const optionList = option.parentElement;
+    if (!optionList) {
+      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) });
+    }
+  };
   return [
     (0, import_commands.history)(),
     import_state.EditorState.allowMultipleSelections.of(true),
@@ -82,12 +126,42 @@ const getDefaultConfiguration = (intlProps, options = {
       addToOptions: [
         {
           position: 0,
-          render: () => {
+          render: (_completion, _state, view) => {
             const marker = document.createElement("span");
             marker.setAttribute("aria-hidden", "true");
             marker.style.display = "none";
             queueMicrotask(() => {
-              marker.parentElement?.setAttribute("data-dt-name", "Suggestion");
+              const option = marker.parentElement;
+              if (!(option instanceof HTMLLIElement)) {
+                return;
+              }
+              option.setAttribute("data-dt-name", "Suggestion");
+              const optionPopup = option.closest(".cm-tooltip-autocomplete");
+              if (optionPopup instanceof HTMLElement) {
+                editorAutocompletePopup = optionPopup;
+                syncAutocompleteInteractionModeClass(
+                  autocompleteInteractionMode
+                );
+              }
+              option.onmouseenter = () => {
+                if (autocompleteInteractionMode === "keyboard") {
+                  return;
+                }
+                selectOptionFromMouse(option, view);
+              };
+              option.onmousemove = (_event) => {
+                selectOptionFromMouse(option, view);
+              };
+              option.onmouseleave = () => {
+                if (autocompleteInteractionMode === "keyboard") {
+                  return;
+                }
+                autocompleteInteractionMode = "mouse";
+                syncAutocompleteInteractionModeClass(
+                  autocompleteInteractionMode
+                );
+                view.dispatch({ effects: (0, import_autocomplete.setSelectedCompletion)(-1) });
+              };
             });
             return marker;
           }
@@ -117,12 +191,27 @@ const getDefaultConfiguration = (intlProps, options = {
     (0, import_view.highlightActiveLine)(),
     (0, import_view.highlightActiveLineGutter)(),
     (0, import_search.highlightSelectionMatches)(),
+    import_view.EditorView.domEventObservers({
+      keydown: (event) => {
+        if (!isAutocompleteKeyboardNavigationEvent(event)) {
+          return;
+        }
+        if (!editorAutocompletePopup?.isConnected) {
+          return;
+        }
+        autocompleteInteractionMode = "keyboard";
+        syncAutocompleteInteractionModeClass(autocompleteInteractionMode);
+      }
+    }),
     import_view.EditorView.contentAttributes.of({
       [import_testIds.dataTestId]: import_testIds.baseCodeEditorContentTestId,
       "aria-haspopup": "listbox",
       "aria-required": options.required ? "true" : "false"
     }),
     import_view.EditorView.updateListener.of((update) => {
+      if ((0, import_autocomplete.completionStatus)(update.state) !== null && editorAutocompletePopup?.isConnected) {
+        syncAutocompleteInteractionModeClass(autocompleteInteractionMode);
+      }
       if ((0, import_view.hasHoverTooltips)(update.state) && (0, import_autocomplete.completionStatus)(update.state) !== null) {
         update.view.dispatch({
           effects: import_view.closeHoverTooltips
@@ -163,8 +252,8 @@ const getDefaultConfiguration = (intlProps, options = {
         display: "flex",
         flexWrap: "wrap",
         justifyContent: "flex-start",
-        alignItems: "center",
         gap: import_spacings.default.Size4,
+        alignItems: "center",
         padding: `${import_spacings.default.Size6} ${import_spacings.default.Size12} !important`
       },
       '.cm-tooltip-autocomplete > ul > li[role="option"].cm-empty-option': {
@@ -209,11 +298,22 @@ const getDefaultConfiguration = (intlProps, options = {
         borderRadius: import_borders.default.Radius.Field.Default
       },
       ".cm-tooltip.cm-tooltip-autocomplete li[aria-selected]": {
+        color: import_colors.default.Text.Neutral.Default,
         transition: "none",
         borderRadius: import_borders.default.Radius.Field.Default,
         boxShadow: `inset 0 0 0 ${import_borders.default.Width.Default} ${import_colors.default.Border.Neutral.Accent}`,
         backgroundColor: import_colors.default.Background.Field.Neutral.DefaultHover
       },
+      ".cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-mouse li[aria-selected]:hover": {
+        boxShadow: "none"
+      },
+      ".cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-keyboard li:hover:not([aria-selected])": {
+        backgroundColor: "transparent",
+        boxShadow: "none"
+      },
+      ".cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-mouse li:hover": {
+        backgroundColor: `${import_colors.default.Background.Field.Neutral.DefaultHover}`
+      },
       ".cm-tooltip.cm-tooltip-autocomplete li[aria-selected]:focus-visible": {
         outline: "none"
       },
@@ -229,9 +329,6 @@ const getDefaultConfiguration = (intlProps, options = {
       },
       ".cm-completionOption-action .cm-completionLabel": {
         display: "none"
-      },
-      ".cm-tooltip.cm-tooltip-autocomplete li:hover": {
-        backgroundColor: `${import_colors.default.Background.Field.Neutral.DefaultHover}`
       }
     })
   ];

package/editors/base-code-editor/configuration/language-extensions.d.ts

@@ -5,7 +5,7 @@ import { AutocompleteProvider } from '../auto-completion/autocompletion.extensio
 import type { ListAutocompletionConfig } from '../auto-completion/list/list-autocompletion-types.js';
 import { IntlProps } from '../utils/render-node.js';
 /** Adds providers to language config. */
-export declare function getLanguageExtensions(language: Language | undefined, providers: Array<AutocompleteProvider | ListAutocompletionConfig> | undefined, intlProps: IntlProps): (Language | Extension)[];
+export declare function getLanguageExtensions(language: Language | undefined, providers: Array<AutocompleteProvider | ListAutocompletionConfig> | undefined, intlProps: IntlProps): (Extension | Language)[];
 /**
  * @internal
  * Maps autocomplete provider to extensions.

package/editors/base-code-editor/utils/key-maps.js

@@ -22,6 +22,7 @@ __export(key_maps_exports, {
 module.exports = __toCommonJS(key_maps_exports);
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_commands = require("@codemirror/commands");
+var import_language = require("@codemirror/language");
 var import_view = require("@codemirror/view");
 var import_indent_with_spaces = require("./indent-with-spaces.js");
 const getKeyMaps = (viewRef) => {
@@ -43,6 +44,7 @@ const getKeyMaps = (viewRef) => {
       ...import_autocomplete.closeBracketsKeymap,
       ...import_commands.standardKeymap,
       ...import_commands.historyKeymap,
+      ...import_language.foldKeymap,
       {
         key: "Mod-7",
         run: import_commands.toggleLineComment