@pie-element/math-inline 10.0.1 → 11.0.3-esm.0

package/esm/configure.js

@@ -0,0 +1,1769 @@
+import * as React from 'react';
+import React__default from 'react';
+import ReactDOM from 'react-dom';
+import { withStyles } from '@material-ui/core/styles';
+import { InputContainer, layout, FeedbackConfig, settings } from '@pie-lib/config-ui';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+import EditableHtml from '@pie-lib/editable-html';
+import cx from 'classnames';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import { MathToolbar } from '@pie-lib/math-toolbar';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import Checkbox from '@material-ui/core/Checkbox';
+import { color } from '@pie-lib/render-ui';
+import isEqual from 'lodash/isEqual';
+import MathQuill from '@pie-framework/mathquill';
+import require$$3 from '@material-ui/core/SvgIcon';
+import Tooltip from '@material-ui/core/Tooltip';
+import isEmpty from 'lodash/isEmpty';
+import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+
+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 styles$2 = theme => ({
+  responseContainer: {
+    marginBottom: theme.spacing.unit * 2.5,
+    width: '100%',
+    minWidth: '548px',
+    border: `1px solid ${theme.palette.grey[700]}`,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  },
+  cardContent: {
+    paddingBottom: `${theme.spacing.unit * 2}px !important`
+  },
+  title: {
+    fontWeight: 700,
+    fontSize: '1.2rem',
+    flex: 3
+  },
+  selectContainer: {
+    flex: 2
+  },
+  inputContainer: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  titleBar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  responseEditor: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    minWidth: '500px',
+    maxWidth: '900px',
+    height: 'auto',
+    minHeight: '40px'
+  },
+  mathToolbar: {
+    width: '100%'
+  },
+  alternateButton: {
+    border: `1px solid ${theme.palette.grey['A100']}`
+  },
+  removeAlternateButton: {
+    marginLeft: theme.spacing.unit * 2,
+    border: `1px solid ${theme.palette.grey['A100']}`,
+    color: 'gray',
+    fontSize: '0.8rem'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`
+  }
+});
+
+class Response extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = name => evt => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+
+      const newResponse = _extends({}, response);
+
+      newResponse[name] = evt.target.value;
+      onResponseChange(newResponse, index);
+    };
+
+    this.onConfigChanged = name => evt => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+
+      const newResponse = _extends({}, response);
+
+      newResponse[name] = evt.target.checked;
+      onResponseChange(newResponse, index);
+    };
+
+    this.onLiteralOptionsChange = name => () => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+
+      const newResponse = _extends({}, response);
+
+      newResponse[name] = !response[name];
+      onResponseChange(newResponse, index);
+    };
+
+    this.onAnswerChange = answer => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+
+      const newResponse = _extends({}, response);
+
+      newResponse.answer = answer;
+      onResponseChange(newResponse, index);
+    };
+
+    this.onAlternateAnswerChange = alternateId => answer => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+
+      const newResponse = _extends({}, response);
+
+      newResponse.alternates[alternateId] = answer;
+      onResponseChange(newResponse, index);
+    };
+
+    this.onAddAlternate = () => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+      const {
+        alternateIdCounter
+      } = this.state;
+
+      const newResponse = _extends({}, response);
+
+      if (!newResponse.alternates) {
+        newResponse.alternates = {};
+      }
+
+      newResponse.alternates[alternateIdCounter] = '';
+      onResponseChange(newResponse, index);
+      this.setState({
+        alternateIdCounter: alternateIdCounter + 1
+      });
+    };
+
+    this.onRemoveAlternate = alternateId => () => {
+      const {
+        response,
+        onResponseChange,
+        index
+      } = this.props;
+
+      const newResponse = _extends({}, response);
+
+      delete newResponse.alternates[alternateId];
+      onResponseChange(newResponse, index);
+      this.setState(state => ({
+        showKeypad: _extends({}, state.showKeypad, {
+          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount : state.showKeypad.openCount - 1
+        })
+      }));
+    };
+
+    this.onDone = () => {
+      this.setState(state => ({
+        showKeypad: _extends({}, state.showKeypad, {
+          openCount: state.showKeypad.openCount - 1,
+          main: false
+        })
+      }));
+    };
+
+    this.onFocus = () => {
+      this.setState(state => ({
+        showKeypad: _extends({}, state.showKeypad, {
+          openCount: !state.showKeypad.main ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+          main: true
+        })
+      }));
+    };
+
+    this.onAlternateFocus = alternateId => () => {
+      this.setState(state => ({
+        showKeypad: _extends({}, state.showKeypad, {
+          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+          [alternateId]: true
+        })
+      }));
+    };
+
+    this.onAlternateDone = alternateId => () => {
+      this.setState(state => ({
+        showKeypad: _extends({}, state.showKeypad, {
+          openCount: state.showKeypad.openCount - 1,
+          [alternateId]: false
+        })
+      }));
+    };
+
+    const {
+      response: {
+        alternates
+      } = {}
+    } = props || {};
+    const alternatesLength = Object.keys(alternates || {}).length;
+    this.state = {
+      alternateIdCounter: alternatesLength + 1,
+      showKeypad: {
+        openCount: 0,
+        main: false
+      }
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      mode,
+      defaultResponse,
+      index,
+      response,
+      cAllowTrailingZeros,
+      cIgnoreOrder,
+      error
+    } = this.props;
+    const {
+      showKeypad
+    } = this.state;
+    const {
+      validation,
+      answer,
+      alternates,
+      ignoreOrder,
+      allowTrailingZeros
+    } = response;
+    const hasAlternates = Object.keys(alternates || {}).length > 0;
+    const classNames = {
+      editor: classes.responseEditor,
+      mathToolbar: classes.mathToolbar
+    };
+    const styles = {
+      minHeight: `${showKeypad.openCount > 0 ? 430 : 230}px`
+    };
+    return /*#__PURE__*/React.createElement(Card, {
+      className: classes.responseContainer,
+      style: styles
+    }, /*#__PURE__*/React.createElement(CardContent, {
+      className: classes.cardContent
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.titleBar
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: classes.title,
+      component: "div"
+    }, "Response ", ''), /*#__PURE__*/React.createElement(InputContainer, {
+      label: "Validation",
+      className: classes.selectContainer
+    }, /*#__PURE__*/React.createElement(Select, {
+      className: classes.select,
+      onChange: this.onChange('validation'),
+      value: validation || 'literal'
+    }, /*#__PURE__*/React.createElement(MenuItem, {
+      value: "literal"
+    }, "Literal Validation"), /*#__PURE__*/React.createElement(MenuItem, {
+      value: "symbolic"
+    }, "Symbolic Validation")))), validation === 'literal' && /*#__PURE__*/React.createElement("div", {
+      className: classes.flexContainer
+    }, cAllowTrailingZeros.enabled && /*#__PURE__*/React.createElement(FormControlLabel, {
+      label: cAllowTrailingZeros.label,
+      control: /*#__PURE__*/React.createElement(Checkbox, {
+        className: classes.customColor,
+        checked: allowTrailingZeros,
+        onChange: this.onLiteralOptionsChange('allowTrailingZeros')
+      })
+    }), cIgnoreOrder.enabled && /*#__PURE__*/React.createElement(FormControlLabel, {
+      label: cIgnoreOrder.label,
+      control: /*#__PURE__*/React.createElement(Checkbox, {
+        className: classes.customColor,
+        checked: ignoreOrder,
+        onChange: this.onLiteralOptionsChange('ignoreOrder')
+      })
+    })), /*#__PURE__*/React.createElement("div", {
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(InputLabel, null, "Correct Answer"), /*#__PURE__*/React.createElement(MathToolbar, {
+      keypadMode: mode,
+      classNames: classNames,
+      controlledKeypad: true,
+      showKeypad: showKeypad.main,
+      latex: answer || '',
+      onChange: this.onAnswerChange,
+      onFocus: this.onFocus,
+      onDone: this.onDone,
+      error: error && error.answer
+    }), error && error.answer ? /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, error.answer) : null), hasAlternates && Object.keys(alternates).map((alternateId, altIdx) => /*#__PURE__*/React.createElement("div", {
+      className: classes.inputContainer,
+      key: alternateId
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.alternateBar
+    }, /*#__PURE__*/React.createElement(InputLabel, null, "Alternate", Object.keys(alternates).length > 1 ? ` ${altIdx + 1}` : ''), /*#__PURE__*/React.createElement(Button, {
+      className: classes.removeAlternateButton,
+      type: "secondary",
+      onClick: this.onRemoveAlternate(alternateId)
+    }, "Remove")), /*#__PURE__*/React.createElement(MathToolbar, {
+      classNames: classNames,
+      controlledKeypad: true,
+      keypadMode: mode,
+      showKeypad: showKeypad[alternateId] || false,
+      latex: alternates[alternateId] || '',
+      onChange: this.onAlternateAnswerChange(alternateId),
+      onFocus: this.onAlternateFocus(alternateId),
+      onDone: this.onAlternateDone(alternateId),
+      error: error && error[alternateId]
+    }), error && error[alternateId] ? /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, error[alternateId]) : null)), /*#__PURE__*/React.createElement(Button, {
+      className: classes.alternateButton,
+      type: "primary",
+      onClick: this.onAddAlternate
+    }, "ADD ALTERNATE")));
+  }
+
+}
+
+Response.propTypes = {
+  classes: PropTypes.object.isRequired,
+  defaultResponse: PropTypes.bool,
+  error: PropTypes.object,
+  mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  index: PropTypes.number,
+  onResponseChange: PropTypes.func.isRequired,
+  response: PropTypes.object.isRequired,
+  cIgnoreOrder: PropTypes.object.isRequired,
+  cAllowTrailingZeros: PropTypes.object.isRequired
+};
+Response.defaultProps = {
+  defaultResponse: false,
+  mode: 'miscellaneous'
+};
+var Response$1 = withStyles(styles$2)(Response);
+
+const ResponseTypes = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+const generateValidationMessage = (model = {}, config = {}) => {
+  const {
+    maxResponseAreas
+  } = config;
+  const {
+    responseType
+  } = model;
+  let responseAreasMessage = '';
+  const answersMessage = '\nAll correct answers (the primary and any alternates) should not be empty and should be unique.';
+
+  if (responseType === 'Advanced Multi') {
+    responseAreasMessage = '\nThere should be at least 1 ' + (maxResponseAreas ? `and at most ${maxResponseAreas} ` : '') + 'response area' + (maxResponseAreas ? 's' : '') + ' defined.';
+  }
+
+  return 'Validation requirements:' + answersMessage + responseAreasMessage;
+};
+const getPluginProps = (props = {}, baseInputConfiguration = {}) => _extends({}, baseInputConfiguration, props);
+
+var Info = {};
+
+var interopRequireDefault = {exports: {}};
+
+(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));
+
+var createSvgIcon$1 = {};
+
+var pure$1 = {};
+
+var shouldUpdate$1 = {};
+
+var inheritsLoose = {exports: {}};
+
+var setPrototypeOf = {exports: {}};
+
+(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));
+
+(function (module) {
+var setPrototypeOf$1 = setPrototypeOf.exports;
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  setPrototypeOf$1(subClass, superClass);
+}
+
+module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
+}(inheritsLoose));
+
+var setDisplayName$1 = {};
+
+var setStatic$1 = {};
+
+setStatic$1.__esModule = true;
+setStatic$1.default = void 0;
+
+var setStatic = function setStatic(key, value) {
+  return function (BaseComponent) {
+    /* eslint-disable no-param-reassign */
+    BaseComponent[key] = value;
+    /* eslint-enable no-param-reassign */
+
+    return BaseComponent;
+  };
+};
+
+var _default$8 = setStatic;
+setStatic$1.default = _default$8;
+
+var _interopRequireDefault$6 = interopRequireDefault.exports;
+
+setDisplayName$1.__esModule = true;
+setDisplayName$1.default = void 0;
+
+var _setStatic = _interopRequireDefault$6(setStatic$1);
+
+var setDisplayName = function setDisplayName(displayName) {
+  return (0, _setStatic.default)('displayName', displayName);
+};
+
+var _default$7 = setDisplayName;
+setDisplayName$1.default = _default$7;
+
+var wrapDisplayName$1 = {};
+
+var getDisplayName$1 = {};
+
+getDisplayName$1.__esModule = true;
+getDisplayName$1.default = void 0;
+
+var getDisplayName = function getDisplayName(Component) {
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (!Component) {
+    return undefined;
+  }
+
+  return Component.displayName || Component.name || 'Component';
+};
+
+var _default$6 = getDisplayName;
+getDisplayName$1.default = _default$6;
+
+var _interopRequireDefault$5 = interopRequireDefault.exports;
+
+wrapDisplayName$1.__esModule = true;
+wrapDisplayName$1.default = void 0;
+
+var _getDisplayName = _interopRequireDefault$5(getDisplayName$1);
+
+var wrapDisplayName = function wrapDisplayName(BaseComponent, hocName) {
+  return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
+};
+
+var _default$5 = wrapDisplayName;
+wrapDisplayName$1.default = _default$5;
+
+var _interopRequireDefault$4 = interopRequireDefault.exports;
+
+shouldUpdate$1.__esModule = true;
+shouldUpdate$1.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault$4(inheritsLoose.exports);
+
+var _react$2 = React__default;
+
+var _setDisplayName$1 = _interopRequireDefault$4(setDisplayName$1);
+
+var _wrapDisplayName$1 = _interopRequireDefault$4(wrapDisplayName$1);
+
+var shouldUpdate = function shouldUpdate(test) {
+  return function (BaseComponent) {
+    var factory = (0, _react$2.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$2.Component);
+
+    if (process.env.NODE_ENV !== 'production') {
+      return (0, _setDisplayName$1.default)((0, _wrapDisplayName$1.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
+    }
+
+    return ShouldUpdate;
+  };
+};
+
+var _default$4 = shouldUpdate;
+shouldUpdate$1.default = _default$4;
+
+var shallowEqual$1 = {};
+
+/**
+ * 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 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;
+}
+
+var shallowEqual_1 = shallowEqual;
+
+var _interopRequireDefault$3 = interopRequireDefault.exports;
+
+shallowEqual$1.__esModule = true;
+shallowEqual$1.default = void 0;
+
+var _shallowEqual$1 = _interopRequireDefault$3(shallowEqual_1);
+
+var _default$3 = _shallowEqual$1.default;
+shallowEqual$1.default = _default$3;
+
+var _interopRequireDefault$2 = interopRequireDefault.exports;
+
+pure$1.__esModule = true;
+pure$1.default = void 0;
+
+var _shouldUpdate = _interopRequireDefault$2(shouldUpdate$1);
+
+var _shallowEqual = _interopRequireDefault$2(shallowEqual$1);
+
+var _setDisplayName = _interopRequireDefault$2(setDisplayName$1);
+
+var _wrapDisplayName = _interopRequireDefault$2(wrapDisplayName$1);
+
+var pure = 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$2 = pure;
+pure$1.default = _default$2;
+
+var _interopRequireDefault$1 = interopRequireDefault.exports;
+
+Object.defineProperty(createSvgIcon$1, "__esModule", {
+  value: true
+});
+createSvgIcon$1.default = void 0;
+
+var _react$1 = _interopRequireDefault$1(React__default);
+
+var _pure = _interopRequireDefault$1(pure$1);
+
+var _SvgIcon = _interopRequireDefault$1(require$$3);
+
+function createSvgIcon(path, displayName) {
+  var Icon = function Icon(props) {
+    return _react$1.default.createElement(_SvgIcon.default, props, path);
+  };
+
+  Icon.displayName = "".concat(displayName, "Icon");
+  Icon = (0, _pure.default)(Icon);
+  Icon.muiName = 'SvgIcon';
+  return Icon;
+}
+var _default$1 = createSvgIcon;
+createSvgIcon$1.default = _default$1;
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+Object.defineProperty(Info, "__esModule", {
+  value: true
+});
+var default_1 = Info.default = void 0;
+
+var _react = _interopRequireDefault(React__default);
+
+var _createSvgIcon = _interopRequireDefault(createSvgIcon$1);
+
+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: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+})), 'Info');
+
+default_1 = Info.default = _default;
+
+let registered = false;
+
+const styles$1 = theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  templateTitle: {
+    fontSize: '0.85rem'
+  },
+  title: {
+    fontSize: '1.1rem'
+  },
+  addResponseButton: {
+    border: `1px solid ${theme.palette.grey['A100']}`,
+    float: 'right',
+    width: '150px'
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  selectContainer: {
+    flex: 'initial',
+    width: '40%',
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  responseTemplate: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  responseEditor: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    // minWidth: '500px',
+    maxWidth: 'inherit',
+    height: 'auto',
+    minHeight: '130px',
+    textAlign: 'left',
+    padding: theme.spacing.unit
+  },
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  blockContainer: {
+    margin: theme.spacing.unit,
+    display: 'inline-flex',
+    border: '2px solid grey'
+  },
+  blockContainerGeneric: {
+    margin: theme.spacing.unit / 2
+  },
+  blockResponse: {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    flex: 2,
+    color: 'grey',
+    background: theme.palette.grey['A100'],
+    fontSize: '0.8rem',
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: '2px solid grey'
+  },
+  blockResponseGeneric: {
+    borderRight: 0
+  },
+  blockMath: {
+    color: theme.palette.grey[400],
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 8,
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  tooltip: {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre-wrap'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  },
+  advancedResponse: {
+    marginBottom: theme.spacing.unit * 2.5
+  }
+});
+
+const REGEX = /{{response}}/gm;
+const TEMPORARY_RESPONSE_FIELD = /\\%response\\%/gm;
+const ANSWER_BLOCK_REGEX = /\\embed\{answerBlock\}\[r\d*\]/g;
+const NEWLINE_BLOCK = /\\embed\{newLine\}\[\]/g;
+const NEWLINE_LATEX = /\\newline/g;
+
+function prepareForStatic(expression) {
+  if (expression) {
+    let answerBlocks = 1; // assume one at least
+
+    return expression.replace(REGEX, () => `\\embed{answerBlock}[r${answerBlocks++}]`).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
+  }
+}
+
+function prepareForModel(expression) {
+  if (expression) {
+    return expression.replace(ANSWER_BLOCK_REGEX, () => '{{response}}').replace(TEMPORARY_RESPONSE_FIELD, () => '{{response}}').replace(NEWLINE_BLOCK, () => '\\newline');
+  }
+}
+
+class GeneralConfigBlock extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = name => evtOrValue => {
+      const {
+        model,
+        onChange
+      } = this.props;
+
+      const newModel = _extends({}, model);
+
+      if (typeof evtOrValue === 'object') {
+        newModel[name] = evtOrValue.target.value;
+      } else {
+        newModel[name] = evtOrValue;
+      }
+
+      if (name === 'expression') {
+        newModel[name] = prepareForModel(evtOrValue);
+      }
+
+      onChange(newModel);
+    };
+
+    this.onDone = () => {
+      this.setState({
+        showKeypad: false
+      });
+    };
+
+    this.onFocus = () => {
+      this.setState({
+        showKeypad: true
+      });
+    };
+
+    this.onPromptFocus = () => {
+      this.setState({
+        showKeypad: false
+      });
+    };
+
+    this.handleAnswerBlockDomUpdate = () => {
+      const {
+        model
+      } = this.props;
+      const responseAreas = {};
+
+      if (model && model.expression) {
+        let answerBlocks = 1; // assume one at least
+        // build out local state model using responses declared in expression
+
+        model.expression.replace(REGEX, () => {
+          responseAreas[`r${answerBlocks++}`] = {
+            value: ''
+          };
+        });
+      }
+
+      if (!isEqual(responseAreas, this.state.responseAreas)) {
+        this.setState({
+          responseAreas
+        }, () => {
+          if (this.root && Object.keys(responseAreas).length) {
+            Object.keys(responseAreas).forEach((responseId, idx) => {
+              const el = this.root.querySelector(`#${responseId}`);
+              const indexEl = this.root.querySelector(`#${responseId}Index`);
+
+              if (el) {
+                // const MathQuill = require('@pie-framework/mathquill');
+                let MQ = MathQuill.getInterface(2); // We no longer have individual answers, so we cannot set text content of blocks
+                // el.textContent = response.answer;
+
+                MQ.StaticMath(el);
+                indexEl.textContent = `R${idx + 1}`;
+              }
+            });
+          }
+        });
+      }
+    };
+
+    this.onAddResponse = () => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        responseIdCounter
+      } = this.state;
+
+      const newModel = _extends({}, model);
+
+      let newCounter = responseIdCounter;
+
+      while (model.responses.find(response => response.id === newCounter)) {
+        newCounter++;
+      }
+
+      const response = {
+        id: newCounter,
+        validation: 'literal',
+        answer: '',
+        alternates: {}
+      };
+      newModel.responses = newModel.responses.concat(response);
+      onChange(newModel);
+      this.setState({
+        responseIdCounter: response.id
+      });
+    };
+
+    this.onResponseChange = (response, index) => {
+      const {
+        model,
+        onChange
+      } = this.props;
+
+      const newModel = _extends({}, model);
+
+      newModel.responses[index] = response;
+      onChange(newModel);
+    };
+
+    const _responseAreas = {};
+
+    if (props.model && props.model.expression) {
+      let answerBlocks = 1; // assume one at least
+      // build out local state model using responses declared in expression
+
+      props.model.expression.replace(REGEX, () => {
+        _responseAreas[`r${answerBlocks++}`] = {
+          value: ''
+        };
+      });
+    }
+
+    this.state = {
+      showKeypad: false,
+      responseAreas: _responseAreas,
+      responseIdCounter: Object.keys(_responseAreas).length
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    const {
+      classes
+    } = this.props;
+
+    if (typeof window !== 'undefined') {
+      // const MathQuill = require('@pie-framework/mathquill');
+      let MQ = MathQuill.getInterface(2);
+
+      if (!registered) {
+        MQ.registerEmbed('answerBlock', data => {
+          // not used until we implement individual answer tracking
+          // const individualAnswerBlock = `<div class="${classes.blockContainer}">
+          //     <div class="${classes.blockResponse}" id="${data}Index">R</div>
+          //     <div class="${classes.blockMath}">
+          //        <span id="${data}"></span>
+          //      </div>
+          //   </div>`;
+          const genericAnswerBlock = `<div class="${cx(classes.blockContainer, classes.blockContainerGeneric)}">
+                <div class="${cx(classes.blockResponse, classes.blockResponseGeneric)}" id="${data}Index">Response</div>
+              </div>`;
+          return {
+            htmlString: genericAnswerBlock,
+            text: () => 'text',
+            latex: () => `\\embed{answerBlock}[${data}]`
+          };
+        });
+        registered = true;
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.handleAnswerBlockDomUpdate();
+  }
+
+  componentDidUpdate() {
+    this.handleAnswerBlockDomUpdate();
+  }
+
+  render() {
+    const {
+      classes,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      configuration,
+      promptEnabled,
+      rationaleEnabled,
+      toolbarOpts
+    } = this.props;
+    const {
+      showKeypad
+    } = this.state;
+    const {
+      prompt,
+      expression,
+      equationEditor,
+      promptEquationEditor = '8',
+      responses,
+      responseType,
+      rationale,
+      spellCheckEnabled,
+      errors = {}
+    } = model;
+    const {
+      baseInputConfiguration = {},
+      rationale: cRationale = {},
+      prompt: cPrompt = {},
+      ignoreOrder: cIgnoreOrder = {},
+      allowTrailingZeros: cAllowTrailingZeros = {},
+      maxResponseAreas,
+      maxImageWidth = {},
+      maxImageHeight = {},
+      mathMlOptions = {}
+    } = configuration || {};
+    const validationMessage = generateValidationMessage(configuration, model);
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      responsesErrors,
+      responseAreasError
+    } = errors;
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const classNames = {
+      editor: classes.responseEditor,
+      mathToolbar: classes.mathToolbar
+    };
+    const responsesToUse = responseType === ResponseTypes.advanced ? responses : responses.slice(0, 1);
+    const validationTooltip = /*#__PURE__*/React.createElement(Tooltip, {
+      classes: {
+        tooltip: classes.tooltip
+      },
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/React.createElement(default_1, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        marginLeft: '5px'
+      }
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      ref: r => this.root = r || this.root,
+      className: classes.container
+    }, promptEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: cPrompt.label,
+      className: classes.promptHolder
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      onFocus: this.onPromptFocus,
+      className: classes.prompt,
+      markup: prompt || '',
+      onChange: this.onChange('prompt'),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(cPrompt == null ? void 0 : cPrompt.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, promptError)), responseType === ResponseTypes.advanced && /*#__PURE__*/React.createElement("div", {
+      className: classes.advancedResponse
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.flexContainer,
+      style: {
+        justifyContent: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.title
+    }, "Define Response"), validationTooltip), /*#__PURE__*/React.createElement(InputContainer, {
+      key: "templateEditorType",
+      label: "Response Template Equation Editor",
+      className: classes.selectContainer
+    }, /*#__PURE__*/React.createElement(Select, {
+      className: classes.select,
+      onChange: this.onChange('promptEquationEditor'),
+      value: promptEquationEditor
+    }, /*#__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: classes.responseTemplate,
+      key: "templateHolder"
+    }, /*#__PURE__*/React.createElement(InputLabel, {
+      className: classes.templateTitle
+    }, "RESPONSE TEMPLATE"), /*#__PURE__*/React.createElement(MathToolbar, {
+      classNames: classNames,
+      allowAnswerBlock: true,
+      keypadMode: promptEquationEditor,
+      controlledKeypad: true,
+      showKeypad: showKeypad,
+      latex: prepareForStatic(expression) || '',
+      onChange: this.onChange('expression'),
+      onFocus: this.onFocus,
+      onDone: this.onDone,
+      maxResponseAreas: maxResponseAreas,
+      error: responseAreasError
+    })), responseAreasError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, responseAreasError)), /*#__PURE__*/React.createElement("div", {
+      className: classes.flexContainer,
+      style: {
+        justifyContent: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.title
+    }, "Define Correct Response"), responseType === ResponseTypes.simple ? validationTooltip : null), /*#__PURE__*/React.createElement(InputContainer, {
+      label: "Equation Editor",
+      className: classes.selectContainer
+    }, /*#__PURE__*/React.createElement(Select, {
+      className: classes.select,
+      onChange: this.onChange('equationEditor'),
+      value: 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"))), responsesToUse.map((response, idx) => /*#__PURE__*/React.createElement(Response$1, {
+      key: response.id,
+      mode: equationEditor,
+      response: response,
+      defaultResponse: responseType === ResponseTypes.simple,
+      onResponseChange: this.onResponseChange,
+      index: idx,
+      cIgnoreOrder: cIgnoreOrder,
+      cAllowTrailingZeros: cAllowTrailingZeros,
+      error: responsesErrors && responsesErrors[idx]
+    })), rationaleEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: cRationale.label,
+      className: classes.promptHolder
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.prompt,
+      markup: rationale || '',
+      onChange: this.onChange('rationale'),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(cRationale == null ? void 0 : cRationale.inputConfiguration, _extends({}, baseInputConfiguration, {
+        math: {
+          controlledKeypadMode: false
+        }
+      })),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, rationaleError)));
+  }
+
+}
+
+GeneralConfigBlock.propTypes = {
+  classes: PropTypes.object.isRequired,
+  model: PropTypes.object.isRequired,
+  imageSupport: PropTypes.object,
+  uploadSoundSupport: PropTypes.object,
+  configuration: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  promptEnabled: PropTypes.bool,
+  rationaleEnabled: PropTypes.bool,
+  toolbarOpts: PropTypes.object
+};
+var GeneralConfigBlock$1 = withStyles(styles$1)(GeneralConfigBlock);
+
+const log$1 = debug('@pie-element:math-inline:configure');
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = settings;
+
+const styles = theme => ({
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  }
+});
+
+class Configure extends React__default.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onChange = model => {
+      this.props.onModelChanged(model);
+    };
+
+    this.changeTeacherInstructions = teacherInstructions => {
+      this.props.onModelChanged(_extends({}, this.props.model, {
+        teacherInstructions
+      }));
+    };
+
+    this.onFeedbackChange = feedback => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      model.feedback = feedback;
+      onModelChanged(model);
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      model,
+      imageSupport,
+      onModelChanged,
+      configuration,
+      onConfigurationChanged,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      allowTrailingZeros = {},
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      feedback = {},
+      ignoreOrder = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      prompt = {},
+      rationale = {},
+      responseType = {},
+      scoringType = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      feedbackEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      teacherInstructions: teacherInstructionsError
+    } = errors;
+    log$1('[render] model', model);
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const panelSettings = {
+      responseType: responseType.settings && radio(responseType.label, [ResponseTypes.simple, ResponseTypes.advanced]),
+      feedbackEnabled: feedback.settings && toggle(feedback.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      'ignoreOrder.enabled': ignoreOrder.settings && toggle(ignoreOrder.label),
+      'allowTrailingZeros.enabled': allowTrailingZeros.settings && toggle(allowTrailingZeros.label),
+      rubricEnabled: (withRubric == null ? void 0 : withRubric.settings) && toggle(withRubric == null ? void 0 : withRubric.label)
+    };
+    return /*#__PURE__*/React__default.createElement(layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/React__default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: config => onConfigurationChanged(config),
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/React__default.createElement(InputContainer, {
+      label: teacherInstructions.label,
+      className: classes.promptHolder
+    }, /*#__PURE__*/React__default.createElement(EditableHtml, {
+      className: classes.prompt,
+      markup: model.teacherInstructions || '',
+      onChange: this.changeTeacherInstructions,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/React__default.createElement("div", {
+      className: classes.errorText
+    }, teacherInstructionsError)), /*#__PURE__*/React__default.createElement(GeneralConfigBlock$1, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      model: model,
+      configuration: configuration,
+      onChange: this.onChange,
+      rationaleEnabled: rationaleEnabled,
+      promptEnabled: promptEnabled,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled
+    }), feedbackEnabled && /*#__PURE__*/React__default.createElement(FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.onFeedbackChange,
+      toolbarOpts: toolbarOpts
+    }));
+  }
+
+}
+Configure.propTypes = {
+  onModelChanged: PropTypes.func,
+  onConfigurationChanged: PropTypes.func,
+  classes: PropTypes.object,
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  imageSupport: PropTypes.object,
+  uploadSoundSupport: PropTypes.object
+};
+var Configure$1 = withStyles(styles)(Configure);
+
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configure
+ */
+
+var defaults = {
+  model: {
+    allowTrailingZerosDefault: false,
+    customKeys: [],
+    equationEditor: '8',
+    expression: '',
+    feedback: {
+      correct: {
+        default: 'Correct',
+        type: 'none'
+      },
+      incorrect: {
+        default: 'Incorrect',
+        type: 'none'
+      },
+      partial: {
+        default: 'Nearly',
+        type: 'none'
+      }
+    },
+    feedbackEnabled: false,
+    ignoreOrderDefault: false,
+    partialScoring: true,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    responseType: ResponseTypes.advanced,
+    responses: [],
+    scoringType: 'auto',
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    validationDefault: 'literal'
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback'
+    },
+    responseType: {
+      settings: true,
+      label: 'Response type'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    ignoreOrder: {
+      settings: false,
+      label: 'Ignore Order',
+      enabled: true
+    },
+    allowTrailingZeros: {
+      settings: false,
+      label: 'Allow Trailing Zeros',
+      enabled: true
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+
+const log = debug('pie-elements:math-inline:configure');
+class MathInlineConfigure extends HTMLElement {
+  constructor() {
+    super();
+    this._model = MathInlineConfigure.createDefaultModel();
+    this._configuration = defaults.configuration;
+  }
+
+  set model(m) {
+    this._model = MathInlineConfigure.createDefaultModel(m);
+
+    this._render();
+  }
+
+  set configuration(c) {
+    var _newConfiguration$lan;
+
+    const newConfiguration = _extends({}, defaults.configuration, c);
+
+    this._configuration = newConfiguration; // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+
+    if (newConfiguration != null && (_newConfiguration$lan = newConfiguration.language) != null && _newConfiguration$lan.enabled) {
+      var _newConfiguration$lan2, _newConfiguration$lan3;
+
+      if (newConfiguration != null && (_newConfiguration$lan2 = newConfiguration.languageChoices) != null && (_newConfiguration$lan3 = _newConfiguration$lan2.options) != null && _newConfiguration$lan3.length) {
+        this._model.language = newConfiguration == null ? void 0 : newConfiguration.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      } // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+
+
+      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this._render();
+  }
+
+  onModelChanged(model) {
+    this._model = model;
+    log('[onModelChanged]: ', this._model);
+
+    this._render();
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model));
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+
+    this._render();
+  }
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    if (this._model) {
+      const el = /*#__PURE__*/React__default.createElement(Configure$1, {
+        onModelChanged: this.onModelChanged.bind(this),
+        onConfigurationChanged: this.onConfigurationChanged.bind(this),
+        model: this._model,
+        configuration: this._configuration,
+        imageSupport: {
+          add: this.insertImage.bind(this),
+          delete: this.onDeleteImage.bind(this)
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          delete: this.onDeleteSound.bind(this)
+        }
+      });
+      ReactDOM.render(el, this);
+    }
+  }
+
+}
+
+MathInlineConfigure.createDefaultModel = (model = {}) => {
+  // making sure that defaults are set
+  if (!isEmpty(model.responses)) {
+    model.responses = model.responses.map(correctResponse => _extends({}, correctResponse, {
+      validation: correctResponse.validation || defaults.model.validationDefault,
+      allowTrailingZeros: correctResponse.allowTrailingZeros || defaults.model.allowTrailingZerosDefault,
+      ignoreOrder: correctResponse.ignoreOrder || defaults.model.ignoreOrderDefault || false
+    }));
+  }
+
+  return _extends({}, defaults.model, model);
+};
+
+export { MathInlineConfigure as default };
+//# sourceMappingURL=configure.js.map