@barocss/math-editor 0.1.0

package/dist/math-editor.js

@@ -0,0 +1,692 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createEditorLabels } from './editor-labels.js';
+import { MathEditorToolbar } from './math-editor-toolbar.js';
+import { SymbolBrowser } from './symbol-browser.js';
+import { insertTemplate } from './templates.js';
+import { translate, mathLocaleDirection, } from './i18n.js';
+import { wrapRange, wrappingKinds, copyRange, deleteRange, fragmentLatex, MATH_CLIPBOARD_TYPE, parseFragment, pasteFragment, resolveRange, } from './range.js';
+import { tokenizeMathText, tokenIndexAt } from './tokens.js';
+import { splitLine, joinPreviousLine, moveLineVertical } from './lines.js';
+import { insertIdentityMatrix, insertMatrix, activeGrid, MATRIX_MAX_SIZE, matrixEnvironments, moveMatrixVertical, resizeMatrix, setMatrixEnvironment, } from './matrix.js';
+import { createPortal } from 'react-dom';
+import { acceptSuggestion, findSuggestions, mathStructures } from './suggestions.js';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
+import { gridDeletionTarget, removeGrid, row, documentRows, isGrid, commit, createHistory, initialState, insertStructure, moveCaret, redo, setText, textNodes, toLatex, undo, unwrapPrevious, } from './model.js';
+const structures = mathStructures;
+/** Native text fields own IME and local text selection; the tree owns structural editing. */
+export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarEnd, showTokenLegend = true, }) {
+    const t = (key, parameters) => translate(locale, key, parameters);
+    const labels = createEditorLabels(locale);
+    const [history, setHistory] = useState(() => createHistory(initialState(defaultValue)));
+    const historyRef = useRef(history);
+    const [menuPosition, setMenuPosition] = useState();
+    const [symbolsOpen, setSymbolsOpen] = useState(false);
+    const [editing, setEditing] = useState(false);
+    const [range, setRange] = useState();
+    const [clipboardMessage, setClipboardMessage] = useState('');
+    const surface = useRef(null);
+    const drag = useRef(undefined);
+    const [focused, setFocused] = useState(false);
+    const [selectedGrid, setSelectedGrid] = useState();
+    const [dismissed, setDismissed] = useState('');
+    const [candidateIndex, setCandidateIndex] = useState(0);
+    const [composing, setComposing] = useState(false);
+    const compositionStart = useRef(null);
+    const compositionToken = useRef(null);
+    // Keep the active input identity stable until IME composition commits. Splitting it early loses drafts.
+    const tokensFor = (node) => {
+        const frozen = compositionToken.current;
+        if (!frozen || frozen.id !== node.id)
+            return tokenizeMathText(node.text);
+        const delta = node.text.length - frozen.length;
+        return frozen.parts.map((part, index) => {
+            const start = part.start + (index > frozen.index ? delta : 0), end = part.end + (index >= frozen.index ? delta : 0);
+            return {
+                ...part,
+                start,
+                end,
+                text: node.text.slice(start, end),
+                kind: index === frozen.index ? 'draft' : part.kind,
+            };
+        });
+    };
+    const inputs = useRef(new Map());
+    const focusNext = useRef(false);
+    const suggestionId = useId();
+    const state = history.present;
+    const matrixContext = activeGrid(state);
+    const active = textNodes(state.document).find((n) => n.id === state.caret.id);
+    const searchCaret = composing ? state.caret.end : state.caret.start;
+    const matches = findSuggestions(active.text, searchCaret, locale);
+    const query = matches.query;
+    const queryKey = `${active.id}:${searchCaret}:${query}`;
+    const candidates = editing &&
+        !symbolsOpen &&
+        !range &&
+        focused &&
+        (composing || state.caret.start === state.caret.end) &&
+        dismissed !== queryKey
+        ? matches.candidates
+        : [];
+    const selectedIndex = Math.min(candidateIndex, Math.max(0, candidates.length - 1));
+    // All React history updates pass here. Caret movement must not produce host save events.
+    const publish = (next, focus = false, notify = true) => {
+        const changed = next.present.document !== historyRef.current.present.document;
+        if (changed) {
+            setSelectedGrid(undefined);
+            setRange(undefined);
+        }
+        if (focus)
+            setEditing(true);
+        historyRef.current = next;
+        focusNext.current = focus;
+        setHistory(next);
+        if (changed && notify)
+            onChange?.(next.present.document, toLatex(next.present.document));
+    };
+    const apply = (next) => {
+        setSelectedGrid(undefined);
+        publish(commit(historyRef.current, next), true);
+    };
+    const select = (caret) => {
+        // React can emit a selection event for the old input after a structural keydown.
+        if (focusNext.current)
+            return;
+        const previous = historyRef.current.present.caret;
+        if (previous.id !== caret.id || previous.start !== caret.start || previous.end !== caret.end)
+            setSelectedGrid(undefined);
+        publish({ ...historyRef.current, present: { ...historyRef.current.present, caret } });
+    };
+    useLayoutEffect(() => {
+        if (!focusNext.current)
+            return;
+        const caret = history.present.caret;
+        const node = textNodes(history.present.document).find((n) => n.id === caret.id);
+        if (!node) {
+            focusNext.current = false;
+            return;
+        }
+        const parts = tokensFor(node), index = tokenIndexAt(parts, caret.start, caret.affinity), part = parts[index];
+        const input = inputs.current.get(`${caret.id}:${index}`);
+        input?.focus();
+        input?.setSelectionRange(Math.max(0, caret.start - part.start), Math.min(part.text.length, caret.end - part.start));
+        focusNext.current = false;
+    }, [history, editing]);
+    useLayoutEffect(() => {
+        if (!candidates.length) {
+            setMenuPosition(undefined);
+            return;
+        }
+        const position = () => {
+            const parts = tokensFor(active), index = tokenIndexAt(parts, searchCaret, state.caret.affinity);
+            const input = inputs.current.get(`${active.id}:${index}`);
+            if (!input)
+                return;
+            const rect = input.getBoundingClientRect();
+            const mirror = input.previousElementSibling;
+            let x = rect.left;
+            if (mirror?.firstChild?.nodeType === 3) {
+                const range = document.createRange();
+                range.setStart(mirror.firstChild, Math.max(0, Math.min(searchCaret - parts[index].start, mirror.textContent?.length ?? 0)));
+                range.collapse(true);
+                x = range.getBoundingClientRect().left;
+            }
+            const below = window.innerHeight - rect.bottom - 16;
+            const height = Math.min(340, candidates.length * 54 + 78, Math.max(below, rect.top - 16));
+            setMenuPosition({
+                left: Math.max(8, Math.min(x, window.innerWidth - 344)),
+                top: below >= height ? rect.bottom + 8 : Math.max(8, rect.top - height - 8),
+                maxHeight: height,
+            });
+        };
+        position();
+        window.addEventListener('resize', position);
+        window.addEventListener('scroll', position, true);
+        return () => {
+            window.removeEventListener('resize', position);
+            window.removeEventListener('scroll', position, true);
+        };
+    }, [queryKey, candidates.length, active.id]);
+    useLayoutEffect(() => {
+        document
+            .getElementById(`${suggestionId}-${selectedIndex}`)
+            ?.scrollIntoView({ block: 'nearest' });
+    }, [selectedIndex, queryKey]);
+    const choose = (index) => {
+        if (compositionStart.current || composing)
+            return;
+        const candidate = candidates[index];
+        if (!candidate)
+            return;
+        apply(acceptSuggestion(historyRef.current.present, query, candidate));
+        setCandidateIndex(0);
+        setDismissed(`${active.id}:${state.caret.start}:${query}`);
+    };
+    const navigate = (direction) => {
+        const current = historyRef.current.present;
+        const node = textNodes(current.document).find((n) => n.id === current.caret.id);
+        const parts = tokensFor(node), index = tokenIndexAt(parts, current.caret.start, current.caret.affinity);
+        const target = parts[index + direction];
+        const next = target
+            ? {
+                ...current,
+                caret: {
+                    id: node.id,
+                    start: direction > 0 ? target.start : target.end,
+                    end: direction > 0 ? target.start : target.end,
+                    affinity: direction > 0 ? 'forward' : 'backward',
+                },
+            }
+            : moveCaret(current, direction);
+        if (next === current)
+            onExit?.(direction);
+        else
+            publish({ ...historyRef.current, present: next }, true);
+        return next !== current || !!onExit;
+    };
+    const pointAt = (x, y) => {
+        const fields = [
+            ...(surface.current?.querySelectorAll('.me-run[data-run-id]') ?? []),
+        ];
+        let best, distance = Infinity;
+        for (const field of fields) {
+            const rect = field.getBoundingClientRect();
+            const d = Math.max(rect.left - x, 0, x - rect.right) ** 2 +
+                Math.max(rect.top - y, 0, y - rect.bottom) ** 2;
+            if (d < distance) {
+                best = field;
+                distance = d;
+            }
+        }
+        if (!best)
+            return;
+        const text = best.dataset.value ?? '', mirror = best.querySelector('.me-measure');
+        let index = 0, nearest = Infinity;
+        if (mirror?.firstChild?.nodeType === 3) {
+            for (let at = 0; at <= text.length; at++) {
+                const r = document.createRange();
+                r.setStart(mirror.firstChild, at);
+                r.collapse(true);
+                const d = Math.abs(r.getBoundingClientRect().left - x);
+                if (d < nearest) {
+                    nearest = d;
+                    index = at;
+                }
+            }
+        }
+        return {
+            id: best.dataset.runId,
+            offset: Number(best.dataset.tokenStart) + index,
+            affinity: text.length > 0 && index === text.length ? 'backward' : 'forward',
+        };
+    };
+    const activate = (point) => {
+        setRange(undefined);
+        setFocused(true);
+        setSelectedGrid(undefined);
+        publish({
+            ...historyRef.current,
+            present: {
+                ...historyRef.current.present,
+                caret: {
+                    id: point.id,
+                    start: point.offset,
+                    end: point.offset,
+                    affinity: point.affinity ?? 'forward',
+                },
+            },
+        }, true);
+    };
+    // Promote a pointer drag to a model range, including a drag that starts in the active input.
+    const beginPointer = (event) => {
+        if (event.button !== 0 ||
+            compositionStart.current ||
+            (event.target instanceof Element && event.target.closest('.me-line-number')))
+            return;
+        const point = pointAt(event.clientX, event.clientY);
+        if (!point)
+            return;
+        const input = event.target instanceof HTMLInputElement;
+        drag.current = { anchor: point, x: event.clientX, y: event.clientY, moving: false, input };
+        if (!input) {
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+    };
+    const movePointer = (event) => {
+        const current = drag.current;
+        if (!current || Math.hypot(event.clientX - current.x, event.clientY - current.y) < 4)
+            return;
+        const point = pointAt(event.clientX, event.clientY);
+        if (!point)
+            return;
+        const input = surface.current?.querySelector('input');
+        if (current.input && !current.moving && input) {
+            const rect = input.getBoundingClientRect();
+            if (event.clientX >= rect.left &&
+                event.clientX <= rect.right &&
+                event.clientY >= rect.top &&
+                event.clientY <= rect.bottom)
+                return;
+        }
+        event.preventDefault();
+        current.moving = true;
+        setEditing(false);
+        setRange({ anchor: current.anchor, focus: point });
+        setSelectedGrid(undefined);
+        event.currentTarget.setPointerCapture(event.pointerId);
+        event.currentTarget.focus();
+    };
+    const endPointer = (event) => {
+        const current = drag.current;
+        drag.current = undefined;
+        if (!current)
+            return;
+        if (event.currentTarget.hasPointerCapture(event.pointerId))
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        if (!current.moving && !current.input) {
+            const point = pointAt(event.clientX, event.clientY);
+            if (point)
+                activate(point);
+        }
+    };
+    const resolvedRange = range ? resolveRange(state.document, range) : undefined;
+    const selectedText = (id, start, end) => {
+        if (!resolvedRange)
+            return;
+        const visit = (r) => r.children.some((n) => (n.type === 'text' ? n.id === id : n.slots.some(visit)));
+        for (const span of resolvedRange) {
+            let at = 0;
+            for (const n of span.row.children) {
+                const size = n.type === 'text' ? n.text.length : 1;
+                if (n.type === 'text' && n.id === id && start + at < span.end && end + at > span.start)
+                    return [Math.max(start, span.start - at) - start, Math.min(end, span.end - at) - start];
+                if (n.type !== 'text' && at >= span.start && at + 1 <= span.end && n.slots.some(visit))
+                    return [0, end - start];
+                at += size;
+            }
+        }
+    };
+    // Structured clipboard data preserves editable math; plain LaTeX is the interoperability fallback.
+    const copySelection = (event, cut = false) => {
+        if (!range || compositionStart.current)
+            return;
+        const fragment = copyRange(historyRef.current.present.document, range);
+        if (!fragment)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.clipboardData.setData(MATH_CLIPBOARD_TYPE, JSON.stringify(fragment));
+        event.clipboardData.setData('text/plain', toLatex(fragmentLatex(fragment)));
+        if (cut)
+            apply(deleteRange(historyRef.current.present, range));
+        setClipboardMessage(cut ? 'clipboard.cut' : 'clipboard.copied');
+    };
+    const pasteSelection = (event) => {
+        if (compositionStart.current)
+            return;
+        const source = event.clipboardData.getData(MATH_CLIPBOARD_TYPE);
+        const fragment = source ? parseFragment(source) : undefined;
+        const text = event.clipboardData.getData('text/plain');
+        if (!fragment && !text)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const payload = fragment ?? {
+            version: 1,
+            rows: text
+                .replace(/\r\n?/g, '\n')
+                .split('\n')
+                .map((value) => row(value)),
+        };
+        const next = pasteFragment(historyRef.current.present, payload, range);
+        if (next === historyRef.current.present) {
+            setClipboardMessage('clipboard.multilineRejected');
+            return;
+        }
+        apply(next);
+        setClipboardMessage('clipboard.pasted');
+    };
+    const selectionKey = (event) => {
+        if (event.target instanceof HTMLInputElement || compositionStart.current)
+            return;
+        const current = historyRef.current.present, nodes = textNodes(current.document);
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            setRange({
+                anchor: { id: nodes[0].id, offset: 0 },
+                focus: { id: nodes.at(-1).id, offset: nodes.at(-1).text.length },
+            });
+            return;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
+            event.preventDefault();
+            publish((event.shiftKey ? redo : undo)(historyRef.current), false);
+            return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        if (range && ['Backspace', 'Delete'].includes(event.key)) {
+            event.preventDefault();
+            apply(deleteRange(current, range));
+            return;
+        }
+        if (event.key === 'Escape') {
+            setRange(undefined);
+            return;
+        }
+        if (event.key === 'Enter' || event.key === 'F2') {
+            event.preventDefault();
+            activate(range?.focus ?? { id: current.caret.id, offset: current.caret.start });
+        }
+    };
+    const selectionFragment = range ? copyRange(state.document, range) : undefined;
+    const canWrap = selectionFragment?.rows.length === 1;
+    const insertTool = (kind) => {
+        const current = historyRef.current.present;
+        const selection = range ??
+            (current.caret.start !== current.caret.end
+                ? {
+                    anchor: { id: current.caret.id, offset: current.caret.start },
+                    focus: { id: current.caret.id, offset: current.caret.end },
+                }
+                : undefined);
+        if (selection && wrappingKinds.includes(kind)) {
+            apply(wrapRange(current, selection, kind));
+            return;
+        }
+        if (range)
+            return;
+        apply(insertStructure(historyRef.current.present, kind, ['fraction', 'superscript', 'subscript'].includes(kind)));
+    };
+    // Nested slots share the same caret model. Only the active lexical token mounts an input.
+    const renderRow = (r, name, role = 'expression') => (_jsx("span", { className: "me-row", "data-math-role": role, children: r.children.map((node) => {
+            if (isGrid(node))
+                return (_jsxs("span", { className: "me-matrix", "data-selected": selectedGrid === node.id || undefined, "data-structure": node.type, "data-environment": node.type === 'matrix'
+                        ? node.environment
+                        : node.type === 'cases'
+                            ? 'Bmatrix'
+                            : 'matrix', children: [_jsx("span", { className: "me-matrix-delimiter me-matrix-left", "aria-hidden": "true" }), _jsx("span", { className: "me-matrix-grid", style: { gridTemplateColumns: `repeat(${node.columns}, max-content)` }, children: node.slots.map((cell, index) => (_jsx("span", { className: "me-matrix-cell", children: renderRow(cell, labels.grid(name, node.type, index, node.columns), 'group') }, cell.id))) }), _jsx("span", { className: "me-matrix-delimiter me-matrix-right", "aria-hidden": "true" })] }, node.id));
+            if (node.type !== 'text' && ['sum', 'product', 'integral'].includes(node.type))
+                return (_jsxs("span", { className: "me-structure me-large-operator", "data-structure": node.type, children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit", children: renderRow(node.slots[1], labels.slot(name, node.type, 1), 'upper') }), _jsx("span", { className: "me-operator-glyph", "aria-hidden": "true", children: { sum: '∑', product: '∏', integral: '∫' }[node.type] }), _jsx("span", { className: "me-limit", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), renderRow(node.slots[2], labels.slot(name, node.type, 2))] }, node.id));
+            if (node.type !== 'text')
+                return (_jsxs("span", { className: `me-structure me-${node.type}`, "data-structure": node.type, children: [['parentheses', 'brackets', 'absolute'].includes(node.type) && (_jsx("span", { className: "me-delimiter", "aria-hidden": "true", children: { parentheses: '(', brackets: '[', absolute: '|' }[node.type] })), node.type === 'root' && (_jsx("span", { "aria-hidden": "true", className: "me-radical", children: "\u221A" })), node.slots.map((slot, index) => (_jsx("span", { className: "me-slot", children: renderRow(slot, labels.slot(name, node.type, index), node.type === 'fraction'
+                                ? index === 0
+                                    ? 'numerator'
+                                    : 'denominator'
+                                : node.type === 'superscript'
+                                    ? index === 0
+                                        ? 'base'
+                                        : 'exponent'
+                                    : node.type === 'subscript'
+                                        ? index === 0
+                                            ? 'base'
+                                            : 'index'
+                                        : node.type === 'root'
+                                            ? 'radicand'
+                                            : 'group') }, slot.id))), ['parentheses', 'brackets', 'absolute'].includes(node.type) && (_jsx("span", { className: "me-delimiter", "aria-hidden": "true", children: { parentheses: ')', brackets: ']', absolute: '|' }[node.type] }))] }, node.id));
+            const parts = tokensFor(node);
+            return parts.map((token, tokenIndex) => {
+                const key = `${node.id}:${tokenIndex}`;
+                const selected = selectedText(node.id, token.start, token.end);
+                const isActive = editing &&
+                    !range &&
+                    state.caret.id === node.id &&
+                    tokenIndexAt(parts, state.caret.start, state.caret.affinity) === tokenIndex;
+                const caretFrom = (input) => ({
+                    id: node.id,
+                    start: token.start + (input.selectionStart ?? 0),
+                    end: token.start + (input.selectionEnd ?? 0),
+                    affinity: input.selectionStart === 0 ? 'forward' : 'backward',
+                });
+                const replaceToken = (input) => {
+                    const current = historyRef.current.present;
+                    const run = textNodes(current.document).find((n) => n.id === node.id);
+                    return setText({ ...current, caret: { ...current.caret, id: node.id } }, run.text.slice(0, token.start) + input.value + run.text.slice(token.end), token.start + (input.selectionStart ?? 0), token.start + (input.selectionEnd ?? 0));
+                };
+                return (_jsxs("span", { className: `me-run${!token.text ? ' me-empty' : ''}${!node.text && r.children.length > 1 ? ' me-empty-boundary' : ''}`, "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "data-token-end": token.end, "data-field-name": name, "data-value": token.text, "data-range-selected": !!selected || undefined, children: [_jsx("span", { className: "me-measure", "aria-hidden": "true", children: token.text || (r.children.length === 1 ? '□' : '') }), isActive ? (_jsx("input", { ref: (element) => {
+                                if (element)
+                                    inputs.current.set(key, element);
+                                else
+                                    inputs.current.delete(key);
+                            }, "aria-label": name, "aria-description": t({
+                                variable: 'token.variable',
+                                constant: 'token.constant',
+                                symbol: 'token.symbol',
+                                space: 'token.space',
+                                empty: 'token.empty',
+                                draft: 'token.composing',
+                            }[token.kind]), "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "aria-autocomplete": "list", "aria-controls": isActive && candidates.length ? suggestionId : undefined, "aria-expanded": isActive && candidates.length > 0, role: "combobox", "aria-activedescendant": isActive && !composing && candidates.length
+                                ? `${suggestionId}-${selectedIndex}`
+                                : undefined, className: "me-input", value: token.text, placeholder: r.children.length === 1 ? '□' : '', autoComplete: "off", spellCheck: false, onPointerDown: () => setSelectedGrid(undefined), onFocus: (event) => {
+                                setFocused(true);
+                                select(caretFrom(event.currentTarget));
+                            }, onSelect: (event) => select(caretFrom(event.currentTarget)), onCompositionStart: () => {
+                                compositionStart.current = historyRef.current;
+                                compositionToken.current = {
+                                    id: node.id,
+                                    index: tokenIndex,
+                                    length: node.text.length,
+                                    parts,
+                                };
+                                setComposing(true);
+                            }, onCompositionEnd: (event) => {
+                                const next = replaceToken(event.currentTarget);
+                                const base = compositionStart.current;
+                                compositionStart.current = null;
+                                compositionToken.current = null;
+                                setComposing(false);
+                                publish(commit(base ?? historyRef.current, next), true);
+                            }, onChange: (event) => {
+                                setSelectedGrid(undefined);
+                                const current = historyRef.current, next = replaceToken(event.currentTarget);
+                                publish(compositionStart.current
+                                    ? { ...current, present: next }
+                                    : commit(current, next), !compositionStart.current, !compositionStart.current);
+                                setCandidateIndex(0);
+                                setDismissed('');
+                            }, onKeyDown: (event) => {
+                                event.stopPropagation();
+                                if (event.nativeEvent.isComposing ||
+                                    compositionStart.current ||
+                                    event.keyCode === 229)
+                                    return;
+                                const current = historyRef.current.present;
+                                if (selectedGrid) {
+                                    if (!event.metaKey &&
+                                        !event.ctrlKey &&
+                                        !event.altKey &&
+                                        !event.shiftKey &&
+                                        ['Backspace', 'Delete'].includes(event.key)) {
+                                        event.preventDefault();
+                                        if (!event.repeat)
+                                            apply(removeGrid(current, selectedGrid));
+                                        return;
+                                    }
+                                    setSelectedGrid(undefined);
+                                    if (event.key === 'Escape') {
+                                        event.preventDefault();
+                                        return;
+                                    }
+                                }
+                                if (!event.metaKey &&
+                                    !event.ctrlKey &&
+                                    !event.altKey &&
+                                    !event.shiftKey &&
+                                    ['Backspace', 'Delete'].includes(event.key)) {
+                                    const grid = gridDeletionTarget(current, event.key === 'Backspace' ? -1 : 1);
+                                    if (grid) {
+                                        event.preventDefault();
+                                        const empty = grid.slots.every((slot) => slot.children.every((child) => child.type === 'text' && !child.text));
+                                        if (empty)
+                                            apply(removeGrid(current, grid.id));
+                                        else
+                                            setSelectedGrid(grid.id);
+                                        return;
+                                    }
+                                }
+                                if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
+                                    event.preventDefault();
+                                    publish((event.shiftKey ? redo : undo)(historyRef.current), true);
+                                    return;
+                                }
+                                if (event.altKey &&
+                                    event.shiftKey &&
+                                    !event.ctrlKey &&
+                                    !event.metaKey &&
+                                    activeGrid(current) &&
+                                    ['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+                                    event.preventDefault();
+                                    apply(resizeMatrix(current, event.key === 'ArrowUp' ? 'row' : 'column', 'delete'));
+                                    return;
+                                }
+                                if (event.ctrlKey || event.metaKey || event.altKey)
+                                    return;
+                                if (activeGrid(current) &&
+                                    event.shiftKey &&
+                                    ['Enter', ' '].includes(event.key)) {
+                                    event.preventDefault();
+                                    apply(resizeMatrix(current, event.key === 'Enter' ? 'row' : 'column', 'insert'));
+                                    return;
+                                }
+                                if (candidates.length && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                                    event.preventDefault();
+                                    setCandidateIndex((selectedIndex + (event.key === 'ArrowDown' ? 1 : candidates.length - 1)) %
+                                        candidates.length);
+                                    return;
+                                }
+                                if (event.key === 'Enter' && candidates.length) {
+                                    event.preventDefault();
+                                    choose(selectedIndex);
+                                    return;
+                                }
+                                if (event.key === 'Enter') {
+                                    event.preventDefault();
+                                    if (activeGrid(current)) {
+                                        if (activeGrid(current).matrix.type !== 'matrix')
+                                            apply(resizeMatrix(current, 'row', 'insert'));
+                                    }
+                                    else
+                                        apply(splitLine(current));
+                                    return;
+                                }
+                                if (event.key === 'Escape') {
+                                    if (candidates.length)
+                                        setDismissed(queryKey);
+                                    else {
+                                        setEditing(false);
+                                        surface.current?.focus();
+                                    }
+                                    return;
+                                }
+                                if (!event.shiftKey &&
+                                    current.caret.start === current.caret.end &&
+                                    activeGrid(current) &&
+                                    ['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                                    event.preventDefault();
+                                    publish({
+                                        ...historyRef.current,
+                                        present: moveMatrixVertical(current, event.key === 'ArrowUp' ? -1 : 1),
+                                    }, true);
+                                    return;
+                                }
+                                if (!event.shiftKey &&
+                                    current.caret.start === current.caret.end &&
+                                    ['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                                    const next = moveLineVertical(current, event.key === 'ArrowUp' ? -1 : 1);
+                                    if (next !== current) {
+                                        event.preventDefault();
+                                        publish({ ...historyRef.current, present: next }, true);
+                                        return;
+                                    }
+                                }
+                                if (event.key === 'Tab') {
+                                    if (navigate(event.shiftKey ? -1 : 1))
+                                        event.preventDefault();
+                                    return;
+                                }
+                                if (event.shiftKey || current.caret.start !== current.caret.end)
+                                    return;
+                                if (event.key === 'ArrowLeft' && current.caret.start === token.start) {
+                                    if (navigate(-1))
+                                        event.preventDefault();
+                                }
+                                if (event.key === 'ArrowRight' && current.caret.end === token.end) {
+                                    if (navigate(1))
+                                        event.preventDefault();
+                                }
+                                if (event.key === 'Backspace' &&
+                                    current.caret.start === token.start &&
+                                    token.start > 0) {
+                                    event.preventDefault();
+                                    const count = Array.from(node.text.slice(0, token.start)).at(-1).length;
+                                    apply(setText(current, node.text.slice(0, token.start - count) + node.text.slice(token.start), token.start - count));
+                                    return;
+                                }
+                                if (event.key === 'Delete' &&
+                                    current.caret.end === token.end &&
+                                    token.end < node.text.length) {
+                                    event.preventDefault();
+                                    const count = Array.from(node.text.slice(token.end))[0].length;
+                                    apply(setText(current, node.text.slice(0, token.end) + node.text.slice(token.end + count), token.end));
+                                    return;
+                                }
+                                if (event.key === 'Backspace' && current.caret.start === 0) {
+                                    const joined = joinPreviousLine(current);
+                                    const next = joined !== current ? joined : unwrapPrevious(current);
+                                    if (next !== current) {
+                                        event.preventDefault();
+                                        apply(next);
+                                    }
+                                }
+                            } })) : (_jsx("span", { className: "me-preview-token", "data-token-kind": token.kind, "aria-label": name, role: "button", tabIndex: -1, children: selected && token.text ? (_jsxs("span", { children: [token.text.slice(0, selected[0]), _jsx("mark", { className: "me-range-highlight", children: token.text.slice(selected[0], selected[1]) }), token.text.slice(selected[1])] })) : (token.text || (r.children.length === 1 ? '□' : '\u200b')) }))] }, key));
+            });
+        }) }, r.id));
+    return (_jsxs("div", { className: "me-editor", onCopy: copySelection, onCut: (event) => copySelection(event, true), onPaste: pasteSelection, role: "group", lang: locale, dir: mathLocaleDirection(locale), "aria-label": label ?? t('editor.label'), onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget) &&
+                !compositionStart.current &&
+                !focusNext.current &&
+                !drag.current) {
+                setFocused(false);
+                setEditing(false);
+            }
+        }, children: [toolbar && (_jsx(MathEditorToolbar, { locale: locale, composing: composing, hasRange: !!range, canWrap: canWrap, canUndo: !!history.past.length, canRedo: !!history.future.length, symbolsOpen: symbolsOpen, onInsertStructure: insertTool, onMatrixPreset: (value) => apply(value.startsWith('identity-')
+                    ? insertIdentityMatrix(historyRef.current.present, Number(value.slice(9)))
+                    : insertMatrix(historyRef.current.present, Number(value))), onTemplate: (id) => apply(insertTemplate(historyRef.current.present, id, range)), onToggleSymbols: () => setSymbolsOpen((value) => !value), onInsertSymbol: (glyph) => {
+                    const current = historyRef.current.present, caret = current.caret;
+                    const value = textNodes(current.document).find((node) => node.id === caret.id).text;
+                    apply(setText(current, value.slice(0, caret.start) + glyph + value.slice(caret.end), caret.start + glyph.length));
+                }, onUndo: () => publish(undo(historyRef.current), true), onRedo: () => publish(redo(historyRef.current), true), children: toolbarEnd })), toolbar && symbolsOpen && (_jsx(SymbolBrowser, { locale: locale, onClose: () => {
+                    setSymbolsOpen(false);
+                    surface.current?.focus();
+                }, onInsert: (glyph) => {
+                    apply(pasteFragment(historyRef.current.present, { version: 1, rows: [row(glyph)] }, range));
+                    setSymbolsOpen(false);
+                } })), showTokenLegend && (_jsxs("div", { className: "me-token-legend", "aria-label": t('token.legend'), children: [_jsx("span", { "data-kind": "variable", children: t('token.variable') }), _jsx("span", { "data-kind": "constant", children: t('token.constant') }), _jsx("span", { "data-kind": "symbol", children: t('token.symbol') }), _jsx("small", { children: t('editor.interactionHint') })] })), clipboardMessage && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t(clipboardMessage) })), selectedGrid && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('grid.selectionHint') })), toolbar && matrixContext && (_jsxs("div", { className: "me-matrix-tools", role: "toolbar", "aria-label": t(matrixContext.matrix.type === 'matrix' ? 'matrix.edit' : 'grid.editRows'), children: [_jsxs("span", { children: [matrixContext.rows, " \u00D7 ", matrixContext.matrix.columns, ' ', _jsxs("small", { children: ["\u00B7", ' ', t('grid.position', { row: matrixContext.row + 1, column: matrixContext.column + 1 })] })] }), matrixContext.matrix.type === 'matrix' && (_jsx("select", { "aria-label": t('matrix.delimiters'), value: matrixContext.matrix.environment, disabled: composing, onChange: (event) => apply(setMatrixEnvironment(historyRef.current.present, event.target.value)), children: matrixEnvironments.map((item) => (_jsx("option", { value: item.value, children: t(item.label) }, item.value))) })), ['row', 'column']
+                        .filter((axis) => axis === 'row' || matrixContext.matrix.type === 'matrix')
+                        .flatMap((axis) => ['insert', 'delete'].map((action) => {
+                        const size = axis === 'row' ? matrixContext.rows : matrixContext.matrix.columns;
+                        return (_jsx("button", { type: "button", title: action === 'delete'
+                                ? t(axis === 'row' ? 'grid.deleteRowShortcut' : 'grid.deleteColumnShortcut')
+                                : undefined, "aria-keyshortcuts": action === 'delete'
+                                ? axis === 'row'
+                                    ? 'Alt+Shift+ArrowUp'
+                                    : 'Alt+Shift+ArrowLeft'
+                                : undefined, disabled: composing || (action === 'delete' ? size === 1 : size >= MATRIX_MAX_SIZE), onMouseDown: (event) => event.preventDefault(), onClick: () => apply(resizeMatrix(historyRef.current.present, axis, action)), children: t(axis === 'row'
+                                ? action === 'insert'
+                                    ? 'grid.addRow'
+                                    : 'grid.deleteRow'
+                                : action === 'insert'
+                                    ? 'grid.addColumn'
+                                    : 'grid.deleteColumn') }, `${axis}-${action}`));
+                    })), _jsx("small", { children: matrixContext.matrix.type === 'matrix'
+                            ? t('matrix.keyboardHint')
+                            : `${t(matrixContext.matrix.type === 'aligned' ? 'aligned.inputHint' : 'cases.inputHint')} · ${t('grid.keyboardHint')}` })] })), candidates.length > 0 &&
+                menuPosition &&
+                createPortal(_jsxs("div", { className: "me-suggestion-panel", lang: locale, dir: mathLocaleDirection(locale), style: menuPosition, onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "me-suggestion-heading", children: [t('suggestion.create', { query }), ' ', _jsx("span", { children: t(composing ? 'suggestion.composing' : 'suggestion.keyboardHint') })] }), _jsx("div", { className: "me-suggestions", id: suggestionId, role: "listbox", "aria-label": t('suggestion.label'), children: candidates.map((c, index) => (_jsxs("button", { type: "button", id: `${suggestionId}-${index}`, role: "option", disabled: composing, "aria-selected": !composing && index === selectedIndex, onClick: () => choose(index), children: [_jsx("span", { className: "me-candidate-glyph", children: c.glyph }), _jsxs("span", { children: [_jsx("strong", { children: c.label }), _jsx("small", { children: c.detail })] })] }, c.id))) }), _jsx("div", { className: "me-suggestion-footer", children: t(composing ? 'suggestion.imeHint' : 'suggestion.keepSource') })] }), document.body), _jsx("div", { className: "me-surface", dir: "ltr", ref: surface, tabIndex: 0, "aria-label": t('selection.surface'), "data-mode": editing ? 'edit' : 'preview', onPointerDown: beginPointer, onPointerMove: movePointer, onPointerUp: endPointer, onPointerCancel: () => {
+                    drag.current = undefined;
+                }, onKeyDown: selectionKey, children: _jsx("div", { className: "me-document-lines", children: documentRows(state.document).map((line, index) => (_jsxs("div", { className: "me-document-line", children: [showLineNumbers && documentRows(state.document).length > 1 && (_jsx("span", { className: "me-line-number", "aria-hidden": "true", children: index + 1 })), renderRow(line, labels.line(index))] }, line.id))) }) }), toolbar && selectionFragment && (_jsxs("div", { className: "me-wrap-tools", role: "toolbar", "aria-label": t('selection.toolbar'), children: [_jsx("span", { children: t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired') }), structures
+                        .filter((s) => ['fraction', 'root', 'superscript', 'parentheses'].includes(s.kind))
+                        .map((s) => (_jsxs("button", { type: "button", disabled: !canWrap, onMouseDown: (event) => event.preventDefault(), onClick: () => insertTool(s.kind), "aria-label": t('selection.wrap', { kind: t(s.label) }), children: [s.glyph, " ", t(s.label)] }, s.kind)))] }))] }));
+}
+//# sourceMappingURL=math-editor.js.map