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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/__tests__/math-preview.test.js +70 -0
  2. package/lib/__tests__/math-preview.test.js.map +1 -1
  3. package/lib/math-preview.js +4 -0
  4. package/lib/math-preview.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/__tests__/math-preview.test.js +65 -0
  7. package/src/math-preview.jsx +4 -0
package/lib/__tests__/math-preview.test.js CHANGED
@@ -1,9 +1,50 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
4
5
  var _react = _interopRequireDefault(require("react"));
5
6
  var _react2 = require("@testing-library/react");
6
7
  var _mathPreview = _interopRequireDefault(require("../math-preview"));
8
+ /** Every rule emotion has injected so far, as CSSStyleRule objects. */
9
+ var injectedRules = function injectedRules() {
10
+ return Array.from(document.querySelectorAll('style[data-emotion]')).flatMap(function (tag) {
11
+ return tag.sheet ? Array.from(tag.sheet.cssRules) : [];
12
+ }).filter(function (rule) {
13
+ return rule.selectorText;
14
+ });
15
+ };
16
+
17
+ /**
18
+ * The `.ML__latex` rule that actually applies to `element`.
19
+ *
20
+ * Matching with `element.matches` rather than string comparison means the
21
+ * assertions cover the selector too: a rule written as `& > .ML__latex` would
22
+ * not match the nested markup MathLive emits, and these tests would fail.
23
+ */
24
+ var mathLiveRuleFor = function mathLiveRuleFor(element) {
25
+ return injectedRules().find(function (rule) {
26
+ return rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText);
27
+ });
28
+ };
29
+
30
+ /**
31
+ * Stand in for MathLive's `convertLatexToMarkup` output, which is
32
+ * `<span class="ML__latex">...</span>` nested inside `mf.Static`'s holder span.
33
+ * MathLive does not load under jsdom, so the markup is added by hand.
34
+ */
35
+ var addStaticMarkup = function addStaticMarkup(container) {
36
+ var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
37
+ var parent = container.firstChild;
38
+ for (var i = 1; i < depth; i += 1) {
39
+ var wrapper = document.createElement('span');
40
+ parent.appendChild(wrapper);
41
+ parent = wrapper;
42
+ }
43
+ var markup = document.createElement('span');
44
+ markup.className = 'ML__latex';
45
+ parent.appendChild(markup);
46
+ return markup;
47
+ };
7
48
  describe('MathPreview', function () {
8
49
  var defaultProps = {
9
50
  latex: 'sqrt(5)',
@@ -17,5 +58,34 @@ describe('MathPreview', function () {
17
58
  container = _render.container;
18
59
  expect(container.firstChild).toBeInTheDocument();
19
60
  });
61
+ describe('MathLive static markup', function () {
62
+ it('is outlined and padded when not selected', function () {
63
+ var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_mathPreview["default"], (0, _extends2["default"])({}, defaultProps, {
64
+ isSelected: false
65
+ }))),
66
+ container = _render2.container;
67
+ var rule = mathLiveRuleFor(addStaticMarkup(container));
68
+ expect(rule).toBeDefined();
69
+ expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');
70
+ expect(rule.style.getPropertyValue('padding')).toEqual('5px');
71
+ });
72
+ it('drops its outline and padding when selected, so only the container border shows', function () {
73
+ var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_mathPreview["default"], (0, _extends2["default"])({}, defaultProps, {
74
+ isSelected: true
75
+ }))),
76
+ container = _render3.container;
77
+ var rule = mathLiveRuleFor(addStaticMarkup(container));
78
+ expect(rule).toBeDefined();
79
+ expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');
80
+ expect(rule.style.getPropertyValue('padding')).toEqual('0px');
81
+ });
82
+ it('is styled at any depth below the container, not just as a direct child', function () {
83
+ var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_mathPreview["default"], (0, _extends2["default"])({}, defaultProps, {
84
+ isSelected: false
85
+ }))),
86
+ container = _render4.container;
87
+ expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();
88
+ });
89
+ });
20
90
  });
21
91
  //# sourceMappingURL=math-preview.test.js.map
