@barocss/math-editor 0.4.0 → 0.5.0

package/dist/dom.js

@@ -1,8 +1,13 @@
+import { mathRunSpacing } from './math-spacing.js';
+import { mathLayout } from './math-layout.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,14 +16,14 @@ 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, 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 { 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';
 /** Native DOM renderer. No React or framework runtime is imported by this module. */
@@ -37,8 +42,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');
@@ -96,7 +101,7 @@ 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);
+        const result = findStateSuggestions(state, snapshot.locale);
         if (!editing ||
             isLiteralText(state.document, state.caret.id) ||
             snapshot.range ||
@@ -262,6 +267,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 +377,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 +403,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 +466,7 @@ export function mountMathEditor(host, initial = {}) {
                                 cancelDrag();
                                 composing = true;
                                 toolbar?.setDisabled(true);
+                                renderContextFooter();
                                 menu.hidden = true;
                             });
                             input.addEventListener('compositionend', () => {
@@ -424,6 +525,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 +621,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();
     };
@@ -563,6 +678,28 @@ export function mountMathEditor(host, initial = {}) {
         surface.focus();
         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;
@@ -579,12 +716,32 @@ export function mountMathEditor(host, initial = {}) {
         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) ||
+            keyboardSelect(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 +755,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'
@@ -636,7 +796,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,
             });
@@ -704,6 +866,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)) ||
@@ -887,32 +1055,19 @@ export function mountMathEditor(host, initial = {}) {
         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) ||
+            keyboardSelect(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);
@@ -1042,15 +1197,10 @@ 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 stopPosition = followMathMenuPosition(root, () => {
         if (!menu.hidden)
             drawMenu();
-    };
-    win.addEventListener('resize', reposition);
-    win.addEventListener('scroll', reposition, true);
+    }, menu);
     rebuildToolbar();
     render();
     return {
@@ -1076,8 +1226,7 @@ export function mountMathEditor(host, initial = {}) {
             latexPanel?.destroy();
             toolbar?.destroy();
             root.removeEventListener('focusout', blur);
-            win.removeEventListener('resize', reposition);
-            win.removeEventListener('scroll', reposition, true);
+            stopPosition();
             doc.removeEventListener('pointermove', movePointer, true);
             doc.removeEventListener('pointerup', endPointer, true);
             doc.removeEventListener('pointercancel', cancelPointer, true);

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/locales/en.js

@@ -341,7 +341,19 @@ export default {
         "presentation.display": "Display size",
         "presentation.text": "Text size",
         "presentation.aboveBelow": "Above and below",
-        "presentation.side": "Beside operator"
+        "presentation.side": "Beside operator",
+        "suggestion.transform": "Change to {kind}",
+        "suggestion.transformRootDetail": "Keep the radicand. A square root requires an empty index or 2.",
+        "context.label": "Structure tools",
+        "context.current": "Editing: {kind}",
+        "context.editIndex": "Edit index",
+        "context.keyboardHint": "F6: tools · Esc: back to input",
+        "context.squareIndexRequired": "Change the index to 2 or clear it to use a square root.",
+        "context.root": "Square root",
+        "context.indexedRoot": "Indexed root",
+        "context.fenceKeyboardHint": "F6: tools · ← →: choose · Enter: apply · Esc: back to input",
+        "suggestion.transformFence": "Change brackets: {kind}",
+        "suggestion.transformFenceDetail": "Keep the enclosed formula and cursor position"
     },
     "aliases": {}
 };

package/dist/locales/en.json

@@ -340,7 +340,19 @@
         "presentation.display": "Display size",
         "presentation.text": "Text size",
         "presentation.aboveBelow": "Above and below",
-        "presentation.side": "Beside operator"
+        "presentation.side": "Beside operator",
+        "suggestion.transform": "Change to {kind}",
+        "suggestion.transformRootDetail": "Keep the radicand. A square root requires an empty index or 2.",
+        "context.label": "Structure tools",
+        "context.current": "Editing: {kind}",
+        "context.editIndex": "Edit index",
+        "context.keyboardHint": "F6: tools · Esc: back to input",
+        "context.squareIndexRequired": "Change the index to 2 or clear it to use a square root.",
+        "context.root": "Square root",
+        "context.indexedRoot": "Indexed root",
+        "context.fenceKeyboardHint": "F6: tools · ← →: choose · Enter: apply · Esc: back to input",
+        "suggestion.transformFence": "Change brackets: {kind}",
+        "suggestion.transformFenceDetail": "Keep the enclosed formula and cursor position"
     },
     "aliases": {}
 }

