@oneuptime/common 14.0.12 → 14.0.13

package/build/dist/UI/Components/TemplateVariables/TemplateVariablePopup.js

@@ -0,0 +1,160 @@
+/*
+ * Where a template variable list appears: under the Insert variable button,
+ * or under the cursor while "{{" is being typed. Portalled out of the dialog
+ * the field is in (whose body scrolls and would clip it) and placed `fixed`,
+ * flipping above when there is no room below - the same placement as the
+ * workflow builder's value picker (getValuePickerPosition).
+ *
+ * Two ways of being open:
+ * - "popover", from the button: the list has its own search box, which takes
+ *   the focus; Escape and Tab close it and put the focus back.
+ * - "inline", while "{{" is typed: the focus stays in the field, which hands
+ *   the list its arrow keys, Enter, Tab and Escape itself.
+ *
+ * In both, a press anywhere else closes it - and is claimed, so the dialog
+ * underneath does not read the same press as a click on its backdrop - and
+ * Escape closes the list, not the dialog.
+ */
+import DROPDOWN_MENU_Z_INDEX from "../Dropdown/DropdownMenuZIndex";
+import { VALUE_PICKER_MAX_HEIGHT_PX, VALUE_PICKER_MIN_WIDTH_PX, getValuePickerPosition, } from "../Workflow/ValuePicker/ValuePickerPopup";
+import { consumePressForAnchoredPopup } from "../../Types/LayeredDismissal";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+export var TemplateVariablePopupMode;
+(function (TemplateVariablePopupMode) {
+    TemplateVariablePopupMode["Popover"] = "Popover";
+    TemplateVariablePopupMode["Inline"] = "Inline";
+})(TemplateVariablePopupMode || (TemplateVariablePopupMode = {}));
+export var TemplateVariablePopupCloseReason;
+(function (TemplateVariablePopupCloseReason) {
+    TemplateVariablePopupCloseReason["Escape"] = "Escape";
+    TemplateVariablePopupCloseReason["Tab"] = "Tab";
+    TemplateVariablePopupCloseReason["Outside"] = "Outside";
+})(TemplateVariablePopupCloseReason || (TemplateVariablePopupCloseReason = {}));
+const TemplateVariablePopup = (props) => {
+    var _a, _b, _c;
+    const popupRef = useRef(null);
+    const [position, setPosition] = useState(null);
+    // The latest callbacks, for listeners that are added once.
+    const onCloseRef = useRef(props.onClose);
+    onCloseRef.current = props.onClose;
+    const getAnchorRectRef = useRef(props.getAnchorRect);
+    getAnchorRectRef.current = props.getAnchorRect;
+    const isInsideAnchorRef = useRef(props.isInsideAnchor);
+    isInsideAnchorRef.current = props.isInsideAnchor;
+    const updatePosition = useCallback(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const rect = getAnchorRectRef.current();
+        if (!rect) {
+            return;
+        }
+        setPosition(getValuePickerPosition(rect, window.innerWidth, window.innerHeight));
+    }, []);
+    useLayoutEffect(() => {
+        updatePosition();
+    }, [props.positionKey, updatePosition]);
+    useLayoutEffect(() => {
+        let frame = null;
+        const schedule = () => {
+            if (frame !== null) {
+                return;
+            }
+            frame = window.requestAnimationFrame(() => {
+                frame = null;
+                updatePosition();
+            });
+        };
+        window.addEventListener("resize", schedule);
+        // Capture: scrolling the dialog body does not bubble to window.
+        document.addEventListener("scroll", schedule, true);
+        return () => {
+            window.removeEventListener("resize", schedule);
+            document.removeEventListener("scroll", schedule, true);
+            if (frame !== null) {
+                window.cancelAnimationFrame(frame);
+            }
+        };
+    }, [updatePosition]);
+    // A press outside the field and the list closes the list, and only the list.
+    useEffect(() => {
+        const handlePointerDown = (event) => {
+            var _a;
+            if (!(event.target instanceof Node)) {
+                return;
+            }
+            if (((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+                isInsideAnchorRef.current(event.target)) {
+                return;
+            }
+            consumePressForAnchoredPopup(event);
+            onCloseRef.current(TemplateVariablePopupCloseReason.Outside);
+        };
+        document.addEventListener("mousedown", handlePointerDown, true);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown, true);
+        };
+    }, []);
+    /*
+     * Escape closes the list, not the dialog: it is claimed during capture,
+     * before the dialog's own listener can see it. Inline, the field handles
+     * its keys itself.
+     */
+    useEffect(() => {
+        if (props.mode !== TemplateVariablePopupMode.Popover) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            var _a;
+            const isInPopup = Boolean((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement));
+            if (!isInPopup) {
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                onCloseRef.current(TemplateVariablePopupCloseReason.Escape);
+                return;
+            }
+            /*
+             * The list is outside the dialog's DOM, so the dialog's focus trap would
+             * otherwise pull the focus back to its first control. Tab leaves the
+             * list for where it was opened from, as it leaves any dropdown.
+             */
+            if (event.key === "Tab") {
+                event.preventDefault();
+                event.stopPropagation();
+                onCloseRef.current(TemplateVariablePopupCloseReason.Tab);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown, true);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown, true);
+        };
+    }, [props.mode]);
+    if (typeof document === "undefined") {
+        return null;
+    }
+    return createPortal(React.createElement("div", { ref: popupRef, id: props.id, role: "dialog", "aria-label": props.ariaLabel, "data-testid": props.dataTestId || "template-variable-popup", "data-mode": props.mode, className: "fixed flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-lg", style: {
+            top: position === null || position === void 0 ? void 0 : position.top,
+            bottom: position === null || position === void 0 ? void 0 : position.bottom,
+            left: (_a = position === null || position === void 0 ? void 0 : position.left) !== null && _a !== void 0 ? _a : 0,
+            width: (_b = position === null || position === void 0 ? void 0 : position.width) !== null && _b !== void 0 ? _b : VALUE_PICKER_MIN_WIDTH_PX,
+            maxHeight: (_c = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _c !== void 0 ? _c : VALUE_PICKER_MAX_HEIGHT_PX,
+            zIndex: DROPDOWN_MENU_Z_INDEX,
+            // No flash in the corner before the anchor has been measured.
+            visibility: position ? "visible" : "hidden",
+        }, onMouseDown: (event) => {
+            /*
+             * Inline, the field keeps the focus: a press on the list must not take
+             * it, or the field's cursor - where the variable goes - is lost.
+             */
+            if (props.mode === TemplateVariablePopupMode.Inline &&
+                !(event.target instanceof HTMLInputElement)) {
+                event.preventDefault();
+            }
+        } }, position ? props.children : null), document.body);
+};
+export default TemplateVariablePopup;
+//# sourceMappingURL=TemplateVariablePopup.js.map

