@pie-lib/math-toolbar 2.0.0-beta.3 → 2.0.0-next.0

package/lib/math-preview.js

@@ -5,209 +5,189 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.RawMathPreview = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _get = _interopRequireDefault(require("lodash/get"));
 var _debug = _interopRequireDefault(require("debug"));
-var _styles = require("@material-ui/styles");
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mathInput = require("@pie-lib/math-input");
+var _utils = require("./utils");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _mq$CommonMqStyles = _mathInput.mq.CommonMqStyles,
+  commonMqFontStyles = _mq$CommonMqStyles.commonMqFontStyles,
+  longdivStyles = _mq$CommonMqStyles.longdivStyles,
+  supsubStyles = _mq$CommonMqStyles.supsubStyles;
 var log = (0, _debug["default"])('@pie-lib:math-toolbar:math-preview');
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      position: 'relative',
+var MathPreviewContainer = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme,
+    isSelected = _ref.isSelected;
+  return _objectSpread(_objectSpread(_objectSpread({
+    display: 'inline-flex',
+    alignItems: 'center',
+    position: 'relative',
+    '& *': commonMqFontStyles
+  }, supsubStyles), longdivStyles), {}, {
+    '& > .mq-math-mode': {
+      border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey'
+    },
+    '& > .mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: 'solid 1px black',
+      borderRadius: '0px'
+    },
+    '& > .mq-math-mode .mq-root-block': {
+      paddingTop: '7px !important'
+    },
+    '& > .mq-math-mode .mq-overarc ': {
+      paddingTop: '0.45em !important'
+    },
+    '& > .mq-math-mode .mq-sqrt-prefix': {
+      verticalAlign: 'baseline !important',
+      top: '1px !important',
+      left: '-0.1em !important'
+    },
+    '& > .mq-math-mode .mq-denominator': {
+      marginTop: '-5px !important',
+      padding: '0.5em 0.1em 0.1em !important'
+    },
+    '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
+      padding: '0 0.1em !important',
+      paddingBottom: '0 !important',
+      marginBottom: '-2px'
+    },
+    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
+      paddingTop: '6px !important',
+      paddingLeft: '4px !important'
+    },
+    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
+      marginLeft: '0 !important'
+    },
+    '& > .mq-math-mode .mq-overarrow': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    '& > .mq-math-mode .mq-paren': {
+      verticalAlign: 'top !important',
+      padding: '1px 0.1em !important'
+    },
+    '& > .mq-math-mode .mq-sqrt-stem': {
+      borderTop: '0.07em solid',
+      marginLeft: '-1.5px',
+      marginTop: '-2px !important',
+      paddingTop: '5px !important'
+    },
+    '& .mq-overarrow-inner': {
+      paddingTop: '0 !important',
+      border: 'none !important'
+    },
+    '& .mq-editable-field .mq-cursor': {
+      marginTop: '-15px !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      top: '7.5px',
+      marginTop: '0px',
+      minWidth: '1.23em',
       '& *': {
-        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'
-      },
-      '& > .mq-math-mode': {
-        border: 'solid 1px lightgrey'
-      },
-      '& > .mq-focused': {
-        outline: 'none',
-        boxShadow: 'none',
-        border: 'solid 1px black',
-        borderRadius: '0px'
-      },
-      '& > .mq-math-mode .mq-root-block': {
-        paddingTop: '7px !important'
-      },
-      '& > .mq-math-mode .mq-overarc ': {
-        paddingTop: '0.45em !important'
-      },
-      '& > .mq-math-mode .mq-sqrt-prefix': {
-        verticalAlign: 'baseline !important',
-        top: '1px !important',
-        left: '-0.1em !important'
-      },
-      '& > .mq-math-mode .mq-denominator': {
-        marginTop: '-5px !important',
-        padding: '0.5em 0.1em 0.1em !important'
-      },
-      '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
-        padding: '0 0.1em !important',
-        paddingBottom: '0 !important',
-        marginBottom: '-2px'
+        lineHeight: '1 !important'
       },
-      '& > .mq-math-mode sup.mq-nthroot': {
-        fontSize: '70.7% !important',
-        verticalAlign: '0.5em !important',
-        paddingRight: '0.15em'
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px'
       },
