@oneuptime/common 14.0.12 → 14.0.13

package/build/dist/UI/Components/Markdown.tsx/MarkdownEditor.js

@@ -5,6 +5,8 @@ import TinyFormDocumentation from "../TinyFormDocumentation/TinyFormDocumentatio
 import { FILE_URL } from "../../Config";
 import API from "../../Utils/API/API";
 import useTranslateValue from "../../Utils/Translation";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
+import { translationKey } from "../../Utils/TranslateTemplate";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import CommonURL from "../../../Types/API/URL";
 import MimeType from "../../../Types/File/MimeType";
@@ -15,7 +17,32 @@ import { indentMarkdownLines, isInFencedCodeBlock, liftListItems, outdentMarkdow
 import MarkdownEditorHistory from "./MarkdownEditorHistory";
 import { clipboardToMarkdown } from "./MarkdownPaste";
 import { deleteSelectionForInsert, insertBlocksAtCaret, isCaretOnEmptyLine, moveCaretIntoEmptyListAhead, } from "./MarkdownVisualEditing";
-import React, { useState, useRef, useEffect, useId, } from "react";
+import { fitMarkdownToolbar, getFullToolbarLayout, isSameToolbarLayout, } from "./MarkdownToolbarLayout";
+import MoreMenu from "../MoreMenu/MoreMenu";
+import MoreMenuItem from "../MoreMenu/MoreMenuItem";
+import InsertTemplateVariableButton from "../TemplateVariables/InsertTemplateVariableButton";
+import TemplateVariableMenu from "../TemplateVariables/TemplateVariableMenu";
+import TemplateVariablePopup, { TemplateVariablePopupMode, } from "../TemplateVariables/TemplateVariablePopup";
+import TemplateVariablesCopy from "../TemplateVariables/TemplateVariablesCopy";
+import TemplateVariablesList from "../TemplateVariables/TemplateVariablesList";
+import useTemplateVariableTyping from "../TemplateVariables/useTemplateVariableTyping";
+import { countTemplateVariables, filterTemplateVariableGroups, findTemplateVariableTrigger, formatTemplateVariable, hasTemplateVariables, } from "../../../Types/Template/TemplateVariable";
+import React, { useState, useRef, useEffect, useId, useLayoutEffect, } from "react";
+// Keys that move the cursor without changing the text.
+const CARET_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+// A rectangle with nothing in it: no layout, or a cursor on an empty line.
+const isEmptyRect = (rect) => {
+    return !rect || (rect.width === 0 && rect.height === 0);
+};
 const MAX_IMAGE_SIZE_BYTES = 10 * 1024 * 1024; // 10MB
 const IMAGE_MIME_BY_EXTENSION = {
     png: MimeType.png,
@@ -187,17 +214,40 @@ const historyStepOfKey = (event) => {
     }
     return null;
 };
-const ToolbarButton = ({ icon, title, onClick, isActive = false, }) => {
-    return (React.createElement("button", { type: "button", onMouseDown: (e) => {
-            /*
-             * Prevent toolbar clicks from stealing focus / collapsing the
-             * selection in contenteditable mode.
-             */
-            e.preventDefault();
-        }, onClick: onClick, title: title, className: `p-2 rounded-md transition-colors duration-200 ${isActive
-            ? "bg-indigo-100 text-indigo-700"
-            : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"} focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2` },
-        React.createElement(Icon, { icon: icon, className: "h-4 w-4" })));
+const TOOLBAR_GROUPS = [
+    "text",
+    "headings",
+    "lists",
+    "insert",
+    "blocks",
+];
+/*
+ * Every formatting button is the same 32px square (TOOLBAR_BUTTON_PX in
+ * MarkdownToolbarLayout), which is how the toolbar knows where its line
+ * ends without measuring them. The More formatting button is one too.
+ */
+const TOOLBAR_BUTTON_CLASS = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-600 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2";
+/*
+ * The switch's width while it is in the More formatting menu and has never
+ * been measured on the line. Generous, so the guess never brings it back
+ * onto a line it does not fit.
+ */
+const ESTIMATED_MODE_TOGGLE_PX = 96;
+/*
+ * Keeps the editor's focus and selection while a toolbar control is
+ * pressed: a click on a button would otherwise move the focus to it and,
+ * in the visual editor, lose the selection the button is for.
+ */
+const keepEditorFocus = (event) => {
+    event.preventDefault();
+};
+const ToolbarButton = ({ action, title, }) => {
+    return (React.createElement("button", { type: "button", onMouseDown: keepEditorFocus, onClick: action.onClick, title: title, className: TOOLBAR_BUTTON_CLASS }, action.icon ? (React.createElement(Icon, { icon: action.icon, className: "h-4 w-4" })) : (React.createElement("span", { className: action.isGlyphMonospace
+            ? "font-mono text-xs font-bold"
+            : "text-sm font-bold" }, action.glyph))));
+};
+const ToolbarDivider = () => {
+    return React.createElement("div", { "aria-hidden": "true", className: "h-6 w-px shrink-0 bg-gray-300" });
 };
 const MarkdownEditor = (props) => {
     var _a, _b, _c;
@@ -244,6 +294,38 @@ const MarkdownEditor = (props) => {
     const [history] = useState(() => {
         return new MarkdownEditorHistory();
     });
+    /*
+     * Template variables. Something to pick is what puts the toolbar button
+     * and the "{{" list in; the list under the editor also shows for a group
+     * with none yet, which says why (a project with no custom fields).
+     */
+    const templateVariables = props.templateVariables || [];
+    const canPickVariables = countTemplateVariables(templateVariables) > 0;
+    const showsVariablesList = hasTemplateVariables(templateVariables);
+    const variableListboxId = `markdown-editor-variables-${useId()}`;
+    const variableMenuRef = useRef(null);
+    // The visual editor's "{{" being typed, while its list is open.
+    const [editableTrigger, setEditableTrigger] = useState(null);
+    const [editableActiveOptionId, setEditableActiveOptionId] = useState(undefined);
+    /*
+     * Where the cursor last was in the visual editor. A pick made from outside
+     * it - the toolbar button's search box takes the focus, the list under the
+     * editor may be clicked long after - goes there.
+     */
+    const savedRangeRef = useRef(null);
+    // The source view is a plain textarea: the shared typing support drives it.
+    const sourceTyping = useTemplateVariableTyping({
+        groups: templateVariables,
+        getControl: () => {
+            return textareaRef.current;
+        },
+        isEnabled: canPickVariables && mode === "markdown",
+    });
+    const describeVariable = (variable) => {
+        return variable.isDescriptionVerbatim
+            ? variable.description
+            : translateString(variable.description) || variable.description;
+    };
     useEffect(() => {
         if (props.initialValue !== undefined &&
             props.initialValue !== textRef.current) {
@@ -254,6 +336,11 @@ const MarkdownEditor = (props) => {
     // A new editable in each mode: records about the old one's nodes are no use.
     useEffect(() => {
         history.clear();
+        // Nor is a list opened for the other view's cursor, or its cursor.
+        setEditableTrigger(null);
+        setEditableActiveOptionId(undefined);
+        savedRangeRef.current = null;
+        sourceTyping.close();
     }, [mode]);
     /*
      * Sync markdown -> contenteditable when entering WYSIWYG, when text
@@ -342,6 +429,8 @@ const MarkdownEditor = (props) => {
             history.clearRedo();
         }
         syncFromEditable();
+        updateEditableTrigger(true);
+        rememberEditableSelection();
     };
     /*
      * Undo and redo from the browser's Edit menu or context menu arrive with
@@ -707,6 +796,198 @@ const MarkdownEditor = (props) => {
         });
         syncFromEditable();
     };
+    // Remembers where the cursor is in the visual editor, when it is in it.
+    const rememberEditableSelection = () => {
+        const editable = editableRef.current;
+        const selection = typeof window !== "undefined" ? window.getSelection() : null;
+        if (!editable || !selection || selection.rangeCount === 0) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        if (editable.contains(range.startContainer) &&
+            editable.contains(range.endContainer)) {
+            savedRangeRef.current = range.cloneRange();
+        }
+    };
+    // The remembered cursor, while it is still somewhere in the editor.
+    const savedEditableRange = () => {
+        const editable = editableRef.current;
+        const saved = savedRangeRef.current;
+        if (!editable ||
+            !saved ||
+            !editable.contains(saved.startContainer) ||
+            !editable.contains(saved.endContainer)) {
+            return null;
+        }
+        return saved;
+    };
+    const closeEditableTrigger = () => {
+        setEditableTrigger(null);
+        setEditableActiveOptionId(undefined);
+    };
+    // Where the "{{" at `start` is on screen, for the list to open under it.
+    const rectOfBraces = (node, start) => {
+        var _a;
+        const range = document.createRange();
+        range.setStart(node, start);
+        range.setEnd(node, Math.min(start + 2, node.data.length));
+        const rect = typeof range.getBoundingClientRect === "function"
+            ? range.getBoundingClientRect()
+            : null;
+        if (!isEmptyRect(rect)) {
+            return rect;
+        }
+        return ((_a = editableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || null;
+    };
+    /*
+     * The visual editor's cursor after "{{" opens the list of variables under
+     * the braces, filtered by what follows them; anywhere else it closes.
+     * Typing opens it; moving the cursor only keeps a list that is open (for
+     * the braces it was opened for), so clicking into an old "{{" does not.
+     */
+    const updateEditableTrigger = (isTyping) => {
+        if (!canPickVariables) {
+            return;
+        }
+        const editable = editableRef.current;
+        const selection = window.getSelection();
+        const node = (selection === null || selection === void 0 ? void 0 : selection.anchorNode) || null;
+        if (!editable ||
+            !selection ||
+            selection.rangeCount === 0 ||
+            !selection.isCollapsed ||
+            !node ||
+            node.nodeType !== Node.TEXT_NODE ||
+            !editable.contains(node)) {
+            if (editableTrigger) {
+                closeEditableTrigger();
+            }
+            return;
+        }
+        const textNode = node;
+        const trigger = findTemplateVariableTrigger(textNode.data, selection.anchorOffset);
+        const sameBraces = Boolean(trigger &&
+            editableTrigger &&
+            editableTrigger.node === textNode &&
+            editableTrigger.trigger.start === trigger.start);
+        if (!trigger ||
+            (!isTyping && !sameBraces) ||
+            filterTemplateVariableGroups(templateVariables, trigger.query, describeVariable).length === 0) {
+            if (editableTrigger) {
+                closeEditableTrigger();
+            }
+            return;
+        }
+        // The list stays where it opened while the rest of the name is typed.
+        const rect = sameBraces && editableTrigger
+            ? editableTrigger.rect
+            : rectOfBraces(textNode, trigger.start);
+        if (!rect) {
+            return;
+        }
+        setEditableTrigger({ node: textNode, trigger: trigger, rect: rect });
+    };
+    /*
+     * Puts {{name}} into the visual editor: over `range` (the braces and what
+     * was typed after them), else where the cursor is or last was, else at the
+     * end. It goes in as a paste of the same text would, so Ctrl+Z takes it
+     * back and the markdown is updated.
+     */
+    const insertVariableInEditable = (variable, range) => {
+        const editable = editableRef.current;
+        if (!editable) {
+            return;
+        }
+        const selection = window.getSelection();
+        const current = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        const isCurrentInEditor = Boolean(current &&
+            editable.contains(current.startContainer) &&
+            editable.contains(current.endContainer));
+        let target = range || (isCurrentInEditor ? current : null) || savedEditableRange();
+        if (!target) {
+            // Never in the editor: on a line of its own at the end.
+            target = document.createRange();
+            target.selectNodeContents(editable);
+            target.collapse(false);
+        }
+        // Focusing an editable that lost its selection puts the cursor at its start.
+        const kept = target.cloneRange();
+        editable.focus();
+        if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(kept);
+        }
+        insertHtmlAtCursorInEditable(sanitizeHtml(markdownToHtml(formatTemplateVariable(variable.name))));
+        rememberEditableSelection();
+    };
+    // A pick from the list the visual editor's "{{" opened.
+    const pickEditableVariable = (variable) => {
+        const current = editableTrigger;
+        closeEditableTrigger();
+        const editable = editableRef.current;
+        if (!current || !editable || !editable.contains(current.node)) {
+            return;
+        }
+        const data = current.node.data;
+        // What is typed after the braces now, if the cursor is still after them.
+        let end = current.trigger.end;
+        const selection = window.getSelection();
+        if (selection && selection.anchorNode === current.node) {
+            const now = findTemplateVariableTrigger(data, selection.anchorOffset);
+            if (now && now.start === current.trigger.start) {
+                end = now.end;
+            }
+        }
+        const range = document.createRange();
+        range.setStart(current.node, Math.min(current.trigger.start, data.length));
+        range.setEnd(current.node, Math.min(end, data.length));
+        insertVariableInEditable(variable, range);
+    };
+    // A pick from the toolbar button or the list under the editor.
+    const insertVariableAtCursor = (variable) => {
+        if (mode === "markdown") {
+            sourceTyping.insertAtCursor(variable);
+            return;
+        }
+        closeEditableTrigger();
+        insertVariableInEditable(variable, null);
+    };
+    // Back into the editor, where its cursor was: the toolbar list closed.
+    const focusEditor = () => {
+        var _a;
+        if (mode === "markdown") {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        const editable = editableRef.current;
+        if (!editable) {
+            return;
+        }
+        const saved = savedEditableRange();
+        editable.focus();
+        const selection = window.getSelection();
+        if (saved && selection) {
+            selection.removeAllRanges();
+            selection.addRange(saved.cloneRange());
+        }
+    };
+    /*
+     * Remember the visual editor's cursor wherever it moves, by keys or
+     * clicks: a variable picked from a list, or a button picked from the More
+     * formatting menu, goes where it was - both take the focus first.
+     */
+    useEffect(() => {
+        if (mode !== "wysiwyg") {
+            return undefined;
+        }
+        const listener = () => {
+            rememberEditableSelection();
+        };
+        document.addEventListener("selectionchange", listener);
+        return () => {
+            document.removeEventListener("selectionchange", listener);
+        };
+    }, [mode]);
     /*
      * Visual mode. The browser's own paste would bring the source's markup in
      * with it -- styles, classes, elements markdown cannot hold -- so the paste
@@ -1222,6 +1503,291 @@ const MarkdownEditor = (props) => {
             return insertText("\n| Header 1 | Header 2 | Header 3 |\n|----------|----------|----------|\n| Cell 1   | Cell 2   | Cell 3   |\n| Cell 4   | Cell 5   | Cell 6   |\n", "", "");
         },
     };
+    /*
+     * The formatting buttons, in toolbar order. Those that do not fit on the
+     * toolbar's one line are items of its More formatting menu instead (see
+     * MarkdownToolbarLayout): same order, same words.
+     */
+    const toolbarActions = [
+        {
+            label: "Bold",
+            shortcut: KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Mod, "B"]),
+            group: "text",
+            icon: IconProp.Bold,
+            onClick: formatActions.bold,
+        },
+        {
+            label: "Italic",
+            shortcut: KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Mod, "I"]),
+            group: "text",
+            icon: IconProp.Italic,
+            onClick: formatActions.italic,
+        },
+        {
+            label: "Underline",
+            group: "text",
+            icon: IconProp.Underline,
+            onClick: formatActions.underline,
+        },
+        {
+            label: "Strikethrough",
+            group: "text",
+            icon: IconProp.Strikethrough,
+            onClick: formatActions.strikethrough,
+        },
+        {
+            label: "Heading 1",
+            group: "headings",
+            glyph: "H1",
+            onClick: formatActions.heading1,
+        },
+        {
+            label: "Heading 2",
+            group: "headings",
+            glyph: "H2",
+            onClick: formatActions.heading2,
+        },
+        {
+            label: "Heading 3",
+            group: "headings",
+            glyph: "H3",
+            onClick: formatActions.heading3,
+        },
+        {
+            label: "Bullet List",
+            group: "lists",
+            icon: IconProp.ListBullet,
+            onClick: formatActions.unorderedList,
+        },
+        {
+            label: "Numbered List",
+            group: "lists",
+            icon: IconProp.List,
+            onClick: formatActions.orderedList,
+        },
+        {
+            label: "Task List",
+            group: "lists",
+            icon: IconProp.Check,
+            onClick: formatActions.taskList,
+        },
+        {
+            label: "Indent",
+            shortcut: KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab]),
+            group: "lists",
+            icon: IconProp.Indent,
+            onClick: formatActions.indent,
+        },
+        {
+            label: "Outdent",
+            shortcut: KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Shift,
+                KeyboardKey.Tab,
+            ]),
+            group: "lists",
+            icon: IconProp.Outdent,
+            onClick: formatActions.outdent,
+        },
+        {
+            label: "Link",
+            group: "insert",
+            icon: IconProp.Link,
+            onClick: formatActions.link,
+        },
+        ...(allowImageUpload
+            ? [
+                {
+                    label: "Upload Image",
+                    group: "insert",
+                    icon: IconProp.Image,
+                    onClick: formatActions.image,
+                },
+            ]
+            : []),
+        {
+            label: "Code",
+            group: "insert",
+            icon: IconProp.Code,
+            onClick: formatActions.code,
+        },
+        {
+            label: "Table",
+            group: "blocks",
+            icon: IconProp.TableCells,
+            onClick: formatActions.table,
+        },
+        {
+            label: "Horizontal Rule",
+            group: "blocks",
+            icon: IconProp.Minus,
+            onClick: formatActions.horizontalRule,
+        },
+        {
+            label: "Quote",
+            group: "blocks",
+            glyph: '"',
+            onClick: formatActions.quote,
+        },
+        {
+            label: "Code Block",
+            group: "blocks",
+            glyph: "{}",
+            isGlyphMonospace: true,
+            onClick: formatActions.codeBlock,
+        },
+    ];
+    const toolbarGroupSizes = TOOLBAR_GROUPS.map((group) => {
+        return toolbarActions.filter((action) => {
+            return action.group === group;
+        }).length;
+    });
+    const toolbarGroupSizesKey = toolbarGroupSizes.join(",");
+    const tx = (value) => {
+        return translateString(value) || value;
+    };
+    const getToolbarActionTitle = (action) => {
+        return action.shortcut
+            ? `${tx(action.label)} (${action.shortcut})`
+            : tx(action.label);
+    };
+    const moreFormattingLabel = tx("More formatting");
+    // In English: MoreMenuItem looks its own words up.
+    const modeToggleAction = mode === "wysiwyg"
+        ? translationKey("Switch to markdown source")
+        : translationKey("Switch to visual editor");
+    const modeToggleTitle = tx(modeToggleAction);
+    /*
+     * How much of the toolbar is on its line (MarkdownToolbarLayout). Starts
+     * with everything, as it is wherever nothing can be measured, and is
+     * fitted before the first paint and again whenever the line, the switch
+     * or Insert variable changes size: the dialog or the window resized, a
+     * font arrived, the switch now reads Visual.
+     */
+    const toolbarLineRef = useRef(null);
+    const modeToggleRef = useRef(null);
+    const variableButtonRef = useRef(null);
+    /*
+     * The switch as last measured on the line, as each of its two words, for
+     * the fitting to use while it is in the menu.
+     */
+    const modeToggleWidthsRef = useRef({});
+    const [toolbarLayout, setToolbarLayout] = useState(() => {
+        return getFullToolbarLayout(toolbarGroupSizes);
+    });
+    const toolbarLayoutRef = useRef(toolbarLayout);
+    toolbarLayoutRef.current = toolbarLayout;
+    const fitToolbar = () => {
+        var _a, _b;
+        const line = toolbarLineRef.current;
+        if (!line) {
+            return;
+        }
+        const modeToggleWidths = modeToggleWidthsRef.current;
+        const current = toolbarLayoutRef.current;
+        const modeToggleWidth = ((_a = modeToggleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        if (modeToggleWidth > 0) {
+            modeToggleWidths[mode] = modeToggleWidth;
+        }
+        const next = fitMarkdownToolbar({
+            availableWidth: line.clientWidth,
+            groupSizes: toolbarGroupSizes,
+            modeToggleWidth: modeToggleWidths[mode] ||
+                modeToggleWidths[mode === "wysiwyg" ? "markdown" : "wysiwyg"] ||
+                ESTIMATED_MODE_TOGGLE_PX,
+            // Always on the line, so always measured as it is.
+            variableButtonWidth: ((_b = variableButtonRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
+        });
+        if (!isSameToolbarLayout(current, next)) {
+            toolbarLayoutRef.current = next;
+            setToolbarLayout(next);
+        }
+    };
+    const fitToolbarRef = useRef(fitToolbar);
+    fitToolbarRef.current = fitToolbar;
+    /*
+     * Before paint, so the toolbar is never drawn with buttons that do not
+     * fit; again after each change of layout, to measure what it put on the
+     * line.
+     */
+    useLayoutEffect(() => {
+        fitToolbarRef.current();
+    }, [
+        mode,
+        canPickVariables,
+        toolbarGroupSizesKey,
+        modeToggleTitle,
+        toolbarLayout,
+    ]);
+    useEffect(() => {
+        const line = toolbarLineRef.current;
+        if (!line || typeof ResizeObserver === "undefined") {
+            return undefined;
+        }
+        /*
+         * A frame later, not inside the observer's callback: fitting changes
+         * what is on the line, and a size change made inside the callback is
+         * reported as a ResizeObserver loop error.
+         */
+        let frame = null;
+        // Apart from the frame's id, which a frame run at once comes back after.
+        let isFitScheduled = false;
+        const observer = new ResizeObserver(() => {
+            if (isFitScheduled) {
+                return;
+            }
+            isFitScheduled = true;
+            frame = window.requestAnimationFrame(() => {
+                isFitScheduled = false;
+                frame = null;
+                fitToolbarRef.current();
+            });
+        });
+        observer.observe(line);
+        if (modeToggleRef.current) {
+            observer.observe(modeToggleRef.current);
+        }
+        if (variableButtonRef.current) {
+            observer.observe(variableButtonRef.current);
+        }
+        return () => {
+            observer.disconnect();
+            if (frame !== null) {
+                window.cancelAnimationFrame(frame);
+            }
+        };
+    }, [canPickVariables, toolbarLayout.isModeToggleInBar]);
+    const visibleToolbarActions = toolbarActions.slice(0, toolbarLayout.visibleButtonCount);
+    const menuToolbarActions = toolbarActions.slice(toolbarLayout.visibleButtonCount);
+    /*
+     * A pick from the More formatting menu: back into the editor first, to
+     * where its cursor was - the menu took the focus - then the action, as a
+     * click on its button would do it.
+     */
+    const runFromMoreMenu = (onClick) => {
+        focusEditor();
+        onClick();
+    };
+    const toggleMode = () => {
+        setMode((current) => {
+            return current === "wysiwyg" ? "markdown" : "wysiwyg";
+        });
+    };
+    const moreMenuItems = [];
+    menuToolbarActions.forEach((action, index) => {
+        const previous = menuToolbarActions[index - 1];
+        if (previous && previous.group !== action.group) {
+            moreMenuItems.push(React.createElement("div", { key: `separator-${action.label}`, role: "separator", className: "mx-3 my-1 border-t border-gray-100" }));
+        }
+        moreMenuItems.push(React.createElement(MoreMenuItem, { key: action.label, text: action.label, icon: action.icon, iconElement: action.icon ? undefined : (React.createElement("span", { className: `${action.isGlyphMonospace ? "font-mono " : ""}text-xs font-bold leading-none` }, action.glyph)), rightElement: action.shortcut ? (React.createElement("span", { className: "ml-3 text-xs font-normal text-gray-400" }, action.shortcut)) : undefined, onClick: () => {
+                runFromMoreMenu(action.onClick);
+            } }));
+    });
+    if (!toolbarLayout.isModeToggleInBar) {
+        if (moreMenuItems.length > 0) {
+            moreMenuItems.push(React.createElement("div", { key: "separator-mode", role: "separator", className: "mx-3 my-1 border-t border-gray-100" }));
+        }
+        moreMenuItems.push(React.createElement(MoreMenuItem, { key: "mode", text: modeToggleAction, icon: mode === "wysiwyg" ? IconProp.Code : IconProp.Eye, onClick: toggleMode }));
+    }
     let className = "";
     if (!props.className) {
         className =
@@ -1240,6 +1806,24 @@ const MarkdownEditor = (props) => {
         ? "ring-2 ring-indigo-400 ring-offset-1 border-indigo-400"
         : ""}`;
     const handleEditableKeyDown = (e) => {
+        var _a;
+        /*
+         * While the list "{{" opened is showing, its keys are its own: the
+         * arrows move through it, Enter and Tab pick, and Escape closes the list
+         * - not the dialog the editor is in.
+         */
+        if (editableTrigger) {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                closeEditableTrigger();
+                return;
+            }
+            if ((_a = variableMenuRef.current) === null || _a === void 0 ? void 0 : _a.handleKeyDown(e)) {
+                e.stopPropagation();
+                return;
+            }
+        }
         /*
          * Ctrl+Z right after an edit the editor made itself -- a list move, an
          * insert made by hand -- takes that edit back, and Ctrl+Shift+Z makes
@@ -1277,6 +1861,11 @@ const MarkdownEditor = (props) => {
         }
     };
     const handleTextareaKeyDown = (e) => {
+        // The list "{{" opened takes its keys first, as in the visual editor.
+        if (sourceTyping.handleKeyDown(e)) {
+            e.stopPropagation();
+            return;
+        }
         if (e.ctrlKey || e.metaKey) {
             switch (e.key) {
                 case "b":
@@ -1321,144 +1910,117 @@ const MarkdownEditor = (props) => {
         .oneuptime-wysiwyg img { max-width: 100%; height: auto; }
         .oneuptime-wysiwyg:empty::before { content: attr(data-placeholder); color: var(--ou-text-subtle, #9ca3af); pointer-events: none; }
       `),
-        React.createElement("div", { className: "p-2 bg-gray-50 border border-gray-300 rounded-t-md border-b-0" },
-            React.createElement("div", { className: "flex flex-wrap items-center gap-1" },
-                React.createElement("div", { className: "flex items-center gap-1" },
-                    React.createElement(ToolbarButton, { icon: IconProp.Bold, title: `Bold (${KeyboardKeyUtil.getDisplayLabel([
-                            KeyboardKey.Mod,
-                            "B",
-                        ])})`, onClick: formatActions.bold }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Italic, title: `Italic (${KeyboardKeyUtil.getDisplayLabel([
-                            KeyboardKey.Mod,
-                            "I",
-                        ])})`, onClick: formatActions.italic }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Underline, title: "Underline", onClick: formatActions.underline }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Minus, title: "Strikethrough", onClick: formatActions.strikethrough })),
-                React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
-                React.createElement("div", { className: "flex items-center gap-1" },
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                        }, onClick: formatActions.heading1, title: "Heading 1", className: "px-2 py-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
-                        React.createElement("span", { className: "text-sm font-bold" }, "H1")),
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                        }, onClick: formatActions.heading2, title: "Heading 2", className: "px-2 py-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
-                        React.createElement("span", { className: "text-sm font-bold" }, "H2")),
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                        }, onClick: formatActions.heading3, title: "Heading 3", className: "px-2 py-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
-                        React.createElement("span", { className: "text-sm font-bold" }, "H3"))),
-                React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
-                React.createElement("div", { className: "flex items-center gap-1" },
-                    React.createElement(ToolbarButton, { icon: IconProp.ListBullet, title: "Bullet List", onClick: formatActions.unorderedList }),
-                    React.createElement(ToolbarButton, { icon: IconProp.List, title: "Numbered List", onClick: formatActions.orderedList }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Check, title: "Task List", onClick: formatActions.taskList }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Indent, title: `Indent (${KeyboardKeyUtil.getDisplayLabel([
-                            KeyboardKey.Tab,
-                        ])})`, onClick: formatActions.indent }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Outdent, title: `Outdent (${KeyboardKeyUtil.getDisplayLabel([
-                            KeyboardKey.Shift,
-                            KeyboardKey.Tab,
-                        ])})`, onClick: formatActions.outdent })),
-                React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
-                React.createElement("div", { className: "flex items-center gap-1" },
-                    React.createElement(ToolbarButton, { icon: IconProp.Link, title: "Link", onClick: formatActions.link }),
-                    allowImageUpload && (React.createElement(ToolbarButton, { icon: IconProp.Image, title: "Image", onClick: formatActions.image })),
-                    React.createElement(ToolbarButton, { icon: IconProp.Code, title: "Code", onClick: formatActions.code })),
-                React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
-                React.createElement("div", { className: "flex items-center gap-1" },
-                    React.createElement(ToolbarButton, { icon: IconProp.TableCells, title: "Table", onClick: formatActions.table }),
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                        }, onClick: formatActions.horizontalRule, title: "Horizontal Rule", className: "p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
-                        React.createElement("span", { className: "font-bold text-sm" }, "-")),
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                        }, onClick: formatActions.quote, title: "Quote", className: "p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
-                        React.createElement("span", { className: "font-bold text-sm" }, "\"")),
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                        }, onClick: formatActions.codeBlock, title: "Code Block", className: "p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
-                        React.createElement("span", { className: "font-mono text-xs font-bold" }, "{}"))),
-                React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
-                React.createElement("div", { className: "flex items-center" },
-                    React.createElement("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
+        React.createElement("div", { "data-testid": "markdown-editor-toolbar", className: "overflow-hidden p-2 bg-gray-50 border border-gray-300 rounded-t-md border-b-0", style: { contain: "inline-size" } },
+            React.createElement("div", { ref: toolbarLineRef, "data-testid": "markdown-editor-toolbar-line", className: "flex items-center gap-1" },
+                visibleToolbarActions.map((action, index) => {
+                    const previous = visibleToolbarActions[index - 1];
+                    return (React.createElement(React.Fragment, { key: action.label },
+                        previous && previous.group !== action.group ? (React.createElement(ToolbarDivider, null)) : null,
+                        React.createElement(ToolbarButton, { action: action, title: getToolbarActionTitle(action) })));
+                }),
+                toolbarLayout.hasMoreMenu ? (React.createElement(MoreMenu, { isMenuPortaled: true, ariaLabel: moreFormattingLabel, elementToBeShownInsteadOfButton: React.createElement("button", { type: "button", title: moreFormattingLabel, "data-testid": "markdown-editor-more-formatting", className: TOOLBAR_BUTTON_CLASS, onMouseDown: (event) => {
+                            keepEditorFocus(event);
+                            rememberEditableSelection();
                         }, onClick: () => {
-                            setMode((current) => {
-                                return current === "wysiwyg" ? "markdown" : "wysiwyg";
-                            });
-                        }, className: `px-3 py-1 rounded-md text-sm font-medium transition-colors duration-200 ${mode === "markdown"
+                            // A keyboard press has no mousedown: remember the cursor here too.
+                            rememberEditableSelection();
+                        } },
+                        React.createElement(Icon, { icon: IconProp.EllipsisHorizontal, className: "h-4 w-4" })) }, moreMenuItems)) : null,
+                toolbarLayout.isModeToggleInBar ? (React.createElement(React.Fragment, null,
+                    React.createElement(ToolbarDivider, null),
+                    React.createElement("button", { ref: modeToggleRef, type: "button", onMouseDown: keepEditorFocus, onClick: toggleMode, className: `shrink-0 whitespace-nowrap px-3 py-1 rounded-md text-sm font-medium transition-colors duration-200 ${mode === "markdown"
                             ? "bg-indigo-100 text-indigo-700"
-                            : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"} focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, title: mode === "wysiwyg"
-                            ? "Switch to markdown source"
-                            : "Switch to visual editor" }, mode === "wysiwyg" ? "Markdown" : "Visual")))),
+                            : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"} focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, title: modeToggleTitle }, tx(mode === "wysiwyg" ? "Markdown" : "Visual")))) : null,
+                canPickVariables ? (React.createElement("div", { ref: variableButtonRef, className: "ml-auto flex shrink-0 items-center" },
+                    React.createElement(InsertTemplateVariableButton, { groups: templateVariables, dataTestId: "markdown-editor-insert-variable", className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium text-indigo-700 transition-colors duration-200 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2", onPressStart: rememberEditableSelection, onPick: insertVariableAtCursor, onCloseFocus: focusEditor }))) : null)),
         React.createElement("div", { className: "relative" },
             allowImageUpload && (React.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: handleFileInputChange })),
             mode === "wysiwyg" ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { ref: editableRef, role: "textbox", "aria-multiline": "true", "aria-labelledby": props.ariaLabelledby, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? errorId : undefined, contentEditable: true, suppressContentEditableWarning: true, spellCheck: props.disableSpellCheck !== true, "data-placeholder": visualPlaceholder, tabIndex: props.tabIndex, className: wysiwygClassName, onInput: handleEditableInput, onPaste: handleEditablePaste, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: handleEditableKeyDown, onFocus: () => {
+                React.createElement("div", { ref: editableRef, role: "textbox", "aria-multiline": "true", "aria-labelledby": props.ariaLabelledby, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? errorId : undefined, "aria-autocomplete": canPickVariables ? "list" : undefined, "aria-controls": editableTrigger ? variableListboxId : undefined, "aria-activedescendant": editableTrigger ? editableActiveOptionId : undefined, contentEditable: true, suppressContentEditableWarning: true, spellCheck: props.disableSpellCheck !== true, "data-placeholder": visualPlaceholder, tabIndex: props.tabIndex, className: wysiwygClassName, onInput: handleEditableInput, onPaste: handleEditablePaste, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: handleEditableKeyDown, onKeyUp: (e) => {
+                        if (canPickVariables && CARET_KEYS.includes(e.key)) {
+                            updateEditableTrigger(false);
+                            rememberEditableSelection();
+                        }
+                    }, onMouseUp: () => {
+                        if (canPickVariables) {
+                            updateEditableTrigger(false);
+                            rememberEditableSelection();
+                        }
+                    }, onFocus: () => {
                         if (props.onFocus) {
                             props.onFocus();
                         }
                     }, onBlur: () => {
+                        closeEditableTrigger();
                         if (props.onBlur) {
                             props.onBlur();
                         }
                     } }),
                 isDraggingOver && (React.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-b-md bg-indigo-50/70" },
-                    React.createElement("span", { className: "rounded-full bg-white px-3 py-1 text-sm font-medium text-indigo-700 shadow-sm" }, "Drop image to upload"))),
+                    React.createElement("span", { className: "rounded-full bg-white px-3 py-1 text-sm font-medium text-indigo-700 shadow-sm" }, tx("Drop image to upload")))),
                 props.error && (React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" },
                     React.createElement(Icon, { icon: IconProp.ErrorSolid, className: "h-5 w-5 text-red-500" }))))) : (React.createElement(React.Fragment, null,
                 React.createElement("textarea", { ref: textareaRef, autoFocus: false, "aria-labelledby": props.ariaLabelledby, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? errorId : undefined, placeholder: sourcePlaceholder, className: `${className} rounded-t-none min-h-32 ${isDraggingOver
                         ? "ring-2 ring-indigo-400 ring-offset-1 border-indigo-400"
                         : ""}`, value: text, spellCheck: props.disableSpellCheck !== true, onChange: (e) => {
                         handleChange(e.target.value);
+                        sourceTyping.handleInput();
                     }, onPaste: handleTextareaPaste, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onFocus: () => {
+                        sourceTyping.handleFocus();
                         if (props.onFocus) {
                             props.onFocus();
                         }
                     }, onBlur: () => {
+                        sourceTyping.handleBlur();
                         if (props.onBlur) {
                             props.onBlur();
                         }
+                    }, onKeyUp: (e) => {
+                        if (CARET_KEYS.includes(e.key)) {
+                            sourceTyping.handleCaretMove();
+                        }
+                    }, onMouseUp: () => {
+                        sourceTyping.handleCaretMove();
                     }, onKeyDown: handleTextareaKeyDown, tabIndex: props.tabIndex, rows: 10 }),
                 isDraggingOver && (React.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-b-md bg-indigo-50/70" },
-                    React.createElement("span", { className: "rounded-full bg-white px-3 py-1 text-sm font-medium text-indigo-700 shadow-sm" }, "Drop image to upload"))),
+                    React.createElement("span", { className: "rounded-full bg-white px-3 py-1 text-sm font-medium text-indigo-700 shadow-sm" }, tx("Drop image to upload")))),
                 props.error && (React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" },
                     React.createElement(Icon, { icon: IconProp.ErrorSolid, className: "h-5 w-5 text-red-500" })))))),
         props.error && (React.createElement("p", { id: errorId, role: "alert", className: "mt-1 text-sm text-red-400" }, props.error)),