package/build/dist/UI/Components/TemplateVariables/TemplateVariablePopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateVariablePopup.js","sourceRoot":"","sources":["../../../../../UI/Components/TemplateVariables/TemplateVariablePopup.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/TemplateVariables/TemplateVariableTextControl.js

@@ -0,0 +1,73 @@
+/*
+ * A text field, long text field or code editor whose value is a template:
+ * the field as it is, with its template variables one step away.
+ *
+ *   - Typing "{{" in it opens the variables under the cursor
+ *     (useTemplateVariableTyping).
+ *   - Under it, the collapsed Template variables list, where a click on a
+ *     variable adds it where the cursor is (TemplateVariablesList).
+ *
+ * The control itself is the caller's, unchanged: this finds the textarea or
+ * text input inside it and listens to it from around it. Its keys are
+ * listened to in the capture phase, so while the list is open Enter picks a
+ * variable instead of reaching a text field's own Enter (which submits the
+ * form) and Escape closes the list instead of the dialog.
+ */
+import TemplateVariablesList from "./TemplateVariablesList";
+import { findTextControl } from "./TextControlUtil";
+import useTemplateVariableTyping from "./useTemplateVariableTyping";
+import { countTemplateVariables, } from "../../../Types/Template/TemplateVariable";
+import React, { useRef, } from "react";
+// Keys that move the cursor without changing the text.
+const CARET_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+const TemplateVariableTextControl = (props) => {
+    const wrapperRef = useRef(null);
+    const typing = useTemplateVariableTyping({
+        groups: props.groups,
+        getControl: () => {
+            return findTextControl(wrapperRef.current);
+        },
+        isEnabled: countTemplateVariables(props.groups) > 0,
+    });
+    // Only the field's own text control counts, not anything else inside.
+    const isFromControl = (target) => {
+        return Boolean(target) && target === findTextControl(wrapperRef.current);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: wrapperRef, "data-testid": props.dataTestId, onInput: (event) => {
+                if (isFromControl(event.target)) {
+                    typing.handleInput();
+                }
+            }, onKeyDownCapture: (event) => {
+                if (isFromControl(event.target) && typing.handleKeyDown(event)) {
+                    event.stopPropagation();
+                }
+            }, onKeyUp: (event) => {
+                if (isFromControl(event.target) && CARET_KEYS.includes(event.key)) {
+                    typing.handleCaretMove();
+                }
+            }, onMouseUp: (event) => {
+                if (isFromControl(event.target)) {
+                    typing.handleCaretMove();
+                }
+            }, onFocus: (event) => {
+                if (isFromControl(event.target)) {
+                    typing.handleFocus();
+                }
+            }, onBlur: (event) => {
+                if (isFromControl(event.target)) {
+                    typing.handleBlur();
+                }
+            } }, props.children),
+        typing.popup,
+        React.createElement(TemplateVariablesList, { groups: props.groups, description: props.description, onInsert: typing.insertAtCursor, supportsTyping: true }, props.listChildren)));
+};
+export default TemplateVariableTextControl;
+//# sourceMappingURL=TemplateVariableTextControl.js.map

