@barocss/math-editor 0.4.0 → 0.6.1

package/dist/dom.js

@@ -1,8 +1,16 @@
+import { followReadableMathLayout } from './dom/readable-layout.js';
+import { attachMathHelp, requestMathHelp } from './dom/help.js';
+import { mathRunSpacing } from './math-spacing.js';
+import { mathLayout } from './math-layout.js';
+import { wrapSelectionShortcut } from './selection-shortcuts.js';
+import { transformRoot } from './root-transform.js';
+import { structureEditingContext, changeContextFence } from './context-tools.js';
+import { focusContextAction } from './dom/context-keyboard.js';
 import { mountLatexPanel } from './dom/latex-panel.js';
 import { followMathTheme, syncMathTheme } from './dom/theme.js';
 import { matrixPointerRange } from './dom/matrix-selection.js';
-import { positionMathMenu } from './dom/menu-position.js';
-import { fences } from './fences.js';
+import { positionMathMenu, followMathMenuPosition } from './dom/menu-position.js';
+import { fences, fencePairs } from './fences.js';
 import { createEditorLabels } from './editor-labels.js';
 import { mathEnterAction } from './enter-policy.js';
 export { mountMathLatex, mountMathPreview, } from './outputs.js';
@@ -11,16 +19,16 @@ import { mountMathToolbar } from './dom/toolbar.js';
 export { mountMathToolbar } from './dom/toolbar.js';
 import { createMathSession, } from './session.js';
 import { translate, mathLocaleDirection } from './i18n.js';
-import { documentRows, isLiteralText, textNodes, setText, moveCaret, unwrapPrevious, gridDeletionTarget, removeGrid, isGrid, toLatex, } from './model.js';
+import { documentRows, isLiteralText, textNodes, setText, moveCaret, unwrapPrevious, unwrapNext, unwrapEmptySlot, gridDeletionTarget, removeGrid, isGrid, toLatex, } from './model.js';
 import { activeGrid, activeMatrix, resizeMatrix } from './matrix.js';
 import { MATH_MATRIX_CLIPBOARD_TYPE, parseMatrixFragment, matrixFragment, matrixFromTSV, matrixRangeBetween, resolveMatrixRange, extendMatrixRange, focusMatrixCell, } from './matrix-range.js';
-import { joinPreviousLine } from './lines.js';
-import { moveVertical } from './vertical-navigation.js';
+import { joinPreviousLine, joinNextLine } from './lines.js';
+import { createVerticalNavigation } from './vertical-navigation.js';
 import { renderedCaretGeometry } from './dom/caret-geometry.js';
 import { extendsMathSelection, nativeSelectionAnchor, createSelectionMenuState, textSelectionBounds, } from './dom/selection.js';
-import { acceptSuggestion, findSuggestions, mathStructures } from './suggestions.js';
+import { acceptSuggestion, findStateSuggestions, mathStructures, } from './suggestions.js';
 import { tokenizeMathText, tokenIndexAt } from './tokens.js';
-import { fragmentLatex, parseFragment, MATH_CLIPBOARD_TYPE, extendKeyboardRange, collapseKeyboardRange, resolveRange, copyRange, wrappingKinds, } from './range.js';
+import { fragmentLatex, parseFragment, MATH_CLIPBOARD_TYPE, extendKeyboardRange, isTokenNavigationKey, collapseKeyboardRange, resolveRange, copyRange, wrappingKinds, } from './range.js';
 /** Native DOM renderer. No React or framework runtime is imported by this module. */
 export function mountMathEditor(host, initial = {}) {
     const doc = host.ownerDocument;
@@ -37,8 +45,8 @@ export function mountMathEditor(host, initial = {}) {
     const ownsSession = !initial.session;
     if (initial.session)
         session.configure({ locale: initial.locale, mode: initial.mode });
-    const root = element('span', 'me-editor me-dom-editor'), tools = element('span'), surface = element('span', 'me-surface'), status = element('span', 'me-dom-status');
-    root.append(tools, surface, status);
+    const root = element('span', 'me-editor me-dom-editor'), tools = element('span'), surface = element('span', 'me-surface'), status = element('span', 'me-dom-status'), contextFooter = element('span', 'me-context-footer');
+    root.append(tools, surface, contextFooter, status);
     host.append(root);
     surface.tabIndex = 0;
     surface.setAttribute('role', 'group');
@@ -70,6 +78,7 @@ export function mountMathEditor(host, initial = {}) {
             onClose: closeLatex,
         });
     };
