@barocss/math-editor 0.2.0 → 0.4.0

package/dist/math-editor.js

@@ -1,4 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { setMathPresentation } from './presentation.js';
+import { PresentationControls } from './presentation-controls.js';
+import { createMathPreferences } from './preferences.js';
+import { QuickPanel } from './quick-panel.js';
+import { toolbarTemplates } from './dom/toolbar-catalog.js';
+import { insertLatex } from './latex-insertion.js';
+import { LatexPastePanel } from './latex-paste-panel.js';
+import { followMathTheme } from './dom/theme.js';
+import { matrixPointerRange } from './dom/matrix-selection.js';
 import { positionMathMenu } from './dom/menu-position.js';
 import { fences } from './fences.js';
 import { parseLatex } from './latex.js';
@@ -7,26 +16,34 @@ 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 { extendKeyboardRange, collapseKeyboardRange, 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 { splitLine, joinPreviousLine } from './lines.js';
+import { moveVertical } from './vertical-navigation.js';
+import { renderedCaretGeometry } from './dom/caret-geometry.js';
+import { insertIdentityMatrix, insertMatrix, activeGrid, MATRIX_MAX_SIZE, matrixEnvironments, resizeMatrix, setMatrixEnvironment, } from './matrix.js';
+import { MATH_MATRIX_CLIPBOARD_TYPE, parseMatrixFragment, matrixFragment, matrixFromTSV, matrixRangeBetween, resolveMatrixRange, extendMatrixRange, focusMatrixCell, copyMatrixRange, clearMatrixRange, pasteMatrixFragment, transposeMatrix, } from './matrix-range.js';
 import { createPortal } from 'react-dom';
 import { acceptSuggestion, findSuggestions, mathStructures } from './suggestions.js';
 import { useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { gridDeletionTarget, removeGrid, row, documentRows, isLiteralText, 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({ apiRef, autoFocus = false, enterBehavior = 'newline', onCommit, onCancel, showPopovers = true, defaultValue, excludedStructures = [], multiline = true, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarMaxItems = 8, toolbarEnd, showTokenLegend = true, }) {
+export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus = false, enterBehavior = 'newline', onCommit, onCancel, showPopovers = true, defaultValue, excludedStructures = [], multiline = true, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarMaxItems = 8, 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 suggestionMenu = useRef(null);
     const selectionMenu = useRef(null);
+    const [ownPreferences] = useState(createMathPreferences);
+    const preferences = suppliedPreferences ?? ownPreferences;
+    const [quickOpen, setQuickOpen] = useState(false);
+    const [latexOpen, setLatexOpen] = useState(false);
     const [symbolsOpen, setSymbolsOpen] = useState(false);
     const [editing, setEditing] = useState(autoFocus);
     const [range, setRange] = useState();
+    const [matrixRange, setMatrixRange] = useState();
     const [clipboardMessage, setClipboardMessage] = useState('');
     const surface = useRef(null);
     const drag = useRef(undefined);
@@ -61,6 +78,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
     const suggestionId = useId();
     const state = history.present;
     const matrixContext = activeGrid(state);
+    const matrixSelection = matrixRange && resolveMatrixRange(state.document, matrixRange);
     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);
@@ -73,6 +91,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         !isLiteralText(state.document, state.caret.id) &&
         (composing || state.caret.start === state.caret.end) &&
         !range &&
+        !matrixRange &&
         focused &&
         (composing || state.caret.start === state.caret.end) &&
         dismissed !== queryKey
@@ -85,6 +104,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         if (changed) {
             setSelectedGrid(undefined);
             setRange(undefined);
+            setMatrixRange(undefined);
         }
         if (focus)
             setEditing(true);
@@ -98,7 +118,30 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         setSelectedGrid(undefined);
         publish(commit(historyRef.current, next), true);
     };
+    const pasteLatex = (source) => {
+        if (composing || matrixRange)
+            return {
+                ok: false,
+                source,
+                diagnostics: [
+                    {
+                        code: 'unsupported-structure',
+                        message: 'Finish composition or select one insertion point.',
+                        start: 0,
+                        end: source.length,
+                    },
+                ],
+            };
+        const result = insertLatex(historyRef.current.present, source, range, {
+            multiline,
+            excludedStructures,
+        });
+        if (result.ok)
+            apply(result.state);
+        return result;
+    };
     useImperativeHandle(apiRef, () => ({
+        pasteLatex,
         importLatex(source) {
             const result = parseLatex(source, { multiline, excludedStructures });
             if (!result.ok)
@@ -167,10 +210,14 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             if (suggestionMenu.current)
                 positionMathMenu(suggestionMenu.current, new DOMRect(x, rect.top, 0, rect.height), 340);
         };
+        const stopTheme = surface.current && suggestionMenu.current
+            ? followMathTheme(surface.current.closest('.me-editor'), suggestionMenu.current)
+            : undefined;
         position();
         window.addEventListener('resize', position);
         window.addEventListener('scroll', position, true);
         return () => {
+            stopTheme?.();
             window.removeEventListener('resize', position);
             window.removeEventListener('scroll', position, true);
         };
@@ -195,6 +242,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         if (!candidate)
             return;
         apply(acceptSuggestion(historyRef.current.present, query, candidate));
+        preferences.record(candidate.id);
         setCandidateIndex(0);
         setDismissed(`${active.id}:${state.caret.start}:${query}`);
     };
@@ -257,6 +305,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         };
     };
     const activate = (point) => {
+        setMatrixRange(undefined);
         setRange(undefined);
         setFocused(true);
         setSelectedGrid(undefined);
@@ -273,6 +322,19 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             },
         }, true);
     };
