@pie-lib/math-input-mathlive 1.1.5-beta.9 → 2.0.1-next.20261109072207

package/src/mf/common-styles.js

@@ -1,210 +0,0 @@
-/**
- * Shared MathLive styling.
- *
- * Replaces @pie-lib/math-input's `common-mq-styles.js`. That file was built
- * around MathQuill's `.mq-*` class names, none of which exist in MathLive
- * output, so the selectors here target MathLive's own structure instead.
- *
- * The four named groups are kept because consumers destructure them:
- *
- *   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }
- *     = mq.CommonMqStyles;   // math-toolbar/src/editor-and-pad.jsx, math-preview.jsx
- *
- * Most are intentionally near-empty: MathLive sizes scripts, radicals and
- * fences correctly on its own, so the MathQuill-era corrections are not needed.
- * They stay as documented extension points rather than being deleted, so the
- * destructuring above keeps working. The exception is the radical index, which
- * MathLive sizes to TeX metrics that read too small here - see
- * `rootIndexStyles`.
- */
-
-/**
- * Font styling. MathQuill needed explicit MathJax font families to match the
- * static renderer; MathLive ships the KaTeX fonts it renders with, so this only
- * smooths rendering and lets the host override the family.
- */
-export const commonMqFontStyles = {
-  '-webkit-font-smoothing': 'antialiased',
-  '& math-field': {
-    fontFamily: 'inherit',
-  },
-};
-
-/**
- * Long division. The MathQuill fork drew this with nested `.mq-longdiv-*`
- * elements that needed manual offsets; here it comes from the `\longdiv` macro
- * (see `PIE_MACROS`), tagged with `data-pie-macro="longdiv"`.
- */
-export const longdivStyles = {
-  '& [data-pie-macro="longdiv"]': {
-    display: 'inline-flex',
-  },
-};
-
-/**
- * How the index of a radical is sized.
- *
- * MathLive follows TeX and sets the index of `\sqrt[n]{x}` in scriptscriptstyle,
- * which it emits as an inline `font-size: 50%` on the span wrapping the index's
- * glyphs. At authoring sizes that leaves the index - on the nth-root key, and in
- * any radical the author types - too small to read next to the radicand, so it is
- * scaled up to 80% - 1.6x what MathLive asks for.
- *
- * Only that innermost span is resized. `.ML__sqrt-index` itself keeps its font
- * size on purpose: the vlist inside it tucks the index into the radical's crook
- * with em-based `top`/`height` offsets, and scaling those lifts the index clear
- * of the radical instead of just enlarging it.
- *
- * The child chain is spelled out so that nothing nested deeper inside the index
- * (a fraction's numerator, another radical) is caught by the same rule, and
- * `!important` is required because the 50% is an INLINE style.
- */
-const ROOT_INDEX_SELECTOR = '.ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*="font-size"]';
-const ROOT_INDEX_FONT_SIZE = '80%';
-
-export const rootIndexStyles = {
-  [`& ${ROOT_INDEX_SELECTOR}`]: {
-    fontSize: `${ROOT_INDEX_FONT_SIZE} !important`,
-  },
-};
-
-/**
- * The same rule as a CSS string, for a live mathfield's shadow root - see
- * `SHADOW_CSS` in mathlive-instance.js. Static markup is styled by
- * {@link rootIndexStyles}.
- */
-export const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FONT_SIZE} !important}`;
-
-/**
- * Size of the parallel sign (`\parallel`, tagged `data-pie-macro="parallel"` by
- * `PIE_MACROS`). The legacy editor enlarged it (`updateSpans` set 32px) because
- * the bars read too small next to the letters of `AB ∥ CD`; MathLive draws it at
- * the surrounding size, so it is scaled up here. Not applied to keypad labels.
- */
-const PARALLEL_SELECTOR = '[data-pie-macro="parallel"]';
-const PARALLEL_FONT_SIZE = '1.4em';
-
-export const parallelStyles = {
-  [`& ${PARALLEL_SELECTOR}`]: {
-    fontSize: PARALLEL_FONT_SIZE,
-  },
-};
-
-/** The same rule as a CSS string, for a live mathfield's shadow root. */
-export const PARALLEL_CSS = `${PARALLEL_SELECTOR}{font-size:${PARALLEL_FONT_SIZE}}`;
-
-/**
- * Superscript/subscript sizing. MathLive follows TeX metrics for scripts, so the
- * MathQuill-era corrections are gone; the radical index is the one place where a
- * TeX-correct size reads too small in the authoring UI.
- */
-export const supsubStyles = {
-  ...rootIndexStyles,
-  ...parallelStyles,
-};
-
-/** Empty placeholder boxes (answer blocks / open slots). */
-export const placeholderStyles = {
-  '& .ML__placeholder': {
-    borderBottom: '1px solid currentColor',
-    minWidth: '1em',
-  },
-  // Stand-in glyph for an empty argument slot in STATIC math (see
-  // `withVisibleEmptySlots`). Muted so it reads as "a slot goes here" rather
-  // than as part of the symbol, matching how MathQuill shaded `.mq-empty`.
-  '& [data-pie-empty]': {
-    opacity: 0.5,
-  },
-  // Stretchy accents (\overarc, \overleftrightarrow, \overrightarrow) render an
-  // <svg width="100%" preserveAspectRatio="none"> inside a `.ML__stretchy`. That
-  // span is absolutely positioned, so its immediate wrapper computes to 0px and
-  // the width has to resolve against a *positioned* ancestor. Pin that to
-  // `.ML__base`, whose width already equals the accent's content (measured:
-  // 9.85px for a 0.56em slot), so the arc spans exactly its content.
-  //
-  // Do NOT write a bare `& svg` rule instead: MathLive's own rule is
-  // descendant-scoped (`.ML__latex .ML__stretchy svg`), and a global one
-  // re-parents every svg in the subtree.
-  '& .ML__base': {
-    position: 'relative',
-  },
-  '& .ML__stretchy': {
-    position: 'absolute',
-    left: 0,
-    width: '100%',
-  },
-  // MathLive centres an accent by shifting it right half the content width -
-  // `margin-left: 0.28em` for a 0.56em slot - which assumes a glyph with its own
-  // side bearings. Over a synthetic empty slot it just pushes the arc right.
-  //
-  // `!important` is required: MathLive writes this as an INLINE style
-  // (`style="top:-3.4em;margin-left:0.28em"`), which a class cannot override.
-  //
-  // It also fixes the width. `.ML__center` is the stretchy's containing block
-  // (MathLive gives `.ML__vlist > span` position:relative), and its width is the
-  // base minus that margin - measured 9.85px - 4.93px = 4.93px, exactly half,
-  // which is why the arc came out half-width AND offset right.
-  //
-  // Scoped with `:has(.ML__stretchy)`: only stretchy accents are affected.
-  // A single-glyph accent (`\hat{x}`, `\vec{x}`) genuinely needs its centring
-  // offset, and must keep it.
-  '& .ML__center:has(.ML__stretchy)': {
-    marginLeft: '0 !important',
-  },
-};
-
-/**
- * Styling for the on-screen keyboard and any container rendering math labels.
- * Also hides MathLive's own affordances, since pie supplies its own keypad.
- */
-export const commonMqKeyboardStyles = {
-  ...commonMqFontStyles,
-  ...longdivStyles,
-  ...rootIndexStyles,
-  ...placeholderStyles,
-  touchAction: 'manipulation',
-  '& math-field': {
-    fontSize: 'inherit',
-    outline: 'none',
-  },
-  '& math-field::part(virtual-keyboard-toggle)': {
-    display: 'none',
-  },
-  '& math-field::part(menu-toggle)': {
-    display: 'none',
-  },
-};
-
-/** Everything combined - the common case for a container of math. */
-export const commonMathLiveStyles = {
-  ...commonMqFontStyles,
-  ...longdivStyles,
-  ...supsubStyles,
-  ...placeholderStyles,
-  '& math-field': {
-    fontSize: 'inherit',
-    outline: 'none',
-  },
-  '& math-field::part(virtual-keyboard-toggle)': {
-    display: 'none',
-  },
-  '& math-field::part(menu-toggle)': {
-    display: 'none',
-  },
-};
-
-export const commonKeyboardStyles = commonMqKeyboardStyles;
-
-/**
- * Default export mirrors @pie-lib/math-input's `CommonMqStyles` object so
- * existing destructuring keeps working.
- */
-export default {
-  commonMqFontStyles,
-  longdivStyles,
-  rootIndexStyles,
-  supsubStyles,
-  commonMqKeyboardStyles,
-  placeholderStyles,
-  commonMathLiveStyles,
-};

package/src/mf/index.js

@@ -1,30 +0,0 @@
-import Input from './input';
-import Static from './static';
-import CommonMqStyles, {
-  commonMathLiveStyles,
-  commonKeyboardStyles,
-  commonMqFontStyles,
-  commonMqKeyboardStyles,
-  longdivStyles,
-  rootIndexStyles,
-  parallelStyles,
-  supsubStyles,
-  placeholderStyles,
-} from './common-styles';
-
-export {
-  Input,
-  Static,
-  // Same object shape as @pie-lib/math-input's `mq.CommonMqStyles`, so
-  // `const { commonMqFontStyles, ... } = mq.CommonMqStyles` keeps working.
-  CommonMqStyles,
-  commonMathLiveStyles,
-  commonKeyboardStyles,
-  commonMqFontStyles,
-  commonMqKeyboardStyles,
-  longdivStyles,
-  rootIndexStyles,
-  parallelStyles,
-  supsubStyles,
-  placeholderStyles,
-};

package/src/mf/input.jsx

@@ -1,319 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-import {
-  loadMathLive,
-  getMacros,
-  MATH_MODE_SPACE,
-  applyShadowStyles,
-  trackPlaceholderCaret,
-} from '../mathlive-instance';
-import { toMathLive, fromMathLive, keyToAction, KEYSTROKES } from '../latex-bridge';
-
-const log = debug('pie-lib:math-input-mathlive:input');
-
-const Holder = styled('span')({
-  display: 'inline-block',
-  '& math-field': {
-    display: 'block',
-    width: '100%',
-  },
-  // MathLive ships its own virtual keyboard toggle; pie supplies its own keypad.
-  '& math-field::part(virtual-keyboard-toggle)': {
-    display: 'none',
-  },
-  '& math-field::part(menu-toggle)': {
-    display: 'none',
-  },
-});
-
-/**
- * Editable math field. Drop-in replacement for @pie-lib/math-input's `mq.Input`.
- *
- * Keeps the same imperative surface used by MathInput's keypad
- * (`write`, `command`, `keystroke`, `clear`, `focus`, `blur`) so callers do not
- * change, and the same `latex` / `onChange` props.
- */
-export class Input extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    latex: PropTypes.string,
-    onChange: PropTypes.func,
-    onClick: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    readOnly: PropTypes.bool,
-    innerRef: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-    this.holderRef = React.createRef();
-    // Tracks the last latex we emitted, so prop echoes don't reset the cursor.
-    this.lastEmitted = undefined;
-  }
-
-  async componentDidMount() {
-    // MathLive loads asynchronously, so this method resumes after an await and
-    // has to know whether it is still the current mount. React StrictMode calls
-    // mount -> unmount -> mount on the SAME instance in dev, so a boolean
-    // "unmounted" flag would latch and block the remount from ever creating a
-    // field. A generation counter identifies the live mount instead: only the
-    // newest one proceeds, and a real unmount invalidates all pending ones.
-    const generation = (this.mountGeneration = (this.mountGeneration || 0) + 1);
-    const ml = await loadMathLive();
-
-    if (generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField) {
-      return;
-    }
-
-    this.mathField = new ml.MathfieldElement({ macros: getMacros() });
-    this.mathField.value = toMathLive(this.props.latex || '');
-
-    if (this.props.readOnly) {
-      this.mathField.readOnly = true;
-    }
-
-    // pie drives input through its own keypad, so suppress MathLive's.
-    this.mathField.mathVirtualKeyboardPolicy = 'manual';
-    // Without this the spacebar does nothing: MathLive's mathModeSpace
-    // defaults to an empty string.
-    this.mathField.mathModeSpace = MATH_MODE_SPACE;
-    // After the exponent key the cursor must stay in the exponent until it is moved
-    // MathLive's `smartSuperscript` (on by
-    // default) jumps out of an empty superscript after a single digit, which breaks
-    // typing x^23 or 10^6 and is inconsistent with non-digit exponents.
-    this.mathField.smartSuperscript = false;
-
-    // The mathfield renders in shadow DOM, so page CSS cannot reach it - the
-    // stretchy-accent fix has to be injected there directly.
-    applyShadowStyles(this.mathField);
-
-    // A selected `\placeholder{}` gets no MathLive caret; draw one.
-    this.untrackCaret = trackPlaceholderCaret(this.mathField);
-
-    this.mathField.addEventListener('input', this.onInputEdit);
-
-    // Belt and braces: drop anything a previous mount may have left behind.
-    this.holderRef.current.replaceChildren(this.mathField);
-
-    if (this.props.innerRef) {
-      this.props.innerRef(this);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!this.mathField) {
-      return;
-    }
-
-    const { latex, readOnly } = this.props;
-
-    if (readOnly !== prevProps.readOnly) {
-      this.mathField.readOnly = !!readOnly;
-    }
-
-    // Only push the prop back into the field when it genuinely differs from
-    // what the field already holds. This is the analogue of the old
-    // shouldComponentUpdate latex-equality guard and prevents cursor thrash.
-    if (latex !== undefined && latex !== null && latex !== this.lastEmitted) {
-      const next = toMathLive(latex);
-
-      if (next !== this.mathField.value) {
-        this.mathField.value = next;
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    // Invalidate any mount still awaiting the MathLive load, so it does not
-    // append a field into a holder that is going away.
-    this.mountGeneration = (this.mountGeneration || 0) + 1;
-
-    if (this.untrackCaret) {
-      this.untrackCaret();
-      this.untrackCaret = undefined;
-    }
-
-    if (this.mathField) {
-      this.mathField.removeEventListener('input', this.onInputEdit);
-      this.mathField.remove();
-      this.mathField = undefined;
-    }
-
-    if (this.props.innerRef) {
-      this.props.innerRef(null);
-    }
-  }
-
-  onInputEdit = () => {
-    const { onChange } = this.props;
-
-    if (!this.mathField) {
-      return;
-    }
-
-    const latex = fromMathLive(this.mathField.getValue('latex'));
-
-    this.lastEmitted = latex;
-
-    if (onChange) {
-      onChange(latex);
-    }
-  };
-
-  /** Current latex, in stored (MathQuill-compatible) form. */
-  latex() {
-    return this.mathField ? fromMathLive(this.mathField.getValue('latex')) : '';
-  }
-
-  /**
-   * The underlying `<math-field>` element, or undefined until MathLive has
-   * finished loading. Exposed for callers that need the real element.
-   *
-   * NOTE: this is NOT a MathQuill field. Code written against
-   * `@pie-lib/math-input` often did `input.mathField.latex()`; that shape is
-   * provided by `mqCompat` below, and `latex()` on this component is the
-   * supported replacement.
-   */
-  get element() {
-    return this.mathField;
-  }
-
-  /**
-   * MathQuill-shaped facade, so existing `input.mathField.latex()` /
-   * `.el()` call sites keep working instead of throwing. Only the members that
-   * consumers actually used are provided; MathQuill internals such as
-   * `__controller` have no MathLive equivalent and are deliberately absent.
-   */
-  get mqCompat() {
-    return {
-      latex: (v) => (v === undefined ? this.latex() : (this.setLatex(v), v)),
-      el: () => this.mathField,
-      focus: () => this.focus(),
-      blur: () => this.blur(),
-    };
-  }
-
-  /** Programmatically replace the content. */
-  setLatex(v) {
-    if (this.mathField) {
-      this.mathField.value = toMathLive(v || '');
-    }
-  }
-
-  clear() {
-    if (this.mathField) {
-      this.mathField.value = '';
-    }
-
-    return '';
-  }
-
-  blur() {
-    log('blur mathfield');
-    this.mathField && this.mathField.blur();
-  }
-
-  focus() {
-    log('focus mathfield...');
-    this.mathField && this.mathField.focus();
-  }
-
-  /**
-   * MathQuill `cmd()` equivalent.
-   *
-   * Callers pass MathQuill command names (`'\\frac'`, `'\\sqrt'`, `'^'`, or an
-   * array of them). Those must be expanded into latex with `#?` placeholders,
-   * otherwise inserting a bare `\frac` produces no editable slots.
-   */
-  command(v) {
-    log('command: ', v);
-
-    if (!this.mathField) {
-      return '';
-    }
-
-    const action = keyToAction({ command: v });
-
-    if (action) {
-      this.mathField.insert(action.value, { focus: true });
-    }
-
-    this.mathField.focus();
-
-    return this.latex();
-  }
-
-  /**
-   * MathQuill `keystroke()` equivalent.
-   *
-   * Accepts MathQuill keystroke names (`'Left'`, `'Right'`, `'Backspace'`) as
-   * the keypad emits them, and passes anything else through as a MathLive
-   * selector.
-   */
-  keystroke(v) {
-    log('keystroke: ', v);
-
-    if (!this.mathField) {
-      return '';
-    }
-
-    const selector = KEYSTROKES[v] || v;
-
-    try {
-      this.mathField.executeCommand(selector);
-    } catch (e) {
-      log('unknown keystroke/selector "%s": %s', v, e && e.message);
-    }
-
-    this.mathField.focus();
-
-    return this.latex();
-  }
-
-  /** MathQuill `write()` equivalent. Accepts an array, as `cmd()` did. */
-  write(v) {
-    log('write: ', v);
-
-    if (!this.mathField) {
-      return '';
-    }
-
-    const values = Array.isArray(v) ? v : [v];
-
-    values.forEach((vv) => this.mathField.insert(vv, { focus: true }));
-    this.mathField.focus();
-
-    return this.latex();
-  }
-
-  /**
-   * Enter must not insert a line break: math input is single-expression, and
-   * the MathQuill version swallowed charCode 13 for the same reason. Newlines
-   * are authored explicitly through the newLine embed, not the Enter key.
-   */
-  onKeyDown = (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-    }
-  };
-
-  render() {
-    const { className, onFocus, onBlur, onClick } = this.props;
-
-    return (
-      <Holder
-        className={className}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onClick={onClick}
-        onKeyDown={this.onKeyDown}
-        ref={this.holderRef}
-      />
-    );
-  }
-}
-
-export default Input;