-      '& > .mq-longdiv-inner': {
-        marginTop: '-1px',
-        marginLeft: '5px !important;',
-        '& > .mq-empty': {
-          padding: '0 !important',
-          marginLeft: '0px !important',
-          marginTop: '2px'
-        }
+      '&:after': {
+        top: '0px !important',
+        position: 'absolute !important',
+        right: '-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'
-      },
-      '& > .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'
-      },
-      '& > .mq-math-mode .mq-paren': {
-        verticalAlign: 'top !important',
-        padding: '1px 0.1em !important'
-      },
-      '& > .mq-math-mode .mq-sqrt-stem': {
-        borderTop: '0.07em solid',
-        marginLeft: '-1.5px',
-        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'
-      },
-      '& .mq-editable-field .mq-cursor': {
-        marginTop: '-15px !important'
-      },
-      '& .mq-overarrow.mq-arrow-both': {
-        top: '7.5px',
-        marginTop: '0px',
-        minWidth: '1.23em',
-        '& *': {
-          lineHeight: '1 !important'
-        },
-        '&:before': {
-          top: '-0.4em',
-          left: '-1px'
-        },
-        '&:after': {
-          top: '0px !important',
-          position: 'absolute',
-          right: '-2px'
-        },
-        '&.mq-empty:after': {
-          top: '-0.45em'
-        }
-      },
-      '& .mq-overarrow.mq-arrow-right': {
-        '&:before': {
-          top: '-0.4em',
-          right: '-1px'
-        }
-      },
-      '& .mq-overarrow-inner-right': {
-        display: 'none !important'
-      },
-      '& .mq-overarrow-inner-left': {
-        display: 'none !important'
-      },
-      '& .mq-longdiv-inner': {
-        borderTop: '1px solid !important',
-        paddingTop: '1.5px !important'
-      },
-      '& .mq-parallelogram': {
-        lineHeight: 0.85
+      '&.mq-empty:after': {
+        top: '-0.45em'
       }
     },
-    selected: {
-      border: "solid 1px ".concat((0, _get["default"])(theme, 'palette.primary.main')),
-      '& > .mq-math-mode': {
-        border: 'solid 0px lightgrey'
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px'
       }
     },
-    insideOverlay: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      top: 0
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important'
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    },
+    '& span[data-prime="true"]': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
     }
-  };
+  }, isSelected && {
+    border: "solid 1px ".concat(theme.palette.primary.main)
+  });
 });
-var RawMathPreview = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  log('[render] data: ', props.element.data);
-  var latex = props.element.data.latex;
-  var isSelected = props.isSelected,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    attributes = props.attributes,
-    children = props.children;
-  var classes = useStyles(props);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: (0, _classnames["default"])(classes.root, isSelected && classes.selected)
-  }, attributes, {
-    contentEditable: false,
-    ref: ref
-  }), children, " ", /*#__PURE__*/_react["default"].createElement("span", {
-    className: classes.insideOverlay
-  }), /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
-    latex: latex,
-    onFocus: onFocus,
-    onBlur: onBlur
-  }));
+var InsideOverlay = (0, _styles.styled)('span')({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0
 });