package/build/dist/UI/Components/TemplateVariables/TemplateVariableTextControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateVariableTextControl.js","sourceRoot":"","sources":["../../../../../UI/Components/TemplateVariables/TemplateVariableTextControl.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/TemplateVariables/TemplateVariablesCopy.js

@@ -0,0 +1,28 @@
+/*
+ * The words the template variable pickers show of their own: the collapsed
+ * list under a field, the editor's Insert variable button and the list that
+ * opens while "{{" is typed. The variables' own descriptions come with them.
+ *
+ * Kept in one React-free module so the components render these exact
+ * strings and App/Tests/Dashboard/TemplateVariablesI18n can check that each
+ * has an entry in all seventeen Dashboard locale files - a string is
+ * translated by looking up its English text, so one with no entry silently
+ * stays English.
+ *
+ * Only typingHint holds braces, and they are its {{braces}} slot: the
+ * sentence is translated whole, and the two opening braces are drawn as a
+ * key into the slot (translateTemplateAround), never looked up.
+ */
+export const TemplateVariablesCopy = {
+    listTitle: "Template variables",
+    insertButton: "Insert variable",
+    searchPlaceholder: "Search variables",
+    noMatches: "No variables match your search.",
+    clickToInsert: "Click a variable to add it where your cursor is.",
+    typingHint: "You can also type {{braces}} in the field to pick one as you write.",
+};
+// The slot in typingHint, and what is drawn in it.
+export const TYPING_HINT_SLOT = "braces";
+export const TYPING_HINT_KEYS = "{{";
+export default TemplateVariablesCopy;
+//# sourceMappingURL=TemplateVariablesCopy.js.map

package/build/dist/UI/Components/TemplateVariables/TemplateVariablesCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateVariablesCopy.js","sourceRoot":"","sources":["../../../../../UI/Components/TemplateVariables/TemplateVariablesCopy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAO9B;IACF,SAAS,EAAE,oBAAoB;IAC/B,YAAY,EAAE,iBAAiB;IAC/B,iBAAiB,EAAE,kBAAkB;IACrC,SAAS,EAAE,iCAAiC;IAC5C,aAAa,EAAE,kDAAkD;IACjE,UAAU,EACR,qEAAqE;CACxE,CAAC;AAEF,mDAAmD;AACnD,MAAM,CAAC,MAAM,gBAAgB,GAAW,QAAQ,CAAC;AACjD,MAAM,CAAC,MAAM,gBAAgB,GAAW,IAAI,CAAC;AAE7C,eAAe,qBAAqB,CAAC"}

package/build/dist/UI/Components/TemplateVariables/TemplateVariablesList.js