+        showsVariablesList ? (React.createElement(TemplateVariablesList, { groups: templateVariables, description: props.templateVariablesDescription, onInsert: canPickVariables ? insertVariableAtCursor : undefined, supportsTyping: canPickVariables, dataTestId: "markdown-editor-template-variables" }, props.templateVariablesFooter)) : null,
+        editableTrigger ? (React.createElement(TemplateVariablePopup, { mode: TemplateVariablePopupMode.Inline, ariaLabel: translateString(TemplateVariablesCopy.listTitle) ||
+                TemplateVariablesCopy.listTitle, dataTestId: "template-variable-suggestions", positionKey: `${editableTrigger.trigger.start}-${editableTrigger.rect.left}-${editableTrigger.rect.top}`, getAnchorRect: () => {
+                return editableTrigger.rect;
+            }, isInsideAnchor: (target) => {
+                var _a;
+                return Boolean((_a = editableRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));
+            }, onClose: closeEditableTrigger },
+            React.createElement(TemplateVariableMenu, { ref: variableMenuRef, groups: templateVariables, hasSearchBox: false, query: editableTrigger.trigger.query, listboxId: variableListboxId, onActiveOptionChange: setEditableActiveOptionId, onPick: pickEditableVariable }))) : null,
+        sourceTyping.popup,
         React.createElement(TinyFormDocumentation, { title: helpTitle },
             React.createElement(React.Fragment, null,
-                React.createElement("div", null, "Type directly in the visual editor \u2014 use the toolbar to format."),
+                React.createElement("div", null, tx("Type directly in the visual editor — use the toolbar to format.")),
                 React.createElement("div", null,
-                    "Switch to ",
-                    React.createElement("strong", null, "Markdown"),
-                    " to view or edit the raw source."),
+                    React.createElement(TranslatedSentence, { template: "Switch to {{markdown}} to view or edit the raw source.", slots: { markdown: React.createElement("strong", null, tx("Markdown")) } })),
                 React.createElement("div", null,
-                    "In a list, press",
-                    " ",
-                    React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab])),
-                    " ",
-                    "to indent an item and",
-                    " ",
-                    React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([
-                        KeyboardKey.Shift,
-                        KeyboardKey.Tab,
-                    ])),
-                    " ",
-                    "to outdent it, or use the Indent and Outdent buttons. Outside a list, ",
-                    KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab]),
-                    " moves to the next field."),
+                    React.createElement(TranslatedSentence, { template: "In a list, press {{indentKey}} to indent an item and {{outdentKey}} to outdent it, or use the Indent and Outdent buttons. Outside a list, {{tabKey}} moves to the next field.", slots: {
+                            indentKey: (React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab]))),
+                            outdentKey: (React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([
+                                KeyboardKey.Shift,
+                                KeyboardKey.Tab,
+                            ]))),
+                        }, values: {
+                            tabKey: KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab]),
+                        } })),
                 React.createElement("div", null,
-                    "Pasting keeps lists, links and formatting from Word, Outlook, web pages and other notes. To paste plain text instead, press",
-                    " ",
-                    React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([
-                        KeyboardKey.Mod,
-                        KeyboardKey.Shift,
-                        "V",
-                    ])),
-                    "."),
-                allowImageUpload && (React.createElement("div", null, "Tip: paste, drag & drop, or click the image button to upload screenshots inline."))))));
+                    React.createElement(TranslatedSentence, { template: "Pasting keeps lists, links and formatting from Word, Outlook, web pages and other notes. To paste plain text instead, press {{pasteKey}}.", slots: {
+                            pasteKey: (React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([
+                                KeyboardKey.Mod,
+                                KeyboardKey.Shift,
+                                "V",
+                            ]))),
+                        } })),
+                allowImageUpload && (React.createElement("div", null, tx("Tip: paste, drag & drop, or click the image button to upload screenshots inline.")))))));
 };
 export default MarkdownEditor;
 //# sourceMappingURL=MarkdownEditor.js.map