-exports.RawMathPreview = RawMathPreview;
-RawMathPreview.propTypes = {
-  element: _propTypes["default"].object,
+var RawMathPreview = exports.RawMathPreview = /*#__PURE__*/function (_React$Component) {
+  function RawMathPreview() {
+    (0, _classCallCheck2["default"])(this, RawMathPreview);
+    return _callSuper(this, RawMathPreview, arguments);
+  }
+  (0, _inherits2["default"])(RawMathPreview, _React$Component);
+  return (0, _createClass2["default"])(RawMathPreview, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      (0, _utils.markFractionBaseSuperscripts)();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Re-run only if LaTeX changed
+      if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {
+        (0, _utils.markFractionBaseSuperscripts)();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      log('[render] data: ', this.props.node.data);
+      var latex = this.props.node.data.get('latex');
+      var _this$props = this.props,
+        isSelected = _this$props.isSelected,
+        onFocus = _this$props.onFocus,
+        onBlur = _this$props.onBlur;
+      return /*#__PURE__*/_react["default"].createElement(MathPreviewContainer, {
+        isSelected: isSelected
+      }, ' ', /*#__PURE__*/_react["default"].createElement(InsideOverlay, null), /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
+        latex: latex,
+        onFocus: onFocus,
+        onBlur: onBlur
+      }));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(RawMathPreview, "propTypes", {
   latex: _propTypes["default"].string,
   node: _propTypes["default"].object,
-  classes: _propTypes["default"].object,
   isSelected: _propTypes["default"].bool,
   onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func
-};
-var _default = RawMathPreview;
-exports["default"] = _default;
+});
+var _default = exports["default"] = RawMathPreview;
 //# sourceMappingURL=math-preview.js.map

package/lib/math-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"math-preview.js","names":["_react","_interopRequireDefault","require","_classnames","_get","_debug","_styles","_propTypes","_mathInput","log","debug","useStyles","makeStyles","theme","root","display","alignItems","position","fontFamily","border","outline","boxShadow","borderRadius","paddingTop","verticalAlign","top","left","marginTop","padding","paddingBottom","marginBottom","fontSize","paddingRight","marginLeft","paddingLeft","borderTop","minWidth","lineHeight","right","selected","concat","get","insideOverlay","bottom","RawMathPreview","React","forwardRef","props","ref","element","data","latex","isSelected","onFocus","onBlur","attributes","children","classes","createElement","_extends2","className","classNames","contentEditable","mq","Static","exports","propTypes","PropTypes","object","string","node","bool","func","_default"],"sources":["../src/math-preview.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport get from 'lodash/get';\nimport debug from 'debug';\nimport { makeStyles } from '@material-ui/styles';\nimport PropTypes from 'prop-types';\nimport { mq } from '@pie-lib/math-input';\n\nconst log = debug('@pie-lib:math-toolbar:math-preview');\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    position: 'relative',\n    '& *': {\n      fontFamily: 'MJXZERO, MJXTEX !important',\n      '-webkit-font-smoothing': 'antialiased !important',\n    },\n    '& > .mq-math-mode > span > var': {\n      fontFamily: 'MJXZERO, MJXTEX-I !important',\n    },\n    '& > .mq-math-mode span var': {\n      fontFamily: 'MJXZERO, MJXTEX-I !important',\n    },\n    '& > .mq-math-mode .mq-nonSymbola': {\n      fontFamily: 'MJXZERO, MJXTEX-I !important',\n    },\n    '& > .mq-math-mode > span > var.mq-operator-name': {\n      fontFamily: 'MJXZERO, MJXTEX !important',\n    },\n    '& > .mq-math-mode': {\n      border: '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 sup.mq-nthroot': {\n      fontSize: '70.7% !important',\n      verticalAlign: '0.5em !important',\n      paddingRight: '0.15em',\n    },\n    '& > .mq-longdiv-inner': {\n      marginTop: '-1px',\n      marginLeft: '5px !important;',\n\n      '& > .mq-empty': {\n        padding: '0 !important',\n        marginLeft: '0px !important',\n        marginTop: '2px',\n      },\n    },\n    '& > .mq-math-mode .mq-longdiv': {\n      display: 'inline-flex !important',\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-supsub': {\n      fontSize: '70.7% !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\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-supsub ': {\n      fontSize: '70.7%',\n    },\n\n    '& > .mq-math-mode .mq-supsub.mq-sup-only': {\n      verticalAlign: '-0.1em !important',\n\n      '& .mq-sup': {\n        marginBottom: '0px !important',\n      },\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',\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  },\n  selected: {\n    border: `solid 1px ${get(theme, 'palette.primary.main')}`,\n    '& > .mq-math-mode': {\n      border: 'solid 0px lightgrey',\n    },\n  },\n  insideOverlay: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n}));\n\nexport const RawMathPreview = React.forwardRef((props, ref) => {\n  log('[render] data: ', props.element.data);\n  const latex = props.element.data.latex;\n  const { isSelected, onFocus, onBlur, attributes, children } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={classNames(classes.root, isSelected && classes.selected)}\n      {...attributes}\n      contentEditable={false}\n      ref={ref}\n    >\n      {children} <span className={classes.insideOverlay} />\n      <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />\n    </div>\n  );\n});\n\nRawMathPreview.propTypes = {\n  element: PropTypes.object,\n  latex: PropTypes.string,\n  node: PropTypes.object,\n  classes: PropTypes.object,\n  isSelected: PropTypes.bool,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n};\n\nexport default RawMathPreview;\n"],"mappings":"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"}
+{"version":3,"file":"math-preview.js","names":["_react","_interopRequireDefault","require","_debug","_styles","_propTypes","_mathInput","_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","node","data","get","render","latex","_this$props","onFocus","onBlur","createElement","Static","React","Component","PropTypes","string","object","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';\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    node: PropTypes.object,\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.node.data.get('latex') !== prevProps.node.data.get('latex')) {\n      markFractionBaseSuperscripts();\n    }\n  }\n\n  render() {\n    log('[render] data: ', this.props.node.data);\n    const latex = this.props.node.data.get('latex');\n    const { isSelected, onFocus, onBlur } = this.props;\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/lib/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markFractionBaseSuperscripts = void 0;
+var markFractionBaseSuperscripts = exports.markFractionBaseSuperscripts = function markFractionBaseSuperscripts() {
+  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach(function (supsub) {
+    var 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');
+    }
+  });
+};
+//# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["markFractionBaseSuperscripts","exports","document","querySelectorAll","forEach","supsub","prev","previousElementSibling","classList","contains","querySelector","add","remove"],"sources":["../src/utils.js"],"sourcesContent":["export const markFractionBaseSuperscripts = () => {\n  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach((supsub) => {\n    const prev = supsub.previousElementSibling;\n\n    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {\n      supsub.classList.add('mq-after-fraction-group');\n    } else {\n      supsub.classList.remove('mq-after-fraction-group');\n    }\n  });\n};\n"],"mappings":";;;;;;AAAO,IAAMA,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,SAA/BA,4BAA4BA,CAAA,EAAS;EAChDE,QAAQ,CAACC,gBAAgB,CAAC,wBAAwB,CAAC,CAACC,OAAO,CAAC,UAACC,MAAM,EAAK;IACtE,IAAMC,IAAI,GAAGD,MAAM,CAACE,sBAAsB;IAE1C,IAAID,IAAI,IAAIA,IAAI,CAACE,SAAS,CAACC,QAAQ,CAAC,aAAa,CAAC,IAAIH,IAAI,CAACI,aAAa,CAAC,cAAc,CAAC,EAAE;MACxFL,MAAM,CAACG,SAAS,CAACG,GAAG,CAAC,yBAAyB,CAAC;IACjD,CAAC,MAAM;MACLN,MAAM,CAACG,SAAS,CAACI,MAAM,CAAC,yBAAyB,CAAC;IACpD;EACF,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-next.0",
   "description": "Math toolbar for editing math equations",
   "keywords": [
     "math",
@@ -17,21 +17,31 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-lib/math-input": "^6.11.4",
-    "classnames": "^2.2.6",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/math-input": "6.31.2-next.16",
+    "@pie-lib/render-ui": "4.35.3-next.15",
     "debug": "^4.1.1",
-    "keycode": "^2.2.0",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@pie-lib/test-utils": "^0.2.33"
+    "@pie-lib/test-utils": "0.22.2-next.16"
   },
   "scripts": {},
-  "gitHead": "f3345ae70660f4ae88450512261c7ea1601003c8"
+  "gitHead": "f104bab3116a65a39c55efc48387d8701c0c1d84",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./src/index.jsx",
+      "default": "./lib/index.js"
+    },
+    "./esm": "./esm/index.js"
+  }
 }

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

