@pie-lib/math-input-mathlive 1.1.4 → 1.1.5-beta.10

package/lib/mf/common-styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.supsubStyles = exports.placeholderStyles = exports.longdivStyles = exports["default"] = exports.commonMqKeyboardStyles = exports.commonMqFontStyles = exports.commonMathLiveStyles = exports.commonKeyboardStyles = void 0;
+exports.supsubStyles = exports.rootIndexStyles = exports.placeholderStyles = exports.parallelStyles = exports.longdivStyles = exports["default"] = exports.commonMqKeyboardStyles = exports.commonMqFontStyles = exports.commonMathLiveStyles = exports.commonKeyboardStyles = exports.ROOT_INDEX_CSS = exports.PARALLEL_CSS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -23,7 +23,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ * destructuring above keeps working. The exception is the radical index, which
+ * MathLive sizes to TeX metrics that read too small here - see
+ * `rootIndexStyles`.
  */
 
 /**
@@ -50,10 +52,57 @@ var longdivStyles = exports.longdivStyles = {
 };
 
 /**
- * Superscript/subscript sizing. MathLive follows TeX metrics, so no overrides
- * are required.
+ * 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.
  */
-var supsubStyles = exports.supsubStyles = {};
+var ROOT_INDEX_SELECTOR = '.ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*="font-size"]';
+var ROOT_INDEX_FONT_SIZE = '80%';
+var rootIndexStyles = exports.rootIndexStyles = (0, _defineProperty2["default"])({}, "& ".concat(ROOT_INDEX_SELECTOR), {
+  fontSize: "".concat(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}.
+ */
+var ROOT_INDEX_CSS = exports.ROOT_INDEX_CSS = "".concat(ROOT_INDEX_SELECTOR, "{font-size:").concat(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.
+ */
+var PARALLEL_SELECTOR = '[data-pie-macro="parallel"]';
+var PARALLEL_FONT_SIZE = '1.4em';
+var parallelStyles = exports.parallelStyles = (0, _defineProperty2["default"])({}, "& ".concat(PARALLEL_SELECTOR), {
+  fontSize: PARALLEL_FONT_SIZE
+});
+
+/** The same rule as a CSS string, for a live mathfield's shadow root. */
+var PARALLEL_CSS = exports.PARALLEL_CSS = "".concat(PARALLEL_SELECTOR, "{font-size:").concat(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.
+ */
+var supsubStyles = exports.supsubStyles = _objectSpread(_objectSpread({}, rootIndexStyles), parallelStyles);
 
 /** Empty placeholder boxes (answer blocks / open slots). */
 var placeholderStyles = exports.placeholderStyles = {
@@ -67,12 +116,41 @@ var placeholderStyles = exports.placeholderStyles = {
   '& [data-pie-empty]': {
     opacity: 0.5
   },
-  // Stretchy accents render an <svg>; mathlive-static.css positions it
-  // absolutely at width:100%. Repeated here so static math cannot blow out its
-  // container if that stylesheet is missing.
-  '& svg': {
+  // 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'
   }
 };
 
@@ -80,7 +158,7 @@ var placeholderStyles = exports.placeholderStyles = {
  * Styling for the on-screen keyboard and any container rendering math labels.
  * Also hides MathLive's own affordances, since pie supplies its own keypad.
  */
-var commonMqKeyboardStyles = exports.commonMqKeyboardStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, commonMqFontStyles), longdivStyles), placeholderStyles), {}, {
+var commonMqKeyboardStyles = exports.commonMqKeyboardStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, commonMqFontStyles), longdivStyles), rootIndexStyles), placeholderStyles), {}, {
   touchAction: 'manipulation',
   '& math-field': {
     fontSize: 'inherit',
@@ -116,6 +194,7 @@ var commonKeyboardStyles = exports.commonKeyboardStyles = commonMqKeyboardStyles
 var _default = exports["default"] = {
   commonMqFontStyles: commonMqFontStyles,
   longdivStyles: longdivStyles,
+  rootIndexStyles: rootIndexStyles,
   supsubStyles: supsubStyles,
   commonMqKeyboardStyles: commonMqKeyboardStyles,
   placeholderStyles: placeholderStyles,

package/lib/mf/common-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"common-styles.js","names":["commonMqFontStyles","exports","fontFamily","longdivStyles","display","supsubStyles","placeholderStyles","borderBottom","minWidth","opacity","position","width","commonMqKeyboardStyles","_objectSpread","touchAction","fontSize","outline","commonMathLiveStyles","commonKeyboardStyles","_default"],"sources":["../../src/mf/common-styles.js"],"sourcesContent":["/**\n * Shared MathLive styling.\n *\n * Replaces @pie-lib/math-input's `common-mq-styles.js`. That file was built\n * around MathQuill's `.mq-*` class names, none of which exist in MathLive\n * output, so the selectors here target MathLive's own structure instead.\n *\n * The four named groups are kept because consumers destructure them:\n *\n *   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }\n *     = mq.CommonMqStyles;   // math-toolbar/src/editor-and-pad.jsx, math-preview.jsx\n *\n * Most are intentionally near-empty: MathLive sizes scripts, radicals and\n * fences correctly on its own, so the MathQuill-era corrections are not needed.\n * They stay as documented extension points rather than being deleted, so the\n * destructuring above keeps working.\n */\n\n/**\n * Font styling. MathQuill needed explicit MathJax font families to match the\n * static renderer; MathLive ships the KaTeX fonts it renders with, so this only\n * smooths rendering and lets the host override the family.\n */\nexport const commonMqFontStyles = {\n  '-webkit-font-smoothing': 'antialiased',\n  '& math-field': {\n    fontFamily: 'inherit',\n  },\n};\n\n/**\n * Long division. The MathQuill fork drew this with nested `.mq-longdiv-*`\n * elements that needed manual offsets; here it comes from the `\\longdiv` macro\n * (see `PIE_MACROS`), tagged with `data-pie-macro=\"longdiv\"`.\n */\nexport const longdivStyles = {\n  '& [data-pie-macro=\"longdiv\"]': {\n    display: 'inline-flex',\n  },\n};\n\n/**\n * Superscript/subscript sizing. MathLive follows TeX metrics, so no overrides\n * are required.\n */\nexport const supsubStyles = {};\n\n/** Empty placeholder boxes (answer blocks / open slots). */\nexport const placeholderStyles = {\n  '& .ML__placeholder': {\n    borderBottom: '1px solid currentColor',\n    minWidth: '1em',\n  },\n  // Stand-in glyph for an empty argument slot in STATIC math (see\n  // `withVisibleEmptySlots`). Muted so it reads as \"a slot goes here\" rather\n  // than as part of the symbol, matching how MathQuill shaded `.mq-empty`.\n  '& [data-pie-empty]': {\n    opacity: 0.5,\n  },\n  // Stretchy accents render an <svg>; mathlive-static.css positions it\n  // absolutely at width:100%. Repeated here so static math cannot blow out its\n  // container if that stylesheet is missing.\n  '& svg': {\n    position: 'absolute',\n    width: '100%',\n  },\n};\n\n/**\n * Styling for the on-screen keyboard and any container rendering math labels.\n * Also hides MathLive's own affordances, since pie supplies its own keypad.\n */\nexport const commonMqKeyboardStyles = {\n  ...commonMqFontStyles,\n  ...longdivStyles,\n  ...placeholderStyles,\n  touchAction: 'manipulation',\n  '& math-field': {\n    fontSize: 'inherit',\n    outline: 'none',\n  },\n  '& math-field::part(virtual-keyboard-toggle)': {\n    display: 'none',\n  },\n  '& math-field::part(menu-toggle)': {\n    display: 'none',\n  },\n};\n\n/** Everything combined - the common case for a container of math. */\nexport const commonMathLiveStyles = {\n  ...commonMqFontStyles,\n  ...longdivStyles,\n  ...supsubStyles,\n  ...placeholderStyles,\n  '& math-field': {\n    fontSize: 'inherit',\n    outline: 'none',\n  },\n  '& math-field::part(virtual-keyboard-toggle)': {\n    display: 'none',\n  },\n  '& math-field::part(menu-toggle)': {\n    display: 'none',\n  },\n};\n\nexport const commonKeyboardStyles = commonMqKeyboardStyles;\n\n/**\n * Default export mirrors @pie-lib/math-input's `CommonMqStyles` object so\n * existing destructuring keeps working.\n */\nexport default {\n  commonMqFontStyles,\n  longdivStyles,\n  supsubStyles,\n  commonMqKeyboardStyles,\n  placeholderStyles,\n  commonMathLiveStyles,\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG;EAChC,wBAAwB,EAAE,aAAa;EACvC,cAAc,EAAE;IACdE,UAAU,EAAE;EACd;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMC,aAAa,GAAAF,OAAA,CAAAE,aAAA,GAAG;EAC3B,8BAA8B,EAAE;IAC9BC,OAAO,EAAE;EACX;AACF,CAAC;;AAED;AACA;AACA;AACA;AACO,IAAMC,YAAY,GAAAJ,OAAA,CAAAI,YAAA,GAAG,CAAC,CAAC;;AAE9B;AACO,IAAMC,iBAAiB,GAAAL,OAAA,CAAAK,iBAAA,GAAG;EAC/B,oBAAoB,EAAE;IACpBC,YAAY,EAAE,wBAAwB;IACtCC,QAAQ,EAAE;EACZ,CAAC;EACD;EACA;EACA;EACA,oBAAoB,EAAE;IACpBC,OAAO,EAAE;EACX,CAAC;EACD;EACA;EACA;EACA,OAAO,EAAE;IACPC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE;EACT;AACF,CAAC;;AAED;AACA;AACA;AACA;AACO,IAAMC,sBAAsB,GAAAX,OAAA,CAAAW,sBAAA,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAC9Bb,kBAAkB,GAClBG,aAAa,GACbG,iBAAiB;EACpBQ,WAAW,EAAE,cAAc;EAC3B,cAAc,EAAE;IACdC,QAAQ,EAAE,SAAS;IACnBC,OAAO,EAAE;EACX,CAAC;EACD,6CAA6C,EAAE;IAC7CZ,OAAO,EAAE;EACX,CAAC;EACD,iCAAiC,EAAE;IACjCA,OAAO,EAAE;EACX;AAAC,EACF;;AAED;AACO,IAAMa,oBAAoB,GAAAhB,OAAA,CAAAgB,oBAAA,GAAAJ,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAC5Bb,kBAAkB,GAClBG,aAAa,GACbE,YAAY,GACZC,iBAAiB;EACpB,cAAc,EAAE;IACdS,QAAQ,EAAE,SAAS;IACnBC,OAAO,EAAE;EACX,CAAC;EACD,6CAA6C,EAAE;IAC7CZ,OAAO,EAAE;EACX,CAAC;EACD,iCAAiC,EAAE;IACjCA,OAAO,EAAE;EACX;AAAC,EACF;AAEM,IAAMc,oBAAoB,GAAAjB,OAAA,CAAAiB,oBAAA,GAAGN,sBAAsB;;AAE1D;AACA;AACA;AACA;AAHA,IAAAO,QAAA,GAAAlB,OAAA,cAIe;EACbD,kBAAkB,EAAlBA,kBAAkB;EAClBG,aAAa,EAAbA,aAAa;EACbE,YAAY,EAAZA,YAAY;EACZO,sBAAsB,EAAtBA,sBAAsB;EACtBN,iBAAiB,EAAjBA,iBAAiB;EACjBW,oBAAoB,EAApBA;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"common-styles.js","names":["commonMqFontStyles","exports","fontFamily","longdivStyles","display","ROOT_INDEX_SELECTOR","ROOT_INDEX_FONT_SIZE","rootIndexStyles","_defineProperty2","concat","fontSize","ROOT_INDEX_CSS","PARALLEL_SELECTOR","PARALLEL_FONT_SIZE","parallelStyles","PARALLEL_CSS","supsubStyles","_objectSpread","placeholderStyles","borderBottom","minWidth","opacity","position","left","width","marginLeft","commonMqKeyboardStyles","touchAction","outline","commonMathLiveStyles","commonKeyboardStyles","_default"],"sources":["../../src/mf/common-styles.js"],"sourcesContent":["/**\n * Shared MathLive styling.\n *\n * Replaces @pie-lib/math-input's `common-mq-styles.js`. That file was built\n * around MathQuill's `.mq-*` class names, none of which exist in MathLive\n * output, so the selectors here target MathLive's own structure instead.\n *\n * The four named groups are kept because consumers destructure them:\n *\n *   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }\n *     = mq.CommonMqStyles;   // math-toolbar/src/editor-and-pad.jsx, math-preview.jsx\n *\n * Most are intentionally near-empty: MathLive sizes scripts, radicals and\n * fences correctly on its own, so the MathQuill-era corrections are not needed.\n * They stay as documented extension points rather than being deleted, so the\n * destructuring above keeps working. The exception is the radical index, which\n * MathLive sizes to TeX metrics that read too small here - see\n * `rootIndexStyles`.\n */\n\n/**\n * Font styling. MathQuill needed explicit MathJax font families to match the\n * static renderer; MathLive ships the KaTeX fonts it renders with, so this only\n * smooths rendering and lets the host override the family.\n */\nexport const commonMqFontStyles = {\n  '-webkit-font-smoothing': 'antialiased',\n  '& math-field': {\n    fontFamily: 'inherit',\n  },\n};\n\n/**\n * Long division. The MathQuill fork drew this with nested `.mq-longdiv-*`\n * elements that needed manual offsets; here it comes from the `\\longdiv` macro\n * (see `PIE_MACROS`), tagged with `data-pie-macro=\"longdiv\"`.\n */\nexport const longdivStyles = {\n  '& [data-pie-macro=\"longdiv\"]': {\n    display: 'inline-flex',\n  },\n};\n\n/**\n * How the index of a radical is sized.\n *\n * MathLive follows TeX and sets the index of `\\sqrt[n]{x}` in scriptscriptstyle,\n * which it emits as an inline `font-size: 50%` on the span wrapping the index's\n * glyphs. At authoring sizes that leaves the index - on the nth-root key, and in\n * any radical the author types - too small to read next to the radicand, so it is\n * scaled up to 80% - 1.6x what MathLive asks for.\n *\n * Only that innermost span is resized. `.ML__sqrt-index` itself keeps its font\n * size on purpose: the vlist inside it tucks the index into the radical's crook\n * with em-based `top`/`height` offsets, and scaling those lifts the index clear\n * of the radical instead of just enlarging it.\n *\n * The child chain is spelled out so that nothing nested deeper inside the index\n * (a fraction's numerator, another radical) is caught by the same rule, and\n * `!important` is required because the 50% is an INLINE style.\n */\nconst ROOT_INDEX_SELECTOR = '.ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]';\nconst ROOT_INDEX_FONT_SIZE = '80%';\n\nexport const rootIndexStyles = {\n  [`& ${ROOT_INDEX_SELECTOR}`]: {\n    fontSize: `${ROOT_INDEX_FONT_SIZE} !important`,\n  },\n};\n\n/**\n * The same rule as a CSS string, for a live mathfield's shadow root - see\n * `SHADOW_CSS` in mathlive-instance.js. Static markup is styled by\n * {@link rootIndexStyles}.\n */\nexport const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FONT_SIZE} !important}`;\n\n/**\n * Size of the parallel sign (`\\parallel`, tagged `data-pie-macro=\"parallel\"` by\n * `PIE_MACROS`). The legacy editor enlarged it (`updateSpans` set 32px) because\n * the bars read too small next to the letters of `AB ∥ CD`; MathLive draws it at\n * the surrounding size, so it is scaled up here. Not applied to keypad labels.\n */\nconst PARALLEL_SELECTOR = '[data-pie-macro=\"parallel\"]';\nconst PARALLEL_FONT_SIZE = '1.4em';\n\nexport const parallelStyles = {\n  [`& ${PARALLEL_SELECTOR}`]: {\n    fontSize: PARALLEL_FONT_SIZE,\n  },\n};\n\n/** The same rule as a CSS string, for a live mathfield's shadow root. */\nexport const PARALLEL_CSS = `${PARALLEL_SELECTOR}{font-size:${PARALLEL_FONT_SIZE}}`;\n\n/**\n * Superscript/subscript sizing. MathLive follows TeX metrics for scripts, so the\n * MathQuill-era corrections are gone; the radical index is the one place where a\n * TeX-correct size reads too small in the authoring UI.\n */\nexport const supsubStyles = {\n  ...rootIndexStyles,\n  ...parallelStyles,\n};\n\n/** Empty placeholder boxes (answer blocks / open slots). */\nexport const placeholderStyles = {\n  '& .ML__placeholder': {\n    borderBottom: '1px solid currentColor',\n    minWidth: '1em',\n  },\n  // Stand-in glyph for an empty argument slot in STATIC math (see\n  // `withVisibleEmptySlots`). Muted so it reads as \"a slot goes here\" rather\n  // than as part of the symbol, matching how MathQuill shaded `.mq-empty`.\n  '& [data-pie-empty]': {\n    opacity: 0.5,\n  },\n  // Stretchy accents (\\overarc, \\overleftrightarrow, \\overrightarrow) render an\n  // <svg width=\"100%\" preserveAspectRatio=\"none\"> inside a `.ML__stretchy`. That\n  // span is absolutely positioned, so its immediate wrapper computes to 0px and\n  // the width has to resolve against a *positioned* ancestor. Pin that to\n  // `.ML__base`, whose width already equals the accent's content (measured:\n  // 9.85px for a 0.56em slot), so the arc spans exactly its content.\n  //\n  // Do NOT write a bare `& svg` rule instead: MathLive's own rule is\n  // descendant-scoped (`.ML__latex .ML__stretchy svg`), and a global one\n  // re-parents every svg in the subtree.\n  '& .ML__base': {\n    position: 'relative',\n  },\n  '& .ML__stretchy': {\n    position: 'absolute',\n    left: 0,\n    width: '100%',\n  },\n  // MathLive centres an accent by shifting it right half the content width -\n  // `margin-left: 0.28em` for a 0.56em slot - which assumes a glyph with its own\n  // side bearings. Over a synthetic empty slot it just pushes the arc right.\n  //\n  // `!important` is required: MathLive writes this as an INLINE style\n  // (`style=\"top:-3.4em;margin-left:0.28em\"`), which a class cannot override.\n  //\n  // It also fixes the width. `.ML__center` is the stretchy's containing block\n  // (MathLive gives `.ML__vlist > span` position:relative), and its width is the\n  // base minus that margin - measured 9.85px - 4.93px = 4.93px, exactly half,\n  // which is why the arc came out half-width AND offset right.\n  //\n  // Scoped with `:has(.ML__stretchy)`: only stretchy accents are affected.\n  // A single-glyph accent (`\\hat{x}`, `\\vec{x}`) genuinely needs its centring\n  // offset, and must keep it.\n  '& .ML__center:has(.ML__stretchy)': {\n    marginLeft: '0 !important',\n  },\n};\n\n/**\n * Styling for the on-screen keyboard and any container rendering math labels.\n * Also hides MathLive's own affordances, since pie supplies its own keypad.\n */\nexport const commonMqKeyboardStyles = {\n  ...commonMqFontStyles,\n  ...longdivStyles,\n  ...rootIndexStyles,\n  ...placeholderStyles,\n  touchAction: 'manipulation',\n  '& math-field': {\n    fontSize: 'inherit',\n    outline: 'none',\n  },\n  '& math-field::part(virtual-keyboard-toggle)': {\n    display: 'none',\n  },\n  '& math-field::part(menu-toggle)': {\n    display: 'none',\n  },\n};\n\n/** Everything combined - the common case for a container of math. */\nexport const commonMathLiveStyles = {\n  ...commonMqFontStyles,\n  ...longdivStyles,\n  ...supsubStyles,\n  ...placeholderStyles,\n  '& math-field': {\n    fontSize: 'inherit',\n    outline: 'none',\n  },\n  '& math-field::part(virtual-keyboard-toggle)': {\n    display: 'none',\n  },\n  '& math-field::part(menu-toggle)': {\n    display: 'none',\n  },\n};\n\nexport const commonKeyboardStyles = commonMqKeyboardStyles;\n\n/**\n * Default export mirrors @pie-lib/math-input's `CommonMqStyles` object so\n * existing destructuring keeps working.\n */\nexport default {\n  commonMqFontStyles,\n  longdivStyles,\n  rootIndexStyles,\n  supsubStyles,\n  commonMqKeyboardStyles,\n  placeholderStyles,\n  commonMathLiveStyles,\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/mf/index.js

@@ -53,12 +53,24 @@ Object.defineProperty(exports, "longdivStyles", {
     return _commonStyles.longdivStyles;
   }
 });
+Object.defineProperty(exports, "parallelStyles", {
+  enumerable: true,
+  get: function get() {
+    return _commonStyles.parallelStyles;
+  }
+});
 Object.defineProperty(exports, "placeholderStyles", {
   enumerable: true,
   get: function get() {
     return _commonStyles.placeholderStyles;
   }
 });
+Object.defineProperty(exports, "rootIndexStyles", {
+  enumerable: true,
+  get: function get() {
+    return _commonStyles.rootIndexStyles;
+  }
+});
 Object.defineProperty(exports, "supsubStyles", {
   enumerable: true,
   get: function get() {

package/lib/mf/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_input","_interopRequireDefault","require","_static","_commonStyles","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../../src/mf/index.js"],"sourcesContent":["import Input from './input';\nimport Static from './static';\nimport CommonMqStyles, {\n  commonMathLiveStyles,\n  commonKeyboardStyles,\n  commonMqFontStyles,\n  commonMqKeyboardStyles,\n  longdivStyles,\n  supsubStyles,\n  placeholderStyles,\n} from './common-styles';\n\nexport {\n  Input,\n  Static,\n  // Same object shape as @pie-lib/math-input's `mq.CommonMqStyles`, so\n  // `const { commonMqFontStyles, ... } = mq.CommonMqStyles` keeps working.\n  CommonMqStyles,\n  commonMathLiveStyles,\n  commonKeyboardStyles,\n  commonMqFontStyles,\n  commonMqKeyboardStyles,\n  longdivStyles,\n  supsubStyles,\n  placeholderStyles,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAC,uBAAA,CAAAH,OAAA;AAQyB,SAAAG,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,wBAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_input","_interopRequireDefault","require","_static","_commonStyles","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../../src/mf/index.js"],"sourcesContent":["import Input from './input';\nimport Static from './static';\nimport CommonMqStyles, {\n  commonMathLiveStyles,\n  commonKeyboardStyles,\n  commonMqFontStyles,\n  commonMqKeyboardStyles,\n  longdivStyles,\n  rootIndexStyles,\n  parallelStyles,\n  supsubStyles,\n  placeholderStyles,\n} from './common-styles';\n\nexport {\n  Input,\n  Static,\n  // Same object shape as @pie-lib/math-input's `mq.CommonMqStyles`, so\n  // `const { commonMqFontStyles, ... } = mq.CommonMqStyles` keeps working.\n  CommonMqStyles,\n  commonMathLiveStyles,\n  commonKeyboardStyles,\n  commonMqFontStyles,\n  commonMqKeyboardStyles,\n  longdivStyles,\n  rootIndexStyles,\n  parallelStyles,\n  supsubStyles,\n  placeholderStyles,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAC,uBAAA,CAAAH,OAAA;AAUyB,SAAAG,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,wBAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}

package/lib/mf/input.js

@@ -80,16 +80,22 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _this$setState;
-        var ml;
+        var generation, ml;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              // 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.
+              generation = this.mountGeneration = (this.mountGeneration || 0) + 1;
               _context.next = 1;
               return (0, _mathliveInstance.loadMathLive)();
             case 1:
               ml = _context.sent;
-              if (!(!ml || !this.holderRef.current)) {
+              if (!(generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField)) {
                 _context.next = 2;
                 break;
               }
@@ -105,12 +111,28 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
 
               // 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 = _mathliveInstance.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.
+              (0, _mathliveInstance.applyShadowStyles)(this.mathField);
+
+              // A selected `\placeholder{}` gets no MathLive caret; draw one.
+              this.untrackCaret = (0, _mathliveInstance.trackPlaceholderCaret)(this.mathField);
               this.mathField.addEventListener('input', this.onInputEdit);
-              this.holderRef.current.appendChild(this.mathField);
+
+              // 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);
               }
-              (_this$setState = this.setState) === null || _this$setState === void 0 || _this$setState.call(this, {});
             case 3:
             case "end":
               return _context.stop();
@@ -148,6 +170,13 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function 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();

package/lib/mf/input.js.map

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

package/lib/mf/static.js

@@ -26,9 +26,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var log = (0, _debug["default"])('pie-lib:math-input-mathlive:static');
-var Holder = (0, _styles.styled)('span')(_objectSpread(_objectSpread({
+var Holder = (0, _styles.styled)('span')(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   display: 'inline-block'
-}, _commonStyles.placeholderStyles), {}, {
+}, _commonStyles.placeholderStyles), _commonStyles.rootIndexStyles), _commonStyles.parallelStyles), {}, {
   '& math-field': {
     display: 'inline-block',
     border: 'none',
@@ -202,10 +202,14 @@ var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var ml;
+        var generation, ml;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              // See the note in mf/input.jsx: a generation counter, not a boolean, so a
+              // StrictMode mount -> unmount -> mount on the same instance still ends up
+              // with exactly one field.
+              generation = this.mountGeneration = (this.mountGeneration || 0) + 1;
               if (this.isInteractive()) {
                 _context.next = 2;
                 break;
@@ -213,14 +217,16 @@ var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
               _context.next = 1;
               return (0, _mathliveInstance.loadMathLive)();
             case 1:
-              this.renderMarkup();
+              if (generation === this.mountGeneration) {
+                this.renderMarkup();
+              }
               return _context.abrupt("return");
             case 2:
               _context.next = 3;
               return (0, _mathliveInstance.loadMathLive)();
             case 3:
               ml = _context.sent;
-              if (!(!ml || !this.holderRef.current)) {
+              if (!(generation !== this.mountGeneration || !ml || !this.holderRef.current || this.mathField)) {
                 _context.next = 4;
                 break;
               }
@@ -231,11 +237,26 @@ var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
               });
               this.mathField.readOnly = true;
               this.mathField.mathVirtualKeyboardPolicy = 'manual';
+              // Without this the spacebar does nothing: MathLive's mathModeSpace
+              // defaults to an empty string.
+              this.mathField.mathModeSpace = _mathliveInstance.MATH_MODE_SPACE;
+              // Same as the editor: stay in the exponent after a digit (see mf/input.jsx).
+              this.mathField.smartSuperscript = false;
               this.mathField.value = (0, _latexBridge.toMathLive)(this.props.latex);
+
+              // The mathfield renders in shadow DOM, so page CSS cannot reach it - the
+              // stretchy-accent fix has to be injected there directly.
+              (0, _mathliveInstance.applyShadowStyles)(this.mathField);
+
+              // A selected `\placeholder{}` gets no MathLive caret; draw one. Answer
+              // blocks are typed into with the same keypad, so they grow placeholders too.
+              this.untrackCaret = (0, _mathliveInstance.trackPlaceholderCaret)(this.mathField);
               this.mathField.addEventListener('input', this.onPromptInput);
               this.mathField.addEventListener('focusin', this.onPromptFocus);
               this.mathField.addEventListener('keydown', this.onKeyDown);
-              this.holderRef.current.appendChild(this.mathField);
+
+              // Belt and braces: drop anything a previous mount may have left behind.
+              this.holderRef.current.replaceChildren(this.mathField);
               this.createLiveRegion();
             case 5:
             case "end":
@@ -263,6 +284,12 @@ var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      // Invalidate any mount still awaiting the MathLive load.
+      this.mountGeneration = (this.mountGeneration || 0) + 1;
+      if (this.untrackCaret) {
+        this.untrackCaret();
+        this.untrackCaret = undefined;
+      }
       if (this.mathField) {
         this.mathField.removeEventListener('input', this.onPromptInput);
         this.mathField.removeEventListener('focusin', this.onPromptFocus);
@@ -319,6 +346,13 @@ var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
       var _this3 = this;
       return {
         id: id,
+        // MathQuill's inner fields could be focused directly; keep that.
+        focus: function focus() {
+          if (_this3.mathField) {
+            _this3.mathField.focus();
+            _this3.focusPrompt(id);
+          }
+        },
         latex: function latex(value) {
           if (!_this3.mathField) {
             return '';
@@ -344,10 +378,76 @@ var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
         return _this4.promptHandle(id);
       });
     }
+  }, {
+    key: "promptContaining",
+    value: /** The id of the prompt whose range contains `position`, if any. */
+    function promptContaining(position) {
+      var _this5 = this;
+      if (!this.mathField || typeof position !== 'number') {
+        return undefined;
+      }
+      return (this.mathField.getPrompts() || []).find(function (id) {
+        var range = _this5.mathField.getPromptRange(id);
+        return range && position >= range[0] && position <= range[1];
+      });
+    }
+
+    /**
+     * Put a blinking caret inside an answer block.
+     *
+     * MathLive only makes the caret visible while the field element carries the
+     * `ML__focused` class, and it adds that class during a *render*, gated on
+     * `isSelectionEditable && hasFocus()`. In a read-only field only prompt
+     * interiors are editable, so the two things both have to be true:
+     *
+     *  - the selection must sit inside a prompt, and
+     *  - a render must run afterwards.
+     *
+     * Assigning `selection` satisfies the first but not the second - it updates
+     * the model without re-rendering, so the class stays off and the caret span
+     * remains `visibility: hidden`. Executing any command does trigger the
+     * render, and `scrollIntoView` is the one with no other effect: it keeps the
+     * caret on screen, which the preceding `focus()` already does anyway.
+     *
+     * @param {string} [id] prompt to focus; defaults to the first one
+     */
+  }, {
+    key: "focusPrompt",
+    value: function focusPrompt(id) {
+      if (!this.mathField) {
+        return;
+      }
+      var ids = this.mathField.getPrompts() || [];
+      var target = id && ids.indexOf(id) !== -1 ? id : ids[0];
+      if (!target) {
+        return;
+      }
+      var range = this.mathField.getPromptRange(target);
+      if (!range) {
+        return;
+      }
+      this.mathField.selection = {
+        ranges: [[range[0], range[0]]]
+      };
+      if (typeof this.mathField.executeCommand === 'function') {
+        this.mathField.executeCommand('scrollIntoView');
+      }
+    }
   }, {
     key: "focus",
     value: function focus() {
-      this.mathField && this.mathField.focus();
+      if (!this.mathField) {
+        return;
+      }
+      this.mathField.focus();
+
+      // A bare focus() leaves the selection outside every prompt, which in a
+      // read-only field is not editable - the block looked focused but had no
+      // cursor. Clicking a prompt already works, because MathLive's own pointer
+      // handling moves the selection and re-renders.
+      if (!this.promptContaining(this.mathField.position)) {
+        this.focusPrompt();
+      }
     }
   }, {
     key: "blur",