@@ -0,0 +1,98 @@
+/*
+ * "Template variables" under a template's field: the variables it can use,
+ * collapsed into one line until it is opened. The maintainer's ask, for the
+ * note template dialog that listed every placeholder above the editor: "show
+ * the list of variables at the bottom, but it should be collapsed ... so it's
+ * very simple for people to understand what's happening."
+ *
+ * Open, it says what the variables are filled with, then lists them by group
+ * as cards - the {{name}} and what it holds - and, when the field can take
+ * one (onInsert), each card is a button that adds the variable where the
+ * cursor is. Typing "{{" in the field picks one too, and the list says so.
+ *
+ * A native <details>, so the list is in the page while closed (for search
+ * and find-in-page) and opens with the keyboard and a screen reader alike.
+ */
+import { ChevronDownIcon } from "./TemplateVariableIcons";
+import TemplateVariablesCopy, { TYPING_HINT_KEYS, TYPING_HINT_SLOT, } from "./TemplateVariablesCopy";
+import { countTemplateVariables, formatTemplateVariable, } from "../../../Types/Template/TemplateVariable";
+import useTranslateValue from "../../Utils/Translation";
+import { translateTemplateAround, } from "../../Utils/TranslateTemplate";
+import React, { Fragment, useId, } from "react";
+/*
+ * A variable's {{name}}, allowed to wrap after each dot: a long custom field
+ * variable then breaks as "{{incident.customFields." / "customer_impact}}"
+ * rather than in the middle of a word.
+ */
+export const BreakableTemplateVariableName = (props) => {
+    const parts = formatTemplateVariable(props.name).split(".");
+    return (React.createElement(React.Fragment, null, parts.map((part, index) => {
+        const isLast = index === parts.length - 1;
+        return (React.createElement(Fragment, { key: index },
+            isLast ? part : `${part}.`,
+            isLast ? null : React.createElement("wbr", null)));
+    })));
+};
+const TemplateVariablesList = (props) => {
+    const { translateString } = useTranslateValue();
+    const headingIdPrefix = `template-variables-${useId()}`;
+    const tx = (text) => {
+        return translateString(text) || text;
+    };
+    const describe = (variable) => {
+        return variable.isDescriptionVerbatim
+            ? variable.description
+            : tx(variable.description);
+    };
+    const count = countTemplateVariables(props.groups);
+    const canInsert = Boolean(props.onInsert);
+    const typingHint = translateTemplateAround(TemplateVariablesCopy.typingHint, TYPING_HINT_SLOT);
+    const description = typeof props.description === "string"
+        ? tx(props.description)
+        : props.description;
+    const renderVariable = (variable) => {
+        const content = (React.createElement(React.Fragment, null,
+            React.createElement("code", { className: "w-full font-mono text-xs font-medium text-indigo-700 [overflow-wrap:anywhere]" },
+                React.createElement(BreakableTemplateVariableName, { name: variable.name })),
+            React.createElement("span", { className: "text-xs text-gray-600" }, describe(variable)),
+            variable.example ? (React.createElement("span", { className: "w-full text-xs text-gray-400 [overflow-wrap:anywhere]" }, variable.example)) : null));
+        if (props.onInsert) {
+            const onInsert = props.onInsert;
+            return (React.createElement("button", { type: "button", "data-testid": "template-variable-insert", "data-variable-name": variable.name, className: "flex h-full w-full flex-col items-start gap-0.5 rounded-md border border-gray-200 bg-white px-3 py-2 text-left transition-colors hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500", onMouseDown: (event) => {
+                    // The field keeps its focus and its cursor.
+                    event.preventDefault();
+                }, onClick: () => {
+                    onInsert(variable);
+                } }, content));
+        }
+        return (React.createElement("div", { "data-testid": "template-variable", "data-variable-name": variable.name, className: "flex h-full w-full flex-col items-start gap-0.5 rounded-md border border-gray-200 bg-white px-3 py-2" }, content));
+    };
+    return (React.createElement("details", { className: "group mt-3 rounded-lg border border-gray-200 bg-white", "data-testid": props.dataTestId || "template-variables", open: props.defaultOpen },
+        React.createElement("summary", { className: "flex cursor-pointer select-none list-none items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 [&::-webkit-details-marker]:hidden" },
+            React.createElement("span", { "aria-hidden": "true", className: "inline-flex h-6 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-50 font-mono text-[11px] font-semibold text-indigo-700" }, "{ }"),
+            React.createElement("span", { className: "font-medium text-gray-900" }, tx(TemplateVariablesCopy.listTitle)),
+            count > 0 ? (React.createElement("span", { "data-testid": "template-variables-count", className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600" }, count)) : null,
+            React.createElement(ChevronDownIcon, { className: "ml-auto h-4 w-4 shrink-0 text-gray-400 transition-transform group-open:rotate-180" })),
+        React.createElement("div", { className: "space-y-4 border-t border-gray-200 px-3 pb-3 pt-3" },
+            description || canInsert ? (React.createElement("div", { className: "space-y-1" },
+                description ? (React.createElement("p", { className: "text-sm text-gray-600", "data-testid": "template-variables-description" }, description)) : null,
+                canInsert ? (React.createElement("p", { className: "text-xs text-gray-500", "data-testid": "template-variables-hint" },
+                    tx(TemplateVariablesCopy.clickToInsert),
+                    props.supportsTyping ? (React.createElement(React.Fragment, null,
+                        " ",
+                        typingHint.before,
+                        React.createElement("kbd", { className: "rounded border border-gray-200 bg-gray-50 px-1 font-mono text-[11px] text-gray-700" }, TYPING_HINT_KEYS),
+                        typingHint.after)) : null)) : null)) : null,
+            props.groups.map((group, index) => {
+                const headingId = `${headingIdPrefix}-${index}`;
+                return (React.createElement("section", { key: `${index}-${group.title || ""}`, "aria-labelledby": group.title ? headingId : undefined, "data-testid": "template-variables-group" },
+                    group.title ? (React.createElement("h4", { id: headingId, className: "text-[11px] font-semibold uppercase tracking-wide text-gray-500" }, tx(group.title))) : null,
+                    group.description ? (React.createElement("p", { className: "mt-0.5 text-xs text-gray-500", "data-testid": "template-variables-group-description" }, tx(group.description))) : null,
+                    group.variables.length > 0 ? (React.createElement("ul", { className: "mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2" }, group.variables.map((variable) => {
+                        return (React.createElement("li", { key: variable.name }, renderVariable(variable)));
+                    }))) : null));
+            }),
+            props.children)));
+};
+export default TemplateVariablesList;
+//# sourceMappingURL=TemplateVariablesList.js.map

package/build/dist/UI/Components/TemplateVariables/TemplateVariablesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateVariablesList.js","sourceRoot":"","sources":["../../../../../UI/Components/TemplateVariables/TemplateVariablesList.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/TemplateVariables/TextControlUtil.js

@@ -0,0 +1,197 @@
+/*
+ * What the template variable pickers need from a plain text control - a
+ * <textarea> or a text <input>, which is what a text field, a long text
+ * field, the code editor and the Markdown editor's source view all are:
+ *
+ *   - where the cursor is on screen, so the list that "{{" opens appears
+ *     under it rather than under the whole field;
+ *   - putting a variable in, in place of a range, the way typing would: as one
+ *     step Ctrl+Z takes back, and through the control's own change handling,
+ *     so the form hears of it like any other edit.
+ */
+// The input types that hold free text a variable can go into.
+const TEXT_INPUT_TYPES = ["text", "search", "url", "email", ""];
+export const isTextControl = (element) => {
+    if (!element) {
+        return false;
+    }
+    if (element.tagName === "TEXTAREA") {
+        return true;
+    }
+    if (element.tagName === "INPUT") {
+        return TEXT_INPUT_TYPES.includes((element.getAttribute("type") || "").toLowerCase());
+    }
+    return false;
+};
+/**
+ * The text control inside a field's wrapper: its textarea if it has one (a
+ * long text field, a code editor), else its text input.
+ */
+export const findTextControl = (container) => {
+    if (!container) {
+        return null;
+    }
+    const textarea = container.querySelector("textarea");
+    if (textarea) {
+        return textarea;
+    }
+    const inputs = Array.from(container.querySelectorAll("input"));
+    return (inputs.find((input) => {
+        return isTextControl(input);
+    }) || null);
+};
+const makeRect = (left, top, width, height) => {
+    return {
+        x: left,
+        y: top,
+        left: left,
+        top: top,
+        width: width,
+        height: height,
+        right: left + width,
+        bottom: top + height,
+        toJSON: () => {
+            return { left, top, width, height };
+        },
+    };
+};
+// The styles a hidden copy of the control needs to lay its text out the same.
+const MIRRORED_PROPERTIES = [
+    "direction",
+    "boxSizing",
+    "width",
+    "height",
+    "overflowX",
+    "overflowY",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderStyle",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "fontStyle",
+    "fontVariant",
+    "fontWeight",
+    "fontStretch",
+    "fontSize",
+    "fontSizeAdjust",
+    "lineHeight",
+    "fontFamily",
+    "textAlign",
+    "textTransform",
+    "textIndent",
+    "textDecoration",
+    "letterSpacing",
+    "wordSpacing",
+    "tabSize",
+];
+const toPixels = (value) => {
+    const pixels = parseFloat(value || "");
+    return Number.isFinite(pixels) ? pixels : 0;
+};
+/**
+ * Where the cursor at `position` is on screen: one pixel wide and a line
+ * tall. A control has no API for it, so its text up to the position is laid
+ * out in a hidden copy with the same styles and the end of it measured.
+ * Where nothing can be measured (no layout, as in a test), the control's own
+ * rectangle.
+ */
+export const getTextControlCaretRect = (control, position) => {
+    const controlRect = control.getBoundingClientRect();
+    if (typeof window === "undefined" ||
+        typeof window.getComputedStyle !== "function" ||
+        !document.body) {
+        return controlRect;
+    }
+    const computed = window.getComputedStyle(control);
+    const isInput = control.tagName === "INPUT";
+    const mirror = document.createElement("div");
+    const style = mirror.style;
+    for (const property of MIRRORED_PROPERTIES) {
+        style[property] =
+            computed[property] || "";
+    }
+    style.position = "absolute";
+    style.visibility = "hidden";
+    style.top = "0";
+    style.left = "-9999px";
+    style.overflow = "hidden";
+    style.whiteSpace = isInput ? "pre" : "pre-wrap";
+    style.overflowWrap = isInput ? "normal" : "break-word";
+    const value = control.value || "";
+    const at = Math.max(0, Math.min(position, value.length));
+    mirror.textContent = value.slice(0, at);
+    const marker = document.createElement("span");
+    // Something to measure even at the end of the text.
+    marker.textContent = value.slice(at) || ".";
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+    // Read while the copy is in the page: detached, every offset is 0.
+    const markerLeft = marker.offsetLeft;
+    const markerTop = marker.offsetTop;
+    const markerHeight = marker.offsetHeight;
+    document.body.removeChild(mirror);
+    // No layout: nothing was measured, and the control's box is the best guess.
+    if (markerHeight === 0 && markerLeft === 0 && markerTop === 0) {
+        return controlRect;
+    }
+    const lineHeight = toPixels(computed.lineHeight) ||
+        markerHeight ||
+        toPixels(computed.fontSize) * 1.25 ||
+        20;
+    const left = controlRect.left +
+        markerLeft +
+        toPixels(computed.borderLeftWidth) -
+        control.scrollLeft;
+    const top = controlRect.top +
+        markerTop +
+        toPixels(computed.borderTopWidth) -
+        control.scrollTop;
+    return makeRect(Math.min(Math.max(left, controlRect.left), controlRect.right), Math.min(Math.max(top, controlRect.top), controlRect.bottom - lineHeight), 1, lineHeight);
+};
+/**
+ * Puts `text` in place of start..end and leaves the cursor after it.
+ *
+ * execCommand("insertText") is how typing goes in: one step on the undo
+ * stack, and an input event the control's owner (React's onChange) hears. A
+ * browser without it - jsdom, or one that refuses the command - gets the
+ * value set through the native setter and an input event of its own, which
+ * React reads as a change too.
+ */
+export const insertIntoTextControl = (control, start, end, text) => {
+    var _a;
+    const value = control.value || "";
+    const from = Math.max(0, Math.min(start, end, value.length));
+    const to = Math.min(value.length, Math.max(start, end, 0));
+    const expected = value.slice(0, from) + text + value.slice(to);
+    const caret = from + text.length;
+    control.focus();
+    control.setSelectionRange(from, to);
+    let inserted = false;
+    if (typeof document.execCommand === "function") {
+        try {
+            inserted = document.execCommand("insertText", false, text);
+        }
+        catch (_b) {
+            inserted = false;
+        }
+    }
+    if (!inserted || control.value !== expected) {
+        const prototype = control.tagName === "TEXTAREA"
+            ? HTMLTextAreaElement.prototype
+            : HTMLInputElement.prototype;
+        const setter = (_a = Object.getOwnPropertyDescriptor(prototype, "value")) === null || _a === void 0 ? void 0 : _a.set;
+        if (setter) {
+            setter.call(control, expected);
+        }
+        else {
+            control.value = expected;
+        }
+        control.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    control.setSelectionRange(caret, caret);
+};
+//# sourceMappingURL=TextControlUtil.js.map

package/build/dist/UI/Components/TemplateVariables/TextControlUtil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextControlUtil.js","sourceRoot":"","sources":["../../../../../UI/Components/TemplateVariables/TextControlUtil.ts"],"names":[],"mappings":"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"}