@pie-lib/math-toolbar 1.11.31-next.135 → 1.12.0-beta.2

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import MathPreview from '../math-preview';
+
+describe('snapshot', () => {
+  let wrapper;
+
+  beforeAll(() => {
+    wrapper = (extras) => {
+      const defaults = {
+        node: {
+          data: {
+            get: jest.fn().mockReturnValue('sqrt(5)'),
+          },
+        },
+        classes: {},
+        isSelected: false,
+        onFocus: jest.fn(),
+        onBlur: jest.fn(),
+      };
+      const props = { ...defaults, ...extras };
+
+      return shallow(<MathPreview {...props} />);
+    };
+  });
+
+  it('renders', () => {
+    expect(wrapper()).toMatchSnapshot();
+  });
+});

package/src/editor-and-pad.jsx

@@ -1,17 +1,20 @@
-import { HorizontalKeypad, mq } from '@pie-lib/math-input';
 import React from 'react';
 import debug from 'debug';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
-const log = debug('@pie-lib:math-toolbar:editor-and-pad');
-import { color, InputContainer } from '@pie-lib/render-ui';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
-import { updateSpans } from '@pie-lib/math-input';
 import isEqual from 'lodash/isEqual';
 
+import { HorizontalKeypad, mq, updateSpans } from '@pie-lib/math-input';
+import { color, InputContainer } from '@pie-lib/render-ui';
+import { markFractionBaseSuperscripts } from './utils';
+
+const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+const log = debug('@pie-lib:math-toolbar:editor-and-pad');
+
 const decimalRegex = /\.|,/g;
 
 const toNodeData = (data) => {
@@ -54,6 +57,7 @@ export class EditorAndPad extends React.Component {
     onBlur: PropTypes.func,
     onChange: PropTypes.func.isRequired,
     classes: PropTypes.object,
+    setKeypadInteraction: PropTypes.func,
   };
 
   constructor(props) {
@@ -124,6 +128,7 @@ export class EditorAndPad extends React.Component {
     const { onChange, noDecimal } = this.props;
 
     updateSpans();
+    markFractionBaseSuperscripts();
 
     this.updateDisable(true);
 
@@ -206,6 +211,7 @@ export class EditorAndPad extends React.Component {
       controlledKeypad,
       controlledKeypadMode,
       showKeypad,
+      setKeypadInteraction,
       noDecimal,
       hideInput,
       layoutForKeyPad,
@@ -273,11 +279,13 @@ export class EditorAndPad extends React.Component {
         {shouldShowKeypad && (
           <HorizontalKeypad
             className={cx(classes[keypadMode], classes.keyboard)}
+            controlledKeypadMode={controlledKeypadMode}
             layoutForKeyPad={layoutForKeyPad}
             additionalKeys={additionalKeys}
             mode={controlledKeypadMode ? this.state.equationEditor : keypadMode}
             onClick={this.onClick}
             noDecimal={noDecimal}
+            setKeypadInteraction={setKeypadInteraction}
           />
         )}
       </div>
@@ -311,7 +319,7 @@ const styles = (theme) => ({
         left: '-1px',
       },
       '&:after': {
-        position: 'absolute',
+        position: 'absolute !important',
         top: '0px !important',
         right: '-2px',
       },
@@ -325,22 +333,11 @@ const styles = (theme) => ({
         right: '-1px',
       },
     },
-    '& *': {
-      fontFamily: 'MJXZERO, MJXTEX !important',
-
-      '& .mq-math-mode > span > var': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important',
-      },
-      '& .mq-math-mode span var': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important',
-      },
-      '& .mq-math-mode .mq-nonSymbola': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important',
-      },
-      '& .mq-math-mode > span > var.mq-operator-name': {
-        fontFamily: 'MJXZERO, MJXTEX !important',
-      },
 
+    '& *': {
+      ...commonMqFontStyles,
+      ...supsubStyles,
+      ...longdivStyles,
       '& .mq-math-mode .mq-sqrt-prefix': {
         verticalAlign: 'baseline !important',
         top: '1px !important',
@@ -351,12 +348,6 @@ const styles = (theme) => ({
         paddingTop: '0.45em !important',
       },
 
-      '& .mq-math-mode sup.mq-nthroot': {
-        fontSize: '70% !important',
-        verticalAlign: '0.5em !important',
-        paddingRight: '0.15em',
-      },
-
       '& .mq-math-mode .mq-empty': {
         padding: '9px 1px !important',
       },
@@ -369,31 +360,12 @@ const styles = (theme) => ({
         top: '0 !important',
       },
 
-      '& .mq-longdiv-inner': {
-        marginTop: '-1px',
-        marginLeft: '5px !important;',
-
-        '& > .mq-empty': {
-          padding: '0 !important',
-          marginLeft: '0px !important',
-          marginTop: '2px',
-        },
-      },
-
-      '& .mq-math-mode .mq-longdiv': {
-        display: 'inline-flex !important',
-      },
-
       '& .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
         marginLeft: '4px !important',
         paddingTop: '6px !important',
         paddingLeft: '6px !important',
       },
 
-      '& .mq-math-mode .mq-supsub': {
-        fontSize: '70.7% !important',
-      },
-
       '& .mq-math-mode .mq-paren': {
         verticalAlign: 'top !important',
         padding: '1px 0.1em !important',
@@ -406,18 +378,6 @@ const styles = (theme) => ({
         paddingTop: '5px !important',
       },
 
-      '& .mq-supsub ': {
-        fontSize: '70.7%',
-      },
-
-      '& .mq-math-mode .mq-supsub.mq-sup-only': {
-        verticalAlign: '-0.1em !important',
-
-        '& .mq-sup': {
-          marginBottom: '0px !important',
-        },
-      },
-
       '& .mq-math-mode .mq-denominator': {
         marginTop: '-5px !important',
         padding: '0.5em 0.1em 0.1em !important',
@@ -428,8 +388,10 @@ const styles = (theme) => ({
         paddingBottom: '0 !important',
         marginBottom: '-2px',
       },
+    },
 
-      '-webkit-font-smoothing': 'antialiased !important',
+    '& span[data-prime="true"]': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
     },
   },
   hide: {
@@ -526,68 +488,7 @@ const styles = (theme) => ({
   error: {
     border: '2px solid red',
   },
-  keyboard: {
-    '& *': {
-      fontFamily: 'MJXZERO, MJXTEX !important',
-
-      '& .mq-math-mode > span > var': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important',
-      },
-      '& .mq-math-mode span var': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important',
-      },
-      '& .mq-math-mode .mq-nonSymbola': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important',
-      },
-      '& .mq-math-mode > span > var.mq-operator-name': {
-        fontFamily: 'MJXZERO, MJXTEX !important',
-      },
-
-      '& .mq-math-mode .mq-sqrt-prefix': {
-        top: '0 !important',
-      },
-
-      '& .mq-math-mode .mq-empty': {
-        padding: '9px 1px !important',
-      },
-
-      '& .mq-longdiv-inner': {
-        marginTop: '-1px',
-        marginLeft: '5px !important;',
-
-        '& > .mq-empty': {
-          padding: '0 !important',
-          marginLeft: '0px !important',
-          marginTop: '2px',
-        },
-      },
-
-      '& .mq-math-mode .mq-longdiv': {
-        display: 'inline-flex !important',
-      },
-
-      '& .mq-math-mode .mq-supsub': {
-        fontSize: '70.7% !important',
-      },
-
-      '& .mq-math-mode .mq-sqrt-stem': {
-        marginTop: '-5px',
-        paddingTop: '4px',
-      },
-
-      '& .mq-math-mode .mq-paren': {
-        verticalAlign: 'middle !important',
-      },
-
-      '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
-        padding: '0 !important',
-      },
-
-      '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
-        padding: '0 !important',
-      },
-    },
-  },
+  keyboard: commonMqKeyboardStyles,
   language: {
     '& *': {
       fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',

package/src/index.jsx

@@ -28,6 +28,8 @@ export class MathToolbar extends React.Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     hideDoneButton: PropTypes.bool,
+    keyPadCharacterRef: PropTypes.func,
+    setKeypadInteraction: PropTypes.func,
   };
 
   static defaultProps = {
@@ -83,6 +85,8 @@ export class MathToolbar extends React.Component {
       onBlur,
       hideDoneButton,
       error,
+      keyPadCharacterRef,
+      setKeypadInteraction,
       maxResponseAreas,
     } = this.props;
 
@@ -96,6 +100,8 @@ export class MathToolbar extends React.Component {
         additionalKeys={additionalKeys}
         noDecimal={noDecimal}
         keypadMode={keypadMode}
+        keyPadCharacterRef={keyPadCharacterRef}
+        setKeypadInteraction={setKeypadInteraction}
         onChange={this.onChange}
         onDone={this.done}
         onFocus={onFocus}
@@ -136,6 +142,8 @@ export class RawPureToolbar extends React.Component {
     hideDoneButtonBackground: PropTypes.bool,
     error: PropTypes.any,
     maxResponseAreas: PropTypes.number,
+    keyPadCharacterRef: PropTypes.object,
+    setKeypadInteraction: PropTypes.func,
   };
 
   static defaultProps = {
@@ -158,6 +166,8 @@ export class RawPureToolbar extends React.Component {
       hideInput,
       noLatexHandling,
       layoutForKeyPad,
+      keyPadCharacterRef,
+      setKeypadInteraction,
       latex,
       onChange,
       onDone,
@@ -171,7 +181,7 @@ export class RawPureToolbar extends React.Component {
     } = this.props;
 
     return (
-      <div className={cx(classes.pureToolbar, (classNames || {}).toolbar)}>
+      <div className={cx(classes.pureToolbar, (classNames || {}).toolbar)} ref={keyPadCharacterRef}>
         <div />
         <EditorAndPad
           autoFocus={autoFocus}
@@ -193,6 +203,7 @@ export class RawPureToolbar extends React.Component {
           onBlur={onBlur}
           error={error}
           maxResponseAreas={maxResponseAreas}
+          setKeypadInteraction={setKeypadInteraction}
         />
         {(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
           <DoneButton hideBackground={hideDoneButtonBackground} onClick={onDone} />

package/src/math-preview.jsx

@@ -4,6 +4,9 @@ import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import { mq } from '@pie-lib/math-input';
+import { markFractionBaseSuperscripts } from './utils';
+
+const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
 
 const log = debug('@pie-lib:math-toolbar:math-preview');
 
@@ -17,6 +20,17 @@ export class RawMathPreview extends React.Component {
     onBlur: PropTypes.func,
   };
 
+  componentDidMount() {
+    markFractionBaseSuperscripts();
+  }
+
+  componentDidUpdate(prevProps) {
+    // Re-run only if LaTeX changed
+    if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {
+      markFractionBaseSuperscripts();
+    }
+  }
+
   render() {
     log('[render] data: ', this.props.node.data);
     const latex = this.props.node.data.get('latex');
@@ -36,22 +50,9 @@ const mp = (theme) => ({
     display: 'inline-flex',
     alignItems: 'center',
     position: 'relative',
-    '& *': {
-      fontFamily: 'MJXZERO, MJXTEX !important',
-      '-webkit-font-smoothing': 'antialiased !important',
-    },
-    '& > .mq-math-mode > span > var': {
-      fontFamily: 'MJXZERO, MJXTEX-I !important',
-    },
-    '& > .mq-math-mode span var': {
-      fontFamily: 'MJXZERO, MJXTEX-I !important',
-    },
-    '& > .mq-math-mode .mq-nonSymbola': {
-      fontFamily: 'MJXZERO, MJXTEX-I !important',
-    },
-    '& > .mq-math-mode > span > var.mq-operator-name': {
-      fontFamily: 'MJXZERO, MJXTEX !important',
-    },
+    '& *': commonMqFontStyles,
+    ...supsubStyles,
+    ...longdivStyles,
     '& > .mq-math-mode': {
       border: 'solid 1px lightgrey',
     },
@@ -81,24 +82,6 @@ const mp = (theme) => ({
       paddingBottom: '0 !important',
       marginBottom: '-2px',
     },
-    '& > .mq-math-mode sup.mq-nthroot': {
-      fontSize: '70.7% !important',
-      verticalAlign: '0.5em !important',
-      paddingRight: '0.15em',
-    },
-    '& > .mq-longdiv-inner': {
-      marginTop: '-1px',
-      marginLeft: '5px !important;',
-
-      '& > .mq-empty': {
-        padding: '0 !important',
-        marginLeft: '0px !important',
-        marginTop: '2px',
-      },
-    },
-    '& > .mq-math-mode .mq-longdiv': {
-      display: 'inline-flex !important',
-    },
     '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
       paddingTop: '6px !important',
       paddingLeft: '4px !important',
@@ -106,9 +89,6 @@ const mp = (theme) => ({
     '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
       marginLeft: '0 !important',
     },
-    '& > .mq-math-mode .mq-supsub': {
-      fontSize: '70.7% !important',
-    },
     '& > .mq-math-mode .mq-overarrow': {
       fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
     },
@@ -123,17 +103,7 @@ const mp = (theme) => ({
       marginTop: '-2px !important',
       paddingTop: '5px !important',
     },
-    '& > .mq-supsub ': {
-      fontSize: '70.7%',
-    },
 
-    '& > .mq-math-mode .mq-supsub.mq-sup-only': {
-      verticalAlign: '-0.1em !important',
-
-      '& .mq-sup': {
-        marginBottom: '0px !important',
-      },
-    },
     '& .mq-overarrow-inner': {
       paddingTop: '0 !important',
       border: 'none !important',
@@ -152,9 +122,16 @@ const mp = (theme) => ({
         top: '-0.4em',
         left: '-1px',
       },
+      // NOTE: This workaround adds `!important` to enforce the correct positioning and styling
+      // of `.mq-overarrow.mq-arrow-both` elements in MathQuill. This ensures consistent display
+      // regardless of the order in which MathQuill is initialized on our websites.
+      //
+      // In the future, investigate why MathQuill scripts and styles are being initialized
+      // more than once and address the root cause to prevent potential conflicts and ensure
+      // optimal performance.
       '&:after': {
         top: '0px !important',
-        position: 'absolute',
+        position: 'absolute !important',
         right: '-2px',
       },
       '&.mq-empty:after': {
@@ -180,6 +157,9 @@ const mp = (theme) => ({
     '& .mq-parallelogram': {
       lineHeight: 0.85,
     },
+    '& span[data-prime="true"]': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
   },
   selected: {
     border: `solid 1px ${theme.palette.primary.main}`,

package/src/utils.js

@@ -0,0 +1,11 @@
+export const markFractionBaseSuperscripts = () => {
+  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach((supsub) => {
+    const prev = supsub.previousElementSibling;
+
+    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {
+      supsub.classList.add('mq-after-fraction-group');
+    } else {
+      supsub.classList.remove('mq-after-fraction-group');
+    }
+  });
+};

package/lib/done-button.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RawDoneButton = exports.DoneButton = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var RawDoneButton = function RawDoneButton(_ref) {
-  var classes = _ref.classes,
-      onClick = _ref.onClick,
-      hideBackground = _ref.hideBackground;
-  return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-    "aria-label": "Done",
-    className: classes.iconRoot,
-    onClick: onClick,
-    classes: {
-      label: classes.label,
-      root: (0, _classnames["default"])(classes.iconRoot, (0, _defineProperty2["default"])({}, classes.hideBackground, hideBackground))
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null));
-};
-
-exports.RawDoneButton = RawDoneButton;
-RawDoneButton.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  onClick: _propTypes["default"].func
-};
-
-var styles = function styles(theme) {
-  return {
-    iconRoot: {
-      verticalAlign: 'top',
-      width: '28px',
-      height: '28px',
-      color: '#00bb00'
-    },
-    hideBackground: {
-      backgroundColor: theme.palette.common.white,
-      '&:hover': {
-        backgroundColor: theme.palette.grey[200]
-      }
-    },
-    label: {
-      position: 'absolute',
-      top: '2px'
-    }
-  };
-};
-
-var DoneButton = (0, _styles.withStyles)(styles)(RawDoneButton);
-exports.DoneButton = DoneButton;
-//# sourceMappingURL=done-button.js.map

package/lib/done-button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/done-button.jsx"],"names":["RawDoneButton","classes","onClick","hideBackground","iconRoot","label","root","propTypes","PropTypes","object","isRequired","func","styles","theme","verticalAlign","width","height","color","backgroundColor","palette","common","white","grey","position","top","DoneButton"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,OAAZ,QAAYA,OAAZ;AAAA,MAAqBC,cAArB,QAAqBA,cAArB;AAAA,sBAC3B,gCAAC,sBAAD;AACE,kBAAW,MADb;AAEE,IAAA,SAAS,EAAEF,OAAO,CAACG,QAFrB;AAGE,IAAA,OAAO,EAAEF,OAHX;AAIE,IAAA,OAAO,EAAE;AACPG,MAAAA,KAAK,EAAEJ,OAAO,CAACI,KADR;AAEPC,MAAAA,IAAI,EAAE,4BAAWL,OAAO,CAACG,QAAnB,uCAAgCH,OAAO,CAACE,cAAxC,EAAyDA,cAAzD;AAFC;AAJX,kBASE,gCAAC,iBAAD,OATF,CAD2B;AAAA,CAAtB;;;AAcPH,aAAa,CAACO,SAAd,GAA0B;AACxBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADF;AAExBR,EAAAA,OAAO,EAAEM,sBAAUG;AAFK,CAA1B;;AAKA,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBT,IAAAA,QAAQ,EAAE;AACRU,MAAAA,aAAa,EAAE,KADP;AAERC,MAAAA,KAAK,EAAE,MAFC;AAGRC,MAAAA,MAAM,EAAE,MAHA;AAIRC,MAAAA,KAAK,EAAE;AAJC,KADe;AAOzBd,IAAAA,cAAc,EAAE;AACde,MAAAA,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,KADxB;AAGd,iBAAW;AACTH,QAAAA,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcG,IAAd,CAAmB,GAAnB;AADR;AAHG,KAPS;AAczBjB,IAAAA,KAAK,EAAE;AACLkB,MAAAA,QAAQ,EAAE,UADL;AAELC,MAAAA,GAAG,EAAE;AAFA;AAdkB,GAAZ;AAAA,CAAf;;AAmBO,IAAMC,UAAU,GAAG,wBAAWb,MAAX,EAAmBZ,aAAnB,CAAnB","sourcesContent":["import React from 'react';\n\nimport IconButton from '@material-ui/core/IconButton';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nexport const RawDoneButton = ({ classes, onClick, hideBackground }) => (\n  <IconButton\n    aria-label=\"Done\"\n    className={classes.iconRoot}\n    onClick={onClick}\n    classes={{\n      label: classes.label,\n      root: classNames(classes.iconRoot, { [classes.hideBackground]: hideBackground }),\n    }}\n  >\n    <Check />\n  </IconButton>\n);\n\nRawDoneButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  onClick: PropTypes.func,\n};\n\nconst styles = (theme) => ({\n  iconRoot: {\n    verticalAlign: 'top',\n    width: '28px',\n    height: '28px',\n    color: '#00bb00',\n  },\n  hideBackground: {\n    backgroundColor: theme.palette.common.white,\n\n    '&:hover': {\n      backgroundColor: theme.palette.grey[200],\n    },\n  },\n  label: {\n    position: 'absolute',\n    top: '2px',\n  },\n});\nexport const DoneButton = withStyles(styles)(RawDoneButton);\n"],"file":"done-button.js"}