+    const selectCells = (selection) => {
+        if (!resolveMatrixRange(historyRef.current.present.document, selection))
+            return;
+        setMatrixRange(selection);
+        setRange(undefined);
+        setEditing(false);
+        setSymbolsOpen(false);
+        publish({
+            ...historyRef.current,
+            present: focusMatrixCell(historyRef.current.present, selection.matrixId, selection.focus),
+        });
+        surface.current?.focus({ preventScroll: 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 ||
@@ -282,6 +344,17 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         const point = pointAt(event.clientX, event.clientY);
         if (!point)
             return;
+        if (event.shiftKey) {
+            const current = historyRef.current.present;
+            const rectangle = matrixRangeBetween(current.document, matrixRange
+                ? focusMatrixCell(current, matrixRange.matrixId, matrixRange.anchor).caret.id
+                : current.caret.id, point.id);
+            if (rectangle) {
+                event.preventDefault();
+                selectCells(rectangle);
+                return;
+            }
+        }
         const input = event.target instanceof HTMLInputElement;
         drag.current = { anchor: point, x: event.clientX, y: event.clientY, moving: false, input };
         if (!input) {
@@ -308,10 +381,20 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         event.preventDefault();
         current.moving = true;
         setEditing(false);
-        setRange({ anchor: current.anchor, focus: point });
+        const rectangle = current.matrixRange ??
+            matrixRangeBetween(historyRef.current.present.document, current.anchor.id, point.id);
+        const bounds = rectangle && resolveMatrixRange(historyRef.current.present.document, rectangle);
+        if (rectangle && bounds) {
+            current.matrixRange = matrixPointerRange(event.currentTarget, rectangle, bounds.matrix.columns, event.clientX, event.clientY);
+            selectCells(current.matrixRange);
+        }
+        else {
+            setMatrixRange(undefined);
+            setRange({ anchor: current.anchor, focus: point });
+        }
         setSelectedGrid(undefined);
         event.currentTarget.setPointerCapture(event.pointerId);
-        event.currentTarget.focus();
+        event.currentTarget.focus({ preventScroll: true });
     };
     const endPointer = (event) => {
         const current = drag.current;
@@ -345,17 +428,24 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
     };
     // Structured clipboard data preserves editable math; plain LaTeX is the interoperability fallback.
     const copySelection = (event, cut = false) => {
-        if (!range || compositionStart.current)
+        if (compositionStart.current || (!range && !matrixRange))
             return;
-        const fragment = copyRange(historyRef.current.present.document, range);
+        const cells = matrixRange && copyMatrixRange(historyRef.current.present.document, matrixRange);
+        const fragment = cells
+            ? matrixFragment(cells)
+            : copyRange(historyRef.current.present.document, range);
         if (!fragment)
             return;
         event.preventDefault();
         event.stopPropagation();
+        if (cells)
+            event.clipboardData.setData(MATH_MATRIX_CLIPBOARD_TYPE, JSON.stringify(cells));
         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));
+            apply(matrixRange
+                ? clearMatrixRange(historyRef.current.present, matrixRange)
+                : deleteRange(historyRef.current.present, range));
         setClipboardMessage(cut ? 'clipboard.cut' : 'clipboard.copied');
     };
     const pasteSelection = (event) => {
@@ -364,6 +454,40 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         const source = event.clipboardData.getData(MATH_CLIPBOARD_TYPE);
         const fragment = source ? parseFragment(source) : undefined;
         const text = event.clipboardData.getData('text/plain');
+        const matrixSource = event.clipboardData.getData(MATH_MATRIX_CLIPBOARD_TYPE);
+        const cells = matrixSource ? parseMatrixFragment(matrixSource) : matrixFromTSV(text);
+        const current = historyRef.current.present;
+        const inMatrix = !!matrixRange || activeGrid(current)?.matrix.type === 'matrix';
+        if (matrixSource || (inMatrix && text.includes('\t'))) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!cells) {
+                setClipboardMessage('matrix.pasteRejected');
+                return;
+            }
+            const next = inMatrix
+                ? pasteMatrixFragment(current, cells, matrixRange)
+                : pasteFragment(current, matrixFragment(cells), range);
+            if (next === current)
+                setClipboardMessage('matrix.pasteRejected');
+            else {
+                apply(next);
+                setClipboardMessage('clipboard.pasted');
+            }
+            return;
+        }
+        if (matrixRange && !fragment && !text.includes('\n') && !text.includes('\r')) {
+            event.preventDefault();
+            event.stopPropagation();
+            apply(clearMatrixRange(current, matrixRange, text));
+            return;
+        }
+        if (matrixRange) {
+            event.preventDefault();
+            event.stopPropagation();
+            setClipboardMessage('matrix.pasteRejected');
+            return;
+        }
         if (!fragment && !text)
             return;
         event.preventDefault();