package/dist/locales/ko.js

@@ -341,7 +341,19 @@ export default {
         "presentation.display": "큰 표시",
         "presentation.text": "작은 표시",
         "presentation.aboveBelow": "위·아래",
-        "presentation.side": "오른쪽"
+        "presentation.side": "오른쪽",
+        "suggestion.transform": "{kind}으로 변형",
+        "suggestion.transformRootDetail": "루트 안의 수식을 유지합니다. 제곱근으로 바꾸려면 차수가 2이거나 비어 있어야 합니다.",
+        "context.label": "구조 편집 도구",
+        "context.current": "현재 구조: {kind}",
+        "context.editIndex": "차수 편집",
+        "context.keyboardHint": "F6: 도구로 이동 · Esc: 입력으로",
+        "context.squareIndexRequired": "제곱근으로 바꾸려면 차수를 2로 바꾸거나 비워 주세요.",
+        "context.root": "제곱근",
+        "context.indexedRoot": "n제곱근",
+        "context.fenceKeyboardHint": "F6: 도구로 이동 · ← →: 선택 · Enter: 적용 · Esc: 입력으로",
+        "suggestion.transformFence": "괄호 변경: {kind}",
+        "suggestion.transformFenceDetail": "안의 수식과 커서 위치를 유지합니다"
     },
     "aliases": {
         "function-sin": ["사인"],

package/dist/locales/ko.json

@@ -340,7 +340,19 @@
         "presentation.display": "큰 표시",
         "presentation.text": "작은 표시",
         "presentation.aboveBelow": "위·아래",
-        "presentation.side": "오른쪽"
+        "presentation.side": "오른쪽",
+        "suggestion.transform": "{kind}으로 변형",
+        "suggestion.transformRootDetail": "루트 안의 수식을 유지합니다. 제곱근으로 바꾸려면 차수가 2이거나 비어 있어야 합니다.",
+        "context.label": "구조 편집 도구",
+        "context.current": "현재 구조: {kind}",
+        "context.editIndex": "차수 편집",
+        "context.keyboardHint": "F6: 도구로 이동 · Esc: 입력으로",
+        "context.squareIndexRequired": "제곱근으로 바꾸려면 차수를 2로 바꾸거나 비워 주세요.",
+        "context.root": "제곱근",
+        "context.indexedRoot": "n제곱근",
+        "context.fenceKeyboardHint": "F6: 도구로 이동 · ← →: 선택 · Enter: 적용 · Esc: 입력으로",
+        "suggestion.transformFence": "괄호 변경: {kind}",
+        "suggestion.transformFenceDetail": "안의 수식과 커서 위치를 유지합니다"
     },
     "aliases": {
         "function-sin": ["사인"],

package/dist/math-editor.d.ts

@@ -28,6 +28,8 @@ export interface MathEditorProps {
     toolbar?: boolean | readonly StructureKind[];
     /** Visible structure buttons before More; defaults to 8. */
     toolbarMaxItems?: number;
+    /** Show contextual structure actions below the editing surface. Defaults to true. */
+    contextTools?: boolean;
     /** Host-owned actions rendered at the end of the main toolbar. */
     toolbarEnd?: ReactNode;
     showTokenLegend?: boolean;
@@ -43,4 +45,4 @@ export interface MathEditorProps {
     label?: string;
 }
 /** Native text fields own IME and local text selection; the tree owns structural editing. */
-export declare function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus, enterBehavior, onCommit, onCancel, showPopovers, defaultValue, excludedStructures, multiline, onChange, onExit, label, locale, showLineNumbers, toolbar, toolbarMaxItems, toolbarEnd, showTokenLegend, }: MathEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus, enterBehavior, onCommit, onCancel, showPopovers, defaultValue, excludedStructures, multiline, onChange, onExit, label, locale, showLineNumbers, toolbar, toolbarMaxItems, contextTools, toolbarEnd, showTokenLegend, }: MathEditorProps): import("react/jsx-runtime").JSX.Element;