@pie-lib/math-toolbar 3.1.0-beta.2 → 3.1.0-beta.4

package/lib/__tests__/editor-and-pad-mathlive.test.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorAndPad = require("../editor-and-pad");
+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; }
+/**
+ * Covers the call sites that changed when this package moved from
+ * @pie-lib/math-input (MathQuill) to @pie-lib/math-input-mathlive.
+ *
+ * All three were MathQuill-shaped and silently changed meaning:
+ *  - shouldComponentUpdate read `this.input.mathField.latex()`, which throws now
+ *    (and the field loads asynchronously, so `this.input` can be null)
+ *  - the mixed-number workaround poked `__controller.cursor`, a MathQuill
+ *    internal with no MathLive equivalent
+ *  - onClick routes keypad presses through the imperative field API
+ */
+describe('EditorAndPad after the MathLive migration', function () {
+  var props = function props() {
+    var over = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return _objectSpread({
+      classes: {},
+      classNames: {},
+      onChange: jest.fn()
+    }, over);
+  };
+  describe('shouldComponentUpdate', function () {
+    it('treats a missing input ref as different, so the first render is not skipped', function () {
+      var c = new _editorAndPad.EditorAndPad(props({
+        latex: 'x'
+      }));
+      c.input = null;
+      expect(c.shouldComponentUpdate({
+        latex: 'x'
+      }, {})).toBe(true);
+    });
+    it('does not throw when the math engine has not loaded yet', function () {
+      var c = new _editorAndPad.EditorAndPad(props({
+        latex: 'x'
+      }));
+
+      // latex() returns '' until MathLive is ready
+      c.input = {
+        latex: function latex() {
+          return '';
+        }
+      };
+      expect(function () {
+        return c.shouldComponentUpdate({
+          latex: 'x'
+        }, {});
+      }).not.toThrow();
+      expect(c.shouldComponentUpdate({
+        latex: 'x'
+      }, {})).toBe(true);
+    });
+    it('skips the update when the field already holds the incoming latex', function () {
+      var c = new _editorAndPad.EditorAndPad(props({
+        latex: 'x',
+        keypadMode: 'a',
+        noDecimal: false
+      }));
+      c.input = {
+        latex: function latex() {
+          return 'x';
+        }
+      };
+      c.state = {
+        equationEditor: 'geometry'
+      };
+      expect(c.shouldComponentUpdate({
+        latex: 'x',
+        keypadMode: 'a',
+        noDecimal: false
+      }, c.state)).toBe(false);
+    });
+    it('re-renders when the field differs from the incoming latex', function () {
+      var c = new _editorAndPad.EditorAndPad(props({
+        latex: 'y'
+      }));
+      c.input = {
+        latex: function latex() {
+          return 'x';
+        }
+      };
+      expect(c.shouldComponentUpdate({
+        latex: 'y'
+      }, {})).toBe(true);
+    });
+    it('uses input.latex(), never input.mathField.latex()', function () {
+      var c = new _editorAndPad.EditorAndPad(props({
+        latex: 'x'
+      }));
+      var latex = jest.fn(function () {
+        return 'x';
+      });
+
+      // deliberately no `mathField` - the old code would have thrown here
+      c.input = {
+        latex: latex
+      };
+      c.state = {
+        equationEditor: 'geometry'
+      };
+      c.shouldComponentUpdate({
+        latex: 'x'
+      }, c.state);
+      expect(latex).toHaveBeenCalled();
+    });
+  });
+  describe('onClick key routing', function () {
+    var withInput = function withInput() {
+      var over = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var c = new _editorAndPad.EditorAndPad(props(over));
+      var calls = {
+        write: [],
+        command: [],
+        keystroke: [],
+        clear: 0
+      };
+      c.input = {
+        write: function write(v) {
+          return calls.write.push(v);
+        },
+        command: function command(v) {
+          return calls.command.push(v);
+        },
+        keystroke: function keystroke(v) {
+          return calls.keystroke.push(v);
+        },
+        clear: function clear() {
+          return calls.clear++;
+        }
+      };
+      c.updateDisable = function () {};
+      return {
+        c: c,
+        calls: calls
+      };
+    };
+
+    // toNodeData keys this off `value === 'clear'`, not `type`
+    it('clear', function () {
+      var _withInput = withInput(),
+        c = _withInput.c,
+        calls = _withInput.calls;
+      c.onClick({
+        value: 'clear'
+      });
+      expect(calls.clear).toBe(1);
+    });
+    it('command', function () {
+      var _withInput2 = withInput(),
+        c = _withInput2.c,
+        calls = _withInput2.calls;
+      c.onClick({
+        type: 'command',
+        value: '\\frac'
+      });
+      expect(calls.command).toEqual(['\\frac']);
+    });
+    it('cursor keystroke', function () {
+      var _withInput3 = withInput(),
+        c = _withInput3.c,
+        calls = _withInput3.calls;
+      c.onClick({
+        type: 'cursor',
+        value: 'Left'
+      });
+      expect(calls.keystroke).toEqual(['Left']);
+    });
+    it('answer block writes the response token', function () {
+      var _withInput4 = withInput(),
+        c = _withInput4.c,
+        calls = _withInput4.calls;
+      c.onClick({
+        type: 'answer'
+      });
+      expect(calls.write).toEqual(['%response%']);
+    });
+    it('plain value', function () {
+      var _withInput5 = withInput(),
+        c = _withInput5.c,
+        calls = _withInput5.calls;
+      c.onClick({
+        value: 'x'
+      });
+      expect(calls.write).toEqual(['x']);
+    });
+    it('ignores a nullish key', function () {
+      var _withInput6 = withInput(),
+        c = _withInput6.c,
+        calls = _withInput6.calls;
+      expect(function () {
+        return c.onClick(null);
+      }).not.toThrow();
+      expect(calls.write).toEqual([]);
+    });
+  });
+  describe('onEditorChange', function () {
+    var withInput = function withInput() {
+      var over = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var onChange = jest.fn();
+      var c = new _editorAndPad.EditorAndPad(props(_objectSpread({
+        onChange: onChange
+      }, over)));
+      var calls = {
+        keystroke: [],
+        clear: 0,
+        write: []
+      };
+      c.input = {
+        keystroke: function keystroke(v) {
+          return calls.keystroke.push(v);
+        },
+        clear: function clear() {
+          return calls.clear++;
+        },
+        write: function write(v) {
+          return calls.write.push(v);
+        }
+      };
+      c.updateDisable = function () {};
+      return {
+        c: c,
+        onChange: onChange,
+        calls: calls
+      };
+    };
+    it('propagates ordinary latex to onChange', function () {
+      var _withInput7 = withInput(),
+        c = _withInput7.c,
+        onChange = _withInput7.onChange;
+      c.onEditorChange('\\frac{1}{2}');
+      expect(onChange).toHaveBeenCalledWith('\\frac{1}{2}');
+    });
+    it('strips decimals when noDecimal is set', function () {
+      var _withInput8 = withInput({
+          noDecimal: true
+        }),
+        c = _withInput8.c,
+        onChange = _withInput8.onChange,
+        calls = _withInput8.calls;
+      c.onEditorChange('1.5');
+      expect(calls.clear).toBe(1);
+      expect(calls.write).toEqual(['15']);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+    it('undoes the empty fraction after a digit with a public delete, not MathQuill internals', function () {
+      var _withInput9 = withInput(),
+        c = _withInput9.c,
+        onChange = _withInput9.onChange,
+        calls = _withInput9.calls;
+
+      // the shape the old __controller hack targeted
+      c.onEditorChange('2\\ \\frac{1}{ }');
+      expect(calls.keystroke).toEqual(['Backspace']);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+    it('does not treat normal fractions as the mixed-number case', function () {
+      var _withInput0 = withInput(),
+        c = _withInput0.c,
+        onChange = _withInput0.onChange,
+        calls = _withInput0.calls;
+      c.onEditorChange('\\frac{1}{2}');
+      expect(calls.keystroke).toEqual([]);
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+});
+//# sourceMappingURL=editor-and-pad-mathlive.test.js.map

package/lib/__tests__/editor-and-pad-mathlive.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-and-pad-mathlive.test.js","names":["_editorAndPad","require","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","describe","props","over","undefined","classes","classNames","onChange","jest","fn","it","c","EditorAndPad","latex","input","expect","shouldComponentUpdate","toBe","not","toThrow","keypadMode","noDecimal","state","equationEditor","toHaveBeenCalled","withInput","calls","write","command","keystroke","clear","v","updateDisable","_withInput","onClick","value","_withInput2","type","toEqual","_withInput3","_withInput4","_withInput5","_withInput6","_withInput7","onEditorChange","toHaveBeenCalledWith","_withInput8","_withInput9","_withInput0"],"sources":["../../src/__tests__/editor-and-pad-mathlive.test.js"],"sourcesContent":["import { EditorAndPad } from '../editor-and-pad';\n\n/**\n * Covers the call sites that changed when this package moved from\n * @pie-lib/math-input (MathQuill) to @pie-lib/math-input-mathlive.\n *\n * All three were MathQuill-shaped and silently changed meaning:\n *  - shouldComponentUpdate read `this.input.mathField.latex()`, which throws now\n *    (and the field loads asynchronously, so `this.input` can be null)\n *  - the mixed-number workaround poked `__controller.cursor`, a MathQuill\n *    internal with no MathLive equivalent\n *  - onClick routes keypad presses through the imperative field API\n */\ndescribe('EditorAndPad after the MathLive migration', () => {\n  const props = (over = {}) => ({ classes: {}, classNames: {}, onChange: jest.fn(), ...over });\n\n  describe('shouldComponentUpdate', () => {\n    it('treats a missing input ref as different, so the first render is not skipped', () => {\n      const c = new EditorAndPad(props({ latex: 'x' }));\n\n      c.input = null;\n\n      expect(c.shouldComponentUpdate({ latex: 'x' }, {})).toBe(true);\n    });\n\n    it('does not throw when the math engine has not loaded yet', () => {\n      const c = new EditorAndPad(props({ latex: 'x' }));\n\n      // latex() returns '' until MathLive is ready\n      c.input = { latex: () => '' };\n\n      expect(() => c.shouldComponentUpdate({ latex: 'x' }, {})).not.toThrow();\n      expect(c.shouldComponentUpdate({ latex: 'x' }, {})).toBe(true);\n    });\n\n    it('skips the update when the field already holds the incoming latex', () => {\n      const c = new EditorAndPad(props({ latex: 'x', keypadMode: 'a', noDecimal: false }));\n\n      c.input = { latex: () => 'x' };\n      c.state = { equationEditor: 'geometry' };\n\n      expect(c.shouldComponentUpdate({ latex: 'x', keypadMode: 'a', noDecimal: false }, c.state)).toBe(false);\n    });\n\n    it('re-renders when the field differs from the incoming latex', () => {\n      const c = new EditorAndPad(props({ latex: 'y' }));\n\n      c.input = { latex: () => 'x' };\n\n      expect(c.shouldComponentUpdate({ latex: 'y' }, {})).toBe(true);\n    });\n\n    it('uses input.latex(), never input.mathField.latex()', () => {\n      const c = new EditorAndPad(props({ latex: 'x' }));\n      const latex = jest.fn(() => 'x');\n\n      // deliberately no `mathField` - the old code would have thrown here\n      c.input = { latex };\n      c.state = { equationEditor: 'geometry' };\n      c.shouldComponentUpdate({ latex: 'x' }, c.state);\n\n      expect(latex).toHaveBeenCalled();\n    });\n  });\n\n  describe('onClick key routing', () => {\n    const withInput = (over = {}) => {\n      const c = new EditorAndPad(props(over));\n      const calls = { write: [], command: [], keystroke: [], clear: 0 };\n\n      c.input = {\n        write: (v) => calls.write.push(v),\n        command: (v) => calls.command.push(v),\n        keystroke: (v) => calls.keystroke.push(v),\n        clear: () => calls.clear++,\n      };\n      c.updateDisable = () => {};\n\n      return { c, calls };\n    };\n\n    // toNodeData keys this off `value === 'clear'`, not `type`\n    it('clear', () => {\n      const { c, calls } = withInput();\n\n      c.onClick({ value: 'clear' });\n      expect(calls.clear).toBe(1);\n    });\n\n    it('command', () => {\n      const { c, calls } = withInput();\n\n      c.onClick({ type: 'command', value: '\\\\frac' });\n      expect(calls.command).toEqual(['\\\\frac']);\n    });\n\n    it('cursor keystroke', () => {\n      const { c, calls } = withInput();\n\n      c.onClick({ type: 'cursor', value: 'Left' });\n      expect(calls.keystroke).toEqual(['Left']);\n    });\n\n    it('answer block writes the response token', () => {\n      const { c, calls } = withInput();\n\n      c.onClick({ type: 'answer' });\n      expect(calls.write).toEqual(['%response%']);\n    });\n\n    it('plain value', () => {\n      const { c, calls } = withInput();\n\n      c.onClick({ value: 'x' });\n      expect(calls.write).toEqual(['x']);\n    });\n\n    it('ignores a nullish key', () => {\n      const { c, calls } = withInput();\n\n      expect(() => c.onClick(null)).not.toThrow();\n      expect(calls.write).toEqual([]);\n    });\n  });\n\n  describe('onEditorChange', () => {\n    const withInput = (over = {}) => {\n      const onChange = jest.fn();\n      const c = new EditorAndPad(props({ onChange, ...over }));\n      const calls = { keystroke: [], clear: 0, write: [] };\n\n      c.input = {\n        keystroke: (v) => calls.keystroke.push(v),\n        clear: () => calls.clear++,\n        write: (v) => calls.write.push(v),\n      };\n      c.updateDisable = () => {};\n\n      return { c, onChange, calls };\n    };\n\n    it('propagates ordinary latex to onChange', () => {\n      const { c, onChange } = withInput();\n\n      c.onEditorChange('\\\\frac{1}{2}');\n      expect(onChange).toHaveBeenCalledWith('\\\\frac{1}{2}');\n    });\n\n    it('strips decimals when noDecimal is set', () => {\n      const { c, onChange, calls } = withInput({ noDecimal: true });\n\n      c.onEditorChange('1.5');\n\n      expect(calls.clear).toBe(1);\n      expect(calls.write).toEqual(['15']);\n      expect(onChange).not.toHaveBeenCalled();\n    });\n\n    it('undoes the empty fraction after a digit with a public delete, not MathQuill internals', () => {\n      const { c, onChange, calls } = withInput();\n\n      // the shape the old __controller hack targeted\n      c.onEditorChange('2\\\\ \\\\frac{1}{ }');\n\n      expect(calls.keystroke).toEqual(['Backspace']);\n      expect(onChange).not.toHaveBeenCalled();\n    });\n\n    it('does not treat normal fractions as the mixed-number case', () => {\n      const { c, onChange, calls } = withInput();\n\n      c.onEditorChange('\\\\frac{1}{2}');\n\n      expect(calls.keystroke).toEqual([]);\n      expect(onChange).toHaveBeenCalled();\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/__tests__/math-preview.test.js

@@ -1,9 +1,50 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _mathPreview = _interopRequireDefault(require("../math-preview"));
+/** Every rule emotion has injected so far, as CSSStyleRule objects. */
+var injectedRules = function injectedRules() {
+  return Array.from(document.querySelectorAll('style[data-emotion]')).flatMap(function (tag) {
+    return tag.sheet ? Array.from(tag.sheet.cssRules) : [];
+  }).filter(function (rule) {
+    return rule.selectorText;
+  });
+};
+
+/**
+ * The `.ML__latex` rule that actually applies to `element`.
+ *
+ * Matching with `element.matches` rather than string comparison means the
+ * assertions cover the selector too: a rule written as `& > .ML__latex` would
+ * not match the nested markup MathLive emits, and these tests would fail.
+ */
+var mathLiveRuleFor = function mathLiveRuleFor(element) {
+  return injectedRules().find(function (rule) {
+    return rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText);
+  });
+};
+
+/**
+ * Stand in for MathLive's `convertLatexToMarkup` output, which is
+ * `<span class="ML__latex">...</span>` nested inside `mf.Static`'s holder span.
+ * MathLive does not load under jsdom, so the markup is added by hand.
+ */
+var addStaticMarkup = function addStaticMarkup(container) {
+  var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var parent = container.firstChild;
+  for (var i = 1; i < depth; i += 1) {
+    var wrapper = document.createElement('span');
+    parent.appendChild(wrapper);
+    parent = wrapper;
+  }
+  var markup = document.createElement('span');
+  markup.className = 'ML__latex';
+  parent.appendChild(markup);
+  return markup;
+};
 describe('MathPreview', function () {
   var defaultProps = {
     latex: 'sqrt(5)',
@@ -17,5 +58,34 @@ describe('MathPreview', function () {
       container = _render.container;
     expect(container.firstChild).toBeInTheDocument();
   });
+  describe('MathLive static markup', function () {
+    it('is outlined and padded when not selected', function () {
+      var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_mathPreview["default"], (0, _extends2["default"])({}, defaultProps, {
+          isSelected: false
+        }))),
+        container = _render2.container;
+      var rule = mathLiveRuleFor(addStaticMarkup(container));
+      expect(rule).toBeDefined();
+      expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');
+      expect(rule.style.getPropertyValue('padding')).toEqual('5px');
+    });
+    it('drops its outline and padding when selected, so only the container border shows', function () {
+      var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_mathPreview["default"], (0, _extends2["default"])({}, defaultProps, {
+          isSelected: true
+        }))),
+        container = _render3.container;
+      var rule = mathLiveRuleFor(addStaticMarkup(container));
+      expect(rule).toBeDefined();
+      expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');
+      expect(rule.style.getPropertyValue('padding')).toEqual('0px');
+    });
+    it('is styled at any depth below the container, not just as a direct child', function () {
+      var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_mathPreview["default"], (0, _extends2["default"])({}, defaultProps, {
+          isSelected: false
+        }))),
+        container = _render4.container;
+      expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();
+    });
+  });
 });
 //# sourceMappingURL=math-preview.test.js.map

package/lib/__tests__/math-preview.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"math-preview.test.js","names":["_react","_interopRequireDefault","require","_react2","_mathPreview","describe","defaultProps","latex","classes","isSelected","onFocus","jest","fn","onBlur","it","_render","render","createElement","container","expect","firstChild","toBeInTheDocument"],"sources":["../../src/__tests__/math-preview.test.js"],"sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport MathPreview from '../math-preview';\n\ndescribe('MathPreview', () => {\n  const defaultProps = {\n    latex: 'sqrt(5)',\n    classes: {},\n    isSelected: false,\n    onFocus: jest.fn(),\n    onBlur: jest.fn(),\n  };\n\n  it('renders with default props', () => {\n    const { container } = render(<MathPreview {...defaultProps} />);\n    expect(container.firstChild).toBeInTheDocument();\n  });\n});\n"],"mappings":";;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEAG,QAAQ,CAAC,aAAa,EAAE,YAAM;EAC5B,IAAMC,YAAY,GAAG;IACnBC,KAAK,EAAE,SAAS;IAChBC,OAAO,EAAE,CAAC,CAAC;IACXC,UAAU,EAAE,KAAK;IACjBC,OAAO,EAAEC,IAAI,CAACC,EAAE,CAAC,CAAC;IAClBC,MAAM,EAAEF,IAAI,CAACC,EAAE,CAAC;EAClB,CAAC;EAEDE,EAAE,CAAC,4BAA4B,EAAE,YAAM;IACrC,IAAAC,OAAA,GAAsB,IAAAC,cAAM,eAAChB,MAAA,YAAAiB,aAAA,CAACb,YAAA,WAAW,EAAKE,YAAe,CAAC,CAAC;MAAvDY,SAAS,GAAAH,OAAA,CAATG,SAAS;IACjBC,MAAM,CAACD,SAAS,CAACE,UAAU,CAAC,CAACC,iBAAiB,CAAC,CAAC;EAClD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"math-preview.test.js","names":["_react","_interopRequireDefault","require","_react2","_mathPreview","injectedRules","Array","from","document","querySelectorAll","flatMap","tag","sheet","cssRules","filter","rule","selectorText","mathLiveRuleFor","element","find","includes","matches","addStaticMarkup","container","depth","arguments","length","undefined","parent","firstChild","i","wrapper","createElement","appendChild","markup","className","describe","defaultProps","latex","classes","isSelected","onFocus","jest","fn","onBlur","it","_render","render","expect","toBeInTheDocument","_render2","_extends2","toBeDefined","style","getPropertyValue","toEqual","_render3","_render4"],"sources":["../../src/__tests__/math-preview.test.js"],"sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport MathPreview from '../math-preview';\n\n/** Every rule emotion has injected so far, as CSSStyleRule objects. */\nconst injectedRules = () =>\n  Array.from(document.querySelectorAll('style[data-emotion]'))\n    .flatMap((tag) => (tag.sheet ? Array.from(tag.sheet.cssRules) : []))\n    .filter((rule) => rule.selectorText);\n\n/**\n * The `.ML__latex` rule that actually applies to `element`.\n *\n * Matching with `element.matches` rather than string comparison means the\n * assertions cover the selector too: a rule written as `& > .ML__latex` would\n * not match the nested markup MathLive emits, and these tests would fail.\n */\nconst mathLiveRuleFor = (element) =>\n  injectedRules().find((rule) => rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText));\n\n/**\n * Stand in for MathLive's `convertLatexToMarkup` output, which is\n * `<span class=\"ML__latex\">...</span>` nested inside `mf.Static`'s holder span.\n * MathLive does not load under jsdom, so the markup is added by hand.\n */\nconst addStaticMarkup = (container, depth = 1) => {\n  let parent = container.firstChild;\n\n  for (let i = 1; i < depth; i += 1) {\n    const wrapper = document.createElement('span');\n\n    parent.appendChild(wrapper);\n    parent = wrapper;\n  }\n\n  const markup = document.createElement('span');\n\n  markup.className = 'ML__latex';\n  parent.appendChild(markup);\n\n  return markup;\n};\n\ndescribe('MathPreview', () => {\n  const defaultProps = {\n    latex: 'sqrt(5)',\n    classes: {},\n    isSelected: false,\n    onFocus: jest.fn(),\n    onBlur: jest.fn(),\n  };\n\n  it('renders with default props', () => {\n    const { container } = render(<MathPreview {...defaultProps} />);\n    expect(container.firstChild).toBeInTheDocument();\n  });\n\n  describe('MathLive static markup', () => {\n    it('is outlined and padded when not selected', () => {\n      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);\n      const rule = mathLiveRuleFor(addStaticMarkup(container));\n\n      expect(rule).toBeDefined();\n      expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');\n      expect(rule.style.getPropertyValue('padding')).toEqual('5px');\n    });\n\n    it('drops its outline and padding when selected, so only the container border shows', () => {\n      const { container } = render(<MathPreview {...defaultProps} isSelected />);\n      const rule = mathLiveRuleFor(addStaticMarkup(container));\n\n      expect(rule).toBeDefined();\n      expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');\n      expect(rule.style.getPropertyValue('padding')).toEqual('0px');\n    });\n\n    it('is styled at any depth below the container, not just as a direct child', () => {\n      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);\n\n      expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/math-preview.js

@@ -38,6 +38,10 @@ var MathPreviewContainer = (0, _styles.styled)('div')(function (_ref) {
     '& > .mq-math-mode': {
       border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey'
     },
+    '& .ML__latex': {
+      border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
+      padding: isSelected ? '0px' : '5px'
+    },
     '& > .mq-focused': {
       outline: 'none',
       boxShadow: 'none',

package/lib/math-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"math-preview.js","names":["_react","_interopRequireDefault","require","_debug","_styles","_propTypes","_mathInputMathlive","_utils","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_mq$CommonMqStyles","mq","CommonMqStyles","commonMqFontStyles","longdivStyles","supsubStyles","log","debug","MathPreviewContainer","styled","_ref","theme","isSelected","display","alignItems","position","border","outline","boxShadow","borderRadius","paddingTop","verticalAlign","top","left","marginTop","padding","paddingBottom","marginBottom","paddingLeft","marginLeft","fontFamily","borderTop","minWidth","lineHeight","right","concat","palette","primary","main","InsideOverlay","bottom","RawMathPreview","exports","_React$Component","_classCallCheck2","_inherits2","_createClass2","key","value","componentDidMount","markFractionBaseSuperscripts","componentDidUpdate","prevProps","props","latex","render","_this$props","onFocus","onBlur","createElement","Static","React","Component","PropTypes","string","bool","func","_default"],"sources":["../src/math-preview.jsx"],"sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport { mq } from '@pie-lib/math-input-mathlive';\nimport { markFractionBaseSuperscripts } from './utils';\n\nconst { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;\n\nconst log = debug('@pie-lib:math-toolbar:math-preview');\n\nconst MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  position: 'relative',\n  '& *': commonMqFontStyles,\n  ...supsubStyles,\n  ...longdivStyles,\n  '& > .mq-math-mode': {\n    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',\n  },\n  '& > .mq-focused': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'solid 1px black',\n    borderRadius: '0px',\n  },\n  '& > .mq-math-mode .mq-root-block': {\n    paddingTop: '7px !important',\n  },\n  '& > .mq-math-mode .mq-overarc ': {\n    paddingTop: '0.45em !important',\n  },\n  '& > .mq-math-mode .mq-sqrt-prefix': {\n    verticalAlign: 'baseline !important',\n    top: '1px !important',\n    left: '-0.1em !important',\n  },\n  '& > .mq-math-mode .mq-denominator': {\n    marginTop: '-5px !important',\n    padding: '0.5em 0.1em 0.1em !important',\n  },\n  '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {\n    padding: '0 0.1em !important',\n    paddingBottom: '0 !important',\n    marginBottom: '-2px',\n  },\n  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {\n    paddingTop: '6px !important',\n    paddingLeft: '4px !important',\n  },\n  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {\n    marginLeft: '0 !important',\n  },\n  '& > .mq-math-mode .mq-overarrow': {\n    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n  },\n  '& > .mq-math-mode .mq-paren': {\n    verticalAlign: 'top !important',\n    padding: '1px 0.1em !important',\n  },\n  '& > .mq-math-mode .mq-sqrt-stem': {\n    borderTop: '0.07em solid',\n    marginLeft: '-1.5px',\n    marginTop: '-2px !important',\n    paddingTop: '5px !important',\n  },\n  '& .mq-overarrow-inner': {\n    paddingTop: '0 !important',\n    border: 'none !important',\n  },\n  '& .mq-editable-field .mq-cursor': {\n    marginTop: '-15px !important',\n  },\n  '& .mq-overarrow.mq-arrow-both': {\n    top: '7.5px',\n    marginTop: '0px',\n    minWidth: '1.23em',\n    '& *': {\n      lineHeight: '1 !important',\n    },\n    '&:before': {\n      top: '-0.4em',\n      left: '-1px',\n    },\n    '&:after': {\n      top: '0px !important',\n      position: 'absolute !important',\n      right: '-2px',\n    },\n    '&.mq-empty:after': {\n      top: '-0.45em',\n    },\n  },\n  '& .mq-overarrow.mq-arrow-right': {\n    '&:before': {\n      top: '-0.4em',\n      right: '-1px',\n    },\n  },\n  '& .mq-overarrow-inner-right': {\n    display: 'none !important',\n  },\n  '& .mq-overarrow-inner-left': {\n    display: 'none !important',\n  },\n  '& .mq-longdiv-inner': {\n    borderTop: '1px solid !important',\n    paddingTop: '1.5px !important',\n  },\n  '& .mq-parallelogram': {\n    lineHeight: 0.85,\n  },\n  '& span[data-prime=\"true\"]': {\n    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n  },\n  ...(isSelected && {\n    border: `solid 1px ${theme.palette.primary.main}`,\n  }),\n}));\n\nconst InsideOverlay = styled('span')({\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  right: 0,\n  top: 0,\n});\n\nexport class RawMathPreview extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string,\n    isSelected: PropTypes.bool,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n  };\n\n  componentDidMount() {\n    markFractionBaseSuperscripts();\n  }\n\n  componentDidUpdate(prevProps) {\n    // Re-run only if LaTeX changed\n    if (this.props.latex !== prevProps.latex) {\n      markFractionBaseSuperscripts();\n    }\n  }\n\n  render() {\n    const { isSelected, onFocus, onBlur, latex } = this.props;\n    log('[render] latex: ', latex);\n    return (\n      <MathPreviewContainer isSelected={isSelected}>\n        {' '}\n        <InsideOverlay />\n        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />\n      </MathPreviewContainer>\n    );\n  }\n}\n\nexport default RawMathPreview;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"math-preview.js","names":["_react","_interopRequireDefault","require","_debug","_styles","_propTypes","_mathInputMathlive","_utils","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_mq$CommonMqStyles","mq","CommonMqStyles","commonMqFontStyles","longdivStyles","supsubStyles","log","debug","MathPreviewContainer","styled","_ref","theme","isSelected","display","alignItems","position","border","padding","outline","boxShadow","borderRadius","paddingTop","verticalAlign","top","left","marginTop","paddingBottom","marginBottom","paddingLeft","marginLeft","fontFamily","borderTop","minWidth","lineHeight","right","concat","palette","primary","main","InsideOverlay","bottom","RawMathPreview","exports","_React$Component","_classCallCheck2","_inherits2","_createClass2","key","value","componentDidMount","markFractionBaseSuperscripts","componentDidUpdate","prevProps","props","latex","render","_this$props","onFocus","onBlur","createElement","Static","React","Component","PropTypes","string","bool","func","_default"],"sources":["../src/math-preview.jsx"],"sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport { mq } from '@pie-lib/math-input-mathlive';\nimport { markFractionBaseSuperscripts } from './utils';\n\nconst { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;\n\nconst log = debug('@pie-lib:math-toolbar:math-preview');\n\nconst MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  position: 'relative',\n  '& *': commonMqFontStyles,\n  ...supsubStyles,\n  ...longdivStyles,\n  '& > .mq-math-mode': {\n    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',\n  },\n  '& .ML__latex': {\n    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',\n    padding: isSelected ? '0px' : '5px',\n  },\n  '& > .mq-focused': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'solid 1px black',\n    borderRadius: '0px',\n  },\n  '& > .mq-math-mode .mq-root-block': {\n    paddingTop: '7px !important',\n  },\n  '& > .mq-math-mode .mq-overarc ': {\n    paddingTop: '0.45em !important',\n  },\n  '& > .mq-math-mode .mq-sqrt-prefix': {\n    verticalAlign: 'baseline !important',\n    top: '1px !important',\n    left: '-0.1em !important',\n  },\n  '& > .mq-math-mode .mq-denominator': {\n    marginTop: '-5px !important',\n    padding: '0.5em 0.1em 0.1em !important',\n  },\n  '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {\n    padding: '0 0.1em !important',\n    paddingBottom: '0 !important',\n    marginBottom: '-2px',\n  },\n  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {\n    paddingTop: '6px !important',\n    paddingLeft: '4px !important',\n  },\n  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {\n    marginLeft: '0 !important',\n  },\n  '& > .mq-math-mode .mq-overarrow': {\n    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n  },\n  '& > .mq-math-mode .mq-paren': {\n    verticalAlign: 'top !important',\n    padding: '1px 0.1em !important',\n  },\n  '& > .mq-math-mode .mq-sqrt-stem': {\n    borderTop: '0.07em solid',\n    marginLeft: '-1.5px',\n    marginTop: '-2px !important',\n    paddingTop: '5px !important',\n  },\n  '& .mq-overarrow-inner': {\n    paddingTop: '0 !important',\n    border: 'none !important',\n  },\n  '& .mq-editable-field .mq-cursor': {\n    marginTop: '-15px !important',\n  },\n  '& .mq-overarrow.mq-arrow-both': {\n    top: '7.5px',\n    marginTop: '0px',\n    minWidth: '1.23em',\n    '& *': {\n      lineHeight: '1 !important',\n    },\n    '&:before': {\n      top: '-0.4em',\n      left: '-1px',\n    },\n    '&:after': {\n      top: '0px !important',\n      position: 'absolute !important',\n      right: '-2px',\n    },\n    '&.mq-empty:after': {\n      top: '-0.45em',\n    },\n  },\n  '& .mq-overarrow.mq-arrow-right': {\n    '&:before': {\n      top: '-0.4em',\n      right: '-1px',\n    },\n  },\n  '& .mq-overarrow-inner-right': {\n    display: 'none !important',\n  },\n  '& .mq-overarrow-inner-left': {\n    display: 'none !important',\n  },\n  '& .mq-longdiv-inner': {\n    borderTop: '1px solid !important',\n    paddingTop: '1.5px !important',\n  },\n  '& .mq-parallelogram': {\n    lineHeight: 0.85,\n  },\n  '& span[data-prime=\"true\"]': {\n    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n  },\n  ...(isSelected && {\n    border: `solid 1px ${theme.palette.primary.main}`,\n  }),\n}));\n\nconst InsideOverlay = styled('span')({\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  right: 0,\n  top: 0,\n});\n\nexport class RawMathPreview extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string,\n    isSelected: PropTypes.bool,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n  };\n\n  componentDidMount() {\n    markFractionBaseSuperscripts();\n  }\n\n  componentDidUpdate(prevProps) {\n    // Re-run only if LaTeX changed\n    if (this.props.latex !== prevProps.latex) {\n      markFractionBaseSuperscripts();\n    }\n  }\n\n  render() {\n    const { isSelected, onFocus, onBlur, latex } = this.props;\n    log('[render] latex: ', latex);\n    return (\n      <MathPreviewContainer isSelected={isSelected}>\n        {' '}\n        <InsideOverlay />\n        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />\n      </MathPreviewContainer>\n    );\n  }\n}\n\nexport default RawMathPreview;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.1.0-beta.2",
+  "version": "3.1.0-beta.4",
   "description": "Math toolbar for editing math equations",
   "keywords": [
     "math",
@@ -21,7 +21,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/math-input-mathlive": "^1.0.7",
+    "@pie-lib/math-input-mathlive": "^1.0.8",
     "@pie-lib/render-ui": "^6.1.0",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

package/src/__tests__/editor-and-pad-mathlive.test.js

@@ -0,0 +1,178 @@
+import { EditorAndPad } from '../editor-and-pad';
+
+/**
+ * Covers the call sites that changed when this package moved from
+ * @pie-lib/math-input (MathQuill) to @pie-lib/math-input-mathlive.
+ *
+ * All three were MathQuill-shaped and silently changed meaning:
+ *  - shouldComponentUpdate read `this.input.mathField.latex()`, which throws now
+ *    (and the field loads asynchronously, so `this.input` can be null)
+ *  - the mixed-number workaround poked `__controller.cursor`, a MathQuill
+ *    internal with no MathLive equivalent
+ *  - onClick routes keypad presses through the imperative field API
+ */
+describe('EditorAndPad after the MathLive migration', () => {
+  const props = (over = {}) => ({ classes: {}, classNames: {}, onChange: jest.fn(), ...over });
+
+  describe('shouldComponentUpdate', () => {
+    it('treats a missing input ref as different, so the first render is not skipped', () => {
+      const c = new EditorAndPad(props({ latex: 'x' }));
+
+      c.input = null;
+
+      expect(c.shouldComponentUpdate({ latex: 'x' }, {})).toBe(true);
+    });
+
+    it('does not throw when the math engine has not loaded yet', () => {
+      const c = new EditorAndPad(props({ latex: 'x' }));
+
+      // latex() returns '' until MathLive is ready
+      c.input = { latex: () => '' };
+
+      expect(() => c.shouldComponentUpdate({ latex: 'x' }, {})).not.toThrow();
+      expect(c.shouldComponentUpdate({ latex: 'x' }, {})).toBe(true);
+    });
+
+    it('skips the update when the field already holds the incoming latex', () => {
+      const c = new EditorAndPad(props({ latex: 'x', keypadMode: 'a', noDecimal: false }));
+
+      c.input = { latex: () => 'x' };
+      c.state = { equationEditor: 'geometry' };
+
+      expect(c.shouldComponentUpdate({ latex: 'x', keypadMode: 'a', noDecimal: false }, c.state)).toBe(false);
+    });
+
+    it('re-renders when the field differs from the incoming latex', () => {
+      const c = new EditorAndPad(props({ latex: 'y' }));
+
+      c.input = { latex: () => 'x' };
+
+      expect(c.shouldComponentUpdate({ latex: 'y' }, {})).toBe(true);
+    });
+
+    it('uses input.latex(), never input.mathField.latex()', () => {
+      const c = new EditorAndPad(props({ latex: 'x' }));
+      const latex = jest.fn(() => 'x');
+
+      // deliberately no `mathField` - the old code would have thrown here
+      c.input = { latex };
+      c.state = { equationEditor: 'geometry' };
+      c.shouldComponentUpdate({ latex: 'x' }, c.state);
+
+      expect(latex).toHaveBeenCalled();
+    });
+  });
+
+  describe('onClick key routing', () => {
+    const withInput = (over = {}) => {
+      const c = new EditorAndPad(props(over));
+      const calls = { write: [], command: [], keystroke: [], clear: 0 };
+
+      c.input = {
+        write: (v) => calls.write.push(v),
+        command: (v) => calls.command.push(v),
+        keystroke: (v) => calls.keystroke.push(v),
+        clear: () => calls.clear++,
+      };
+      c.updateDisable = () => {};
+
+      return { c, calls };
+    };
+
+    // toNodeData keys this off `value === 'clear'`, not `type`
+    it('clear', () => {
+      const { c, calls } = withInput();
+
+      c.onClick({ value: 'clear' });
+      expect(calls.clear).toBe(1);
+    });
+
+    it('command', () => {
+      const { c, calls } = withInput();
+
+      c.onClick({ type: 'command', value: '\\frac' });
+      expect(calls.command).toEqual(['\\frac']);
+    });
+
+    it('cursor keystroke', () => {
+      const { c, calls } = withInput();
+
+      c.onClick({ type: 'cursor', value: 'Left' });
+      expect(calls.keystroke).toEqual(['Left']);
+    });
+
+    it('answer block writes the response token', () => {
+      const { c, calls } = withInput();
+
+      c.onClick({ type: 'answer' });
+      expect(calls.write).toEqual(['%response%']);
+    });
+
+    it('plain value', () => {
+      const { c, calls } = withInput();
+
+      c.onClick({ value: 'x' });
+      expect(calls.write).toEqual(['x']);
+    });
+
+    it('ignores a nullish key', () => {
+      const { c, calls } = withInput();
+
+      expect(() => c.onClick(null)).not.toThrow();
+      expect(calls.write).toEqual([]);
+    });
+  });
+
+  describe('onEditorChange', () => {
+    const withInput = (over = {}) => {
+      const onChange = jest.fn();
+      const c = new EditorAndPad(props({ onChange, ...over }));
+      const calls = { keystroke: [], clear: 0, write: [] };
+
+      c.input = {
+        keystroke: (v) => calls.keystroke.push(v),
+        clear: () => calls.clear++,
+        write: (v) => calls.write.push(v),
+      };
+      c.updateDisable = () => {};
+
+      return { c, onChange, calls };
+    };
+
+    it('propagates ordinary latex to onChange', () => {
+      const { c, onChange } = withInput();
+
+      c.onEditorChange('\\frac{1}{2}');
+      expect(onChange).toHaveBeenCalledWith('\\frac{1}{2}');
+    });
+
+    it('strips decimals when noDecimal is set', () => {
+      const { c, onChange, calls } = withInput({ noDecimal: true });
+
+      c.onEditorChange('1.5');
+
+      expect(calls.clear).toBe(1);
+      expect(calls.write).toEqual(['15']);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('undoes the empty fraction after a digit with a public delete, not MathQuill internals', () => {
+      const { c, onChange, calls } = withInput();
+
+      // the shape the old __controller hack targeted
+      c.onEditorChange('2\\ \\frac{1}{ }');
+
+      expect(calls.keystroke).toEqual(['Backspace']);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('does not treat normal fractions as the mixed-number case', () => {
+      const { c, onChange, calls } = withInput();
+
+      c.onEditorChange('\\frac{1}{2}');
+
+      expect(calls.keystroke).toEqual([]);
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/math-preview.test.js

@@ -2,6 +2,45 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import MathPreview from '../math-preview';
 
+/** Every rule emotion has injected so far, as CSSStyleRule objects. */
+const injectedRules = () =>
+  Array.from(document.querySelectorAll('style[data-emotion]'))
+    .flatMap((tag) => (tag.sheet ? Array.from(tag.sheet.cssRules) : []))
+    .filter((rule) => rule.selectorText);
+
+/**
+ * The `.ML__latex` rule that actually applies to `element`.
+ *
+ * Matching with `element.matches` rather than string comparison means the
+ * assertions cover the selector too: a rule written as `& > .ML__latex` would
+ * not match the nested markup MathLive emits, and these tests would fail.
+ */
+const mathLiveRuleFor = (element) =>
+  injectedRules().find((rule) => rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText));
+
+/**
+ * Stand in for MathLive's `convertLatexToMarkup` output, which is
+ * `<span class="ML__latex">...</span>` nested inside `mf.Static`'s holder span.
+ * MathLive does not load under jsdom, so the markup is added by hand.
+ */
+const addStaticMarkup = (container, depth = 1) => {
+  let parent = container.firstChild;
+
+  for (let i = 1; i < depth; i += 1) {
+    const wrapper = document.createElement('span');
+
+    parent.appendChild(wrapper);
+    parent = wrapper;
+  }
+
+  const markup = document.createElement('span');
+
+  markup.className = 'ML__latex';
+  parent.appendChild(markup);
+
+  return markup;
+};
+
 describe('MathPreview', () => {
   const defaultProps = {
     latex: 'sqrt(5)',
@@ -15,4 +54,30 @@ describe('MathPreview', () => {
     const { container } = render(<MathPreview {...defaultProps} />);
     expect(container.firstChild).toBeInTheDocument();
   });
+
+  describe('MathLive static markup', () => {
+    it('is outlined and padded when not selected', () => {
+      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
+      const rule = mathLiveRuleFor(addStaticMarkup(container));
+
+      expect(rule).toBeDefined();
+      expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');
+      expect(rule.style.getPropertyValue('padding')).toEqual('5px');
+    });
+
+    it('drops its outline and padding when selected, so only the container border shows', () => {
+      const { container } = render(<MathPreview {...defaultProps} isSelected />);
+      const rule = mathLiveRuleFor(addStaticMarkup(container));
+
+      expect(rule).toBeDefined();
+      expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');
+      expect(rule.style.getPropertyValue('padding')).toEqual('0px');
+    });
+
+    it('is styled at any depth below the container, not just as a direct child', () => {
+      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
+
+      expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();
+    });
+  });
 });

package/src/math-preview.jsx

@@ -19,6 +19,10 @@ const MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({
   '& > .mq-math-mode': {
     border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
   },
+  '& .ML__latex': {
+    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
+    padding: isSelected ? '0px' : '5px',
+  },
   '& > .mq-focused': {
     outline: 'none',
     boxShadow: 'none',