@@ -383,9 +507,61 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         apply(next);
         setClipboardMessage('clipboard.pasted');
     };
+    const matrixSelectionKey = (event) => {
+        if (!matrixRange || compositionStart.current || event.nativeEvent.isComposing)
+            return false;
+        const current = historyRef.current.present;
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            event.stopPropagation();
+            const matrix = resolveMatrixRange(current.document, matrixRange)?.matrix;
+            if (matrix)
+                selectCells({ matrixId: matrix.id, anchor: 0, focus: matrix.slots.length - 1 });
+            return true;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return false;
+        const arrow = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key);
+        if (arrow || ['Escape', 'Enter', 'F2'].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            const next = arrow
+                ? extendMatrixRange(current.document, matrixRange, event.key)
+                : matrixRange;
+            if (arrow && event.shiftKey)
+                selectCells(next);
+            else {
+                const caret = focusMatrixCell(current, next.matrixId, next.focus).caret;
+                activate({ id: caret.id, offset: caret.start });
+            }
+            return true;
+        }
+        if (['Delete', 'Backspace'].includes(event.key) || Array.from(event.key).length === 1) {
+            event.preventDefault();
+            event.stopPropagation();
+            apply(clearMatrixRange(current, matrixRange, ['Delete', 'Backspace'].includes(event.key) ? '' : event.key));
+            return true;
+        }
+        return false;
+    };
+    const keyboardSelect = (event) => {
+        if (!event.shiftKey ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key))
+            return false;
+        event.preventDefault();
+        setRange(extendKeyboardRange(historyRef.current.present, range, event.key));
+        setEditing(false);
+        surface.current?.focus();
+        return true;
+    };
     const selectionKey = (event) => {
         if (event.target instanceof HTMLInputElement || compositionStart.current)
             return;
+        if (matrixSelectionKey(event) || keyboardSelect(event))
+            return;
         const current = historyRef.current.present, nodes = textNodes(current.document);
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
             event.preventDefault();
@@ -400,9 +576,17 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             publish((event.shiftKey ? redo : undo)(historyRef.current), false);
             return;
         }
-        if (event.metaKey || event.ctrlKey || event.altKey)
+        if (event.metaKey || event.ctrlKey)
+            return;
+        const point = !event.altKey && collapseKeyboardRange(current.document, range, event.key);
+        if (point) {
+            event.preventDefault();
+            activate(point);
             return;
-        if (range && selectionChoices.length && ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
+        }
+        if (range &&
+            selectionChoices.length &&
+            (event.key === 'Enter' || (event.altKey && ['ArrowDown', 'ArrowUp'].includes(event.key)))) {
             event.preventDefault();
             if (event.key === 'Enter') {
                 if (canWrap)
@@ -413,6 +597,8 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                     selectionChoices.length);
             return;
         }
+        if (event.altKey)
+            return;
         // A model selection must behave like a text selection when typing resumes.
         if (range && !event.nativeEvent.isComposing && Array.from(event.key).length === 1) {
             event.preventDefault();
@@ -426,6 +612,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         }
         if (event.key === 'Escape') {
             setRange(undefined);
+            setMatrixRange(undefined);
             return;
         }
         if (event.key === 'Enter' || event.key === 'F2') {
@@ -433,13 +620,15 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             activate(range?.focus ?? { id: current.caret.id, offset: current.caret.start });
         }
     };
