@barocss/math-editor 0.2.1 → 0.4.0

package/dist/dom.js

@@ -1,25 +1,36 @@
+import { mountLatexPanel } from './dom/latex-panel.js';
+import { followMathTheme, syncMathTheme } from './dom/theme.js';
+import { matrixPointerRange } from './dom/matrix-selection.js';
 import { positionMathMenu } from './dom/menu-position.js';
 import { fences } from './fences.js';
 import { createEditorLabels } from './editor-labels.js';
 import { mathEnterAction } from './enter-policy.js';
 export { mountMathLatex, mountMathPreview, } from './outputs.js';
-import { element } from './dom/elements.js';
+import { elementFactory } from './dom/elements.js';
 import { mountMathToolbar } from './dom/toolbar.js';
 export { mountMathToolbar } from './dom/toolbar.js';
 import { createMathSession, } from './session.js';
 import { translate, mathLocaleDirection } from './i18n.js';
 import { documentRows, isLiteralText, textNodes, setText, moveCaret, unwrapPrevious, gridDeletionTarget, removeGrid, isGrid, toLatex, } from './model.js';
-import { activeGrid, moveMatrixVertical, resizeMatrix } from './matrix.js';
-import { joinPreviousLine, moveLineVertical } from './lines.js';
+import { activeGrid, activeMatrix, resizeMatrix } from './matrix.js';
+import { MATH_MATRIX_CLIPBOARD_TYPE, parseMatrixFragment, matrixFragment, matrixFromTSV, matrixRangeBetween, resolveMatrixRange, extendMatrixRange, focusMatrixCell, } from './matrix-range.js';
+import { joinPreviousLine } from './lines.js';
+import { moveVertical } from './vertical-navigation.js';
+import { renderedCaretGeometry } from './dom/caret-geometry.js';
+import { extendsMathSelection, nativeSelectionAnchor, createSelectionMenuState, textSelectionBounds, } from './dom/selection.js';
 import { acceptSuggestion, findSuggestions, mathStructures } from './suggestions.js';
