@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/node_modules/@pie-lib/math-toolbar/esm/index.js

@@ -1,1410 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import debug from 'debug';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import isEqual from 'lodash/isEqual';
-import { mq, updateSpans, HorizontalKeypad } from '@pie-lib/math-input';
-import { InputContainer, color } from '@pie-lib/render-ui';
-import IconButton from '@material-ui/core/IconButton';
-import require$$3 from '@material-ui/core/SvgIcon';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-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');
-    }
-  });
-};
-
-const {
-  commonMqFontStyles: commonMqFontStyles$1,
-  commonMqKeyboardStyles,
-  longdivStyles: longdivStyles$1,
-  supsubStyles: supsubStyles$1
-} = mq.CommonMqStyles;
-const log$1 = debug('@pie-lib:math-toolbar:editor-and-pad');
-const decimalRegex = /\.|,/g;
-
-const toNodeData = data => {
-  if (!data) {
-    return;
-  }
-
-  const {
-    type,
-    value
-  } = data;
-
-  if (type === 'command' || type === 'cursor') {
-    return data;
-  } else if (type === 'answer') {
-    return _extends({
-      type: 'answer'
-    }, data);
-  } else if (value === 'clear') {
-    return {
-      type: 'clear'
-    };
-  } else {
-    return {
-      type: 'write',
-      value
-    };
-  }
-};
-
-class EditorAndPad extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onClick = data => {
-      const {
-        noDecimal,
-        noLatexHandling,
-        onChange
-      } = this.props;
-      const c = toNodeData(data);
-      log$1('mathChange: ', c);
-
-      if (noLatexHandling) {
-        onChange(c.value);
-        return;
-      } // if decimals are not allowed for this response, we discard the input
-
-
-      if (noDecimal && (c.value === '.' || c.value === ',')) {
-        return;
-      }
-
-      if (!c) {
-        return;
-      }
-
-      if (c.type === 'clear') {
-        log$1('call clear...');
-        this.input.clear();
-      } else if (c.type === 'command') {
-        this.input.command(c.value);
-      } else if (c.type === 'cursor') {
-        this.input.keystroke(c.value);
-      } else if (c.type === 'answer') {
-        this.input.write('%response%');
-      } else {
-        this.input.write(c.value);
-      }
-    };
-
-    this.updateDisable = isEdit => {
-      const {
-        maxResponseAreas
-      } = this.props;
-
-      if (maxResponseAreas) {
-        const shouldDisable = this.checkResponseAreasNumber(maxResponseAreas, isEdit);
-        this.setState({
-          addDisabled: shouldDisable
-        });
-      }
-    };
-
-    this.onAnswerBlockClick = () => {
-      this.props.onAnswerBlockAdd();
-      this.onClick({
-        type: 'answer'
-      });
-      this.updateDisable(true);
-    };
-
-    this.onEditorChange = latex => {
-      const {
-        onChange,
-        noDecimal
-      } = this.props;
-      updateSpans();
-      markFractionBaseSuperscripts();
-      this.updateDisable(true); // if no decimals are allowed and the last change is a decimal dot, discard the change
-
-      if (noDecimal && (latex.indexOf('.') !== -1 || latex.indexOf(',') !== -1) && this.input) {
-        this.input.clear();
-        this.input.write(latex.replace(decimalRegex, ''));
-        return;
-      } // eslint-disable-next-line no-useless-escape
-
-
-      const regexMatch = latex.match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
-
-      if (this.input && regexMatch && regexMatch != null && regexMatch.length) {
-        try {
-          this.input.mathField.__controller.cursor.insLeftOf(this.input.mathField.__controller.cursor.parent[-1].parent);
-
-          this.input.mathField.el().dispatchEvent(new KeyboardEvent('keydown', {
-            keyCode: 8
-          }));
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error(e.toString());
-        }
-
-        return;
-      }
-
-      onChange(latex);
-    };
-
-    this.onEditorTypeChange = evt => {
-      this.setState({
-        equationEditor: evt.target.value
-      });
-    };
-
-    this.checkResponseAreasNumber = (maxResponseAreas, isEdit) => {
-      const {
-        latex
-      } = this.input && this.input.props || {};
-
-      if (latex) {
-        const count = (latex.match(/answerBlock/g) || []).length;
-        return isEdit ? count === maxResponseAreas - 1 : count === maxResponseAreas;
-      }
-
-      return false;
-    };
-
-    this.state = {
-      equationEditor: 'item-authoring',
-      addDisabled: false
-    };
-  }
-
-  componentDidMount() {
-    if (this.input && this.props.autoFocus) {
-      this.input.focus();
-    }
-  }
-
-  /** Only render if the mathquill instance's latex is different
-   * or the keypad state changed from one state to the other (shown / hidden) */
-  shouldComponentUpdate(nextProps, nextState) {
-    const inputIsDifferent = this.input.mathField.latex() !== nextProps.latex;
-    log$1('[shouldComponentUpdate] ', 'inputIsDifferent: ', inputIsDifferent);
-
-    if (!isEqual(this.props.error, nextProps.error)) {
-      return true;
-    }
-
-    if (!inputIsDifferent && this.props.keypadMode !== nextProps.keypadMode) {
-      return true;
-    }
-
-    if (!inputIsDifferent && this.props.noDecimal !== nextProps.noDecimal) {
-      return true;
-    }
-
-    if (!inputIsDifferent && this.state.equationEditor !== nextState.equationEditor) {
-      return true;
-    }
-
-    if (!inputIsDifferent && this.props.controlledKeypad) {
-      return this.props.showKeypad !== nextProps.showKeypad;
-    }
-
-    return inputIsDifferent;
-  }
-
-  render() {
-    const {
-      classNames,
-      keypadMode,
-      allowAnswerBlock,
-      additionalKeys,
-      controlledKeypad,
-      controlledKeypadMode,
-      showKeypad,
-      setKeypadInteraction,
-      noDecimal,
-      hideInput,
-      layoutForKeyPad,
-      latex,
-      onFocus,
-      onBlur,
-      classes,
-      error
-    } = this.props;
-    const shouldShowKeypad = !controlledKeypad || controlledKeypad && showKeypad;
-    const {
-      addDisabled
-    } = this.state;
-    log$1('[render]', latex);
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx(classes.mathToolbar, classNames.mathToolbar)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cx(classes.inputAndTypeContainer, {
-        [classes.hide]: hideInput
-      })
-    }, controlledKeypadMode && /*#__PURE__*/React.createElement(InputContainer, {
-      label: "Equation Editor",
-      className: classes.selectContainer
-    }, /*#__PURE__*/React.createElement(Select, {
-      className: classes.select,
-      onChange: this.onEditorTypeChange,
-      value: this.state.equationEditor
-    }, /*#__PURE__*/React.createElement(MenuItem, {
-      value: "non-negative-integers"
-    }, "Numeric - Non-Negative Integers"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: "integers"
-    }, "Numeric - Integers"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: "decimals"
-    }, "Numeric - Decimals"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: "fractions"
-    }, "Numeric - Fractions"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 1
-    }, "Grade 1 - 2"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 3
-    }, "Grade 3 - 5"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 6
-    }, "Grade 6 - 7"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 8
-    }, "Grade 8 - HS"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 'geometry'
-    }, "Geometry"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 'advanced-algebra'
-    }, "Advanced Algebra"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 'statistics'
-    }, "Statistics"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: 'item-authoring'
-    }, "Item Authoring"))), /*#__PURE__*/React.createElement("div", {
-      className: cx(classes.inputContainer, error ? classes.error : '')
-    }, /*#__PURE__*/React.createElement(mq.Input, {
-      onFocus: () => {
-        onFocus && onFocus();
-        this.updateDisable(false);
-      },
-      onBlur: event => {
-        this.updateDisable(false);
-        onBlur && onBlur(event);
-      },
-      className: cx(classes.mathEditor, classNames.editor, !controlledKeypadMode ? classes.longMathEditor : ''),
-      innerRef: r => this.input = r,
-      latex: latex,
-      onChange: this.onEditorChange
-    }))), allowAnswerBlock && /*#__PURE__*/React.createElement(Button, {
-      className: classes.addAnswerBlockButton,
-      type: "primary",
-      style: {
-        bottom: shouldShowKeypad ? '320px' : '20px'
-      },
-      onClick: this.onAnswerBlockClick,
-      disabled: addDisabled
-    }, "+ Response Area"), /*#__PURE__*/React.createElement("hr", {
-      className: classes.hr
-    }), shouldShowKeypad && /*#__PURE__*/React.createElement(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
-    }));
-  }
-
-}
-EditorAndPad.propTypes = {
-  classNames: PropTypes.object,
-  keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  autoFocus: PropTypes.bool,
-  allowAnswerBlock: PropTypes.bool,
-  showKeypad: PropTypes.bool,
-  controlledKeypad: PropTypes.bool,
-  controlledKeypadMode: PropTypes.bool,
-  error: PropTypes.string,
-  noDecimal: PropTypes.bool,
-  hideInput: PropTypes.bool,
-  noLatexHandling: PropTypes.bool,
-  layoutForKeyPad: PropTypes.object,
-  maxResponseAreas: PropTypes.number,
-  additionalKeys: PropTypes.array,
-  latex: PropTypes.string.isRequired,
-  onAnswerBlockAdd: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  classes: PropTypes.object,
-  setKeypadInteraction: PropTypes.func
-};
-
-const styles$2 = theme => ({
-  inputAndTypeContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    '& .mq-editable-field .mq-cursor': {
-      top: '-4px'
-    },
-    '& .mq-math-mode .mq-selection, .mq-editable-field .mq-selection': {
-      paddingTop: '18px'
-    },
-    '& .mq-math-mode .mq-overarrow': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-    },
-    '& .mq-math-mode .mq-overline .mq-overline-inner': {
-      paddingTop: '0.4em !important'
-    },
-    '& .mq-overarrow.mq-arrow-both': {
-      minWidth: '1.23em',
-      '& *': {
-        lineHeight: '1 !important'
-      },
-      '&:before': {
-        top: '-0.45em',
-        left: '-1px'
-      },
-      '&:after': {
-        position: 'absolute !important',
-        top: '0px !important',
-        right: '-2px'
-      },
-      '&.mq-empty:after': {
-        top: '-0.45em'
-      }
-    },
-    '& .mq-overarrow.mq-arrow-right': {
-      '&:before': {
-        top: '-0.4em',
-        right: '-1px'
-      }
-    },
-    '& *': _extends({}, commonMqFontStyles$1, supsubStyles$1, longdivStyles$1, {
-      '& .mq-math-mode .mq-sqrt-prefix': {
-        verticalAlign: 'baseline !important',
-        top: '1px !important',
-        left: '-0.1em !important'
-      },
-      '& .mq-math-mode .mq-overarc ': {
-        paddingTop: '0.45em !important'
-      },
-      '& .mq-math-mode .mq-empty': {
-        padding: '9px 1px !important'
-      },
-      '& .mq-math-mode .mq-root-block': {
-        paddingTop: '10px'
-      },
-      '& .mq-scaled .mq-sqrt-prefix': {
-        top: '0 !important'
-      },
-      '& .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
-        marginLeft: '4px !important',
-        paddingTop: '6px !important',
-        paddingLeft: '6px !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-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'
-      }
-    }),
-    '& span[data-prime="true"]': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-    }
-  },
-  hide: {
-    display: 'none'
-  },
-  selectContainer: {
-    flex: 'initial',
-    width: '25%',
-    minWidth: '100px',
-    marginLeft: '15px',
-    marginTop: '5px',
-    marginBottom: '5px',
-    marginRight: '5px',
-    '& label': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-    },
-    '& div': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-    }
-  },
-  mathEditor: {
-    maxWidth: '400px',
-    color: color.text(),
-    backgroundColor: color.background(),
-    padding: '2px'
-  },
-  longMathEditor: {
-    maxWidth: '500px'
-  },
-  addAnswerBlockButton: {
-    position: 'absolute',
-    right: '12px',
-    border: '1px solid lightgrey'
-  },
-  hr: {
-    padding: 0,
-    margin: 0,
-    height: '1px',
-    border: 'none',
-    borderBottom: `solid 1px ${theme.palette.primary.main}`
-  },
-  mathToolbar: {
-    zIndex: 9,
-    position: 'relative',
-    textAlign: 'center',
-    width: 'auto',
-    '& > .mq-math-mode': {
-      border: 'solid 1px lightgrey'
-    },
-    '& > .mq-focused': {
-      outline: 'none',
-      boxShadow: 'none',
-      border: `dotted 1px ${theme.palette.primary.main}`,
-      borderRadius: '0px'
-    },
-    '& .mq-overarrow-inner': {
-      border: 'none !important',
-      paddingTop: '0 !important'
-    },
-    '& .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-overarrow.mq-arrow-both': {
-      top: '7.8px',
-      marginTop: '0px',
-      minWidth: '1.23em'
-    },
-    '& .mq-parallelogram': {
-      lineHeight: 0.85
-    }
-  },
-  inputContainer: {
-    minWidth: '500px',
-    maxWidth: '900px',
-    minHeight: '30px',
-    width: '100%',
-    display: 'flex',
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
-    '& .mq-sqrt-prefix .mq-scaled': {
-      verticalAlign: 'middle !important'
-    }
-  },
-  error: {
-    border: '2px solid red'
-  },
-  keyboard: commonMqKeyboardStyles,
-  language: {
-    '& *': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-    }
-  }
-});
-
-var EditorAndPad$1 = withStyles(styles$2)(EditorAndPad);
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var Check$1 = {};
-
-var interopRequireDefault = {exports: {}};
-
-var hasRequiredInteropRequireDefault;
-
-function requireInteropRequireDefault () {
-	if (hasRequiredInteropRequireDefault) return interopRequireDefault.exports;
-	hasRequiredInteropRequireDefault = 1;
-	(function (module) {
-		function _interopRequireDefault(obj) {
-		  return obj && obj.__esModule ? obj : {
-		    "default": obj
-		  };
-		}
-
-		module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-	} (interopRequireDefault));
-	return interopRequireDefault.exports;
-}
-
-var createSvgIcon = {};
-
-var pure = {};
-
-var shouldUpdate = {};
-
-var inheritsLoose = {exports: {}};
-
-var setPrototypeOf = {exports: {}};
-
-var hasRequiredSetPrototypeOf;
-
-function requireSetPrototypeOf () {
-	if (hasRequiredSetPrototypeOf) return setPrototypeOf.exports;
-	hasRequiredSetPrototypeOf = 1;
-	(function (module) {
-		function _setPrototypeOf(o, p) {
-		  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-		    o.__proto__ = p;
-		    return o;
-		  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-		  return _setPrototypeOf(o, p);
-		}
-
-		module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-	} (setPrototypeOf));
-	return setPrototypeOf.exports;
-}
-
-var hasRequiredInheritsLoose;
-
-function requireInheritsLoose () {
-	if (hasRequiredInheritsLoose) return inheritsLoose.exports;
-	hasRequiredInheritsLoose = 1;
-	(function (module) {
-		var setPrototypeOf = requireSetPrototypeOf();
-
-		function _inheritsLoose(subClass, superClass) {
-		  subClass.prototype = Object.create(superClass.prototype);
-		  subClass.prototype.constructor = subClass;
-		  setPrototypeOf(subClass, superClass);
-		}
-
-		module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-	} (inheritsLoose));
-	return inheritsLoose.exports;
-}
-
-var setDisplayName = {};
-
-var setStatic = {};
-
-var hasRequiredSetStatic;
-
-function requireSetStatic () {
-	if (hasRequiredSetStatic) return setStatic;
-	hasRequiredSetStatic = 1;
-
-	setStatic.__esModule = true;
-	setStatic.default = void 0;
-
-	var setStatic$1 = function setStatic(key, value) {
-	  return function (BaseComponent) {
-	    /* eslint-disable no-param-reassign */
-	    BaseComponent[key] = value;
-	    /* eslint-enable no-param-reassign */
-
-	    return BaseComponent;
-	  };
-	};
-
-	var _default = setStatic$1;
-	setStatic.default = _default;
-	return setStatic;
-}
-
-var hasRequiredSetDisplayName;
-
-function requireSetDisplayName () {
-	if (hasRequiredSetDisplayName) return setDisplayName;
-	hasRequiredSetDisplayName = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	setDisplayName.__esModule = true;
-	setDisplayName.default = void 0;
-
-	var _setStatic = _interopRequireDefault(requireSetStatic());
-
-	var setDisplayName$1 = function setDisplayName(displayName) {
-	  return (0, _setStatic.default)('displayName', displayName);
-	};
-
-	var _default = setDisplayName$1;
-	setDisplayName.default = _default;
-	return setDisplayName;
-}
-
-var wrapDisplayName = {};
-
-var getDisplayName = {};
-
-var hasRequiredGetDisplayName;
-
-function requireGetDisplayName () {
-	if (hasRequiredGetDisplayName) return getDisplayName;
-	hasRequiredGetDisplayName = 1;
-
-	getDisplayName.__esModule = true;
-	getDisplayName.default = void 0;
-
-	var getDisplayName$1 = function getDisplayName(Component) {
-	  if (typeof Component === 'string') {
-	    return Component;
-	  }
-
-	  if (!Component) {
-	    return undefined;
-	  }
-
-	  return Component.displayName || Component.name || 'Component';
-	};
-
-	var _default = getDisplayName$1;
-	getDisplayName.default = _default;
-	return getDisplayName;
-}
-
-var hasRequiredWrapDisplayName;
-
-function requireWrapDisplayName () {
-	if (hasRequiredWrapDisplayName) return wrapDisplayName;
-	hasRequiredWrapDisplayName = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	wrapDisplayName.__esModule = true;
-	wrapDisplayName.default = void 0;
-
-	var _getDisplayName = _interopRequireDefault(requireGetDisplayName());
-
-	var wrapDisplayName$1 = function wrapDisplayName(BaseComponent, hocName) {
-	  return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
-	};
-
-	var _default = wrapDisplayName$1;
-	wrapDisplayName.default = _default;
-	return wrapDisplayName;
-}
-
-var hasRequiredShouldUpdate;
-
-function requireShouldUpdate () {
-	if (hasRequiredShouldUpdate) return shouldUpdate;
-	hasRequiredShouldUpdate = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	shouldUpdate.__esModule = true;
-	shouldUpdate.default = void 0;
-
-	var _inheritsLoose2 = _interopRequireDefault(requireInheritsLoose());
-
-	var _react = React;
-
-	var _setDisplayName = _interopRequireDefault(requireSetDisplayName());
-
-	var _wrapDisplayName = _interopRequireDefault(requireWrapDisplayName());
-
-	var shouldUpdate$1 = function shouldUpdate(test) {
-	  return function (BaseComponent) {
-	    var factory = (0, _react.createFactory)(BaseComponent);
-
-	    var ShouldUpdate =
-	    /*#__PURE__*/
-	    function (_Component) {
-	      (0, _inheritsLoose2.default)(ShouldUpdate, _Component);
-
-	      function ShouldUpdate() {
-	        return _Component.apply(this, arguments) || this;
-	      }
-
-	      var _proto = ShouldUpdate.prototype;
-
-	      _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-	        return test(this.props, nextProps);
-	      };
-
-	      _proto.render = function render() {
-	        return factory(this.props);
-	      };
-
-	      return ShouldUpdate;
-	    }(_react.Component);
-
-	    if (process.env.NODE_ENV !== 'production') {
-	      return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
-	    }
-
-	    return ShouldUpdate;
-	  };
-	};
-
-	var _default = shouldUpdate$1;
-	shouldUpdate.default = _default;
-	return shouldUpdate;
-}
-
-var shallowEqual = {};
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @typechecks
- * 
- */
-
-var shallowEqual_1;
-var hasRequiredShallowEqual$1;
-
-function requireShallowEqual$1 () {
-	if (hasRequiredShallowEqual$1) return shallowEqual_1;
-	hasRequiredShallowEqual$1 = 1;
-
-	var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-	/**
-	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-	 */
-	function is(x, y) {
-	  // SameValue algorithm
-	  if (x === y) {
-	    // Steps 1-5, 7-10
-	    // Steps 6.b-6.e: +0 != -0
-	    // Added the nonzero y check to make Flow happy, but it is redundant
-	    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-	  } else {
-	    // Step 6.a: NaN == NaN
-	    return x !== x && y !== y;
-	  }
-	}
-
-	/**
-	 * Performs equality by iterating through keys on an object and returning false
-	 * when any key has values which are not strictly equal between the arguments.
-	 * Returns true when the values of all keys are strictly equal.
-	 */
-	function shallowEqual(objA, objB) {
-	  if (is(objA, objB)) {
-	    return true;
-	  }
-
-	  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-	    return false;
-	  }
-
-	  var keysA = Object.keys(objA);
-	  var keysB = Object.keys(objB);
-
-	  if (keysA.length !== keysB.length) {
-	    return false;
-	  }
-
-	  // Test for A's keys different from B.
-	  for (var i = 0; i < keysA.length; i++) {
-	    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-	      return false;
-	    }
-	  }
-
-	  return true;
-	}
-
-	shallowEqual_1 = shallowEqual;
-	return shallowEqual_1;
-}
-
-var hasRequiredShallowEqual;
-
-function requireShallowEqual () {
-	if (hasRequiredShallowEqual) return shallowEqual;
-	hasRequiredShallowEqual = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	shallowEqual.__esModule = true;
-	shallowEqual.default = void 0;
-
-	var _shallowEqual = _interopRequireDefault(requireShallowEqual$1());
-
-	var _default = _shallowEqual.default;
-	shallowEqual.default = _default;
-	return shallowEqual;
-}
-
-var hasRequiredPure;
-
-function requirePure () {
-	if (hasRequiredPure) return pure;
-	hasRequiredPure = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	pure.__esModule = true;
-	pure.default = void 0;
-
-	var _shouldUpdate = _interopRequireDefault(requireShouldUpdate());
-
-	var _shallowEqual = _interopRequireDefault(requireShallowEqual());
-
-	var _setDisplayName = _interopRequireDefault(requireSetDisplayName());
-
-	var _wrapDisplayName = _interopRequireDefault(requireWrapDisplayName());
-
-	var pure$1 = function pure(BaseComponent) {
-	  var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
-	    return !(0, _shallowEqual.default)(props, nextProps);
-	  });
-
-	  if (process.env.NODE_ENV !== 'production') {
-	    return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
-	  }
-
-	  return hoc(BaseComponent);
-	};
-
-	var _default = pure$1;
-	pure.default = _default;
-	return pure;
-}
-
-var hasRequiredCreateSvgIcon;
-
-function requireCreateSvgIcon () {
-	if (hasRequiredCreateSvgIcon) return createSvgIcon;
-	hasRequiredCreateSvgIcon = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(createSvgIcon, "__esModule", {
-	  value: true
-	});
-	createSvgIcon.default = void 0;
-
-	var _react = _interopRequireDefault(React);
-
-	var _pure = _interopRequireDefault(requirePure());
-
-	var _SvgIcon = _interopRequireDefault(require$$3);
-
-	function createSvgIcon$1(path, displayName) {
-	  var Icon = function Icon(props) {
-	    return _react.default.createElement(_SvgIcon.default, props, path);
-	  };
-
-	  Icon.displayName = "".concat(displayName, "Icon");
-	  Icon = (0, _pure.default)(Icon);
-	  Icon.muiName = 'SvgIcon';
-	  return Icon;
-	}
-	var _default = createSvgIcon$1;
-	createSvgIcon.default = _default;
-	return createSvgIcon;
-}
-
-var hasRequiredCheck;
-
-function requireCheck () {
-	if (hasRequiredCheck) return Check$1;
-	hasRequiredCheck = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(Check$1, "__esModule", {
-	  value: true
-	});
-	Check$1.default = void 0;
-
-	var _react = _interopRequireDefault(React);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-	  fill: "none",
-	  d: "M0 0h24v24H0z"
-	}), _react.default.createElement("path", {
-	  d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-	})), 'Check');
-
-	Check$1.default = _default;
-	return Check$1;
-}
-
-var CheckExports = /*@__PURE__*/ requireCheck();
-var Check = /*@__PURE__*/getDefaultExportFromCjs(CheckExports);
-
-const RawDoneButton = ({
-  classes,
-  onClick,
-  hideBackground
-}) => /*#__PURE__*/React.createElement(IconButton, {
-  "aria-label": "Done",
-  className: classes.iconRoot,
-  onClick: onClick,
-  classes: {
-    label: classes.label,
-    root: cx(classes.iconRoot, {
-      [classes.hideBackground]: hideBackground
-    })
-  }
-}, /*#__PURE__*/React.createElement(Check, null));
-RawDoneButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-  onClick: PropTypes.func
-};
-
-const styles$1 = 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'
-  }
-});
-
-const DoneButton = withStyles(styles$1)(RawDoneButton);
-
-const {
-  commonMqFontStyles,
-  longdivStyles,
-  supsubStyles
-} = mq.CommonMqStyles;
-const log = debug('@pie-lib:math-toolbar:math-preview');
-class RawMathPreview extends React.Component {
-  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');
-    const {
-      classes,
-      isSelected,
-      onFocus,
-      onBlur
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx(classes.root, isSelected && classes.selected)
-    }, ' ', /*#__PURE__*/React.createElement("span", {
-      className: classes.insideOverlay
-    }), /*#__PURE__*/React.createElement(mq.Static, {
-      latex: latex,
-      onFocus: onFocus,
-      onBlur: onBlur
-    }));
-  }
-
-}
-RawMathPreview.propTypes = {
-  latex: PropTypes.string,
-  node: PropTypes.object,
-  classes: PropTypes.object,
-  isSelected: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func
-};
-
-const mp = theme => ({
-  root: _extends({
-    display: 'inline-flex',
-    alignItems: 'center',
-    position: 'relative',
-    '& *': commonMqFontStyles
-  }, supsubStyles, longdivStyles, {
-    '& > .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'
-    },
-    '& > .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',
-      '& *': {
-        lineHeight: '1 !important'
-      },
-      '&:before': {
-        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 !important',
-        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
-    },
-    '& span[data-prime="true"]': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-    }
-  }),
-  selected: {
-    border: `solid 1px ${theme.palette.primary.main}`,
-    '& > .mq-math-mode': {
-      border: 'solid 0px lightgrey'
-    }
-  },
-  insideOverlay: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0
-  }
-});
-
-var mathPreview = withStyles(mp)(RawMathPreview);
-
-class MathToolbar extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.done = () => {
-      this.props.onDone(this.state.latex);
-    };
-
-    this.onChange = latex => {
-      this.setState({
-        latex
-      });
-      this.props.onChange(latex);
-    };
-
-    this.state = {
-      latex: props.latex
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      latex: nextProps.latex
-    });
-  }
-
-  render() {
-    const {
-      latex
-    } = this.state;
-    const {
-      classNames,
-      autoFocus,
-      allowAnswerBlock,
-      onAnswerBlockAdd,
-      controlledKeypad,
-      controlledKeypadMode,
-      keypadMode,
-      noDecimal,
-      additionalKeys,
-      showKeypad,
-      onFocus,
-      onBlur,
-      hideDoneButton,
-      error,
-      keyPadCharacterRef,
-      setKeypadInteraction,
-      maxResponseAreas
-    } = this.props;
-    return /*#__PURE__*/React.createElement(PureToolbar, {
-      autoFocus: autoFocus,
-      classNames: classNames,
-      onAnswerBlockAdd: onAnswerBlockAdd,
-      allowAnswerBlock: allowAnswerBlock,
-      latex: latex,
-      additionalKeys: additionalKeys,
-      noDecimal: noDecimal,
-      keypadMode: keypadMode,
-      keyPadCharacterRef: keyPadCharacterRef,
-      setKeypadInteraction: setKeypadInteraction,
-      onChange: this.onChange,
-      onDone: this.done,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      showKeypad: showKeypad,
-      controlledKeypad: controlledKeypad,
-      controlledKeypadMode: controlledKeypadMode,
-      hideDoneButton: hideDoneButton,
-      error: error,
-      maxResponseAreas: maxResponseAreas
-    });
-  }
-
-}
-MathToolbar.propTypes = {
-  autoFocus: PropTypes.bool,
-  allowAnswerBlock: PropTypes.bool,
-  controlledKeypad: PropTypes.bool,
-  controlledKeypadMode: PropTypes.bool,
-  keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  classNames: PropTypes.object,
-  error: PropTypes.string,
-  maxResponseAreas: PropTypes.number,
-  showKeypad: PropTypes.bool,
-  noDecimal: PropTypes.bool,
-  additionalKeys: PropTypes.array,
-  latex: PropTypes.string.isRequired,
-  onAnswerBlockAdd: PropTypes.func,
-  onChange: PropTypes.func,
-  onDone: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  hideDoneButton: PropTypes.bool,
-  keyPadCharacterRef: PropTypes.func,
-  setKeypadInteraction: PropTypes.func
-};
-MathToolbar.defaultProps = {
-  classNames: {},
-  keypadMode: 'item-authoring',
-  autoFocus: false,
-  allowAnswerBlock: false,
-  controlledKeypad: false,
-  controlledKeypadMode: false,
-  noDecimal: false,
-  showKeypad: true,
-  additionalKeys: [],
-  onChange: () => {},
-  onAnswerBlockAdd: () => {},
-  onFocus: () => {},
-  hideDoneButton: false
-};
-class RawPureToolbar extends React.Component {
-  render() {
-    const {
-      classNames,
-      autoFocus,
-      allowAnswerBlock,
-      onAnswerBlockAdd,
-      controlledKeypad,
-      controlledKeypadMode,
-      additionalKeys,
-      showKeypad,
-      keypadMode,
-      noDecimal,
-      hideInput,
-      noLatexHandling,
-      layoutForKeyPad,
-      keyPadCharacterRef,
-      setKeypadInteraction,
-      latex,
-      onChange,
-      onDone,
-      onFocus,
-      onBlur,
-      hideDoneButton,
-      hideDoneButtonBackground,
-      classes,
-      error,
-      maxResponseAreas
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx(classes.pureToolbar, (classNames || {}).toolbar),
-      ref: keyPadCharacterRef
-    }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement(EditorAndPad$1, {
-      autoFocus: autoFocus,
-      keypadMode: keypadMode,
-      classNames: classNames || {},
-      controlledKeypad: controlledKeypad,
-      controlledKeypadMode: controlledKeypadMode,
-      noDecimal: noDecimal,
-      hideInput: hideInput,
-      noLatexHandling: noLatexHandling,
-      layoutForKeyPad: layoutForKeyPad,
-      showKeypad: showKeypad,
-      additionalKeys: additionalKeys,
-      allowAnswerBlock: allowAnswerBlock,
-      onAnswerBlockAdd: onAnswerBlockAdd,
-      latex: latex,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      error: error,
-      maxResponseAreas: maxResponseAreas,
-      setKeypadInteraction: setKeypadInteraction
-    }), (!controlledKeypad || controlledKeypad && showKeypad) && !hideDoneButton && /*#__PURE__*/React.createElement(DoneButton, {
-      hideBackground: hideDoneButtonBackground,
-      onClick: onDone
-    }));
-  }
-
-}
-RawPureToolbar.propTypes = {
-  classNames: PropTypes.object,
-  latex: PropTypes.string.isRequired,
-  keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  hideInput: PropTypes.bool,
-  noLatexHandling: PropTypes.bool,
-  layoutForKeyPad: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  onDone: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  onAnswerBlockAdd: PropTypes.func,
-  additionalKeys: PropTypes.array,
-  onFocus: PropTypes.func,
-  classes: PropTypes.object.isRequired,
-  autoFocus: PropTypes.bool,
-  noDecimal: PropTypes.bool,
-  allowAnswerBlock: PropTypes.bool,
-  controlledKeypad: PropTypes.bool,
-  controlledKeypadMode: PropTypes.bool,
-  showKeypad: PropTypes.bool,
-  hideDoneButton: PropTypes.bool,
-  hideDoneButtonBackground: PropTypes.bool,
-  error: PropTypes.any,
-  maxResponseAreas: PropTypes.number,
-  keyPadCharacterRef: PropTypes.object,
-  setKeypadInteraction: PropTypes.func
-};
-RawPureToolbar.defaultProps = {
-  classNames: {},
-  hideDoneButtonBackground: false
-};
-
-const styles = () => ({
-  pureToolbar: {
-    display: 'flex',
-    width: '100%',
-    zIndex: 8,
-    alignItems: 'center'
-  }
-});
-
-const PureToolbar = withStyles(styles)(RawPureToolbar);
-
-export { mathPreview as MathPreview, MathToolbar, PureToolbar, RawPureToolbar };
-//# sourceMappingURL=index.js.map