@dynatrace/strato-components 3.2.1 → 3.3.0

package/forms/date-time-range-picker/hooks/useDateTimeRangePicker.js

@@ -21,63 +21,46 @@ __export(useDateTimeRangePicker_exports, {
   useDateTimeRangePicker: () => useDateTimeRangePicker
 });
 module.exports = __toCommonJS(useDateTimeRangePicker_exports);
+var import_tz = require("@date-fns/tz");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
-var import_useDateTimeRangePickerValidation = require("./useDateTimeRangePickerValidation.js");
-var import_timeParser = require("../../forms-core/time/timeParser.js");
-var import_SelectedOverCalendarContext = require("../contexts/SelectedOverCalendarContext.js");
-var import_helpers = require("../helpers.js");
+var import_units = require("@dynatrace-sdk/units");
+var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_helpers = require("../../../core/time/helpers.js");
+var import_useTimeframeStore = require("../../../core/time/timeframeStore/useTimeframeStore.js");
+var import_helpers2 = require("../helpers.js");
+const restoreSpinButtons = (ref, spinButtonTexts) => {
+  spinButtonTexts.forEach((text, type) => {
+    const handler = ref.current?.spinButtonHandlers.get(type) ?? null;
+    if (!handler) {
+      return;
+    }
+    if (text === "") {
+      handler.clearValue(true);
+    } else if (handler.type === "number") {
+      handler.applyText(text, true);
+    } else {
+      handler.searchValue(text[0] ?? "", true);
+    }
+  });
+};
+const restoreSnapshot = (snapshot, ref) => {
+  if (snapshot.valueType === "iso8601") {
+    restoreSpinButtons(ref, snapshot.spinButtonTexts);
+  } else if (ref.current?.expressionInputRef) {
+    ref.current.expressionInputRef.textContent = snapshot.expressionText;
+  }
+};
 const useDateTimeRangePicker = (props) => {
-  const {
-    value,
-    defaultValue,
-    placeholder,
-    readOnly,
-    min,
-    max,
-    precision = "minutes",
-    onChange,
-    touchedContainerRef,
-    validationInputRef
-  } = props;
+  const { placeholder, readOnly, dateTimeFromRef, dateTimeToRef } = props;
   const { formatMessage } = (0, import_react_intl.useIntl)();
-  const {
-    selectedOverCalendar,
-    setCalendarOnChangeFlag,
-    setSelectedOverCalendar,
-    calendarOnChangeFlag
-  } = (0, import_react.useContext)(import_SelectedOverCalendarContext.SelectedOverCalendarContext);
-  const precisionRemovedValue = (0, import_helpers.removePrecisionFromTimeFrame)(value, precision);
-  const timeframeValue = precisionRemovedValue ? (0, import_timeParser.mapToTimeframe)(precisionRemovedValue) : null;
-  const precisionRemovedDefaultValue = (0, import_helpers.removePrecisionFromTimeFrame)(
-    defaultValue,
-    precision
-  );
-  const timeframeDefaultValue = precisionRemovedDefaultValue ? (0, import_timeParser.mapToTimeframe)(precisionRemovedDefaultValue) : null;
-  const [valueFrom, setValueFrom] = (0, import_react.useState)(
-    timeframeValue?.from ?? timeframeDefaultValue?.from ?? null
+  const value = (0, import_useTimeframeStore.useDateTimeRangePickerStore)(
+    (state) => state.dateTimeRangePickerTimeframe
   );
-  const [valueTo, setValueTo] = (0, import_react.useState)(
-    timeframeValue?.to ?? timeframeDefaultValue?.to ?? null
+  const setValue = (0, import_useTimeframeStore.useDateTimeRangePickerStore)(
+    (state) => state.setDateTimeRangePickerTimeframe
   );
-  const {
-    reevaluate,
-    evaluate,
-    onBlurTouched,
-    onError,
-    errorTo,
-    errorFrom,
-    validate
-  } = (0, import_useDateTimeRangePickerValidation.useDateTimeRangePickerValidation)(
-    touchedContainerRef,
-    validationInputRef,
-    valueFrom,
-    valueTo,
-    max,
-    min,
-    precision
-  );
-  const controlledValueUpdate = (0, import_react.useRef)(true);
+  const pasteUndoSnapshotRef = (0, import_react.useRef)(null);
   const localizedPlaceholder = (0, import_react.useMemo)(
     () => ({
       from: placeholder?.from ?? formatMessage({
@@ -97,17 +80,17 @@ const useDateTimeRangePicker = (props) => {
     async (event) => {
       event.preventDefault();
       event.stopPropagation();
-      if (valueFrom === null || valueTo === null) {
+      if (!(0, import_helpers.isFullTimeframe)(value)) {
         return;
       }
       try {
         await navigator.clipboard.writeText(
-          `${valueFrom.value}/${valueTo.value}`
+          `${value.from.value}/${value.to.value}`
         );
       } catch {
       }
     },
-    [valueFrom, valueTo]
+    [value]
   );
   const onPasteCapture = (0, import_react.useCallback)(
     (e) => {
@@ -116,74 +99,75 @@ const useDateTimeRangePicker = (props) => {
       }
       const data = e.clipboardData?.getData("text/plain");
       if (!data) {
+        e.preventDefault();
+        return;
+      }
+      if (!dateTimeFromRef.current || !dateTimeToRef.current) {
         return;
       }
-      const [nextFrom, nextTo] = data.trim().split("/").map((input) => evaluate(input));
+      const focusTarget = document.activeElement;
+      const fromSnapshot = (0, import_helpers2.captureUndoSnapshot)(
+        dateTimeFromRef.current.spinButtonHandlers,
+        dateTimeFromRef.current.expressionInputRef,
+        value?.from ?? null
+      );
+      const toSnapshot = (0, import_helpers2.captureUndoSnapshot)(
+        dateTimeToRef.current.spinButtonHandlers,
+        dateTimeToRef.current.expressionInputRef,
+        value?.to ?? null
+      );
+      const [nextFrom, nextTo] = data.trim().split("/");
       if (nextFrom && nextTo) {
-        setValueFrom(nextFrom);
-        setValueTo(nextTo);
-        e.preventDefault();
+        const relativeDate = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
+        const parsedFrom = (0, import_helpers2.parseDateOnlyToISO)(nextFrom) ?? (0, import_helpers2.parseTimeOnlyToISO)(nextFrom) ?? (0, import_helpers2.normalizeISOInput)(nextFrom);
+        const parsedTo = (0, import_helpers2.parseDateOnlyToISO)(nextTo, "endOfDay") ?? (0, import_helpers2.parseTimeOnlyToISO)(nextTo) ?? (0, import_helpers2.normalizeISOInput)(nextTo);
+        const validFrom = (0, import_units.parseTimeAsTimeValue)(parsedFrom, relativeDate);
+        const validTo = (0, import_units.parseTimeAsTimeValue)(parsedTo, relativeDate);
+        if (validFrom && validTo) {
+          pasteUndoSnapshotRef.current = {
+            from: fromSnapshot,
+            to: toSnapshot,
+            focusTarget
+          };
+          setValue({ from: parsedFrom, to: parsedTo });
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
       }
+      pasteUndoSnapshotRef.current = {
+        from: fromSnapshot,
+        to: toSnapshot,
+        focusTarget
+      };
     },
-    [evaluate, readOnly]
+    [readOnly, setValue, value, dateTimeFromRef, dateTimeToRef]
   );
-  (0, import_react.useEffect)(() => {
-    if (controlledValueUpdate.current) {
-      controlledValueUpdate.current = false;
-      return;
-    }
-    if (valueFrom === null && valueTo === null) {
-      onChange?.(null);
-      return;
-    }
-    if (valueFrom !== null && valueTo !== null) {
-      if (calendarOnChangeFlag && !!setCalendarOnChangeFlag && valueTo.absoluteDate) {
-        setCalendarOnChangeFlag(false);
-      }
-      if (selectedOverCalendar && !calendarOnChangeFlag) {
-        setSelectedOverCalendar?.(false);
+  const onUndoPasteKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "z" && pasteUndoSnapshotRef.current) {
+        const snapshot = pasteUndoSnapshotRef.current;
+        pasteUndoSnapshotRef.current = null;
+        event.preventDefault();
+        event.stopPropagation();
+        restoreSnapshot(snapshot.from, dateTimeFromRef);
+        restoreSnapshot(snapshot.to, dateTimeToRef);
+        const fromValue = snapshot.from.value ?? void 0;
+        const toValue = snapshot.to.value ?? void 0;
+        setValue(
+          fromValue || toValue ? { from: fromValue, to: toValue } : null
+        );
+        if (snapshot.focusTarget instanceof HTMLElement && snapshot.focusTarget !== document.activeElement) {
+          snapshot.focusTarget.focus();
+        }
       }
-      props.onChange?.({
-        from: valueFrom,
-        to: valueTo
-      });
-      return;
-    }
-  }, [JSON.stringify(valueFrom), JSON.stringify(valueTo)]);
-  (0, import_react.useEffect)(() => {
-    if (value === void 0) {
-      return;
-    }
-    const timeframeValue2 = value ? (0, import_timeParser.mapToTimeframe)(value) : value;
-    const nextFrom = timeframeValue2?.from ?? null;
-    if (!(0, import_helpers.isEqualTimeValue)(valueFrom, nextFrom)) {
-      controlledValueUpdate.current = true;
-      setValueFrom(nextFrom);
-    }
-    const nextTo = timeframeValue2?.to ?? null;
-    if (!(0, import_helpers.isEqualTimeValue)(valueTo, nextTo)) {
-      controlledValueUpdate.current = true;
-      setValueTo(nextTo);
-    }
-  }, [value]);
+    },
+    [dateTimeFromRef, dateTimeToRef, setValue]
+  );
   return {
     placeholder: localizedPlaceholder,
-    value: {
-      from: valueFrom,
-      to: valueTo
-    },
-    onChange: {
-      from: (value2) => setValueFrom(
-        reevaluate((0, import_helpers.removePrecisionFromTimeValue)(value2, precision))
-      ),
-      to: (value2) => setValueTo(reevaluate((0, import_helpers.removePrecisionFromTimeValue)(value2, precision)))
-    },
     onCopyCapture,
     onPasteCapture,
-    onBlurTouched,
-    onError,
-    errorFrom,
-    errorTo,
-    validate
+    onUndoPasteKeyDown
   };
 };

package/forms/date-time-range-picker/selection-copy-helpers.d.ts

@@ -3,9 +3,20 @@ export declare function convertCopyString(selectionString: string, patterns: Arr
 /**
  * Helper function that builds a pattern array from the selected text nodes.
  * Extracts patterns from data-pattern attributes and skips data-expression nodes.
+ *
+ * Returns the pattern and the raw selected text.
+ *
+ * Both getRangeAt(0)+intersectsNode and selection.containsNode are unreliable for detecting which nodes are visually
+ * selected when the selection spans multiple contenteditable elements. Instead, we use the treeWalker to go over all
+ * nodes in the inputgroup, accumulating text and patterns while filtering out nodes that don't align with the
+ * value type (e.g. skipping spin button nodes when in expression mode).
+ * `contenteditable` needs to stay on the elements to avoid losing the focused element.
  * @internal
  */
-export declare function buildPattern(selection: Selection): string[] | null;
+export declare function getPatternAndSelectedText(selection: Selection): {
+    pattern: string[] | null;
+    text: string;
+};
 /**
  * Helper function that tries to parse parts of the current selection as valid time frames
  * and if successful, copies the correctly pared ISO timestamp or timeframe to the clipboard.

package/forms/date-time-range-picker/selection-copy-helpers.js

@@ -18,8 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var selection_copy_helpers_exports = {};
 __export(selection_copy_helpers_exports, {
-  buildPattern: () => buildPattern,
   convertCopyString: () => convertCopyString,
+  getPatternAndSelectedText: () => getPatternAndSelectedText,
   onTimeframeCopyCapture: () => onTimeframeCopyCapture
 });
 module.exports = __toCommonJS(selection_copy_helpers_exports);
@@ -27,6 +27,7 @@ var import_tz = require("@date-fns/tz");
 var import_date_fns = require("date-fns");
 var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_selection_helpers = require("./selection-helpers.js");
 var import_timeParser = require("../forms-core/time/timeParser.js");
 function sanitizeCopyString(selectionString) {
   return selectionString.split("\u2192").map((part) => part.replaceAll("\n", "").trim()).join(" ").trim();
@@ -68,15 +69,16 @@ function convertCopyString(selectionString, patterns) {
   }
   return sanitizeCopyString(selectionString);
 }
-function buildPattern(selection) {
+function getPatternAndSelectedText(selection) {
   const anchorNode = selection.anchorNode;
   const focusNode = selection.focusNode;
   const root = anchorNode?.parentElement?.closest(".strato-inputgroup");
   if (root === null || root === void 0) {
-    return null;
+    return { pattern: null, text: "" };
   }
-  const pattern = [];
-  let capturePattern = false;
+  const patternParts = [];
+  let text = "";
+  let capturing = false;
   const treeWalker = document.createTreeWalker(
     root,
     NodeFilter.SHOW_TEXT,
@@ -86,19 +88,16 @@ function buildPattern(selection) {
   const startNode = selection.direction === "forward" ? anchorNode : focusNode;
   const endNode = selection.direction === "forward" ? focusNode : anchorNode;
   while (currentNode) {
-    if (selection.containsNode(currentNode, true) === false) {
-      currentNode = treeWalker.nextNode();
-      continue;
-    }
     if (currentNode === startNode) {
-      capturePattern = true;
+      capturing = true;
     }
-    if (capturePattern) {
+    if (capturing && (0, import_selection_helpers.checkIfValueTypeAlignment)(currentNode)) {
+      text += currentNode.textContent ?? "";
       const parentElement = currentNode.parentElement;
       if (parentElement?.hasAttribute("data-pattern")) {
-        pattern.push(parentElement.getAttribute("data-pattern") ?? "");
+        patternParts.push(parentElement.getAttribute("data-pattern") ?? "");
       } else if (parentElement?.dataset.valuetype !== "expression") {
-        pattern.push(currentNode.textContent ?? "");
+        patternParts.push(currentNode.textContent ?? "");
       }
     }
     if (currentNode === endNode) {
@@ -106,38 +105,22 @@ function buildPattern(selection) {
     }
     currentNode = treeWalker.nextNode();
   }
-  if (pattern.length > 0) {
-    return pattern.join("").split("\u2192");
-  }
-  return null;
+  const pattern = patternParts.length > 0 ? patternParts.join("").split("\u2192") : null;
+  return { pattern, text };
 }
 function onTimeframeCopyCapture(event) {
   const selection = window.getSelection();
   if (selection === null) {
     return;
   }
-  if (selection.anchorNode && selection.focusNode) {
-    try {
-      if (selection.direction === "forward") {
-        selection?.setBaseAndExtent(
-          selection.anchorNode,
-          0,
-          selection.focusNode,
-          selection.focusNode?.textContent?.length ?? 0
-        );
-      } else {
-        selection?.setBaseAndExtent(
-          selection.focusNode,
-          0,
-          selection.anchorNode,
-          selection.anchorNode?.textContent?.length ?? 0
-        );
-      }
-    } catch {
-    }
+  const root = selection.anchorNode?.parentElement?.closest(
+    ".strato-inputgroup"
+  );
+  if (root === null || root === void 0) {
+    return;
   }
-  const selectionString = selection?.toString() ?? "";
-  const pattern = buildPattern(selection);
+  const { text: selectionString, pattern } = getPatternAndSelectedText(selection);
   const clipBoardText = convertCopyString(selectionString, pattern);
-  navigator.clipboard.writeText(clipBoardText);
+  event.preventDefault();
+  event.clipboardData.setData("text/plain", clipBoardText);
 }

package/forms/date-time-range-picker/selection-helpers.d.ts

@@ -1,3 +1,5 @@
+/** @internal */
+export declare function checkIfValueTypeAlignment(textNode: Node): boolean;
 /**
  * Helper function that removes the contenteditable attributes for selection manipulation
  * @param rootElement - Must contain all contenteditable children.
@@ -20,3 +22,11 @@ export declare function extendSelection(key: 'ArrowLeft' | 'ArrowRight' | 'Home'
  * @internal
  */
 export declare function extendSelectionToAll(): void;
+/**
+ * Resolve a selection endpoint node to its containing spinbutton or, when the
+ * endpoint lies on a separator between spinbuttons, to the nearest spinbutton.
+ * Uses `[data-wascontenteditable]` to identify spinbuttons while contenteditable
+ * is temporarily stripped during the drag, and falls back to the restored
+ * `[contenteditable]` attribute afterwards.
+ */
+export declare function resolveSpinButton(node: Node, root: HTMLElement): HTMLElement | null;

package/forms/date-time-range-picker/selection-helpers.js

@@ -28,9 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var selection_helpers_exports = {};
 __export(selection_helpers_exports, {
+  checkIfValueTypeAlignment: () => checkIfValueTypeAlignment,
   extendSelection: () => extendSelection,
   extendSelectionToAll: () => extendSelectionToAll,
-  removeContentEditable: () => removeContentEditable
+  removeContentEditable: () => removeContentEditable,
+  resolveSpinButton: () => resolveSpinButton
 });
 module.exports = __toCommonJS(selection_helpers_exports);
 var styles = __toESM(require("./DateTimeInput.sty.js"));
@@ -81,7 +83,7 @@ function nextTextNode(root, node) {
   return null;
 }
 function findNextCharacterPosition(root, node, offset) {
-  if (node.nodeType === Node.TEXT_NODE && node.nodeValue && offset < node.nodeValue.length) {
+  if (node.nodeType === Node.TEXT_NODE && node.nodeValue && offset < node.nodeValue.length && checkIfValueTypeAlignment(node)) {
     return { node, offset: offset + 1 };
   }
   if (node.nodeType !== Node.TEXT_NODE) {
@@ -98,17 +100,23 @@ function findNextCharacterPosition(root, node, offset) {
       }
     }
   }
-  const next = nextTextNode(root, node);
+  let next = nextTextNode(root, node);
+  while (next !== null && getClosestContentEditable(next) === null) {
+    next = nextTextNode(root, next);
+  }
   if (!next) {
     return null;
   }
   return { node: next, offset: 1 };
 }
 function findPreviousCharacterPosition(root, node, offset) {
-  if (node.nodeType === Node.TEXT_NODE && offset > 0) {
+  if (node.nodeType === Node.TEXT_NODE && offset > 0 && checkIfValueTypeAlignment(node)) {
     return { node, offset: offset - 1 };
   }
-  const prev = previousTextNode(root, node);
+  let prev = previousTextNode(root, node);
+  while (prev !== null && getClosestContentEditable(prev) === null) {
+    prev = previousTextNode(root, prev);
+  }
   if (!prev || prev.nodeValue === null) {
     return null;
   }
@@ -116,25 +124,25 @@ function findPreviousCharacterPosition(root, node, offset) {
 }
 function findFirstCharacterPosition(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
-  const firstChild = walker.firstChild();
-  if (firstChild === null) {
-    return null;
+  let current = walker.firstChild();
+  while (current !== null) {
+    if (checkIfValueTypeAlignment(current)) {
+      return { node: current, offset: 0 };
+    }
+    current = walker.nextNode();
   }
-  return {
-    node: firstChild,
-    offset: 0
-  };
+  return null;
 }
 function findLastCharacterPosition(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
-  const lastChild = walker.lastChild();
-  if (lastChild === null) {
-    return null;
+  let current = walker.lastChild();
+  while (current !== null) {
+    if (checkIfValueTypeAlignment(current)) {
+      return { node: current, offset: current.nodeValue?.length ?? 0 };
+    }
+    current = walker.previousNode();
   }
-  return {
-    node: lastChild,
-    offset: lastChild.nodeValue?.length ?? 0
-  };
+  return null;
 }
 function removeContentEditable(rootElement, removeEventTarget, eventType, customRemovalFn) {
   const contentEditables = rootElement.querySelectorAll("[contenteditable]");
@@ -157,12 +165,12 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
       const wasContentEditables = rootElement.querySelectorAll(
         "[data-wascontenteditable]"
       );
-      const selection = window.getSelection();
-      const { anchorNode, anchorOffset, focusNode, focusOffset } = selection ?? {};
-      const hasMultiElementSelection = selection !== null && selection.toString().length > 0 && (anchorNode !== focusNode || anchorNode !== null && anchorNode === focusNode && anchorOffset !== focusOffset && anchorNode?.nodeType === Node.ELEMENT_NODE);
-      if (hasMultiElementSelection) {
-        rootElement.setAttribute("data-restoring-selection", "");
-      }
+      const selectionBeforeRestore = window.getSelection();
+      const snapshotAnchorNode = selectionBeforeRestore?.anchorNode ?? null;
+      const snapshotAnchorOffset = selectionBeforeRestore?.anchorOffset ?? 0;
+      const snapshotFocusNode = selectionBeforeRestore?.focusNode ?? null;
+      const snapshotFocusOffset = selectionBeforeRestore?.focusOffset ?? 0;
+      const hasMultiElementSelection = selectionBeforeRestore !== null && selectionBeforeRestore.toString().length > 0 && (snapshotAnchorNode !== snapshotFocusNode || snapshotAnchorNode !== null && snapshotAnchorNode === snapshotFocusNode && snapshotAnchorOffset !== snapshotFocusOffset && snapshotAnchorNode?.nodeType === Node.ELEMENT_NODE);
       for (const editable of wasContentEditables) {
         const previousValue = editable.getAttribute("data-wascontenteditable");
         if (previousValue !== null) {
@@ -175,11 +183,42 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
           editable.removeAttribute("data-wastabindex");
         }
       }
-      if (anchorNode !== null && anchorNode !== void 0 && anchorOffset !== void 0 && focusNode !== null && focusNode !== void 0 && focusOffset !== void 0) {
-        window.getSelection()?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      if (hasMultiElementSelection && snapshotAnchorNode && snapshotFocusNode) {
+        const anchorSpinButton = resolveSpinButton(
+          snapshotAnchorNode,
+          rootElement
+        );
+        const focusSpinButton = resolveSpinButton(
+          snapshotFocusNode,
+          rootElement
+        );
+        if (anchorSpinButton && focusSpinButton) {
+          const anchorToFocusPosition = anchorSpinButton.compareDocumentPosition(focusSpinButton);
+          const focusIsAfterAnchor = !!(anchorToFocusPosition & Node.DOCUMENT_POSITION_FOLLOWING);
+          const firstSpinButton = focusIsAfterAnchor ? anchorSpinButton : focusSpinButton;
+          const lastSpinButton = focusIsAfterAnchor ? focusSpinButton : anchorSpinButton;
+          const firstPos = findFirstCharacterPosition(firstSpinButton);
+          const lastPos = findLastCharacterPosition(lastSpinButton);
+          if (firstPos && lastPos) {
+            window.getSelection()?.setBaseAndExtent(
+              firstPos.node,
+              firstPos.offset,
+              lastPos.node,
+              lastPos.offset
+            );
+          }
+        }
+      } else {
+        if (snapshotAnchorNode && snapshotFocusNode) {
+          window.getSelection()?.setBaseAndExtent(
+            snapshotAnchorNode,
+            snapshotAnchorOffset,
+            snapshotFocusNode,
+            snapshotFocusOffset
+          );
+        }
       }
       customRemovalFn?.(event, hasMultiElementSelection);
-      rootElement.removeAttribute("data-restoring-selection");
       signal.abort();
     },
     { signal: signal.signal }
@@ -187,9 +226,11 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
 }
 function extendSelection(key) {
   const selection = window.getSelection();
-  if (selection === null || selection.focusNode === null || selection.rangeCount < 1) {
+  if (selection === null || selection.anchorNode === null || selection.focusNode === null || selection.rangeCount < 1) {
     return;
   }
+  const anchorNode = selection.anchorNode;
+  const anchorOffset = selection.anchorOffset;
   const focusNode = selection.focusNode;
   const focusOffset = selection.focusOffset;
   let nextPos = null;
@@ -207,7 +248,14 @@ function extendSelection(key) {
     nextPos = findLastCharacterPosition(root);
   }
   if (nextPos) {
-    selection.extend(nextPos.node, nextPos.offset);
+    root.setAttribute("data-restoring-selection", "");
+    selection.setBaseAndExtent(
+      anchorNode,
+      anchorOffset,
+      nextPos.node,
+      nextPos.offset
+    );
+    root.removeAttribute("data-restoring-selection");
   }
 }
 function extendSelectionToAll() {
@@ -220,14 +268,48 @@ function extendSelectionToAll() {
   if (root === null || root === void 0) {
     return;
   }
+  root.setAttribute("data-restoring-selection", "");
+  root.focus();
   const firstPosition = findFirstCharacterPosition(root);
   const lastPosition = findLastCharacterPosition(root);
-  if (firstPosition && lastPosition) {
-    selection.setBaseAndExtent(
-      firstPosition.node,
-      firstPosition.offset,
-      lastPosition.node,
-      lastPosition.offset
-    );
+  if (!firstPosition || !lastPosition) {
+    root.removeAttribute("data-restoring-selection");
+    return;
+  }
+  selection.setBaseAndExtent(
+    firstPosition.node,
+    firstPosition.offset,
+    lastPosition.node,
+    lastPosition.offset
+  );
+  root.removeAttribute("data-restoring-selection");
+}
+const SPIN_BUTTON_SELECTOR = "[contenteditable], [data-wascontenteditable]";
+function getClosestContentEditable(node) {
+  return node.nodeType === Node.TEXT_NODE ? node.parentElement?.closest(
+    SPIN_BUTTON_SELECTOR
+  ) ?? null : node.closest?.(SPIN_BUTTON_SELECTOR) ?? null;
+}
+function resolveSpinButton(node, root) {
+  const direct = getClosestContentEditable(node);
+  if (direct !== null) {
+    return direct;
+  }
+  return getNearestPrecedingSpinButton(node, root);
+}
+function getNearestPrecedingSpinButton(node, root) {
+  const spinButtons = Array.from(
+    root.querySelectorAll(SPIN_BUTTON_SELECTOR)
+  );
+  if (spinButtons.length === 0) {
+    return null;
+  }
+  let nearest = null;
+  for (const spinButton of spinButtons) {
+    const position = spinButton.compareDocumentPosition(node);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      nearest = spinButton;
+    }
   }
+  return nearest ?? spinButtons[0] ?? null;
 }