+    const stopHelp = attachMathHelp(root, () => session.getSnapshot().locale);
     const t = (value) => translate(session.getSnapshot().locale, value);
     const currentInput = () => surface.querySelector('input');
     const cancelDrag = () => {
@@ -82,6 +91,7 @@ export function mountMathEditor(host, initial = {}) {
     const notify = (key) => {
         status.textContent = t(key);
     };
+    const verticalNavigation = createVerticalNavigation();
     const apply = (next) => {
         editing = true;
         selectedGrid = undefined;
@@ -96,13 +106,16 @@ export function mountMathEditor(host, initial = {}) {
     };
     const candidates = () => {
         const snapshot = session.getSnapshot(), state = snapshot.state, active = textNodes(state.document).find((n) => n.id === state.caret.id);
-        const result = findSuggestions(active.text, state.caret.start, snapshot.locale);
-        if (!editing ||
+        const result = findStateSuggestions(state, snapshot.locale);
+        if (options.suggestionMenu === false ||
+            !editing ||
             isLiteralText(state.document, state.caret.id) ||
             snapshot.range ||
             snapshot.matrixRange ||
             dismissed === `${active.id}:${active.text}:${state.caret.start}`)
             result.candidates = [];
+        else if (options.filterSuggestions)
+            result.candidates = [...options.filterSuggestions(result.candidates, result.query, state)];
         return result;
     };
     const choose = (index) => {
@@ -162,12 +175,18 @@ export function mountMathEditor(host, initial = {}) {
         const itemRect = option.getBoundingClientRect();
         const listRect = list.getBoundingClientRect();
         const scaleY = listRect.height / list.offsetHeight || 1;
-        if (itemRect.top < listRect.top)
-            list.scrollTop -= (listRect.top - itemRect.top) / scaleY;
-        else if (itemRect.bottom > listRect.bottom)
-            list.scrollTop += (itemRect.bottom - listRect.bottom) / scaleY;
+        list.scrollTop +=
+            (itemRect.top + itemRect.height / 2 - listRect.top) / scaleY -
+                list.clientTop -
+                list.clientHeight / 2;
     };
     const renderMenu = () => {
+        if (options.suggestionMenu === false) {
+            menu.hidden = true;
+            menu.replaceChildren();
+            currentInput()?.setAttribute('aria-expanded', 'false');
+            return;
+        }
         syncMathTheme(root, menu);
         const result = candidates(), input = currentInput();
         menu.replaceChildren();
@@ -196,8 +215,9 @@ export function mountMathEditor(host, initial = {}) {
             const list = element('div', 'me-suggestions');
             list.setAttribute('role', 'listbox');
             list.setAttribute('aria-label', t('selection.toolbar'));
-            for (const item of mathStructures.filter((item) => wrappingKinds.includes(item.kind))) {
-                const button = suggestionButton(item.glyph, t(item.label), t(item.detail));
+            for (const item of mathStructures.filter((item) => wrappingKinds.includes(item.kind) &&
+                (!options.selectionKinds || options.selectionKinds.includes(item.kind)))) {
+                const button = suggestionButton(item.glyph, t(item.kind === 'fraction' ? 'selection.asNumerator' : item.label), t(item.detail));
                 button.setAttribute('aria-selected', String(list.children.length === candidateIndex));
                 button.disabled = !canWrap;
                 button.setAttribute('aria-label', translate(snapshot.locale, 'selection.wrap', { kind: t(item.label) }));
@@ -207,6 +227,18 @@ export function mountMathEditor(host, initial = {}) {
                     perform({ type: 'structure', kind: item.kind });
                 };
                 list.append(button);
+                if (item.kind === 'fraction') {
+                    const denominator = suggestionButton('□/▧', t('selection.asDenominator'), t(item.detail));
+                    denominator.setAttribute('aria-selected', String(list.children.length === candidateIndex));
+                    denominator.setAttribute('aria-label', t('selection.asDenominator'));
+                    denominator.disabled = !canWrap;
+                    denominator.onclick = () => {
+                        if (!snapshot.range)
+                            session.selectRange(selectedRange);
+                        perform({ type: 'structure', kind: 'fraction', fractionSlot: 'denominator' });
+                    };
+                    list.append(denominator);
+                }
             }
             menu.append(list);
             const selected = surface.querySelectorAll('.me-dom-selected, .me-range-highlight');
@@ -262,6 +294,90 @@ export function mountMathEditor(host, initial = {}) {
         event.stopPropagation();
         (currentInput() ?? surface).focus();
     };
+    const renderContextFooter = () => {
+        contextFooter.replaceChildren();
+        const snapshot = session.getSnapshot();
+        const structureContext = editing && options.contextTools !== false && !snapshot.range && !snapshot.matrixRange
+            ? structureEditingContext(snapshot.state)
+            : undefined;
+        contextFooter.hidden = !structureContext;
+        if (!structureContext)
+            return;
+        contextFooter.setAttribute('role', 'group');
+        contextFooter.setAttribute('aria-label', t('context.label'));
+        const fence = structureContext.fence;
+        if (fence) {
+            const pair = fences(fence);
+            contextFooter.append(element('span', 'me-context-label', translate(snapshot.locale, 'context.current', {
+                kind: t('presentation.fence') + ' ' + pair.join(' … '),
+            })));
+            const actions = element('span', 'me-context-actions');
+            for (const [kind, pair] of Object.entries(fencePairs)) {
+                const label = t(mathStructures.find((item) => item.kind === kind).label);
+                const button = element('button', 'me-context-button', pair.join(' □ '));
+                button.type = 'button';
+                button.disabled = composing;
+                button.title = label;
+                button.setAttribute('aria-label', label);
+                button.setAttribute('aria-pressed', String(fence.type === kind));
+                button.onclick = () => {
+                    if (!composing) {
+                        apply(changeContextFence(session.getSnapshot().state, fence.id, kind));
+                        currentInput()?.focus({ preventScroll: true });
+                    }
+                };
+                actions.append(button);
+            }
+            contextFooter.append(actions, element('span', 'me-context-hint', t('context.fenceKeyboardHint')));
+            return;
+        }
+        const context = structureContext.root;
+        contextFooter.append(element('span', 'me-context-label', translate(snapshot.locale, 'context.current', { kind: t(`context.${context.kind}`) })));
+        const actions = element('span', 'me-context-actions');
+        if (context.indexCaret) {
+            const index = element('button', 'me-context-button', t('context.editIndex'));
+            index.type = 'button';
+            index.disabled = composing;
+            index.onclick = () => {
+                if (!composing)
+                    session.select(context.indexCaret);
+            };
+            actions.append(index);
+        }
+        const convert = element('button', 'me-context-button', translate(snapshot.locale, 'suggestion.transform', {
+            kind: t(`context.${context.target}`),
+        }));
+        convert.type = 'button';
+        convert.disabled = composing || !context.canTransform;
+        convert.onclick = () => {
+            if (!composing)
+                apply(transformRoot(session.getSnapshot().state, context.id, context.target));
+        };
+        actions.append(convert);
+        contextFooter.append(actions, element('span', 'me-context-hint', t(context.canTransform ? 'context.keyboardHint' : 'context.squareIndexRequired')));
+    };
+    contextFooter.onmousedown = (event) => event.preventDefault();
+    contextFooter.onkeydown = (event) => {
+        event.stopPropagation();
+        if (composing || event.isComposing)
+            return;
+        if (focusContextAction(contextFooter, event.key === 'F6' ? '' : event.key)) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Escape' || event.key === 'F6') {
+            event.preventDefault();
+            currentInput()?.focus({ preventScroll: true });
+        }
+    };
+    const focusContextFooter = (event) => {
+        if (event.key !== 'F6' || contextFooter.hidden || composing || event.isComposing)
+            return false;
+        if (!focusContextAction(contextFooter, 'F6'))
+            return false;
+        event.preventDefault();
+        return true;
+    };
     const render = () => {
         if (destroyed || composing || rendering)
             return;
@@ -288,8 +404,11 @@ export function mountMathEditor(host, initial = {}) {
             status.textContent = '';
         const selected = (r) => spans?.find((span) => span.row.id === r.id);
         const labels = createEditorLabels(snapshot.locale);
+        const layout = mathLayout(state.document, snapshot.mode);
         const renderRow = (r, name, inheritedSelection = false) => {
             const view = element('span', 'me-row');
+            const spacing = mathRunSpacing(r);
+            view.dataset.layoutStyle = layout.rows.get(r.id);
             const selection = selected(r);
             let offset = 0;
             for (const child of r.children) {
@@ -311,6 +430,14 @@ export function mountMathEditor(host, initial = {}) {
                         run.dataset.runId = child.id;
                         run.dataset.value = token.text;
                         run.dataset.tokenKind = token.kind;
+                        if (!isLiteralText(state.document, child.id)) {
+                            const gap = spacing.get(`${child.id}:${token.start}`);
+                            run.dataset.mathSpacing = 'true';
+                            run.style.setProperty('--me-space-before', String(gap?.before ?? 0));
+                            run.style.setProperty('--me-space-after', String(gap?.after ?? 0));
+                            run.style.setProperty('--me-tight-before', String(gap?.tightBefore ?? 0));
+                            run.style.setProperty('--me-tight-after', String(gap?.tightAfter ?? 0));
+                        }
                         run.dataset.tokenStart = String(token.start);
                         run.dataset.tokenEnd = String(token.end);
                         const mirror = element('span', 'me-measure', token.text || (boundary ? '' : '□'));
@@ -366,6 +493,7 @@ export function mountMathEditor(host, initial = {}) {
                                 cancelDrag();
                                 composing = true;
                                 toolbar?.setDisabled(true);
+                                renderContextFooter();
                                 menu.hidden = true;
                             });
                             input.addEventListener('compositionend', () => {
@@ -374,7 +502,12 @@ export function mountMathEditor(host, initial = {}) {
                                 dismissed = '';
                                 apply(replaceToken());
                             });
-                            input.onkeydown = keydown;
+                            input.onkeydown = (event) => {
+                                // Native arrow movement can precede select/keyup, especially during key repeat.
+                                // Read the live caret before testing token and structure boundaries.
+                                syncCaret();
+                                keydown(event);
+                            };
                             run.append(input);
                         }
                         else {
@@ -424,6 +557,19 @@ export function mountMathEditor(host, initial = {}) {
                 }
                 const structure = element('span', `me-structure me-${child.type}`);
                 structure.dataset.structure = child.type;
+                const structureSpacing = spacing.get(child.id);
+                if (structureSpacing) {
+                    structure.dataset.mathSpacing = 'true';
+                    structure.style.setProperty('--me-space-before', String(structureSpacing.before));
+                    structure.style.setProperty('--me-space-after', String(structureSpacing.after));
+                    structure.style.setProperty('--me-tight-before', String(structureSpacing.tightBefore ?? 0));
+                    structure.style.setProperty('--me-tight-after', String(structureSpacing.tightAfter ?? 0));
+                }
+                const operatorLayout = layout.operators.get(child.id);
+                if (operatorLayout) {
+                    structure.dataset.operatorStyle = operatorLayout.style;
+                    structure.dataset.layoutLimits = operatorLayout.placement;
+                }
                 if (child.mathStyle)
                     structure.dataset.mathStyle = child.mathStyle;
                 if (['limit', 'limsup', 'liminf'].includes(child.type)) {
@@ -507,6 +653,7 @@ export function mountMathEditor(host, initial = {}) {
             const start = Number(input.dataset.tokenStart);
             input.setSelectionRange(state.caret.start - start, state.caret.end - start);
         }
+        renderContextFooter();
         rendering = false;
         drawMenu();
     };
@@ -548,6 +695,38 @@ export function mountMathEditor(host, initial = {}) {
         }
         return false;
     }
+    function tokenNavigation(event) {
+        if (composing || !isTokenNavigationKey(event, win.navigator.platform))
+            return false;
+        const snapshot = session.getSnapshot();
+        if (snapshot.matrixRange)
+            return false;
+        event.preventDefault();
+        const state = snapshot.state;
+        const selection = snapshot.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);
+        if (event.shiftKey) {
+            session.selectRange(extendKeyboardRange(state, selection, event.key, 'token'));
+            surface.focus();
+        }
+        else {
+            const point = collapseKeyboardRange(state.document, selection, event.key) ??
+                extendKeyboardRange(state, undefined, event.key, 'token').focus;
+            editing = true;
+            session.select({
+                id: point.id,
+                start: point.offset,
+                end: point.offset,
+                affinity: event.key === 'ArrowLeft' ? 'forward' : 'backward',
+            });
+        }
+        return true;
+    }
     function keyboardSelect(event) {
         if (composing ||
             event.isComposing ||
@@ -563,6 +742,40 @@ export function mountMathEditor(host, initial = {}) {
         surface.focus();
         return true;
     }
+    function directSelectionKey(event) {
+        if (composing || event.isComposing)
+            return false;
+        const snapshot = session.getSnapshot();
+        const next = wrapSelectionShortcut(snapshot.state, snapshot.range, event);
+        if (!next)
+            return false;
+        event.preventDefault();
+        if (next !== snapshot.state)
+            apply(next);
+        return true;
+    }
+    function selectionMenuKey(event) {
+        if (menu.hidden ||
+            menu.dataset.kind !== 'selection' ||
+            event.shiftKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            !['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key))
+            return false;
+        const items = [...menu.querySelectorAll('[role="option"]')];
+        if (!items.length)
+            return false;
+        // The visible menu owns vertical arrows before a model range can collapse.
+        event.preventDefault();
+        if (event.key === 'Enter')
+            items[candidateIndex % items.length].click();
+        else {
+            candidateIndex =
+                (candidateIndex + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length;
+            drawMenu();
+        }
+        return true;
+    }
     function keyboardCollapse(event) {
         if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)
             return false;
@@ -576,15 +789,43 @@ export function mountMathEditor(host, initial = {}) {
         return true;
     }
     function keydown(event) {
+        if (!['ArrowUp', 'ArrowDown', 'Escape'].includes(event.key) ||
+            event.shiftKey ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey)
+            verticalNavigation.reset();
         event.stopPropagation();
         if (event.isComposing || composing)
             return;
+        if (focusContextFooter(event))
+            return;
+        if (event.altKey &&
+            !event.shiftKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            event.key === 'ArrowDown') {
+            event.preventDefault();
+            dismissed = '';
+            const result = candidates();
+            candidateIndex = Math.max(0, result.candidates.findIndex((item) => item.transformFenceId || item.transformRootId));
+            const snapshot = session.getSnapshot();
+            const active = textNodes(snapshot.state.document).find((node) => node.id === snapshot.state.caret.id);
+            operandMenuKey = `${active.id}:${active.text}:${snapshot.state.caret.start}`;
+            drawMenu();
+            return;
+        }
         if (event.altKey && event.shiftKey && event.code === 'KeyV') {
             event.preventDefault();
             openLatex();
             return;
         }
-        if (matrixSelectionKey(event) || keyboardSelect(event) || keyboardCollapse(event))
+        if (matrixSelectionKey(event) ||
+            tokenNavigation(event) ||
+            keyboardSelect(event) ||
+            directSelectionKey(event) ||
+            selectionMenuKey(event) ||
+            keyboardCollapse(event))
             return;
         const snapshot = session.getSnapshot(), state = snapshot.state, c = state.caret, active = textNodes(state.document).find((n) => n.id === c.id);
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
@@ -598,7 +839,10 @@ export function mountMathEditor(host, initial = {}) {
         if (result.candidates.length && ['ArrowDown', 'ArrowUp'].includes(event.key) && !event.altKey) {
             event.preventDefault();
             const key = `${active.id}:${active.text}:${c.start}`;
-            const initialOperandChoice = result.candidates[0]?.wrapOperand && operandMenuKey !== key;
+            const initialOperandChoice = (result.candidates[0]?.wrapOperand ||
+                result.candidates[0]?.transformRootId ||
+                result.candidates[0]?.transformFenceId) &&
+                operandMenuKey !== key;
             operandMenuKey = key;
             candidateIndex = initialOperandChoice
                 ? event.key === 'ArrowDown'
@@ -629,6 +873,17 @@ export function mountMathEditor(host, initial = {}) {
             }
             return;
         }
+        const acceptsSuggestion = event.key === 'Enter' &&
+            !event.shiftKey &&
+            result.candidates.length > 0 &&
+            ((!result.candidates[0].wrapOperand &&
+                !result.candidates[0].transformRootId &&
+                !result.candidates[0].transformFenceId) ||
+                operandMenuKey === `${active.id}:${active.text}:${c.start}`);
+        if (options.onEditKeyDown?.(event, snapshot, acceptsSuggestion)) {
+            event.preventDefault();
+            return;
+        }
         if (event.key === 'Enter') {
             event.preventDefault();
             const action = mathEnterAction({
@@ -636,7 +891,9 @@ export function mountMathEditor(host, initial = {}) {
                 behavior: options.enterBehavior,
                 shiftKey: event.shiftKey,
                 hasSuggestion: result.candidates.length > 0 &&
-                    (!result.candidates[0].wrapOperand ||
+                    ((!result.candidates[0].wrapOperand &&
+                        !result.candidates[0].transformRootId &&
+                        !result.candidates[0].transformFenceId) ||
                         operandMenuKey === `${active.id}:${active.text}:${c.start}`),
                 gridKind: activeGrid(state)?.matrix.type,
             });
@@ -657,7 +914,7 @@ export function mountMathEditor(host, initial = {}) {
         if (activeGrid(state) &&
             event.altKey &&
             event.shiftKey &&
-            ['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+            ['ArrowUp', 'Backspace'].includes(event.key)) {
             event.preventDefault();
             apply(resizeMatrix(state, event.key === 'ArrowUp' ? 'row' : 'column', 'delete'));
             return;
@@ -696,7 +953,7 @@ export function mountMathEditor(host, initial = {}) {
         }
         if (!event.shiftKey && ['ArrowUp', 'ArrowDown'].includes(event.key)) {
             const direction = event.key === 'ArrowUp' ? -1 : 1;
-            const next = moveVertical(state, direction, renderedCaretGeometry(surface));
+            const next = verticalNavigation.move(state, direction, renderedCaretGeometry(surface));
             if (next !== state) {
                 event.preventDefault();
                 session.select(next.caret);
@@ -704,6 +961,12 @@ export function mountMathEditor(host, initial = {}) {
             return;
         }
         if (c.start === c.end && ['Backspace', 'Delete'].includes(event.key)) {
+            const unwrapped = unwrapEmptySlot(state);
+            if (unwrapped !== state) {
+                event.preventDefault();
+                apply(unwrapped);
+                return;
+            }
             const input = currentInput();
             const left = event.key === 'Backspace';
             if ((left && c.start > 0 && c.start === Number(input?.dataset.tokenStart)) ||
@@ -728,6 +991,14 @@ export function mountMathEditor(host, initial = {}) {
                 }
                 return;
             }
+            if (event.key === 'Delete' && c.end === active.text.length) {
+                const joined = joinNextLine(state);
+                const next = joined !== state ? joined : unwrapNext(state);
+                if (next !== state) {
+                    event.preventDefault();
+                    apply(next);
+                }
+            }
             if (event.key === 'Backspace' && c.start === 0) {
                 const joined = joinPreviousLine(state), next = joined !== state ? joined : unwrapPrevious(state);
                 if (next !== state) {
@@ -777,6 +1048,7 @@ export function mountMathEditor(host, initial = {}) {
         };
     };
     surface.onpointerdown = (event) => {
+        verticalNavigation.reset();
         if (event.button || composing || drag || event.target.closest('.me-line-number'))
             return;
         const point = pointAt(event.clientX, event.clientY);
@@ -882,37 +1154,28 @@ export function mountMathEditor(host, initial = {}) {
     doc.addEventListener('pointercancel', cancelPointer, true);
     win.addEventListener('blur', cancelDrag);
     surface.onkeydown = (event) => {
+        if (event.target !== currentInput())
+            verticalNavigation.reset();
         if (event.target === currentInput())
             return;
         event.stopPropagation();
         if (composing || event.isComposing)
             return;
+        if (focusContextFooter(event))
+            return;
         if (event.altKey && event.shiftKey && event.code === 'KeyV') {
             event.preventDefault();
             openLatex();
             return;
         }
-        if (matrixSelectionKey(event) || keyboardSelect(event) || keyboardCollapse(event))
+        if (matrixSelectionKey(event) ||
+            tokenNavigation(event) ||
+            keyboardSelect(event) ||
+            directSelectionKey(event) ||
+            selectionMenuKey(event) ||
+            keyboardCollapse(event))
             return;
         const snapshot = session.getSnapshot();
-        if (snapshot.range &&
-            !event.ctrlKey &&
-            !event.metaKey &&
-            !event.shiftKey &&
-            (event.key === 'Enter' || (event.altKey && ['ArrowDown', 'ArrowUp'].includes(event.key)))) {
-            const items = [...menu.querySelectorAll('[role="option"]')];
-            if (items.length) {
-                event.preventDefault();
-                if (event.key === 'Enter')
-                    items[candidateIndex % items.length].click();
-                else {
-                    candidateIndex =
-                        (candidateIndex + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length;
-                    drawMenu();
-                }
-                return;
-            }
-        }
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
             event.preventDefault();
             const nodes = textNodes(snapshot.state.document);
@@ -974,6 +1237,12 @@ export function mountMathEditor(host, initial = {}) {
         if (composing)
             return;
         const data = event.clipboardData, fragment = parseFragment(data?.getData(MATH_CLIPBOARD_TYPE) ?? ''), text = data?.getData('text/plain') ?? '';
+        if (data?.getData(MATH_CLIPBOARD_TYPE) && !fragment) {
+            event.preventDefault();
+            event.stopPropagation();
+            notify('clipboard.invalid');
+            return;
+        }
         const matrixSource = data?.getData(MATH_MATRIX_CLIPBOARD_TYPE) ?? '';
         const matrix = matrixSource ? parseMatrixFragment(matrixSource) : matrixFromTSV(text);
         const snapshot = session.getSnapshot();
@@ -1034,6 +1303,8 @@ export function mountMathEditor(host, initial = {}) {
         toolbar?.setDisabled(composing);
     };
     const unsubscribe = session.subscribe((snapshot, changed) => {
+        if (changed)
+            verticalNavigation.reset();
         if (changed) {
             cancelDrag();
             selectionMenu.reset();
@@ -1042,19 +1313,19 @@ export function mountMathEditor(host, initial = {}) {
         if (changed)
             options.onChange?.(snapshot.state.document, snapshot.latex);
     });
-    const reposition = (event) => {
-        // Scrolling the candidate list must not rebuild it and reset its scroll position.
-        if (event.target && 'nodeType' in event.target && menu.contains(event.target))
-            return;
+    const stopReadableLayout = followReadableMathLayout(surface);
+    const stopPosition = followMathMenuPosition(root, () => {
         if (!menu.hidden)
             drawMenu();
-    };
-    win.addEventListener('resize', reposition);
-    win.addEventListener('scroll', reposition, true);
+    }, menu);
     rebuildToolbar();
     render();
     return {
         session,
+        showHelp() {
+            if (!destroyed)
+                requestMathHelp(root);
+        },
         focus() {
             editing = true;
             render();
@@ -1073,11 +1344,12 @@ export function mountMathEditor(host, initial = {}) {
             destroyed = true;
             cancelDrag();
             unsubscribe();
+            stopHelp();
             latexPanel?.destroy();
             toolbar?.destroy();
             root.removeEventListener('focusout', blur);
-            win.removeEventListener('resize', reposition);
-            win.removeEventListener('scroll', reposition, true);
+            stopPosition();
+            stopReadableLayout();
             doc.removeEventListener('pointermove', movePointer, true);
             doc.removeEventListener('pointerup', endPointer, true);
             doc.removeEventListener('pointercancel', cancelPointer, true);

package/dist/enter-policy.js

@@ -4,7 +4,7 @@ export function mathEnterAction(context) {
         return 'suggestion';
     if (context.gridKind && context.shiftKey)
         return 'grid-row';
-    if (context.mode === 'inline' || context.behavior === 'commit')
+    if (context.mode === 'inline' || (context.behavior === 'commit' && !context.shiftKey))
         return 'commit';
     if (context.gridKind)
         return context.gridKind === 'matrix' ? 'none' : 'grid-row';

package/dist/latex.js

@@ -391,6 +391,17 @@ class LatexParser {
             return row(command);
         if (command === 'backslash')
             return row('\\');
+        if (command === 'char') {
+            // Canonical math-mode literal caret/tilde output. This is intentionally
+            // bounded; arbitrary TeX character codes are not part of the model API.
+            this.skip();
+            const match = this.source.slice(this.at, this.end).match(/^"([0-9a-f]+)/i);
+            const code = match ? Number.parseInt(match[1], 16) : NaN;
+            if (code !== 0x5e && code !== 0x7e)
+                this.fail('unsupported-command', 'Only literal caret and tilde character codes are supported.', start);
+            this.at += match[0].length;
+            return row(String.fromCodePoint(code));
+        }
         if (command === 'textasciicircum' || command === 'textasciitilde') {
             this.skip();
             if (!this.starts('{}'))

package/dist/lines.d.ts

@@ -3,4 +3,6 @@ import { type MathState } from './model.js';
 export declare function splitLine(state: MathState): MathState;
 /** Backspace at the start of a top-level line merges it with the previous line. */
 export declare function joinPreviousLine(state: MathState): MathState;
+/** Delete at the end of a top-level line joins the following line without moving the caret. */
+export declare function joinNextLine(state: MathState): MathState;
 export declare function moveLineVertical(state: MathState, direction: -1 | 1): MathState;