-    const selectedRange = range ??
-        (state.caret.start !== state.caret.end
-            ? {
-                anchor: { id: state.caret.id, offset: state.caret.start },
-                focus: { id: state.caret.id, offset: state.caret.end },
-            }
-            : undefined);
+    const selectedRange = matrixRange
+        ? undefined
+        : range ??
+            (state.caret.start !== state.caret.end
+                ? {
+                    anchor: { id: state.caret.id, offset: state.caret.start },
+                    focus: { id: state.caret.id, offset: state.caret.end },
+                }
+                : undefined);
     const selectionFragment = selectedRange ? copyRange(state.document, selectedRange) : undefined;
     const canWrap = selectionFragment?.rows.length === 1 &&
         !isLiteralText(state.document, selectedRange.anchor.id);
@@ -489,11 +678,15 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             if (rect && selectionMenu.current)
                 positionMathMenu(selectionMenu.current, rect, 340);
         };
+        const stopTheme = surface.current && selectionMenu.current
+            ? followMathTheme(surface.current.closest('.me-editor'), selectionMenu.current)
+            : undefined;
         position();
         window.addEventListener('scroll', position, true);
         window.addEventListener('resize', position);
         return () => {
             window.removeEventListener('scroll', position, true);
+            stopTheme?.();
             window.removeEventListener('resize', position);
         };
     }, [range, state.document, state.caret, showPopovers]);