-import { tokenizeMathText } from './tokens.js';
-import { fragmentLatex, parseFragment, MATH_CLIPBOARD_TYPE, extendKeyboardRange, resolveRange, copyRange, wrappingKinds, } from './range.js';
+import { tokenizeMathText, tokenIndexAt } from './tokens.js';
+import { fragmentLatex, parseFragment, MATH_CLIPBOARD_TYPE, extendKeyboardRange, collapseKeyboardRange, resolveRange, copyRange, wrappingKinds, } from './range.js';
 /** Native DOM renderer. No React or framework runtime is imported by this module. */
 export function mountMathEditor(host, initial = {}) {
+    const doc = host.ownerDocument;
+    const win = doc.defaultView;
+    const element = elementFactory(doc);
     let options = { ...initial };
     const session = initial.session ??
         createMathSession({
             document: initial.defaultValue,
+            preferences: initial.preferences,
             locale: initial.locale,
             mode: initial.mode,
         });
@@ -34,12 +45,40 @@ export function mountMathEditor(host, initial = {}) {
     status.setAttribute('role', 'status');
     const menu = element('div', 'me-suggestion-panel me-dom-menu');
     menu.hidden = true;
-    (initial.menuHost ?? host.closest('dialog, [role="dialog"]') ?? document.body).append(menu);
+    (initial.menuHost ?? host.closest('dialog, [role="dialog"]') ?? doc.body).append(menu);
+    const stopTheme = followMathTheme(root, menu);
     let editing = false, rendering = false, composing = false, destroyed = false, dismissed = '', operandMenuKey = '', candidateIndex = 0, selectedGrid;
     let drag;
+    let dragMatrix;
+    const selectionMenu = createSelectionMenuState();
     let toolbar;
+    let latexPanel;
+    const closeLatex = () => {
+        latexPanel?.destroy();
+        latexPanel = undefined;
+        editing = true;
+        render();
+    };
+    const openLatex = () => {
+        if (composing || destroyed || latexPanel)
+            return;
+        toolbar?.closePanels();
+        menu.hidden = true;
+        latexPanel = mountLatexPanel(root, {
+            locale: session.getSnapshot().locale,
+            onInsert: (source) => session.pasteLatex(source),
+            onClose: closeLatex,
+        });
+    };
     const t = (value) => translate(session.getSnapshot().locale, value);
     const currentInput = () => surface.querySelector('input');
+    const cancelDrag = () => {
+        const previous = drag;
+        drag = undefined;
+        dragMatrix = undefined;
+        if (previous && surface.hasPointerCapture(previous.pointerId))
+            surface.releasePointerCapture(previous.pointerId);
+    };
     const notify = (key) => {
         status.textContent = t(key);
     };
@@ -61,6 +100,7 @@ export function mountMathEditor(host, initial = {}) {
         if (!editing ||
             isLiteralText(state.document, state.caret.id) ||
             snapshot.range ||
+            snapshot.matrixRange ||
             dismissed === `${active.id}:${active.text}:${state.caret.start}`)
             result.candidates = [];
         return result;
@@ -73,38 +113,94 @@ export function mountMathEditor(host, initial = {}) {
             dismissed = '';
             candidateIndex = 0;
             apply(acceptSuggestion(session.getSnapshot().state, result.query, item));
+            session.preferences.record(item.id);
         }
     };
-    const drawMenu = () => {
+    const suggestionButton = (glyph, label, detail) => {
+        const button = element('button');
+        button.type = 'button';
+        button.setAttribute('role', 'option');
+        // Keep the concise option name while showing the same detail as the rich UI.
+        button.setAttribute('aria-label', `${glyph} ${label}`);
+        const copy = element('span', 'me-candidate-copy');
+        copy.append(element('strong', '', label), element('small', '', detail));
+        button.append(element('span', 'me-candidate-glyph', glyph), copy);
+        button.onmousedown = (event) => event.preventDefault();
+        button.onmousemove = (event) => {
+            // Rebuilding or scrolling the list can put a new row under a stationary
+            // pointer. Only real pointer movement may replace the keyboard choice.
+            if (composing || button.disabled || (!event.movementX && !event.movementY))
+                return;
+            const buttons = Array.from(button.parentElement.children);
+            const index = buttons.indexOf(button);
+            if (candidateIndex === index && button.getAttribute('aria-selected') === 'true')
+                return;
+            candidateIndex = index;
+            // Update the highlight in place: rebuilding would reset a wheel-scrolled list.
+            for (const option of buttons)
+                option.setAttribute('aria-selected', String(option === button));
+            // Host observers also see these attribute updates and must retain the input caret.
+            options.onRender?.();
+        };
+        return button;
+    };
+    const positionMenu = (anchor) => {
+        delete menu.dataset.compact;
+        positionMathMenu(menu, anchor, 340, options.menuAvoidElements?.());
+        // In a short dialog, leave the available space for selectable rows.
+        if (menu.getBoundingClientRect().height < 180) {
+            menu.dataset.compact = 'true';
+            positionMathMenu(menu, anchor, 340, options.menuAvoidElements?.());
+        }
+    };
+    const scrollMenuSelection = () => {
+        const option = menu.querySelector('[aria-selected="true"]');
+        const list = option?.parentElement;
+        if (!option || !list)
+            return;
+        // Move only the options list, never the surrounding page or host editor.
+        const itemRect = option.getBoundingClientRect();
+        const listRect = list.getBoundingClientRect();
+        const scaleY = listRect.height / list.offsetHeight || 1;
+        if (itemRect.top < listRect.top)
+            list.scrollTop -= (listRect.top - itemRect.top) / scaleY;
+        else if (itemRect.bottom > listRect.bottom)
+            list.scrollTop += (itemRect.bottom - listRect.bottom) / scaleY;
+    };
+    const renderMenu = () => {
+        syncMathTheme(root, menu);
         const result = candidates(), input = currentInput();
         menu.replaceChildren();
         const snapshot = session.getSnapshot();
         const caret = snapshot.state.caret;
         const selectedRange = snapshot.range ??
-            (caret.start !== caret.end
+            (input && caret.start !== caret.end
                 ? {
                     anchor: { id: caret.id, offset: caret.start },
                     focus: { id: caret.id, offset: caret.end },
                 }
                 : undefined);
         const fragment = selectedRange && copyRange(snapshot.state.document, selectedRange);
+        const showSelectionMenu = selectionMenu.sync(fragment ? selectedRange : undefined);
         if (fragment) {
-            menu.hidden = false;
+            menu.dataset.kind = 'selection';
+            menu.hidden = !showSelectionMenu;
+            input?.setAttribute('aria-expanded', String(showSelectionMenu));
+            if (!showSelectionMenu)
+                return;
             menu.lang = snapshot.locale;
             menu.dir = mathLocaleDirection(snapshot.locale);
+            const canWrap = fragment.rows.length === 1 &&
+                !isLiteralText(snapshot.state.document, selectedRange.anchor.id);
+            menu.append(element('div', 'me-suggestion-heading', t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired')));
             const list = element('div', 'me-suggestions');
             list.setAttribute('role', 'listbox');
             list.setAttribute('aria-label', t('selection.toolbar'));
             for (const item of mathStructures.filter((item) => wrappingKinds.includes(item.kind))) {
-                const button = element('button', '', `${item.glyph} ${t(item.label)}`);
-                button.type = 'button';
-                button.setAttribute('role', 'option');
+                const button = suggestionButton(item.glyph, t(item.label), t(item.detail));
                 button.setAttribute('aria-selected', String(list.children.length === candidateIndex));
-                button.disabled =
-                    fragment.rows.length !== 1 ||
-                        isLiteralText(snapshot.state.document, selectedRange.anchor.id);
+                button.disabled = !canWrap;
                 button.setAttribute('aria-label', translate(snapshot.locale, 'selection.wrap', { kind: t(item.label) }));
-                button.onmousedown = (event) => event.preventDefault();
                 button.onclick = () => {
                     if (!snapshot.range)
                         session.selectRange(selectedRange);
@@ -113,39 +209,65 @@ export function mountMathEditor(host, initial = {}) {
                 list.append(button);
             }
             menu.append(list);
-            const selected = surface.querySelectorAll('.me-dom-selected');
+            const selected = surface.querySelectorAll('.me-dom-selected, .me-range-highlight');
             const rect = (selected[selected.length - 1] ?? input ?? surface).getBoundingClientRect();
-            positionMathMenu(menu, rect, 340);
+            positionMenu(rect);
             return;
         }
+        menu.dataset.kind = 'suggestions';
         menu.hidden = !input || !result.candidates.length;
         input?.setAttribute('aria-expanded', String(!menu.hidden));
         if (menu.hidden)
             return;
         menu.lang = session.getSnapshot().locale;
         menu.dir = mathLocaleDirection(menu.lang);
+        const heading = element('div', 'me-suggestion-heading');
+        heading.append(element('span', 'me-suggestion-query', translate(snapshot.locale, 'suggestion.create', { query: result.query })), element('span', '', t(composing ? 'suggestion.composing' : 'suggestion.keyboardHint')));
         const list = element('div', 'me-suggestions');
         list.setAttribute('role', 'listbox');
         list.setAttribute('aria-label', t('suggestion.label'));
         candidateIndex = Math.min(candidateIndex, result.candidates.length - 1);
         result.candidates.forEach((item, index) => {
-            const button = element('button', '', `${item.glyph} ${item.label}`);
-            button.type = 'button';
-            button.setAttribute('role', 'option');
-            button.setAttribute('aria-selected', String(index === candidateIndex));
+            const button = suggestionButton(item.glyph, item.label, item.detail);
+            button.setAttribute('aria-selected', String(!composing && index === candidateIndex));
             button.disabled = composing;
-            button.onmousedown = (event) => event.preventDefault();
             button.onclick = () => choose(index);
             list.append(button);
         });
-        menu.append(list);
+        menu.append(heading, list, element('div', 'me-suggestion-footer', t(composing ? 'suggestion.imeHint' : 'suggestion.keepSource')));
         const rect = input.getBoundingClientRect();
-        positionMathMenu(menu, rect, 230);
+        positionMenu(rect);
         input.setAttribute('aria-expanded', 'true');
     };
+    const drawMenu = () => {
+        renderMenu();
+        // Keyup and selection events can redraw the list after keydown has scrolled it.
+        if (!menu.hidden)
+            scrollMenuSelection();
+        // Focus-only renders and native selection updates need the same notification
+        // as model edits, before a host's mutation observer restores its own selection.
+        if (!destroyed && !composing && !rendering)
+            options.onRender?.();
+    };
+    const dismissSelectionMenu = () => {
+        if (menu.hidden || menu.dataset.kind !== 'selection' || !selectionMenu.dismiss())
+            return false;
+        drawMenu();
+        return true;
+    };
+    menu.onkeydown = (event) => {
+        if (event.key !== 'Escape' || composing || event.isComposing || !dismissSelectionMenu())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        (currentInput() ?? surface).focus();
+    };
     const render = () => {
         if (destroyed || composing || rendering)
             return;
+        // External caret/configuration changes replace the input and end its pending native drag.
+        if (drag?.input && !drag.moved)
+            cancelDrag();
         rendering = true;
         const snapshot = session.getSnapshot(), { state } = snapshot;
         root.dataset.mode = snapshot.mode;
@@ -156,6 +278,14 @@ export function mountMathEditor(host, initial = {}) {
         surface.setAttribute('aria-label', t('selection.surface'));
         surface.replaceChildren();
         const spans = snapshot.range && resolveRange(state.document, snapshot.range);
+        const matrixSelection = snapshot.matrixRange && resolveMatrixRange(state.document, snapshot.matrixRange);
+        if (matrixSelection)
+            status.textContent = translate(snapshot.locale, 'matrix.rangeHint', {
+                rows: matrixSelection.rows,
+                columns: matrixSelection.columns,
+            });
+        else
+            status.textContent = '';
         const selected = (r) => spans?.find((span) => span.row.id === r.id);
         const labels = createEditorLabels(snapshot.locale);
         const renderRow = (r, name, inheritedSelection = false) => {
@@ -164,82 +294,111 @@ export function mountMathEditor(host, initial = {}) {
             let offset = 0;
             for (const child of r.children) {
                 const length = child.type === 'text' ? child.text.length : 1;
+                const textSelection = child.type === 'text'
+                    ? textSelectionBounds(length, offset, selection, inheritedSelection)
+                    : undefined;
                 const highlighted = inheritedSelection ||
                     (!!selection && offset < selection.end && offset + length > selection.start);
                 offset += length;
                 if (child.type === 'text') {
-                    const boundary = !child.text && r.children.length > 1;
-                    const run = element('span', `me-run${child.text ? '' : ' me-empty'}${boundary ? ' me-empty-boundary' : ''}`);
-                    run.dataset.runId = child.id;
-                    run.dataset.value = child.text;
-                    const mirror = element('span', 'me-measure', child.text || (boundary ? '' : '□'));
-                    mirror.setAttribute('aria-hidden', 'true');
-                    run.append(mirror);
-                    const active = editing && !snapshot.range && state.caret.id === child.id;
-                    if (active) {
-                        const input = element('input', 'me-input');
-                        input.value = child.text;
-                        input.placeholder = '□';
-                        input.setAttribute('aria-label', name);
-                        input.setAttribute('role', 'combobox');
-                        input.setAttribute('aria-expanded', 'false');
-                        input.autocomplete = 'off';
-                        input.spellcheck = false;
-                        const syncCaret = () => {
-                            if (input.isConnected && !rendering && !composing) {
-                                rendering = true;
-                                session.select({
-                                    id: child.id,
-                                    start: input.selectionStart ?? 0,
-                                    end: input.selectionEnd ?? 0,
-                                });
-                                rendering = false;
-                                drawMenu();
-                            }
-                        };
-                        input.onselect = syncCaret;
-                        input.onkeyup = syncCaret;
-                        input.oninput = () => {
-                            if (composing) {
-                                mirror.textContent = input.value || '□';
-                                return;
+                    const parts = isLiteralText(state.document, child.id)
+                        ? [{ text: child.text, start: 0, end: child.text.length, kind: 'draft' }]
+                        : tokenizeMathText(child.text);
+                    const activeIndex = tokenIndexAt(parts, state.caret.start, state.caret.affinity);
+                    for (const [index, token] of parts.entries()) {
+                        const boundary = !token.text && r.children.length > 1;
+                        const run = element('span', `me-run${token.text ? '' : ' me-empty'}${boundary ? ' me-empty-boundary' : ''}`);
+                        run.dataset.runId = child.id;
+                        run.dataset.value = token.text;
+                        run.dataset.tokenKind = token.kind;
+                        run.dataset.tokenStart = String(token.start);
+                        run.dataset.tokenEnd = String(token.end);
+                        const mirror = element('span', 'me-measure', token.text || (boundary ? '' : '□'));
+                        mirror.setAttribute('aria-hidden', 'true');
+                        run.append(mirror);
+                        const active = editing &&
+                            !snapshot.range &&
+                            !snapshot.matrixRange &&
+                            state.caret.id === child.id &&
+                            index === activeIndex;
+                        if (active) {
+                            const input = element('input', 'me-input');
+                            input.value = token.text;
+                            input.placeholder = boundary ? '' : '□';
+                            input.dataset.tokenStart = String(token.start);
+                            input.dataset.tokenEnd = String(token.end);
+                            input.setAttribute('aria-label', name);
+                            input.setAttribute('role', 'combobox');
+                            input.setAttribute('aria-expanded', 'false');
+                            input.autocomplete = 'off';
+                            input.spellcheck = false;
+                            const syncCaret = () => {
+                                if (input.isConnected && !rendering && !composing) {
+                                    rendering = true;
+                                    session.select({
+                                        id: child.id,
+                                        start: token.start + (input.selectionStart ?? 0),
+                                        end: token.start + (input.selectionEnd ?? 0),
+                                        affinity: input.selectionStart === 0 ? 'forward' : 'backward',
+                                    });
+                                    rendering = false;
+                                    drawMenu();
+                                }
+                            };
+                            const replaceToken = () => {
+                                const current = session.getSnapshot().state;
+                                const text = textNodes(current.document).find((node) => node.id === child.id).text;
+                                return setText(current, text.slice(0, token.start) + input.value + text.slice(token.end), token.start + (input.selectionStart ?? 0), token.start + (input.selectionEnd ?? 0));
+                            };
+                            input.onselect = syncCaret;
+                            input.onkeyup = syncCaret;
+                            input.oninput = () => {
+                                if (composing) {
+                                    // Do not split or replace this input before the browser commits its preedit.
+                                    mirror.textContent = input.value || '□';
+                                    return;
+                                }
+                                dismissed = '';
+                                candidateIndex = 0;
+                                apply(replaceToken());
+                            };
+                            input.addEventListener('compositionstart', () => {
+                                cancelDrag();
+                                composing = true;
+                                toolbar?.setDisabled(true);
+                                menu.hidden = true;
+                            });
+                            input.addEventListener('compositionend', () => {
+                                composing = false;
+                                toolbar?.setDisabled(false);
+                                dismissed = '';
+                                apply(replaceToken());
+                            });
+                            input.onkeydown = keydown;
+                            run.append(input);
+                        }
+                        else {
+                            const preview = element('span', 'me-preview-token');
+                            preview.setAttribute('aria-label', name);
+                            preview.setAttribute('role', 'button');
+                            preview.tabIndex = -1;
+                            const selected = textSelectionBounds(token.text.length, token.start, textSelection);
+                            if (selected) {
+                                preview.append(doc.createTextNode(token.text.slice(0, selected.start)), element('mark', 'me-range-highlight', token.text.slice(selected.start, selected.end)), doc.createTextNode(token.text.slice(selected.end)));
+                                run.dataset.rangeSelected = 'true';
                             }
-                            const next = setText(session.getSnapshot().state, input.value, input.selectionStart ?? 0, input.selectionEnd ?? 0);
-                            dismissed = '';
-                            candidateIndex = 0;
-                            apply(next);
-                        };
-                        input.addEventListener('compositionstart', () => {
-                            composing = true;
-                            menu.hidden = true;
-                        });
-                        input.addEventListener('compositionend', () => {
-                            composing = false;
-                            dismissed = '';
-                            apply(setText(session.getSnapshot().state, input.value, input.selectionStart ?? 0, input.selectionEnd ?? 0));
-                        });
-                        input.onkeydown = keydown;
-                        run.append(input);
-                    }
-                    else {
-                        const preview = element('span', 'me-preview-token');
-                        preview.setAttribute('aria-label', name);
-                        preview.setAttribute('role', 'button');
-                        preview.tabIndex = -1;
-                        for (const token of tokenizeMathText(child.text)) {
-                            const part = element('span', `me-dom-${token.kind}`, token.text || (boundary ? '' : '□'));
-                            preview.append(part);
+                            else
+                                preview.textContent = token.text || (boundary ? '' : '□');
+                            run.append(preview);
                         }
-                        if (highlighted)
-                            run.classList.add('me-dom-selected');
-                        run.append(preview);
+                        view.append(run);
                     }
-                    view.append(run);
                     continue;
                 }
                 if (isGrid(child)) {
                     const grid = element('span', 'me-matrix');
                     grid.dataset.structure = child.type;
+                    grid.dataset.matrixId = child.id;
                     grid.dataset.environment =
                         child.type === 'matrix'
                             ? child.environment
@@ -252,6 +411,10 @@ export function mountMathEditor(host, initial = {}) {
                     cells.style.gridTemplateColumns = `repeat(${child.columns},max-content)`;
                     child.slots.forEach((slot, i) => {
                         const cell = element('span', 'me-matrix-cell');
+                        cell.dataset.cellIndex = String(i);
+                        if (matrixSelection?.matrix.id === child.id && matrixSelection.indices.includes(i)) {
+                            cell.dataset.cellSelected = 'true';
+                        }
                         cell.append(renderRow(slot, labels.grid(name, child.type, i, child.columns), highlighted));
                         cells.append(cell);
                     });
@@ -341,11 +504,50 @@ export function mountMathEditor(host, initial = {}) {
         const input = currentInput();
         if (input) {
             input.focus();
-            input.setSelectionRange(state.caret.start, state.caret.end);
+            const start = Number(input.dataset.tokenStart);
+            input.setSelectionRange(state.caret.start - start, state.caret.end - start);
         }
         rendering = false;
         drawMenu();
     };
+    function matrixSelectionKey(event) {
+        const snapshot = session.getSnapshot(), selection = snapshot.matrixRange;
+        if (!selection || composing || event.isComposing)
+            return false;
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            session.execute({ type: 'matrix-select', all: true });
+            return true;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return false;
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+            event.preventDefault();
+            const next = extendMatrixRange(snapshot.state.document, selection, event.key);
+            if (event.shiftKey)
+                session.selectMatrixRange(next);
+            else {
+                editing = true;
+                session.select(focusMatrixCell(snapshot.state, next.matrixId, next.focus).caret);
+            }
+            return true;
+        }
+        if (['Escape', 'Enter', 'F2'].includes(event.key)) {
+            event.preventDefault();
+            editing = true;
+            session.selectMatrixRange();
+            render();
+            return true;
+        }
+        if (['Backspace', 'Delete'].includes(event.key) || Array.from(event.key).length === 1) {
+            event.preventDefault();
+            perform(['Backspace', 'Delete'].includes(event.key)
+                ? { type: 'matrix-clear' }
+                : { type: 'text', value: event.key });
+            return true;
+        }
+        return false;
+    }
     function keyboardSelect(event) {
         if (composing ||
             event.isComposing ||
@@ -361,11 +563,28 @@ export function mountMathEditor(host, initial = {}) {
         surface.focus();
         return true;
     }
+    function keyboardCollapse(event) {
+        if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)
+            return false;
+        const snapshot = session.getSnapshot();
+        const point = collapseKeyboardRange(snapshot.state.document, snapshot.range, event.key);
+        if (!point)
+            return false;
+        event.preventDefault();
+        editing = true;
+        session.select({ id: point.id, start: point.offset, end: point.offset });
+        return true;
+    }
     function keydown(event) {
         event.stopPropagation();
         if (event.isComposing || composing)
             return;
-        if (keyboardSelect(event))
+        if (event.altKey && event.shiftKey && event.code === 'KeyV') {
+            event.preventDefault();
+            openLatex();
+            return;
+        }
+        if (matrixSelectionKey(event) || keyboardSelect(event) || keyboardCollapse(event))
             return;
         const snapshot = session.getSnapshot(), state = snapshot.state, c = state.caret, active = textNodes(state.document).find((n) => n.id === c.id);
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
@@ -392,7 +611,9 @@ export function mountMathEditor(host, initial = {}) {
         }
         if (event.key === 'Escape') {
             event.preventDefault();
-            if (result.candidates.length) {
+            if (dismissSelectionMenu())
+                return;
+            if (!menu.hidden && result.candidates.length) {
                 dismissed = `${active.id}:${active.text}:${c.start}`;
                 drawMenu();
             }
@@ -446,10 +667,23 @@ export function mountMathEditor(host, initial = {}) {
         if (event.key === 'Tab' ||
             (!event.shiftKey &&
                 c.start === c.end &&
-                ((event.key === 'ArrowLeft' && c.start === 0) ||
-                    (event.key === 'ArrowRight' && c.end === active.text.length)))) {
+                ((event.key === 'ArrowLeft' && c.start === Number(currentInput()?.dataset.tokenStart)) ||
+                    (event.key === 'ArrowRight' && c.end === Number(currentInput()?.dataset.tokenEnd))))) {
             const direction = event.key === 'Tab' ? (event.shiftKey ? -1 : 1) : event.key === 'ArrowLeft' ? -1 : 1;
-            const next = moveCaret(state, direction);
+            const parts = isLiteralText(state.document, c.id) ? [] : tokenizeMathText(active.text);
+            const target = parts[tokenIndexAt(parts, c.start, c.affinity) + direction];
+            const offset = target && (direction > 0 ? target.start : target.end);
+            const next = target
+                ? {
+                    ...state,
+                    caret: {
+                        id: c.id,
+                        start: offset,
+                        end: offset,
+                        affinity: direction > 0 ? 'forward' : 'backward',
+                    },
+                }
+                : moveCaret(state, direction);
             if (next !== state) {
                 event.preventDefault();
                 session.select(next.caret);
@@ -462,9 +696,7 @@ export function mountMathEditor(host, initial = {}) {
         }
         if (!event.shiftKey && ['ArrowUp', 'ArrowDown'].includes(event.key)) {
             const direction = event.key === 'ArrowUp' ? -1 : 1;
-            const next = activeGrid(state)
-                ? moveMatrixVertical(state, direction)
-                : moveLineVertical(state, direction);
+            const next = moveVertical(state, direction, renderedCaretGeometry(surface));
             if (next !== state) {
                 event.preventDefault();
                 session.select(next.caret);
@@ -472,6 +704,18 @@ export function mountMathEditor(host, initial = {}) {
             return;
         }
         if (c.start === c.end && ['Backspace', 'Delete'].includes(event.key)) {
+            const input = currentInput();
+            const left = event.key === 'Backspace';
+            if ((left && c.start > 0 && c.start === Number(input?.dataset.tokenStart)) ||
+                (!left && c.end < active.text.length && c.end === Number(input?.dataset.tokenEnd))) {
+                event.preventDefault();
+                const count = left
+                    ? Array.from(active.text.slice(0, c.start)).at(-1).length
+                    : Array.from(active.text.slice(c.end))[0].length;
+                const from = c.start - (left ? count : 0);
+                apply(setText(state, active.text.slice(0, from) + active.text.slice(from + count), from));
+                return;
+            }
             const grid = gridDeletionTarget(state, event.key === 'Backspace' ? -1 : 1);
             if (grid) {
                 event.preventDefault();
@@ -506,9 +750,18 @@ export function mountMathEditor(host, initial = {}) {
         if (!best)
             return;
         const mirror = best.querySelector('.me-measure'), value = best.dataset.value;
+        // Empty caret slots have no text node for DOM Range to measure.
+        if (!value.length || !mirror.firstChild)
+            return {
+                id: best.dataset.runId,
+                offset: Number(best.dataset.tokenStart),
+                affinity: 'forward',
+            };
         let offset = 0, closest = Infinity;
-        for (let i = 0; i <= value.length; i++) {
-            const range = document.createRange();
+        let i = 0;
+        for (const character of ['', ...value]) {
+            i += character.length;
+            const range = doc.createRange();
             range.setStart(mirror.firstChild, i);
             range.collapse(true);
             const d = Math.abs(range.getBoundingClientRect().left - x);
@@ -517,57 +770,136 @@ export function mountMathEditor(host, initial = {}) {
                 offset = i;
             }
         }
-        return { id: best.dataset.runId, offset };
+        return {
+            id: best.dataset.runId,
+            offset: Number(best.dataset.tokenStart) + offset,
+            affinity: offset === 0 ? 'forward' : 'backward',
+        };
     };
     surface.onpointerdown = (event) => {
-        if (event.button || composing || event.target.closest('.me-line-number'))
-            return;
-        if (event.target instanceof HTMLInputElement)
+        if (event.button || composing || drag || event.target.closest('.me-line-number'))
             return;
         const point = pointAt(event.clientX, event.clientY);
         if (point) {
-            event.preventDefault();
+            event.stopPropagation();
+            selectionMenu.reset();
             candidateIndex = 0;
-            drag = { point, x: event.clientX, y: event.clientY, moved: false };
-            surface.setPointerCapture(event.pointerId);
+            if (event.shiftKey) {
+                const snapshot = session.getSnapshot();
+                const previous = snapshot.matrixRange;
+                const rectangle = matrixRangeBetween(snapshot.state.document, previous
+                    ? focusMatrixCell(snapshot.state, previous.matrixId, previous.anchor).caret.id
+                    : snapshot.state.caret.id, point.id);
+                if (rectangle) {
+                    event.preventDefault();
+                    editing = false;
+                    session.selectMatrixRange(rectangle);
+                    surface.focus({ preventScroll: true });
+                    return;
+                }
+            }
+            const input = event.target === currentInput() ? currentInput() : undefined;
+            const nativeAnchor = input && event.shiftKey ? nativeSelectionAnchor(input) : null;
+            drag = {
+                point: nativeAnchor !== null
+                    ? {
+                        id: input.closest('.me-run').dataset.runId,
+                        offset: Number(input.dataset.tokenStart) + nativeAnchor,
+                    }
+                    : point,
+                pointerId: event.pointerId,
+                x: event.clientX,
+                y: event.clientY,
+                moved: false,
+                input,
+            };
+            if (!input) {
+                event.preventDefault();
+                surface.setPointerCapture(event.pointerId);
+            }
         }
     };
-    surface.onpointermove = (event) => {
-        if (!drag || Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 4)
+    const movePointer = (event) => {
+        if (composing ||
+            !drag ||
+            !extendsMathSelection(drag, event, drag.input?.getBoundingClientRect()))
             return;
         const point = pointAt(event.clientX, event.clientY);
         if (point) {
+            event.preventDefault();
+            event.stopPropagation();
             drag.moved = true;
+            // Transfer capture before rendering removes the native input that began this drag.
+            surface.setPointerCapture(event.pointerId);
             editing = false;
-            session.selectRange({ anchor: drag.point, focus: point });
-            surface.focus();
+            selectedGrid = undefined;
+            const snapshot = session.getSnapshot();
+            const rectangle = dragMatrix ?? matrixRangeBetween(snapshot.state.document, drag.point.id, point.id);
+            const bounds = rectangle && resolveMatrixRange(snapshot.state.document, rectangle);
+            if (rectangle && bounds) {
+                dragMatrix = matrixPointerRange(surface, rectangle, bounds.matrix.columns, event.clientX, event.clientY);
+                session.selectMatrixRange(dragMatrix);
+            }
+            else
+                session.selectRange({ anchor: drag.point, focus: point });
+            surface.focus({ preventScroll: true });
         }
     };
-    surface.onpointerup = (event) => {
+    const endPointer = (event) => {
         const previous = drag;
-        drag = undefined;
-        if (surface.hasPointerCapture(event.pointerId))
-            surface.releasePointerCapture(event.pointerId);
-        if (previous && !previous.moved) {
+        if (!previous || previous.pointerId !== event.pointerId)
+            return;
+        cancelDrag();
+        if (previous.moved) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (!previous.input) {
             editing = true;
             session.select({
                 id: previous.point.id,
                 start: previous.point.offset,
                 end: previous.point.offset,
+                affinity: previous.point.affinity,
             });
         }
     };
-    surface.onpointercancel = () => {
-        drag = undefined;
+    const cancelPointer = (event) => {
+        if (drag?.pointerId === event.pointerId)
+            cancelDrag();
+    };
+    surface.onlostpointercapture = (event) => {
+        if (event.target === surface)
+            cancelPointer(event);
+    };
+    surface.ondragstart = (event) => {
+        // A formula drag selects model content; it must not become host HTML drag-and-drop.
+        event.preventDefault();
+        event.stopPropagation();
     };
+    doc.addEventListener('pointermove', movePointer, true);
+    doc.addEventListener('pointerup', endPointer, true);
+    doc.addEventListener('pointercancel', cancelPointer, true);
+    win.addEventListener('blur', cancelDrag);
     surface.onkeydown = (event) => {
-        if (event.target instanceof HTMLInputElement)
+        if (event.target === currentInput())
             return;
         event.stopPropagation();
-        if (keyboardSelect(event))
+        if (composing || event.isComposing)
+            return;
+        if (event.altKey && event.shiftKey && event.code === 'KeyV') {
+            event.preventDefault();
+            openLatex();
+            return;
+        }
+        if (matrixSelectionKey(event) || keyboardSelect(event) || keyboardCollapse(event))
             return;
         const snapshot = session.getSnapshot();
-        if (snapshot.range && ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
+        if (snapshot.range &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.shiftKey &&
+            (event.key === 'Enter' || (event.altKey && ['ArrowDown', 'ArrowUp'].includes(event.key)))) {
             const items = [...menu.querySelectorAll('[role="option"]')];
             if (items.length) {
                 event.preventDefault();
@@ -594,7 +926,11 @@ export function mountMathEditor(host, initial = {}) {
             perform({ type: event.shiftKey ? 'redo' : 'undo' });
         }
         else if (event.key === 'Escape') {
+            event.preventDefault();
+            if (dismissSelectionMenu())
+                return;
             session.selectRange();
+            options.onCancel?.();
         }
         else if (snapshot.range &&
             !event.metaKey &&
@@ -617,12 +953,17 @@ export function mountMathEditor(host, initial = {}) {
         }
     };
     const copy = (event, cut = false) => {
+        if (composing || !event.clipboardData)
+            return;
         const fragment = session.copy();
         if (!fragment)
             return;
         event.preventDefault();
         event.stopPropagation();
-        event.clipboardData?.setData(MATH_CLIPBOARD_TYPE, JSON.stringify(fragment));
+        const matrix = session.copyMatrix();
+        if (matrix)
+            event.clipboardData.setData(MATH_MATRIX_CLIPBOARD_TYPE, JSON.stringify(matrix));
+        event.clipboardData.setData(MATH_CLIPBOARD_TYPE, JSON.stringify(fragment));
         event.clipboardData?.setData('text/plain', toLatex(fragmentLatex(fragment)));
         if (cut)
             perform({ type: 'text', value: '' });
@@ -633,6 +974,23 @@ export function mountMathEditor(host, initial = {}) {
         if (composing)
             return;
         const data = event.clipboardData, fragment = parseFragment(data?.getData(MATH_CLIPBOARD_TYPE) ?? ''), text = data?.getData('text/plain') ?? '';
+        const matrixSource = data?.getData(MATH_MATRIX_CLIPBOARD_TYPE) ?? '';
+        const matrix = matrixSource ? parseMatrixFragment(matrixSource) : matrixFromTSV(text);
+        const snapshot = session.getSnapshot();
+        const inMatrix = !!snapshot.matrixRange || !!activeMatrix(snapshot.state);
+        if (matrixSource || (inMatrix && text.includes('\t'))) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!matrix) {
+                notify('matrix.pasteRejected');
+                return;
+            }
+            editing = true;
+            const ok = inMatrix ? session.pasteMatrix(matrix) : session.paste(matrixFragment(matrix));
+            if (!ok)
+                notify('matrix.pasteRejected');
+            return;
+        }
         if (!fragment && !text)
             return;
         event.preventDefault();
@@ -647,6 +1005,7 @@ export function mountMathEditor(host, initial = {}) {
             !composing &&
             !root.contains(event.relatedTarget) &&
             !menu.contains(event.relatedTarget)) {
+            cancelDrag();
             editing = false;
             render();
         }
@@ -659,24 +1018,39 @@ export function mountMathEditor(host, initial = {}) {
             ? mountMathToolbar(tools, session, {
                 kinds: Array.isArray(enabled) ? enabled : undefined,
                 maxItems: options.toolbarMaxItems,
+                onPasteLatex: openLatex,
+                onOpenPanel: () => {
+                    latexPanel?.destroy();
+                    latexPanel = undefined;
+                },
                 onExecute: () => {
                     editing = true;
                     render();
+                    if (session.getSnapshot().matrixRange)
+                        surface.focus();
                 },
             })
             : undefined;
+        toolbar?.setDisabled(composing);
     };
     const unsubscribe = session.subscribe((snapshot, changed) => {
+        if (changed) {
+            cancelDrag();
+            selectionMenu.reset();
+        }
         render();
         if (changed)
             options.onChange?.(snapshot.state.document, snapshot.latex);
     });
-    const reposition = () => {
+    const reposition = (event) => {
+        // Scrolling the candidate list must not rebuild it and reset its scroll position.
+        if (event.target && 'nodeType' in event.target && menu.contains(event.target))
+            return;
         if (!menu.hidden)
             drawMenu();
     };
-    window.addEventListener('resize', reposition);
-    window.addEventListener('scroll', reposition, true);
+    win.addEventListener('resize', reposition);
+    win.addEventListener('scroll', reposition, true);
     rebuildToolbar();
     render();
     return {
@@ -684,6 +1058,8 @@ export function mountMathEditor(host, initial = {}) {
         focus() {
             editing = true;
             render();
+            if (session.getSnapshot().matrixRange)
+                surface.focus();
         },
         update(next) {
             options = { ...options, ...next };
@@ -695,11 +1071,18 @@ export function mountMathEditor(host, initial = {}) {
             if (destroyed)
                 return;
             destroyed = true;
+            cancelDrag();
             unsubscribe();
+            latexPanel?.destroy();
             toolbar?.destroy();
             root.removeEventListener('focusout', blur);
-            window.removeEventListener('resize', reposition);
-            window.removeEventListener('scroll', reposition, true);
+            win.removeEventListener('resize', reposition);
+            win.removeEventListener('scroll', reposition, true);
+            doc.removeEventListener('pointermove', movePointer, true);
+            doc.removeEventListener('pointerup', endPointer, true);
+            doc.removeEventListener('pointercancel', cancelPointer, true);
+            win.removeEventListener('blur', cancelDrag);
+            stopTheme();
             menu.remove();
             root.remove();
             if (ownsSession)
@@ -707,4 +1090,3 @@ export function mountMathEditor(host, initial = {}) {
         },
     };
 }
-//# sourceMappingURL=dom.js.map