@oneuptime/common 14.0.11 → 14.0.12

package/build/dist/UI/Components/Workflow/ValuePicker/TemplateTextEditor.js

@@ -0,0 +1,701 @@
+/*
+ * A text box that shows references as chips.
+ *
+ * "Body: {{local.components.webhook-1.returnValues.request-body}}" is what a
+ * step stores, and what this box shows is "Body: [Webhook › Request Body]".
+ * The chip is one thing: the caret steps over it, Backspace removes it whole,
+ * and copying it copies the reference. Everything else is plain text, typed,
+ * stored and copied exactly as written - no formatting, ever.
+ *
+ * It is a contenteditable element, because a text field cannot hold a chip.
+ * The stored string is the truth and the DOM is drawn from it
+ * (TemplateTextDom): plain typing is left to the browser, which keeps spell
+ * checking, autocorrect and input methods working, and is read back after
+ * every change. What browsers do differently or badly - Enter makes a <div>,
+ * paste brings formatting, a caret lands inside a chip, undo cannot follow a
+ * chip being drawn - is done here instead. The tests in
+ * packages/E2E/ValuePicker cover the parts only a real browser shows.
+ */
+import { createReferenceChipElement } from "./ReferenceChip";
+import { TemplateSegmentKind, findReferenceTrigger, replaceRange, splitTemplateText, } from "./TemplateText";
+import { chipAncestor, chipAtOffset, domPointToOffset, isTemplateDomTidy, readTemplateSelection, renderTemplateValue, serializeTemplateEditor, writeTemplateSelection, } from "./TemplateTextDom";
+import TemplateTextHistory, { TemplateTextChangeKind, } from "./TemplateTextHistory";
+import React, { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+/*
+ * The form hands over whatever is stored, and that is not always a string. A
+ * box shows text; the line breaks are "\n", as a browser reads them back.
+ */
+export const toEditorText = (value) => {
+    if (value === undefined || value === null) {
+        return "";
+    }
+    if (typeof value === "string") {
+        return value.replace(/\r\n?/g, "\n");
+    }
+    if (typeof value === "object") {
+        try {
+            return JSON.stringify(value);
+        }
+        catch (_a) {
+            return "";
+        }
+    }
+    return String(value);
+};
+/** Pasted text, as plain text with "\n" line breaks; a one-line box gets spaces. */
+export const cleanInsertedText = (text, multiline) => {
+    const normalized = (text || "").replace(/\r\n?/g, "\n");
+    return multiline ? normalized : normalized.replace(/\n+/g, " ");
+};
+const DELETE_WHOLE_CHIP_INPUT_TYPES = [
+    "deleteContentBackward",
+    "deleteContentForward",
+    "deleteWordBackward",
+    "deleteWordForward",
+];
+const PASTE_INPUT_TYPES = [
+    "insertFromPaste",
+    "insertFromPasteAsQuotation",
+    "insertFromDrop",
+    "insertFromYank",
+];
+const clamp = (selection, length) => {
+    const start = Math.max(0, Math.min(selection.start, length));
+    const end = Math.max(start, Math.min(selection.end, length));
+    return { start, end };
+};
+const TemplateTextEditor = forwardRef((props, ref) => {
+    var _a, _b;
+    const rootRef = useRef(null);
+    const initialText = toEditorText(props.value);
+    // The value the DOM shows - read back after every change, set by every edit.
+    const valueRef = useRef(initialText);
+    const selectionRef = useRef({
+        start: initialText.length,
+        end: initialText.length,
+    });
+    const historyRef = useRef(new TemplateTextHistory({
+        value: initialText,
+        selectionStart: initialText.length,
+        selectionEnd: initialText.length,
+    }));
+    const composingRef = useRef(false);
+    const selectionBeforeRef = useRef(null);
+    const pendingKindRef = useRef(TemplateTextChangeKind.Other);
+    const dismissedTriggerRef = useRef(null);
+    // The latest props, for listeners added once.
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const [isEmpty, setIsEmpty] = useState(initialText === "");
+    const buildChip = useCallback((reference) => {
+        const root = rootRef.current;
+        return createReferenceChipElement(root.ownerDocument, reference, propsRef.current.describeReference(reference));
+    }, []);
+    const hasFocus = () => {
+        const root = rootRef.current;
+        return Boolean(root && root.ownerDocument.activeElement === root);
+    };
+    const draw = (value, selection) => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        renderTemplateValue(root, value, buildChip);
+        setIsEmpty(value === "");
+        if (selection && hasFocus()) {
+            writeTemplateSelection(root, clamp(selection, value.length));
+        }
+    };
+    const reportTrigger = (kind) => {
+        const onTriggerChange = propsRef.current.onTriggerChange;
+        if (!onTriggerChange) {
+            return;
+        }
+        const selection = selectionRef.current;
+        if ((kind !== TemplateTextChangeKind.Typing &&
+            kind !== TemplateTextChangeKind.Deleting) ||
+            selection.start !== selection.end) {
+            onTriggerChange(null);
+            return;
+        }
+        const trigger = findReferenceTrigger(valueRef.current, selection.start);
+        if (!trigger) {
+            dismissedTriggerRef.current = null;
+            onTriggerChange(null);
+            return;
+        }
+        onTriggerChange(trigger.start === dismissedTriggerRef.current ? null : trigger);
+    };
+    const commit = (value, selection, kind, selectionBefore) => {
+        selectionRef.current = selection;
+        if (value !== valueRef.current) {
+            valueRef.current = value;
+            historyRef.current.record({
+                value: value,
+                selectionStart: selection.start,
+                selectionEnd: selection.end,
+            }, kind, Date.now(), selectionBefore || undefined);
+            propsRef.current.onChange(value);
+        }
+        reportTrigger(kind);
+    };
+    // An edit made here rather than by the browser: the DOM is drawn again.
+    const applyEdit = (range, insert, kind) => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const target = clamp(range, valueRef.current.length);
+        const result = replaceRange(valueRef.current, target.start, target.end, insert);
+        renderTemplateValue(root, result.value, buildChip);
+        setIsEmpty(result.value === "");
+        if (!hasFocus()) {
+            root.focus();
+        }
+        const caret = {
+            start: result.caret,
+            end: result.caret,
+        };
+        writeTemplateSelection(root, caret);
+        commit(result.value, caret, kind, target);
+    };
+    // After the browser changed the DOM: read it back, and tidy it if needed.
+    const reconcile = (kind) => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const selection = readTemplateSelection(root) || selectionRef.current;
+        const value = serializeTemplateEditor(root);
+        if (!isTemplateDomTidy(root, value)) {
+            renderTemplateValue(root, value, buildChip);
+            if (hasFocus()) {
+                writeTemplateSelection(root, clamp(selection, value.length));
+            }
+        }
+        setIsEmpty(value === "");
+        commit(value, selection, kind, selectionBeforeRef.current);
+        selectionBeforeRef.current = null;
+    };
+    const restore = (snapshot) => {
+        var _a, _b;
+        if (!snapshot) {
+            return;
+        }
+        const selection = {
+            start: snapshot.selectionStart,
+            end: snapshot.selectionEnd,
+        };
+        valueRef.current = snapshot.value;
+        selectionRef.current = selection;
+        draw(snapshot.value, selection);
+        propsRef.current.onChange(snapshot.value);
+        (_b = (_a = propsRef.current).onTriggerChange) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+    };
+    const undo = () => {
+        restore(historyRef.current.undo());
+    };
+    const redo = () => {
+        restore(historyRef.current.redo());
+    };
+    useImperativeHandle(ref, () => {
+        return {
+            focus: () => {
+                const root = rootRef.current;
+                if (!root) {
+                    return;
+                }
+                root.focus();
+                writeTemplateSelection(root, clamp(selectionRef.current, valueRef.current.length));
+            },
+            getSelection: () => {
+                const root = rootRef.current;
+                const live = root && hasFocus() ? readTemplateSelection(root) : null;
+                return clamp(live || selectionRef.current, valueRef.current.length);
+            },
+            insert: (text, range) => {
+                applyEdit(range || selectionRef.current, text, TemplateTextChangeKind.Other);
+            },
+            getValue: () => {
+                return valueRef.current;
+            },
+            dismissTrigger: () => {
+                var _a, _b;
+                const trigger = findReferenceTrigger(valueRef.current, selectionRef.current.start);
+                dismissedTriggerRef.current = trigger ? trigger.start : null;
+                (_b = (_a = propsRef.current).onTriggerChange) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+            },
+        };
+    });
+    // First draw, and the focus if the form wants it here.
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        renderTemplateValue(root, valueRef.current, buildChip);
+        if (props.autoFocus) {
+            root.focus();
+            writeTemplateSelection(root, {
+                start: valueRef.current.length,
+                end: valueRef.current.length,
+            });
+        }
+    }, []);
+    /*
+     * A value set from outside - the form loading, or a different step's
+     * settings - is drawn, and becomes the start of the undo history. The
+     * value this box just reported coming back is not a change.
+     */
+    useLayoutEffect(() => {
+        const next = toEditorText(props.value);
+        if (next === valueRef.current) {
+            return;
+        }
+        valueRef.current = next;
+        const selection = clamp(selectionRef.current, next.length);
+        selectionRef.current = selection;
+        draw(next, selection);
+        historyRef.current.reset({
+            value: next,
+            selectionStart: selection.start,
+            selectionEnd: selection.end,
+        });
+    }, [props.value]);
+    /*
+     * The words on the chips can change without the value changing - the
+     * variables finish loading, a step is renamed. Draw them again.
+     */
+    const isFirstDescribeRef = useRef(true);
+    useLayoutEffect(() => {
+        if (isFirstDescribeRef.current) {
+            isFirstDescribeRef.current = false;
+            return;
+        }
+        const root = rootRef.current;
+        if (!root || composingRef.current) {
+            return;
+        }
+        const hasChips = splitTemplateText(valueRef.current).some((segment) => {
+            return segment.kind === TemplateSegmentKind.Reference;
+        });
+        if (!hasChips) {
+            return;
+        }
+        const selection = hasFocus()
+            ? readTemplateSelection(root)
+            : null;
+        draw(valueRef.current, selection);
+    }, [props.describeReference]);
+    /*
+     * The events React does not pass on faithfully: beforeinput and input.
+     * Added in a layout effect, as the box is put on the page: a passive
+     * effect runs some time after that - later still on a busy page, or for a
+     * box drawn once its form has loaded - and what was typed in between was
+     * never read back, so a reference typed then stayed text.
+     */
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const handleBeforeInput = (event) => {
+            var _a, _b, _c, _d;
+            const current = propsRef.current;
+            if (current.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const inputType = event.inputType || "";
+            const selection = readTemplateSelection(root) || selectionRef.current;
+            selectionBeforeRef.current = selection;
+            if (inputType === "insertCompositionText" || composingRef.current) {
+                pendingKindRef.current = TemplateTextChangeKind.Typing;
+                return;
+            }
+            if (inputType === "historyUndo" || inputType === "historyRedo") {
+                event.preventDefault();
+                if (inputType === "historyUndo") {
+                    undo();
+                }
+                else {
+                    redo();
+                }
+                return;
+            }
+            // Bold, italic, a font: there is no formatting to store.
+            if (inputType.startsWith("format")) {
+                event.preventDefault();
+                return;
+            }
+            if (inputType === "insertParagraph" ||
+                inputType === "insertLineBreak") {
+                event.preventDefault();
+                if (!current.multiline) {
+                    (_a = current.onEnter) === null || _a === void 0 ? void 0 : _a.call(current);
+                    return;
+                }
+                applyEdit(selection, "\n", TemplateTextChangeKind.Other);
+                return;
+            }
+            if (PASTE_INPUT_TYPES.includes(inputType)) {
+                // Normally the paste and drop events got here first.
+                event.preventDefault();
+                const text = (_d = (_c = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData("text/plain")) !== null && _c !== void 0 ? _c : event.data) !== null && _d !== void 0 ? _d : "";
+                applyEdit(selection, cleanInsertedText(text, current.multiline), TemplateTextChangeKind.Other);
+                return;
+            }
+            if (inputType === "deleteByDrag") {
+                event.preventDefault();
+                return;
+            }
+            if (inputType.startsWith("delete")) {
+                if (selection.start !== selection.end) {
+                    event.preventDefault();
+                    applyEdit(selection, "", TemplateTextChangeKind.Deleting);
+                    return;
+                }
+                // Next to a chip, the key takes the whole chip.
+                if (DELETE_WHOLE_CHIP_INPUT_TYPES.includes(inputType)) {
+                    const chip = chipAtOffset(root, selection.start, inputType.endsWith("Backward") ? "before" : "after");
+                    if (chip) {
+                        event.preventDefault();
+                        applyEdit({ start: chip.start, end: chip.end }, "", TemplateTextChangeKind.Deleting);
+                        return;
+                    }
+                }
+                pendingKindRef.current = TemplateTextChangeKind.Deleting;
+                return;
+            }
+            if (inputType === "insertText") {
+                // Typing over a selection, chips and all, is done here.
+                if (selection.start !== selection.end) {
+                    event.preventDefault();
+                    applyEdit(selection, cleanInsertedText(event.data || "", current.multiline), TemplateTextChangeKind.Typing);
+                    return;
+                }
+                pendingKindRef.current = TemplateTextChangeKind.Typing;
+                return;
+            }
+            pendingKindRef.current = TemplateTextChangeKind.Other;
+        };
+        const handleInput = () => {
+            if (composingRef.current) {
+                return;
+            }
+            reconcile(pendingKindRef.current);
+            pendingKindRef.current = TemplateTextChangeKind.Other;
+        };
+        /*
+         * A caret inside a chip - Firefox puts it there for Home before a chip
+         * that opens the line - goes to the chip's edge, where typing works.
+         */
+        const handleSelectionChange = () => {
+            var _a;
+            if (root.ownerDocument.activeElement !== root) {
+                return;
+            }
+            const domSelection = ((_a = root.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection()) || null;
+            if (!domSelection ||
+                domSelection.rangeCount === 0 ||
+                !root.contains(domSelection.anchorNode)) {
+                return;
+            }
+            const selection = readTemplateSelection(root);
+            if (!selection) {
+                return;
+            }
+            if (domSelection.isCollapsed &&
+                chipAncestor(root, domSelection.anchorNode)) {
+                writeTemplateSelection(root, selection);
+            }
+            selectionRef.current = selection;
+        };
+        root.addEventListener("beforeinput", handleBeforeInput);
+        root.addEventListener("input", handleInput);
+        root.ownerDocument.addEventListener("selectionchange", handleSelectionChange);
+        return () => {
+            root.removeEventListener("beforeinput", handleBeforeInput);
+            root.removeEventListener("input", handleInput);
+            root.ownerDocument.removeEventListener("selectionchange", handleSelectionChange);
+        };
+    }, []);
+    const rememberSelection = () => {
+        const root = rootRef.current;
+        const selection = root
+            ? readTemplateSelection(root)
+            : null;
+        if (selection) {
+            selectionRef.current = selection;
+        }
+    };
+    const placeCaret = (offset) => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const caret = { start: offset, end: offset };
+        writeTemplateSelection(root, caret);
+        selectionRef.current = caret;
+    };
+    const isOnlyChips = (text) => {
+        return splitTemplateText(text).every((segment) => {
+            return segment.kind === TemplateSegmentKind.Reference;
+        });
+    };
+    /*
+     * Home and End stop short of a chip at the edge of the line: Chromium's
+     * Home lands after a chip that opens the line, Firefox's End (and
+     * Ctrl+End) before one that ends it - there is no text on the far side
+     * of the chip to put the caret in. When only chips are left between the
+     * caret and the edge of the line, the caret goes to the edge.
+     */
+    const fixLineEdge = (edge) => {
+        const root = rootRef.current;
+        const selection = root
+            ? readTemplateSelection(root)
+            : null;
+        if (!selection || selection.start !== selection.end) {
+            return;
+        }
+        const value = valueRef.current;
+        const caret = selection.start;
+        if (edge === "start") {
+            const lineStart = value.lastIndexOf("\n", caret - 1) + 1;
+            if (lineStart < caret && isOnlyChips(value.slice(lineStart, caret))) {
+                placeCaret(lineStart);
+            }
+            return;
+        }
+        const newline = value.indexOf("\n", caret);
+        const lineEnd = newline === -1 ? value.length : newline;
+        if (caret < lineEnd && isOnlyChips(value.slice(caret, lineEnd))) {
+            placeCaret(lineEnd);
+        }
+    };
+    const multilineClass = props.multiline
+        ? "min-h-[4.75rem] max-h-80 overflow-y-auto"
+        : "";
+    const fontClass = props.monospace
+        ? "font-mono text-xs leading-5"
+        : "text-sm leading-5";
+    const sharedClass = `${props.className || "px-3 py-2"} ${fontClass}`;
+    return (React.createElement("div", { className: "relative min-w-0 flex-1" },
+        isEmpty && props.placeholder && (React.createElement("div", { "aria-hidden": "true", className: `pointer-events-none absolute inset-x-0 top-0 select-none truncate text-gray-400 ${sharedClass}` }, props.placeholder)),
+        React.createElement("div", { ref: rootRef, id: props.id, role: "textbox", "aria-multiline": props.multiline, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, "aria-describedby": props.ariaDescribedby, "aria-invalid": props.ariaInvalid ? true : undefined, "aria-placeholder": props.placeholder || undefined, "aria-disabled": props.disabled ? true : undefined, "aria-autocomplete": props.onTriggerChange ? "list" : undefined, "aria-controls": props.ariaControls, "aria-activedescendant": props.ariaActiveDescendant, contentEditable: !props.disabled, suppressContentEditableWarning: true, spellCheck: (_a = props.spellCheck) !== null && _a !== void 0 ? _a : props.multiline, tabIndex: (_b = props.tabIndex) !== null && _b !== void 0 ? _b : 0, "data-testid": props.dataTestId, "data-template-editor": "", "data-multiline": props.multiline ? "true" : "false", className: `block w-full min-w-0 whitespace-pre-wrap break-words text-gray-900 [overflow-wrap:anywhere] focus:outline-none ${sharedClass} ${multilineClass} ${props.disabled ? "cursor-not-allowed text-gray-500" : ""}`, onKeyDown: (event) => {
+                var _a, _b;
+                (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                if (event.defaultPrevented) {
+                    return;
+                }
+                const isModified = event.metaKey || event.ctrlKey;
+                const key = event.key.toLowerCase();
+                if (isModified && !event.altKey && key === "z") {
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        redo();
+                    }
+                    else {
+                        undo();
+                    }
+                    return;
+                }
+                if (isModified && !event.altKey && key === "y") {
+                    event.preventDefault();
+                    redo();
+                    return;
+                }
+                if (isModified && ["b", "i", "u"].includes(key)) {
+                    event.preventDefault();
+                    return;
+                }
+                if (event.key === "Enter" && !props.multiline) {
+                    event.preventDefault();
+                    (_b = props.onEnter) === null || _b === void 0 ? void 0 : _b.call(props);
+                    return;
+                }
+                /*
+                 * The arrows step over a chip in one go. Firefox will not step back
+                 * over one that opens the line at all.
+                 */
+                if ((event.key === "ArrowLeft" || event.key === "ArrowRight") &&
+                    !event.shiftKey &&
+                    !isModified &&
+                    !event.altKey) {
+                    const root = rootRef.current;
+                    const selection = root
+                        ? readTemplateSelection(root)
+                        : null;
+                    if (root && selection && selection.start === selection.end) {
+                        const chip = chipAtOffset(root, selection.start, event.key === "ArrowLeft" ? "before" : "after");
+                        if (chip) {
+                            event.preventDefault();
+                            placeCaret(event.key === "ArrowLeft" ? chip.start : chip.end);
+                            return;
+                        }
+                    }
+                }
+                if ((event.key === "Home" || event.key === "End") &&
+                    !event.shiftKey &&
+                    !event.altKey) {
+                    const edge = event.key === "Home" ? "start" : "end";
+                    // The start or the end of everything: offsets known exactly.
+                    if (isModified) {
+                        event.preventDefault();
+                        placeCaret(edge === "start" ? 0 : valueRef.current.length);
+                        return;
+                    }
+                    const domSelection = window.getSelection();
+                    /*
+                     * The move is made here, and corrected at once: a correction
+                     * made after the browser's own move would race the next key,
+                     * which a browser handles before any timer.
+                     */
+                    if (domSelection && typeof domSelection.modify === "function") {
+                        event.preventDefault();
+                        domSelection.modify("move", edge === "start" ? "backward" : "forward", "lineboundary");
+                        fixLineEdge(edge);
+                        rememberSelection();
+                        return;
+                    }
+                    // No Selection.modify (jsdom): after the browser has moved it.
+                    window.setTimeout(() => {
+                        fixLineEdge(edge);
+                    }, 0);
+                }
+            }, onKeyUp: rememberSelection, onMouseDown: (event) => {
+                const root = rootRef.current;
+                const chip = root
+                    ? chipAncestor(root, event.target)
+                    : null;
+                /*
+                 * Pressing a chip would put the caret at the start of the box in
+                 * every browser. It goes on the side of the chip that was pressed.
+                 */
+                if (!root || !chip || event.button !== 0) {
+                    return;
+                }
+                event.preventDefault();
+                root.focus();
+                const index = Array.prototype.indexOf.call(root.childNodes, chip);
+                const start = domPointToOffset(root, root, index);
+                const end = domPointToOffset(root, root, index + 1);
+                const rect = chip.getBoundingClientRect();
+                placeCaret(event.clientX > rect.left + rect.width / 2 ? end : start);
+            }, onMouseUp: (event) => {
+                const root = rootRef.current;
+                const selection = root
+                    ? readTemplateSelection(root)
+                    : null;
+                if (!root || !selection) {
+                    return;
+                }
+                selectionRef.current = selection;
+                if (selection.start !== selection.end) {
+                    return;
+                }
+                /*
+                 * A click past the end of a chip can land before it (Firefox, when
+                 * the chip ends the line), and one before a chip after it.
+                 */
+                const isOnLine = (rect) => {
+                    return (event.clientY >= rect.top - 2 &&
+                        event.clientY <= rect.bottom + 2);
+                };
+                const next = chipAtOffset(root, selection.start, "after");
+                if (next) {
+                    const rect = next.element.getBoundingClientRect();
+                    if (rect.width > 0 &&
+                        event.clientX >= rect.right &&
+                        isOnLine(rect)) {
+                        placeCaret(next.end);
+                        return;
+                    }
+                }
+                const previous = chipAtOffset(root, selection.start, "before");
+                if (previous) {
+                    const rect = previous.element.getBoundingClientRect();
+                    if (rect.width > 0 &&
+                        event.clientX <= rect.left &&
+                        isOnLine(rect)) {
+                        placeCaret(previous.start);
+                    }
+                }
+            }, onPaste: (event) => {
+                event.preventDefault();
+                if (props.disabled) {
+                    return;
+                }
+                const root = rootRef.current;
+                const selection = (root && readTemplateSelection(root)) || selectionRef.current;
+                applyEdit(selection, cleanInsertedText(event.clipboardData.getData("text/plain"), props.multiline), TemplateTextChangeKind.Other);
+            }, onCopy: (event) => {
+                const root = rootRef.current;
+                const selection = root
+                    ? readTemplateSelection(root)
+                    : null;
+                if (!selection || selection.start === selection.end) {
+                    return;
+                }
+                // The references, not the chips' words.
+                event.preventDefault();
+                event.clipboardData.setData("text/plain", valueRef.current.slice(selection.start, selection.end));
+            }, onCut: (event) => {
+                const root = rootRef.current;
+                const selection = root
+                    ? readTemplateSelection(root)
+                    : null;
+                if (!selection || selection.start === selection.end) {
+                    return;
+                }
+                event.preventDefault();
+                event.clipboardData.setData("text/plain", valueRef.current.slice(selection.start, selection.end));
+                if (!props.disabled) {
+                    applyEdit(selection, "", TemplateTextChangeKind.Other);
+                }
+            }, onDragStart: (event) => {
+                // Dragging would carry the chips' words, not their references.
+                event.preventDefault();
+            }, onDragOver: (event) => {
+                event.preventDefault();
+            }, onDrop: (event) => {
+                event.preventDefault();
+                const root = rootRef.current;
+                const text = event.dataTransfer.getData("text/plain");
+                if (!root || !text || props.disabled) {
+                    return;
+                }
+                let offset = null;
+                const doc = root.ownerDocument;
+                if (typeof doc.caretPositionFromPoint === "function") {
+                    const position = doc.caretPositionFromPoint(event.clientX, event.clientY);
+                    if (position && root.contains(position.offsetNode)) {
+                        offset = domPointToOffset(root, position.offsetNode, position.offset);
+                    }
+                }
+                else if (typeof doc.caretRangeFromPoint === "function") {
+                    const range = doc.caretRangeFromPoint(event.clientX, event.clientY);
+                    if (range && root.contains(range.startContainer)) {
+                        offset = domPointToOffset(root, range.startContainer, range.startOffset);
+                    }
+                }
+                const at = offset === null
+                    ? selectionRef.current
+                    : { start: offset, end: offset };
+                applyEdit(at, cleanInsertedText(text, props.multiline), TemplateTextChangeKind.Other);
+            }, onCompositionStart: () => {
+                composingRef.current = true;
+            }, onCompositionEnd: () => {
+                composingRef.current = false;
+                reconcile(TemplateTextChangeKind.Typing);
+            }, onFocus: () => {
+                var _a;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+            }, onBlur: (event) => {
+                var _a;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            } })));
+});
+TemplateTextEditor.displayName = "TemplateTextEditor";
+export default TemplateTextEditor;
+//# sourceMappingURL=TemplateTextEditor.js.map