@@ -509,7 +702,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             list.scrollTop += item.bottom - box.bottom;
     }, [selectionIndex]);
     const insertTool = (kind) => {
-        if (excludedStructures.includes(kind))
+        if (excludedStructures.includes(kind) || matrixRange)
             return;
         const current = historyRef.current.present;
         const selection = range ??
@@ -530,11 +723,13 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
     // 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'
+                return (_jsxs("span", { className: "me-matrix", "data-selected": selectedGrid === node.id || undefined, "data-structure": node.type, "data-matrix-id": node.id, "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));
+                            : '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", "data-cell-index": index, "data-cell-selected": (matrixSelection?.matrix.id === node.id &&
+                                    matrixSelection.indices.includes(index)) ||
+                                    undefined, 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 === 'limit' || node.type === 'limsup' || node.type === 'liminf')
                 return (_jsxs("span", { className: "me-structure me-limit-operator", "data-structure": node.type, "data-math-style": node.mathStyle, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit-glyph", "aria-hidden": "true", children: node.type === 'limit' ? 'lim' : node.type === 'limsup' ? 'lim sup' : 'lim inf' }), _jsx("span", { className: "me-limit me-slot", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), _jsx("span", { className: "me-slot", children: renderRow(node.slots[1], labels.slot(name, node.type, 1)) })] }, node.id));
             if (node.type !== 'text' &&
@@ -576,6 +771,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                 const selected = selectedText(node.id, token.start, token.end);
                 const isActive = editing &&
                     !range &&
+                    !matrixRange &&
                     state.caret.id === node.id &&
                     tokenIndexAt(parts, state.caret.start, state.caret.affinity) === tokenIndex;
                 const caretFrom = (input) => ({
@@ -636,6 +832,8 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                                     compositionStart.current ||
                                     event.keyCode === 229)
                                     return;
+                                if (matrixSelectionKey(event) || keyboardSelect(event))
+                                    return;
                                 const current = historyRef.current.present;
                                 if (selectedGrid) {
                                     if (!event.metaKey &&
@@ -756,21 +954,10 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                                     }
                                     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);
+                                    const next = moveVertical(current, event.key === 'ArrowUp' ? -1 : 1, surface.current ? renderedCaretGeometry(surface.current) : undefined);
                                     if (next !== current) {
                                         event.preventDefault();
                                         publish({ ...historyRef.current, present: next }, true);
@@ -819,7 +1006,19 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                             } })) : (_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", "data-math-editor-owner": suggestionId, onCopy: copySelection, onCut: (event) => copySelection(event, true), onPaste: pasteSelection, role: "group", lang: locale, dir: mathLocaleDirection(locale), "aria-label": label ?? t('editor.label'), onBlur: (event) => {
+    return (_jsxs("div", { className: "me-editor", "data-math-editor-owner": suggestionId, onKeyDownCapture: (event) => {
+            if (!event.nativeEvent.isComposing &&
+                !composing &&
+                event.altKey &&
+                event.shiftKey &&
+                event.code === 'KeyV') {
+                event.preventDefault();
+                event.stopPropagation();
+                setQuickOpen(false);
+                setSymbolsOpen(false);
+                setLatexOpen(true);
+            }
+        }, 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) &&
                 !suggestionMenu.current?.contains(event.relatedTarget) &&
                 !selectionMenu.current?.contains(event.relatedTarget) &&
@@ -829,19 +1028,74 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                 setFocused(false);
                 setEditing(false);
             }
-        }, children: [toolbar && (_jsx(MathEditorToolbar, { locale: locale, kinds: Array.isArray(toolbar) ? toolbar : undefined, maxItems: toolbarMaxItems, excludedStructures: excludedStructures, composing: composing, hasRange: !!range, canWrap: canWrap, canUndo: !!history.past.length, canRedo: !!history.future.length, symbolsOpen: symbolsOpen, onInsertStructure: insertTool, onMatrixPreset: (value) => apply(value.startsWith('identity-')
+        }, children: [toolbar && (_jsx(MathEditorToolbar, { locale: locale, kinds: Array.isArray(toolbar) ? toolbar : undefined, maxItems: toolbarMaxItems, excludedStructures: excludedStructures, composing: composing, hasRange: !!range || !!matrixRange, cellRange: !!matrixRange, canWrap: canWrap, canUndo: !!history.past.length, canRedo: !!history.future.length, symbolsOpen: symbolsOpen, onQuick: () => {
+                    setSymbolsOpen(false);
+                    setLatexOpen(false);
+                    setQuickOpen(true);
+                }, onPasteLatex: () => {
+                    setQuickOpen(false);
+                    setSymbolsOpen(false);
+                    setLatexOpen(true);
+                }, 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) => {
+                    : insertMatrix(historyRef.current.present, Number(value))), onTemplate: (id) => {
+                    apply(insertTemplate(historyRef.current.present, id, range));
+                    preferences.record(`template-${id}`);
+                }, onToggleSymbols: () => {
+                    setQuickOpen(false);
+                    setLatexOpen(false);
+                    setSymbolsOpen((value) => !value);
+                }, onInsertSymbol: (glyph) => {
+                    preferences.record(`symbol-${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: () => {
+                }, onUndo: () => publish(undo(historyRef.current), true), onRedo: () => publish(redo(historyRef.current), true), children: toolbarEnd })), toolbar && (_jsx(PresentationControls, { state: state, locale: locale, disabled: composing || !!range || !!matrixRange, kinds: mathStructures
+                    .filter((item) => !excludedStructures.includes(item.kind) &&
+                    (!Array.isArray(toolbar) || toolbar.includes(item.kind)))
+                    .map((item) => item.kind), onChange: (id, change) => apply(setMathPresentation(historyRef.current.present, id, change)) })), quickOpen && (_jsx(QuickPanel, { locale: locale, preferences: preferences, allowedTemplates: toolbarTemplates(mathStructures
+                    .filter((item) => !excludedStructures.includes(item.kind) &&
+                    (!Array.isArray(toolbar) || toolbar.includes(item.kind)))
+                    .map((item) => item.kind)).map((item) => item.id), onInsert: (item) => {
+                    if (composing || matrixRange)
+                        return false;
+                    const current = historyRef.current.present;
+                    const next = item.template
+                        ? insertTemplate(current, item.template, range)
+                        : pasteFragment(current, { version: 1, rows: [row(item.glyph)] }, range);
+                    if (next === current)
+                        return false;
+                    apply(next);
+                    return true;
+                }, onClose: () => {
+                    setQuickOpen(false);
+                    publish({ ...historyRef.current }, true);
+                } })), latexOpen && (_jsx(LatexPastePanel, { locale: locale, onInsert: pasteLatex, onClose: () => {
+                    setLatexOpen(false);
+                    focusNext.current = true;
+                    setEditing(true);
+                    publish({ ...historyRef.current }, true);
+                } })), toolbar && symbolsOpen && (_jsx(SymbolBrowser, { locale: locale, onClose: () => {
                     setSymbolsOpen(false);
                     surface.current?.focus();
                 }, onInsert: (glyph) => {
+                    preferences.record(`symbol-${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("span", { "data-kind": "function", children: t('token.function') }), _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']
+                } })), 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("span", { "data-kind": "function", children: t('token.function') }), _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 || !!matrixRange || !!range, 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))) })), matrixContext.matrix.type === 'matrix' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: composing || !!range, onMouseDown: (event) => event.preventDefault(), onClick: () => selectCells({
+                                    matrixId: matrixContext.matrix.id,
+                                    anchor: matrixContext.cell,
+                                    focus: matrixContext.cell,
+                                }), children: t('matrix.selectCells') }), _jsx("button", { type: "button", disabled: composing || !!range, onMouseDown: (event) => event.preventDefault(), onClick: () => selectCells({
+                                    matrixId: matrixContext.matrix.id,
+                                    anchor: 0,
+                                    focus: matrixContext.matrix.slots.length - 1,
+                                }), children: t('matrix.selectAll') }), _jsx("button", { type: "button", disabled: composing || !!range, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                                    const current = historyRef.current.present;
+                                    const next = transposeMatrix(current, matrixRange?.matrixId);
+                                    if (next !== current)
+                                        apply(next);
+                                }, children: t('matrix.transpose') })] })), ['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;
@@ -851,7 +1105,10 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                                 ? 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'
+                                : undefined, disabled: composing ||
+                                !!matrixRange ||
+                                !!range ||
+                                (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'
@@ -862,10 +1119,9 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                             ? t('matrix.keyboardHint')
                             : `${t(matrixContext.matrix.type === 'aligned' ? 'aligned.inputHint' : 'cases.inputHint')} · ${t('grid.keyboardHint')}` })] })), showPopovers &&
                 candidates.length > 0 &&
