@pie-lib/math-input-mathlive 1.0.0

package/lib/mf/static.js

@@ -0,0 +1,396 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _debug = _interopRequireDefault(require("debug"));
+var _mathliveInstance = require("../mathlive-instance");
+var _latexBridge = require("../latex-bridge");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var log = (0, _debug["default"])('pie-lib:math-input-mathlive:static');
+var Holder = (0, _styles.styled)('span')({
+  display: 'inline-block',
+  '& math-field': {
+    display: 'inline-block',
+    border: 'none',
+    background: 'transparent'
+  },
+  '& math-field::part(virtual-keyboard-toggle)': {
+    display: 'none'
+  },
+  '& math-field::part(menu-toggle)': {
+    display: 'none'
+  }
+});
+
+/**
+ * Static math. Drop-in replacement for @pie-lib/math-input's `mq.Static`.
+ *
+ * Two modes, chosen automatically:
+ *
+ *  - **display** (no answer blocks in the latex): rendered with
+ *    `convertLatexToMarkup`. No mathfield instance, so it is cheap enough for
+ *    keypad labels - the old implementation created a full MathQuill
+ *    StaticMath per button.
+ *
+ *  - **interactive** (latex contains `\MathQuillMathField[..]{}` /
+ *    `\placeholder[..]{}`): a read-only `<math-field>` whose placeholders stay
+ *    editable. Sub-field values are surfaced through the prompts API, replacing
+ *    MathQuill's `innerFields`.
+ */
+var Static = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  function Static(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Static);
+    _this = _callSuper(this, Static, [props]);
+    /**
+     * Off-screen aria-live region, ported from @pie-lib/math-input's Static.
+     *
+     * MathLive has its own accessibility layer, but it does not announce that
+     * typed input was converted into a math symbol, which screen-reader users
+     * relied on in the MathQuill implementation.
+     */
+    (0, _defineProperty2["default"])(_this, "createLiveRegion", function () {
+      if (typeof document === 'undefined' || _this.liveRegion) {
+        return;
+      }
+      _this.liveRegion = document.createElement('div');
+      Object.assign(_this.liveRegion.style, {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        marginTop: '-1px',
+        clip: 'rect(1px, 1px, 1px, 1px)',
+        overflow: 'hidden'
+      });
+      _this.liveRegion.setAttribute('aria-live', 'polite');
+      _this.liveRegion.setAttribute('aria-atomic', 'true');
+      document.body.appendChild(_this.liveRegion);
+    });
+    (0, _defineProperty2["default"])(_this, "removeLiveRegion", function () {
+      if (_this.liveRegion && _this.liveRegion.parentNode) {
+        _this.liveRegion.parentNode.removeChild(_this.liveRegion);
+      }
+      _this.liveRegion = undefined;
+    });
+    (0, _defineProperty2["default"])(_this, "announce", function (message) {
+      if (!_this.liveRegion) {
+        return;
+      }
+      _this.liveRegion.textContent = message;
+
+      // Clear once announced, so the same message can be announced again.
+      clearTimeout(_this.announceTimeout);
+      _this.announceTimeout = setTimeout(function () {
+        if (_this.liveRegion) {
+          _this.liveRegion.textContent = '';
+        }
+      }, 500);
+    });
+    (0, _defineProperty2["default"])(_this, "onKeyDown", function (event) {
+      // Deletions should not be announced as conversions.
+      _this.isDeleting = (event === null || event === void 0 ? void 0 : event.key) === 'Backspace' || (event === null || event === void 0 ? void 0 : event.key) === 'Delete';
+    });
+    /**
+     * Announce when typed input became a math symbol. The MathQuill version
+     * inferred this by counting braces; here a prompt whose latex grew by more
+     * than the single character typed means a command was expanded.
+     */
+    (0, _defineProperty2["default"])(_this, "announceConversion", function (next) {
+      if (_this.isDeleting) {
+        _this.isDeleting = false;
+        return;
+      }
+      var converted = Object.keys(next).some(function (id) {
+        var before = _this.promptValues[id] || '';
+        var after = next[id] || '';
+        return after.length > before.length + 1 && /\\/.test(after.slice(before.length));
+      });
+      if (converted) {
+        _this.announce('Converted to math symbol');
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onPromptInput", function () {
+      var _this$props = _this.props,
+        onSubFieldChange = _this$props.onSubFieldChange,
+        getFieldName = _this$props.getFieldName;
+      if (!_this.mathField) {
+        return;
+      }
+      var next = _this.values();
+      _this.announceConversion(next);
+      if (!onSubFieldChange) {
+        _this.promptValues = next;
+        return;
+      }
+      var fields = _this.innerFields;
+
+      // Emit only the prompts whose value actually changed, mirroring the
+      // per-field granularity of the old onSubFieldChange(name, latex).
+      Object.keys(next).forEach(function (id) {
+        if (next[id] === _this.promptValues[id]) {
+          return;
+        }
+        var name = getFieldName(_this.promptHandle(id), fields) || id;
+        onSubFieldChange(name, next[id]);
+      });
+      _this.promptValues = next;
+    });
+    (0, _defineProperty2["default"])(_this, "onPromptFocus", function () {
+      var _this$props2 = _this.props,
+        onSubFieldFocus = _this$props2.onSubFieldFocus,
+        getFieldName = _this$props2.getFieldName;
+      if (!_this.mathField || !onSubFieldFocus) {
+        return;
+      }
+      try {
+        var ids = _this.mathField.getPrompts() || [];
+        // The focused prompt is the one containing the current selection.
+        var focused = ids.find(function (id) {
+          var range = _this.mathField.getPromptRange(id);
+          var selection = _this.mathField.selection;
+          if (!range || !selection || !selection.ranges || !selection.ranges.length) {
+            return false;
+          }
+          var _range = (0, _slicedToArray2["default"])(range, 2),
+            start = _range[0],
+            end = _range[1];
+          var _selection$ranges$ = (0, _slicedToArray2["default"])(selection.ranges[0], 1),
+            selStart = _selection$ranges$[0];
+          return selStart >= start && selStart <= end;
+        });
+        if (focused) {
+          var handle = _this.promptHandle(focused);
+          var name = getFieldName(handle, _this.innerFields) || focused;
+          if (_this.props.setInput) {
+            _this.props.setInput(handle);
+          }
+          onSubFieldFocus(name, handle);
+        }
+      } catch (e) {
+        log('error resolving focused prompt: %s', e.message);
+      }
+    });
+    _this.holderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.state = {
+      markup: ''
+    };
+    _this.promptValues = {};
+    return _this;
+  }
+  (0, _inherits2["default"])(Static, _React$Component);
+  return (0, _createClass2["default"])(Static, [{
+    key: "componentDidMount",
+    value: function () {
+      var _componentDidMount = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var ml;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (this.isInteractive()) {
+                _context.next = 2;
+                break;
+              }
+              _context.next = 1;
+              return (0, _mathliveInstance.loadMathLive)();
+            case 1:
+              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)) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              this.mathField = new ml.MathfieldElement({
+                macros: (0, _mathliveInstance.getMacros)()
+              });
+              this.mathField.readOnly = true;
+              this.mathField.mathVirtualKeyboardPolicy = 'manual';
+              this.mathField.value = (0, _latexBridge.toMathLive)(this.props.latex);
+              this.mathField.addEventListener('input', this.onPromptInput);
+              this.mathField.addEventListener('focusin', this.onPromptFocus);
+              this.mathField.addEventListener('keydown', this.onKeyDown);
+              this.holderRef.current.appendChild(this.mathField);
+              this.createLiveRegion();
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function componentDidMount() {
+        return _componentDidMount.apply(this, arguments);
+      }
+      return componentDidMount;
+    }()
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.latex === this.props.latex) {
+        return;
+      }
+      if (this.mathField) {
+        this.mathField.value = (0, _latexBridge.toMathLive)(this.props.latex);
+      } else {
+        this.renderMarkup();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.mathField) {
+        this.mathField.removeEventListener('input', this.onPromptInput);
+        this.mathField.removeEventListener('focusin', this.onPromptFocus);
+        this.mathField.removeEventListener('keydown', this.onKeyDown);
+        this.mathField.remove();
+        this.mathField = undefined;
+      }
+      this.removeLiveRegion();
+    }
+  }, {
+    key: "isInteractive",
+    value: /** Does this latex contain answer blocks? */
+    function isInteractive() {
+      var latex = this.props.latex || '';
+      return (0, _latexBridge.fieldIds)(latex).length > 0 || latex.indexOf('\\placeholder') !== -1;
+    }
+  }, {
+    key: "renderMarkup",
+    value: function renderMarkup() {
+      var markup = (0, _mathliveInstance.latexToMarkup)(this.props.latex);
+      if (markup !== this.state.markup) {
+        this.setState({
+          markup: markup
+        });
+      }
+    }
+
+    /** MathQuill's `innerFields` equivalent, keyed by prompt id. */
+  }, {
+    key: "values",
+    value: function values() {
+      var _this2 = this;
+      if (!this.mathField) {
+        return {};
+      }
+      var out = {};
+      (this.mathField.getPrompts() || []).forEach(function (id) {
+        out[id] = (0, _latexBridge.fromMathLive)(_this2.mathField.getPromptValue(id));
+      });
+      return out;
+    }
+
+    /**
+     * A MathQuill-inner-field-like handle for a prompt.
+     *
+     * The old API handed callers a MathQuill field object, and consumers commonly
+     * called `field.latex()` on it. There is no equivalent object in MathLive -
+     * prompts are addressed by id - so this adapter exposes the parts that were
+     * actually used: `id` and a get/set `latex()`.
+     */
+  }, {
+    key: "promptHandle",
+    value: function promptHandle(id) {
+      var _this3 = this;
+      return {
+        id: id,
+        latex: function latex(value) {
+          if (!_this3.mathField) {
+            return '';
+          }
+          if (value === undefined) {
+            return (0, _latexBridge.fromMathLive)(_this3.mathField.getPromptValue(id));
+          }
+          _this3.mathField.setPromptValue(id, (0, _latexBridge.toMathLive)(value), {});
+          return value;
+        }
+      };
+    }
+
+    /** All prompt handles, the analogue of `mathField.innerFields`. */
+  }, {
+    key: "innerFields",
+    get: function get() {
+      var _this4 = this;
+      if (!this.mathField) {
+        return [];
+      }
+      return (this.mathField.getPrompts() || []).map(function (id) {
+        return _this4.promptHandle(id);
+      });
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.mathField && this.mathField.focus();
+    }
+  }, {
+    key: "blur",
+    value: function blur() {
+      this.mathField && this.mathField.blur();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        className = _this$props3.className,
+        onFocus = _this$props3.onFocus,
+        onBlur = _this$props3.onBlur;
+      var markup = this.state.markup;
+      if (this.mathField || this.isInteractive()) {
+        return /*#__PURE__*/_react["default"].createElement(Holder, {
+          className: className,
+          onFocus: onFocus,
+          onBlur: onBlur,
+          ref: this.holderRef
+        });
+      }
+      return /*#__PURE__*/_react["default"].createElement(Holder, {
+        className: className,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        ref: this.holderRef
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: markup
+        }
+      });
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(Static, "propTypes", {
+  latex: _propTypes["default"].string.isRequired,
+  className: _propTypes["default"].string,
+  onFocus: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  getFieldName: _propTypes["default"].func,
+  onSubFieldChange: _propTypes["default"].func,
+  onSubFieldFocus: _propTypes["default"].func,
+  setInput: _propTypes["default"].func
+});
+(0, _defineProperty2["default"])(Static, "defaultProps", {
+  getFieldName: function getFieldName() {}
+});
+//# sourceMappingURL=static.js.map

package/lib/mf/static.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static.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","border","background","Static","exports","_React$Component","props","_this","_classCallCheck2","_defineProperty2","document","liveRegion","createElement","Object","assign","style","position","width","height","marginTop","clip","overflow","setAttribute","body","appendChild","parentNode","removeChild","undefined","message","textContent","clearTimeout","announceTimeout","setTimeout","event","isDeleting","key","next","converted","keys","some","id","before","promptValues","after","length","test","slice","announce","_this$props","onSubFieldChange","getFieldName","mathField","values","announceConversion","fields","innerFields","forEach","name","promptHandle","_this$props2","onSubFieldFocus","ids","getPrompts","focused","find","range","getPromptRange","selection","ranges","_range","_slicedToArray2","start","end","_selection$ranges$","selStart","handle","setInput","holderRef","React","createRef","state","markup","_inherits2","_createClass2","value","_componentDidMount","_asyncToGenerator2","_regenerator","mark","_callee","ml","wrap","_context","prev","isInteractive","loadMathLive","renderMarkup","abrupt","sent","current","MathfieldElement","macros","getMacros","readOnly","mathVirtualKeyboardPolicy","toMathLive","latex","addEventListener","onPromptInput","onPromptFocus","onKeyDown","createLiveRegion","stop","componentDidMount","arguments","componentDidUpdate","prevProps","componentWillUnmount","removeEventListener","remove","removeLiveRegion","fieldIds","indexOf","latexToMarkup","setState","_this2","out","fromMathLive","getPromptValue","_this3","setPromptValue","get","_this4","map","focus","blur","render","_this$props3","className","onFocus","onBlur","ref","dangerouslySetInnerHTML","__html","Component","PropTypes","string","isRequired","func"],"sources":["../../src/mf/static.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport debug from 'debug';\nimport { loadMathLive, getMacros, latexToMarkup } from '../mathlive-instance';\nimport { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';\n\nconst log = debug('pie-lib:math-input-mathlive:static');\n\nconst Holder = styled('span')({\n  display: 'inline-block',\n  '& math-field': {\n    display: 'inline-block',\n    border: 'none',\n    background: 'transparent',\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/**\n * Static math. Drop-in replacement for @pie-lib/math-input's `mq.Static`.\n *\n * Two modes, chosen automatically:\n *\n *  - **display** (no answer blocks in the latex): rendered with\n *    `convertLatexToMarkup`. No mathfield instance, so it is cheap enough for\n *    keypad labels - the old implementation created a full MathQuill\n *    StaticMath per button.\n *\n *  - **interactive** (latex contains `\\MathQuillMathField[..]{}` /\n *    `\\placeholder[..]{}`): a read-only `<math-field>` whose placeholders stay\n *    editable. Sub-field values are surfaced through the prompts API, replacing\n *    MathQuill's `innerFields`.\n */\nexport default class Static extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    getFieldName: PropTypes.func,\n    onSubFieldChange: PropTypes.func,\n    onSubFieldFocus: PropTypes.func,\n    setInput: PropTypes.func,\n  };\n\n  static defaultProps = {\n    getFieldName: () => {},\n  };\n\n  constructor(props) {\n    super(props);\n    this.holderRef = React.createRef();\n    this.state = { markup: '' };\n    this.promptValues = {};\n  }\n\n  async componentDidMount() {\n    if (!this.isInteractive()) {\n      await loadMathLive();\n      this.renderMarkup();\n      return;\n    }\n\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.readOnly = true;\n    this.mathField.mathVirtualKeyboardPolicy = 'manual';\n    this.mathField.value = toMathLive(this.props.latex);\n\n    this.mathField.addEventListener('input', this.onPromptInput);\n    this.mathField.addEventListener('focusin', this.onPromptFocus);\n    this.mathField.addEventListener('keydown', this.onKeyDown);\n\n    this.holderRef.current.appendChild(this.mathField);\n\n    this.createLiveRegion();\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.latex === this.props.latex) {\n      return;\n    }\n\n    if (this.mathField) {\n      this.mathField.value = toMathLive(this.props.latex);\n    } else {\n      this.renderMarkup();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.mathField) {\n      this.mathField.removeEventListener('input', this.onPromptInput);\n      this.mathField.removeEventListener('focusin', this.onPromptFocus);\n      this.mathField.removeEventListener('keydown', this.onKeyDown);\n      this.mathField.remove();\n      this.mathField = undefined;\n    }\n\n    this.removeLiveRegion();\n  }\n\n  /**\n   * Off-screen aria-live region, ported from @pie-lib/math-input's Static.\n   *\n   * MathLive has its own accessibility layer, but it does not announce that\n   * typed input was converted into a math symbol, which screen-reader users\n   * relied on in the MathQuill implementation.\n   */\n  createLiveRegion = () => {\n    if (typeof document === 'undefined' || this.liveRegion) {\n      return;\n    }\n\n    this.liveRegion = document.createElement('div');\n    Object.assign(this.liveRegion.style, {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      marginTop: '-1px',\n      clip: 'rect(1px, 1px, 1px, 1px)',\n      overflow: 'hidden',\n    });\n    this.liveRegion.setAttribute('aria-live', 'polite');\n    this.liveRegion.setAttribute('aria-atomic', 'true');\n\n    document.body.appendChild(this.liveRegion);\n  };\n\n  removeLiveRegion = () => {\n    if (this.liveRegion && this.liveRegion.parentNode) {\n      this.liveRegion.parentNode.removeChild(this.liveRegion);\n    }\n\n    this.liveRegion = undefined;\n  };\n\n  announce = (message) => {\n    if (!this.liveRegion) {\n      return;\n    }\n\n    this.liveRegion.textContent = message;\n\n    // Clear once announced, so the same message can be announced again.\n    clearTimeout(this.announceTimeout);\n    this.announceTimeout = setTimeout(() => {\n      if (this.liveRegion) {\n        this.liveRegion.textContent = '';\n      }\n    }, 500);\n  };\n\n  onKeyDown = (event) => {\n    // Deletions should not be announced as conversions.\n    this.isDeleting = event?.key === 'Backspace' || event?.key === 'Delete';\n  };\n\n  /**\n   * Announce when typed input became a math symbol. The MathQuill version\n   * inferred this by counting braces; here a prompt whose latex grew by more\n   * than the single character typed means a command was expanded.\n   */\n  announceConversion = (next) => {\n    if (this.isDeleting) {\n      this.isDeleting = false;\n      return;\n    }\n\n    const converted = Object.keys(next).some((id) => {\n      const before = this.promptValues[id] || '';\n      const after = next[id] || '';\n\n      return after.length > before.length + 1 && /\\\\/.test(after.slice(before.length));\n    });\n\n    if (converted) {\n      this.announce('Converted to math symbol');\n    }\n  };\n\n  /** Does this latex contain answer blocks? */\n  isInteractive() {\n    const latex = this.props.latex || '';\n\n    return fieldIds(latex).length > 0 || latex.indexOf('\\\\placeholder') !== -1;\n  }\n\n  renderMarkup() {\n    const markup = latexToMarkup(this.props.latex);\n\n    if (markup !== this.state.markup) {\n      this.setState({ markup });\n    }\n  }\n\n  /** MathQuill's `innerFields` equivalent, keyed by prompt id. */\n  values() {\n    if (!this.mathField) {\n      return {};\n    }\n\n    const out = {};\n\n    (this.mathField.getPrompts() || []).forEach((id) => {\n      out[id] = fromMathLive(this.mathField.getPromptValue(id));\n    });\n\n    return out;\n  }\n\n  /**\n   * A MathQuill-inner-field-like handle for a prompt.\n   *\n   * The old API handed callers a MathQuill field object, and consumers commonly\n   * called `field.latex()` on it. There is no equivalent object in MathLive -\n   * prompts are addressed by id - so this adapter exposes the parts that were\n   * actually used: `id` and a get/set `latex()`.\n   */\n  promptHandle(id) {\n    return {\n      id,\n      latex: (value) => {\n        if (!this.mathField) {\n          return '';\n        }\n\n        if (value === undefined) {\n          return fromMathLive(this.mathField.getPromptValue(id));\n        }\n\n        this.mathField.setPromptValue(id, toMathLive(value), {});\n\n        return value;\n      },\n    };\n  }\n\n  /** All prompt handles, the analogue of `mathField.innerFields`. */\n  get innerFields() {\n    if (!this.mathField) {\n      return [];\n    }\n\n    return (this.mathField.getPrompts() || []).map((id) => this.promptHandle(id));\n  }\n\n  onPromptInput = () => {\n    const { onSubFieldChange, getFieldName } = this.props;\n\n    if (!this.mathField) {\n      return;\n    }\n\n    const next = this.values();\n\n    this.announceConversion(next);\n\n    if (!onSubFieldChange) {\n      this.promptValues = next;\n      return;\n    }\n\n    const fields = this.innerFields;\n\n    // Emit only the prompts whose value actually changed, mirroring the\n    // per-field granularity of the old onSubFieldChange(name, latex).\n    Object.keys(next).forEach((id) => {\n      if (next[id] === this.promptValues[id]) {\n        return;\n      }\n\n      const name = getFieldName(this.promptHandle(id), fields) || id;\n\n      onSubFieldChange(name, next[id]);\n    });\n\n    this.promptValues = next;\n  };\n\n  onPromptFocus = () => {\n    const { onSubFieldFocus, getFieldName } = this.props;\n\n    if (!this.mathField || !onSubFieldFocus) {\n      return;\n    }\n\n    try {\n      const ids = this.mathField.getPrompts() || [];\n      // The focused prompt is the one containing the current selection.\n      const focused = ids.find((id) => {\n        const range = this.mathField.getPromptRange(id);\n        const selection = this.mathField.selection;\n\n        if (!range || !selection || !selection.ranges || !selection.ranges.length) {\n          return false;\n        }\n\n        const [start, end] = range;\n        const [selStart] = selection.ranges[0];\n\n        return selStart >= start && selStart <= end;\n      });\n\n      if (focused) {\n        const handle = this.promptHandle(focused);\n        const name = getFieldName(handle, this.innerFields) || focused;\n\n        if (this.props.setInput) {\n          this.props.setInput(handle);\n        }\n\n        onSubFieldFocus(name, handle);\n      }\n    } catch (e) {\n      log('error resolving focused prompt: %s', e.message);\n    }\n  };\n\n  focus() {\n    this.mathField && this.mathField.focus();\n  }\n\n  blur() {\n    this.mathField && this.mathField.blur();\n  }\n\n  render() {\n    const { className, onFocus, onBlur } = this.props;\n    const { markup } = this.state;\n\n    if (this.mathField || this.isInteractive()) {\n      return <Holder className={className} onFocus={onFocus} onBlur={onBlur} ref={this.holderRef} />;\n    }\n\n    return (\n      <Holder\n        className={className}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        ref={this.holderRef}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{ __html: markup }}\n      />\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@pie-lib/math-input-mathlive",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.0.0",
+  "description": "MathLive-based math input (drop-in alternative to @pie-lib/math-input)",
+  "main": "lib/index.js",
+  "module": "src/index.jsx",
+  "repository": "pie-framework/pie-lib",
+  "license": "ISC",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/render-ui": "^6.1.0",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "mathlive": "^0.110.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {}
+}

package/src/__tests__/index.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  keys,
+  keysForGrade,
+  addBrackets,
+  removeBrackets,
+  registerEmbed,
+  applyStaticMath,
+  updateSpans,
+  mf,
+  mq,
+  MathInput,
+  HorizontalKeypad,
+  KeyPad,
+} from '../index';
+
+describe('math-input-mathlive public API', () => {
+  it('mirrors the @pie-lib/math-input export surface', () => {
+    expect(typeof keysForGrade).toBe('function');
+    expect(typeof addBrackets).toBe('function');
+    expect(typeof removeBrackets).toBe('function');
+    expect(typeof registerEmbed).toBe('function');
+    expect(typeof applyStaticMath).toBe('function');
+    expect(typeof updateSpans).toBe('function');
+    expect(keys).toBeDefined();
+    expect(keys.baseSet).toBeDefined();
+  });
+
+  it('exports the field wrappers under both mf and mq', () => {
+    expect(mf.Input).toBeDefined();
+    expect(mf.Static).toBeDefined();
+    // `mq` alias lets a consumer swap packages by changing only the import.
+    expect(mq).toBe(mf);
+  });
+
+  it('updateSpans is a safe no-op', () => {
+    expect(() => updateSpans()).not.toThrow();
+  });
+
+  it('CommonMqStyles keeps the shape consumers destructure', () => {
+    // math-toolbar does:
+    //   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }
+    //     = mq.CommonMqStyles;
+    const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mf.CommonMqStyles;
+
+    [commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles].forEach((s) => {
+      expect(s).toBeDefined();
+      expect(typeof s).toBe('object');
+    });
+  });
+
+  it('bracket helpers round-trip', () => {
+    expect(addBrackets('x')).toEqual('\\(x\\)');
+    expect(removeBrackets('\\(x\\)')).toEqual('x');
+    expect(removeBrackets(addBrackets('\\frac{1}{2}'))).toEqual('\\frac{1}{2}');
+  });
+
+  it('keysForGrade returns a 5-row keyset', () => {
+    const set = keysForGrade('geometry');
+
+    expect(Array.isArray(set)).toBe(true);
+    expect(set.length).toBe(5);
+  });
+});
+
+describe('rendering', () => {
+  // MathLive is a browser-only custom element; loadMathLive() resolves async and
+  // is a no-op-ish under jsdom. These assert the components mount without
+  // throwing, which is what regressed most often in the MathQuill version.
+  it('KeyPad renders without a live MathLive instance', () => {
+    const { container } = render(<KeyPad onPress={() => {}} />);
+
+    expect(container.querySelectorAll('button').length).toBeGreaterThan(0);
+  });
+
+  it('KeyPad falls back to raw latex for labels before MathLive loads', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi', category: 'constants' }]]} />,
+    );
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('KeyPad fires onPress with the key definition', () => {
+    const onPress = jest.fn();
+    const key = { name: 'x', label: 'x', write: 'x', category: 'vars' };
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[key]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(key);
+  });
+
+  it('MathInput mounts', () => {
+    expect(() => render(<MathInput latex="\\frac{1}{2}" onChange={() => {}} />)).not.toThrow();
+  });
+
+  it('HorizontalKeypad mounts and reports the legacy {value,type} model', () => {
+    const onClick = jest.fn();
+
+    expect(() => render(<HorizontalKeypad onClick={onClick} />)).not.toThrow();
+  });
+
+  it('Static renders display-mode latex without a mathfield', () => {
+    expect(() => render(<mf.Static latex="\\frac{1}{2}" />)).not.toThrow();
+  });
+});