@@ -0,0 +1,16 @@
+import { EditorAndPad } from '../editor-and-pad';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+describe('EditorAndPad', () => {
+  const defaultProps = {
+    classes: {},
+    classNames: {},
+    onBlur: jest.fn(),
+  };
+
+  it('renders with default props', () => {
+    const { container } = render(<EditorAndPad {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

package/src/__tests__/index.test.js

@@ -0,0 +1,21 @@
+import { RawPureToolbar } from '../index';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+describe('RawPureToolbar', () => {
+  const defaultProps = {
+    classes: {},
+    controlledKeypad: true,
+    showKeypad: true,
+  };
+
+  it('renders with DONE button if hideDoneButton is not defined', () => {
+    const { container } = render(<RawPureToolbar {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders without DONE button if hideDoneButton value is true', () => {
+    const { container } = render(<RawPureToolbar {...defaultProps} hideDoneButton={true} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MathPreview from '../math-preview';
+
+describe('MathPreview', () => {
+  const defaultProps = {
+    node: {
+      data: {
+        get: jest.fn().mockReturnValue('sqrt(5)'),
+      },
+    },
+    classes: {},
+    isSelected: false,
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
+  };
+
+  it('renders with default props', () => {
+    const { container } = render(<MathPreview {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

package/src/done-button.jsx

@@ -1,47 +1,41 @@
 import React from 'react';
 
-import IconButton from '@material-ui/core/IconButton';
-import Check from '@material-ui/icons/Check';
-import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@mui/material/IconButton';
+import Check from '@mui/icons-material/Check';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
-export const RawDoneButton = ({ classes, onClick, hideBackground }) => (
-  <IconButton
+const StyledIconButton = styled(IconButton)(({ theme, hideBackground }) => ({
+  verticalAlign: 'top',
+  width: '28px',
+  height: '28px',
+  color: '#00bb00',
+  ...(hideBackground && {
+    backgroundColor: theme.palette.common.white,
+    '&:hover': {
+      backgroundColor: theme.palette.grey[200],
+    },
+  }),
+  '& .MuiIconButton-label': {
+    position: 'absolute',
+    top: '2px',
+  },
+}));
+
+export const RawDoneButton = ({ onClick, hideBackground }) => (
+  <StyledIconButton
     aria-label="Done"
-    className={classes.iconRoot}
     onClick={onClick}
-    classes={{
-      label: classes.label,
-      root: classNames(classes.iconRoot, { [classes.hideBackground]: hideBackground }),
-    }}
+    hideBackground={hideBackground}
+    size="large"
   >
     <Check />
-  </IconButton>
+  </StyledIconButton>
 );
 
 RawDoneButton.propTypes = {
-  classes: PropTypes.object.isRequired,
   onClick: PropTypes.func,
+  hideBackground: PropTypes.bool,
 };
 
-const styles = (theme) => ({
-  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',
-  },
-});
-export const DoneButton = withStyles(styles)(RawDoneButton);
+export const DoneButton = RawDoneButton;