-                createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, lang: locale, dir: mathLocaleDirection(locale), ref: suggestionMenu, 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') })] }), surface.current?.closest('dialog, [role="dialog"]') ?? 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: () => {
+                createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, lang: locale, dir: mathLocaleDirection(locale), ref: suggestionMenu, onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "me-suggestion-heading", children: [_jsx("span", { className: "me-suggestion-query", 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", { className: "me-candidate-copy", 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') })] }), surface.current?.closest('dialog, [role="dialog"]') ?? 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))) }) }), showPopovers &&
+                }, 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))) }) }), matrixSelection && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('matrix.rangeHint', { rows: matrixSelection.rows, columns: matrixSelection.columns }) })), showPopovers &&
                 selectionFragment &&
-                createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, ref: selectionMenu, role: "presentation", "aria-label": t('selection.toolbar'), onKeyDown: selectionKey, children: [_jsx("div", { className: "me-suggestion-heading", children: t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired') }), _jsx("div", { className: "me-suggestions", role: "listbox", "aria-label": t('selection.toolbar'), children: selectionChoices.map((s, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === selectionIndex, disabled: !canWrap, onMouseDown: (event) => event.preventDefault(), onClick: () => insertTool(s.kind), "aria-label": t('selection.wrap', { kind: t(s.label) }), children: [_jsx("span", { className: "me-candidate-glyph", children: s.glyph }), _jsxs("span", { children: [_jsx("strong", { children: t(s.label) }), _jsx("small", { children: t(s.detail) })] })] }, s.kind))) })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body)] }));
+                createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, ref: selectionMenu, role: "presentation", "aria-label": t('selection.toolbar'), onKeyDown: selectionKey, children: [_jsx("div", { className: "me-suggestion-heading", children: t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired') }), _jsx("div", { className: "me-suggestions", role: "listbox", "aria-label": t('selection.toolbar'), children: selectionChoices.map((s, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === selectionIndex, disabled: !canWrap, onMouseDown: (event) => event.preventDefault(), onClick: () => insertTool(s.kind), "aria-label": t('selection.wrap', { kind: t(s.label) }), children: [_jsx("span", { className: "me-candidate-glyph", children: s.glyph }), _jsxs("span", { className: "me-candidate-copy", children: [_jsx("strong", { children: t(s.label) }), _jsx("small", { children: t(s.detail) })] })] }, s.kind))) })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body)] }));
 }
-//# sourceMappingURL=math-editor.js.map