@barocss/math-editor 0.2.1 → 0.5.0

package/dist/dom/toolbar.js

@@ -1,61 +1,328 @@
-import { element } from './elements.js';
-import { translate, mathLocaleDirection } from '../i18n.js';
+import { drawPresentationControls } from './presentation-controls.js';
+import { mountQuickPanel } from './quick-panel.js';
+import { mountLatexPanel } from './latex-panel.js';
+import { elementFactory } from './elements.js';
+import { translate, mathLocaleDirection, } from '../i18n.js';
 import { mathStructures } from '../suggestions.js';
+import { mathSymbols } from '../symbols.js';
+import { resolveRange, wrappingKinds } from '../range.js';
+import { activeGrid, insertIdentityMatrix, insertMatrix, matrixEnvironments, MATRIX_MAX_SIZE, resizeMatrix, setMatrixEnvironment, } from '../matrix.js';
+import { parseToolbarMatrixPreset, toolbarTemplates } from './toolbar-catalog.js';
+import { mountSymbolPanel } from './symbol-panel.js';
 /** Independently mounted toolbar; the host may instead build any UI around session.execute(). */
 export function mountMathToolbar(host, session, options = {}) {
+    const doc = host.ownerDocument;
+    const element = elementFactory(doc);
     let expanded = false;
+    let activeSession = session;
+    let locale = options.locale ?? 'en';
+    let destroyed = false;
+    let disabled = false;
+    let quickPanel;
+    let latexPanel;
+    let symbolPanel;
     const maxItems = Math.max(0, Math.floor(Number.isFinite(options.maxItems) ? options.maxItems : 8));
+    const templates = toolbarTemplates(options.kinds);
     const toolbar = element('div', 'me-tools');
-    host.append(toolbar);
+    const gridTools = element('div', 'me-matrix-tools me-dom-grid-tools');
+    const presentation = element('div');
+    const panels = element('div', 'me-dom-toolbar-panels');
+    panels.hidden = true;
+    host.append(toolbar, gridTools, presentation, panels);
+    const closeSymbols = (restoreFocus = false) => {
+        quickPanel?.destroy();
+        quickPanel = undefined;
+        latexPanel?.destroy();
+        latexPanel = undefined;
+        symbolPanel?.destroy();
+        symbolPanel = undefined;
+        panels.hidden = true;
+        const toggle = toolbar.querySelector('[data-math-tool="symbols"]');
+        toggle?.setAttribute('aria-expanded', 'false');
+        if (restoreFocus)
+            toggle?.focus();
+    };
+    const enabled = () => !!activeSession && !disabled && !destroyed;
+    const execute = (command) => {
+        if (enabled() && activeSession.execute(command))
+            options.onExecute?.();
+    };
+    const transform = (operation) => {
+        if (!enabled())
+            return;
+        const current = activeSession.getSnapshot().state;
+        const next = operation(current);
+        if (next !== current && activeSession.apply(next))
+            options.onExecute?.();
+    };
     const draw = () => {
-        const snapshot = session.getSnapshot(), t = (text) => translate(snapshot.locale, text);
+        const snapshot = activeSession?.getSnapshot();
+        if (snapshot && (snapshot.locale !== locale || snapshot.matrixRange))
+            closeSymbols();
+        locale = snapshot?.locale ?? locale;
+        const t = (text, parameters) => translate(locale, text, parameters);
         toolbar.replaceChildren();
+        gridTools.replaceChildren();
+        gridTools.hidden = true;
         toolbar.setAttribute('role', 'toolbar');
         toolbar.setAttribute('aria-label', t('toolbar.label'));
-        toolbar.dir = mathLocaleDirection(snapshot.locale);
+        toolbar.dir = mathLocaleDirection(locale);
+        const button = (label, action, blocked = false) => {
+            const result = element('button', '', label);
+            result.type = 'button';
+            result.disabled = !enabled() || blocked;
+            result.onmousedown = (event) => event.preventDefault();
+            result.onclick = () => {
+                if (!result.disabled && enabled())
+                    action();
+            };
+            return result;
+        };
+        const hasRange = !!snapshot?.range || !!snapshot?.matrixRange;
+        const canWrap = snapshot?.range && resolveRange(snapshot.state.document, snapshot.range)?.length === 1;
         const items = mathStructures.filter((item) => !options.kinds || options.kinds.includes(item.kind));
         for (const item of expanded ? items : items.slice(0, maxItems)) {
-            const button = element('button', '', `${item.glyph} ${t(item.label)}`);
-            button.type = 'button';
-            button.setAttribute('aria-label', t(item.label));
-            button.onmousedown = (event) => event.preventDefault();
-            button.onclick = () => {
-                session.execute({ type: 'structure', kind: item.kind });
-                options.onExecute?.();
-            };
-            toolbar.append(button);
+            const control = button(`${item.glyph} ${t(item.label)}`, () => execute({ type: 'structure', kind: item.kind }), hasRange && (!canWrap || !wrappingKinds.includes(item.kind)));
+            control.setAttribute('aria-label', t(item.label));
+            control.dataset.mathTool = item.kind;
+            toolbar.append(control);
         }
-        if (items.length > maxItems) {
+        if (expanded) {
+            const quick = button(t('quick.title'), () => {
+                options.onOpenPanel?.();
+                closeSymbols();
+                const target = activeSession;
+                panels.hidden = false;
+                quickPanel = mountQuickPanel(panels, {
+                    locale,
+                    preferences: target.preferences,
+                    allowedTemplates: templates.map((item) => item.id),
+                    onInsert: (item) => enabled() &&
+                        activeSession === target &&
+                        target.execute(item.template
+                            ? { type: 'template', id: item.template }
+                            : { type: 'text', value: item.glyph }),
+                    onClose: () => {
+                        closeSymbols();
+                        options.onExecute?.();
+                    },
+                });
+            }, !!snapshot?.matrixRange);
+            quick.dataset.mathTool = 'quick';
+            toolbar.append(quick);
+            const paste = button(t('clipboard.latexTitle'), () => {
+                options.onOpenPanel?.();
+                closeSymbols();
+                if (options.onPasteLatex) {
+                    options.onPasteLatex();
+                    return;
+                }
+                panels.hidden = false;
+                latexPanel = mountLatexPanel(panels, {
+                    locale,
+                    onInsert: (source) => activeSession.pasteLatex(source),
+                    onClose: () => {
+                        closeSymbols();
+                        options.onExecute?.();
+                    },
+                });
+            }, !!snapshot?.matrixRange);
+            paste.dataset.mathTool = 'paste-latex';
+            paste.title = t('clipboard.latexShortcut');
+            toolbar.append(paste);
+            if (!options.kinds || options.kinds.includes('matrix')) {
+                const select = element('select', 'me-matrix-size');
+                select.setAttribute('aria-label', t('matrix.preset'));
+                select.dataset.mathTool = 'matrix-preset';
+                select.disabled = !enabled() || hasRange;
+                const placeholder = element('option', '', t('matrix.presetPlaceholder'));
+                placeholder.value = '';
+                placeholder.disabled = true;
+                select.append(placeholder);
+                for (const identity of [false, true])
+                    for (const size of [2, 3, 4]) {
+                        const item = element('option', '', t(identity ? 'matrix.insertIdentity' : 'matrix.insert', {
+                            rows: size,
+                            columns: size,
+                        }));
+                        item.value = `${identity ? 'identity-' : ''}${size}`;
+                        select.append(item);
+                    }
+                select.value = '';
+                select.onchange = () => {
+                    const preset = parseToolbarMatrixPreset(select.value);
+                    select.value = '';
+                    if (preset && !select.disabled)
+                        transform((state) => (preset.identity ? insertIdentityMatrix : insertMatrix)(state, preset.size));
+                };
+                toolbar.append(select);
+            }
+            if (templates.length) {
+                const select = element('select', 'me-matrix-size');
+                select.setAttribute('aria-label', t('template.label'));
+                select.dataset.mathTool = 'template';
+                select.disabled = !enabled() || !!snapshot?.matrixRange;
+                const placeholder = element('option', '', t('template.placeholder'));
+                placeholder.value = '';
+                placeholder.disabled = true;
+                select.append(placeholder);
+                for (const template of templates) {
+                    const item = element('option', '', t(template.label, template.labelParameters));
+                    item.value = template.id;
+                    select.append(item);
+                }
+                select.value = '';
+                select.onchange = () => {
+                    const id = select.value;
+                    select.value = '';
+                    if (!select.disabled && templates.some((template) => template.id === id))
+                        execute({ type: 'template', id });
+                };
+                toolbar.append(select);
+            }
+            const symbols = button(t('symbols.title'), () => {
+                if (symbolPanel) {
+                    closeSymbols(true);
+                    return;
+                }
+                options.onOpenPanel?.();
+                closeSymbols();
+                const target = activeSession;
+                panels.hidden = false;
+                symbols.setAttribute('aria-expanded', 'true');
+                symbolPanel = mountSymbolPanel(panels, {
+                    locale,
+                    onClose: () => closeSymbols(true),
+                    onInsert: (glyph) => {
+                        if (activeSession !== target || !enabled())
+                            return;
+                        closeSymbols();
+                        execute({ type: 'text', value: glyph });
+                    },
+                });
+            }, !!snapshot?.matrixRange);
+            symbols.dataset.mathTool = 'symbols';
+            symbols.setAttribute('aria-expanded', String(!!symbolPanel));
+            toolbar.append(symbols);
+            for (const glyph of ['α', 'β', 'π', 'θ', '∞']) {
+                const item = mathSymbols.find((symbol) => symbol[0] === glyph);
+                const control = button(glyph, () => execute({ type: 'text', value: glyph }), !!snapshot?.matrixRange);
+                control.setAttribute('aria-label', t(item[1]));
+                toolbar.append(control);
+            }
+        }
+        // More also reveals discovery controls when all allowed structures already fit.
+        {
             const toggle = element('button', 'me-toolbar-toggle', t(expanded ? 'toolbar.less' : 'toolbar.more'));
             toggle.type = 'button';
             toggle.setAttribute('aria-expanded', String(expanded));
             toggle.onmousedown = (event) => event.preventDefault();
             toggle.onclick = () => {
                 expanded = !expanded;
+                if (!expanded)
+                    closeSymbols();
                 draw();
-                toolbar.querySelector('[aria-expanded]')?.focus();
+                toolbar.querySelector('.me-toolbar-toggle')?.focus();
             };
             toolbar.append(toggle);
         }
         for (const type of ['undo', 'redo']) {
-            const button = element('button', '', t(type === 'undo' ? 'history.undo' : 'history.redo'));
-            button.type = 'button';
-            button.disabled = !(type === 'undo' ? snapshot.canUndo : snapshot.canRedo);
-            button.onmousedown = (event) => event.preventDefault();
-            button.onclick = () => {
-                session.execute({ type });
-                options.onExecute?.();
-            };
-            toolbar.append(button);
+            toolbar.append(button(t(type === 'undo' ? 'history.undo' : 'history.redo'), () => execute({ type }), !(type === 'undo' ? snapshot?.canUndo : snapshot?.canRedo)));
+        }
+        if (snapshot)
+            drawPresentationControls(presentation, snapshot.state, locale, (id, change) => execute({ type: 'presentation', id, change }), !enabled() || hasRange, options.kinds);
+        else
+            presentation.hidden = true;
+        const context = snapshot && activeGrid(snapshot.state);
+        if (context && (!options.kinds || options.kinds.includes(context.matrix.type))) {
+            gridTools.hidden = false;
+            gridTools.dir = mathLocaleDirection(locale);
+            gridTools.setAttribute('role', 'toolbar');
+            gridTools.setAttribute('aria-label', t(context.matrix.type === 'matrix' ? 'matrix.edit' : 'grid.editRows'));
+            gridTools.append(element('span', '', `${context.rows} × ${context.matrix.columns}`), element('small', '', t('grid.position', { row: context.row + 1, column: context.column + 1 })));
+            const selected = hasRange || snapshot.state.caret.start !== snapshot.state.caret.end;
+            if (context.matrix.type === 'matrix') {
+                const select = element('select');
+                select.setAttribute('aria-label', t('matrix.delimiters'));
+                select.dataset.mathTool = 'matrix-delimiters';
+                select.disabled = !enabled() || selected;
+                for (const item of matrixEnvironments) {
+                    const option = element('option', '', t(item.label));
+                    option.value = item.value;
+                    select.append(option);
+                }
+                select.value = context.matrix.environment;
+                select.onchange = () => {
+                    if (!select.disabled)
+                        transform((state) => setMatrixEnvironment(state, select.value));
+                };
+                gridTools.append(select);
+                for (const [tool, label, command] of [
+                    ['matrix-select', 'matrix.selectCells', { type: 'matrix-select' }],
+                    ['matrix-select-all', 'matrix.selectAll', { type: 'matrix-select', all: true }],
+                    ['matrix-transpose', 'matrix.transpose', { type: 'matrix-transpose' }],
+                ]) {
+                    const control = button(t(label), () => execute(command), !!snapshot.range);
+                    control.dataset.mathTool = tool;
+                    gridTools.append(control);
+                }
+            }
+            for (const axis of ['row', 'column']) {
+                if (axis === 'column' && context.matrix.type !== 'matrix')
+                    continue;
+                const size = axis === 'row' ? context.rows : context.matrix.columns;
+                for (const action of ['insert', 'delete']) {
+                    const key = axis === 'row'
+                        ? action === 'insert'
+                            ? 'grid.addRow'
+                            : 'grid.deleteRow'
+                        : action === 'insert'
+                            ? 'grid.addColumn'
+                            : 'grid.deleteColumn';
+                    const control = button(t(key), () => transform((state) => resizeMatrix(state, axis, action)), selected || (action === 'insert' ? size >= MATRIX_MAX_SIZE : size <= 1));
+                    control.dataset.mathTool = `${axis}-${action}`;
+                    if (action === 'delete') {
+                        control.title = t(axis === 'row' ? 'grid.deleteRowShortcut' : 'grid.deleteColumnShortcut');
+                        control.setAttribute('aria-keyshortcuts', axis === 'row' ? 'Alt+Shift+ArrowUp' : 'Alt+Shift+ArrowLeft');
+                    }
+                    gridTools.append(control);
+                }
+            }
         }
     };
-    const unsubscribe = session.subscribe(draw);
+    let unsubscribe = activeSession?.subscribe(draw);
     draw();
     return {
+        /** Close discovery/paste panels without changing the formula or its selection. */
+        closePanels: () => closeSymbols(),
+        /** Reuse one toolbar for multiple editors without retaining previous subscriptions. */
+        setSession(next) {
+            if (destroyed)
+                return;
+            if (next !== activeSession || !next)
+                closeSymbols();
+            unsubscribe?.();
+            activeSession = next;
+            unsubscribe = next?.subscribe(draw);
+            draw();
+        },
+        /** Disable mutation controls while the attached native editor is composing. */
+        setDisabled(next) {
+            if (destroyed || disabled === next)
+                return;
+            disabled = next;
+            if (next)
+                closeSymbols();
+            draw();
+        },
         destroy() {
-            unsubscribe();
+            destroyed = true;
+            unsubscribe?.();
+            closeSymbols();
             toolbar.remove();
+            gridTools.remove();
+            presentation.remove();
+            panels.remove();
         },
     };
 }
-//# sourceMappingURL=toolbar.js.map

package/dist/dom.d.ts

@@ -1,19 +1,28 @@
+import type { MathPreferences } from './preferences.js';
 export { mountMathLatex, mountMathPreview, type MathOutput, type MathPreviewOptions, } from './outputs.js';
 export { mountMathToolbar, type MathToolbarOptions } from './dom/toolbar.js';
 import { type MathSession, type MathEditorMode } from './session.js';
 import { type MathLocale } from './i18n.js';
 import { type MathDocument, type StructureKind } from './model.js';
 export interface DOMMathEditorOptions {
+    /** Mount-only UI preferences; ignored when an external session owns the store. */
+    preferences?: MathPreferences;
     session?: MathSession;
     /** Mount-only portal container; defaults to the nearest dialog, otherwise document.body. */
     menuHost?: HTMLElement;
+    /** Keep suggestion and wrapping menus clear of host controls outside the math surface. */
+    menuAvoidElements?: () => readonly HTMLElement[];
     defaultValue?: MathDocument;
     locale?: MathLocale;
     mode?: MathEditorMode;
     toolbar?: boolean | readonly StructureKind[];
     toolbarMaxItems?: number;
+    /** Show contextual structure actions below the editing surface. Defaults to true. */
+    contextTools?: boolean;
     showLineNumbers?: boolean;
     onChange?: (document: MathDocument, latex: string) => void;
+    /** Final DOM/caret notification, including focus and selection-only updates. */
+    onRender?: () => void;
     onExit?: (direction: -1 | 1) => void;
     /** Default: block=newline, inline=commit. Suggestions always take priority. */
     enterBehavior?: 'newline' | 'commit';
@@ -30,4 +39,3 @@ export interface DOMMathEditor {
 }
 /** Native DOM renderer. No React or framework runtime is imported by this module. */
 export declare function mountMathEditor(host: HTMLElement, initial?: DOMMathEditorOptions): DOMMathEditor;
-//# sourceMappingURL=dom.d.ts.map