package/lib/__tests__/math-preview.test.js.map CHANGED
@@ -1 +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":[]}
1
+ {"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 CHANGED
@@ -38,6 +38,10 @@ var MathPreviewContainer = (0, _styles.styled)('div')(function (_ref) {
38
38
  '& > .mq-math-mode': {
39
39
  border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey'
40
40
  },
41
+ '& .ML__latex': {
42
+ border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
43
+ padding: isSelected ? '0px' : '5px'
44
+ },
41
45
  '& > .mq-focused': {
42
46
  outline: 'none',
43
47
  boxShadow: 'none',
package/lib/math-preview.js.map CHANGED
@@ -1 +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":[]}
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","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 CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "3.1.0-beta.2",
6
+ "version": "3.1.0-beta.3",
7
7
  "description": "Math toolbar for editing math equations",
8
8
  "keywords": [
9
9
  "math",
package/src/__tests__/math-preview.test.js CHANGED
@@ -2,6 +2,45 @@ import React from 'react';
2
2
  import { render } from '@testing-library/react';
3
3
  import MathPreview from '../math-preview';
4
4
 
5
+ /** Every rule emotion has injected so far, as CSSStyleRule objects. */
6
+ const injectedRules = () =>
7
+ Array.from(document.querySelectorAll('style[data-emotion]'))
8
+ .flatMap((tag) => (tag.sheet ? Array.from(tag.sheet.cssRules) : []))
9
+ .filter((rule) => rule.selectorText);
10
+
11
+ /**
12
+ * The `.ML__latex` rule that actually applies to `element`.
13
+ *
14
+ * Matching with `element.matches` rather than string comparison means the
15
+ * assertions cover the selector too: a rule written as `& > .ML__latex` would
16
+ * not match the nested markup MathLive emits, and these tests would fail.
17
+ */
18
+ const mathLiveRuleFor = (element) =>
19
+ injectedRules().find((rule) => rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText));
20
+
21
+ /**
22
+ * Stand in for MathLive's `convertLatexToMarkup` output, which is
23
+ * `<span class="ML__latex">...</span>` nested inside `mf.Static`'s holder span.
24
+ * MathLive does not load under jsdom, so the markup is added by hand.
25
+ */
26
+ const addStaticMarkup = (container, depth = 1) => {
27
+ let parent = container.firstChild;
28
+
29
+ for (let i = 1; i < depth; i += 1) {
30
+ const wrapper = document.createElement('span');
31
+
32
+ parent.appendChild(wrapper);
33
+ parent = wrapper;
34
+ }
35
+
36
+ const markup = document.createElement('span');
37
+
38
+ markup.className = 'ML__latex';
39
+ parent.appendChild(markup);
40
+
41
+ return markup;
42
+ };
43
+
5
44
  describe('MathPreview', () => {
6
45
  const defaultProps = {
7
46
  latex: 'sqrt(5)',
@@ -15,4 +54,30 @@ describe('MathPreview', () => {
15
54
  const { container } = render(<MathPreview {...defaultProps} />);
16
55
  expect(container.firstChild).toBeInTheDocument();
17
56
  });
57
+
58
+ describe('MathLive static markup', () => {
59
+ it('is outlined and padded when not selected', () => {
60
+ const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
61
+ const rule = mathLiveRuleFor(addStaticMarkup(container));
62
+
63
+ expect(rule).toBeDefined();
64
+ expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');
65
+ expect(rule.style.getPropertyValue('padding')).toEqual('5px');
66
+ });
67
+
68
+ it('drops its outline and padding when selected, so only the container border shows', () => {
69
+ const { container } = render(<MathPreview {...defaultProps} isSelected />);
70
+ const rule = mathLiveRuleFor(addStaticMarkup(container));
71
+
72
+ expect(rule).toBeDefined();
73
+ expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');
74
+ expect(rule.style.getPropertyValue('padding')).toEqual('0px');
75
+ });
76
+
77
+ it('is styled at any depth below the container, not just as a direct child', () => {
78
+ const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
79
+
80
+ expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();
81
+ });
82
+ });
18
83
  });
package/src/math-preview.jsx CHANGED
@@ -19,6 +19,10 @@ const MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({
19
19
  '& > .mq-math-mode': {
20
20
  border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
21
21
  },
22
+ '& .ML__latex': {
23
+ border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
24
+ padding: isSelected ? '0px' : '5px',
25
+ },
22
26
  '& > .mq-focused': {
23
27
  outline: 'none',
24
28
  boxShadow: 'none',