@pie-element/math-inline 5.8.10 → 5.9.1

package/module/configure.js

@@ -0,0 +1,1463 @@
+import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_classnames, _dll_lodash, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.19/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.20/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.20/module/index.js";
+import {_dll_pie_lib__math_toolbar, _dll_pie_framework__mathquill} from "../../../@pie-lib/math-edit-module@^1.1.18/module/index.js";
+const React$3 = _dll_react;
+const PropTypes$2 = _dll_prop_types;
+const {Card: Card} = _dll_material_ui__core;
+const {CardContent: CardContent} = _dll_material_ui__core;
+const {Button: Button} = _dll_material_ui__core;
+const {FormControlLabel: FormControlLabel} = _dll_material_ui__core;
+const {Typography: Typography} = _dll_material_ui__core;
+const {InputLabel: InputLabel$1} = _dll_material_ui__core;
+const {Checkbox: Checkbox} = _dll_material_ui__core;
+const {Select: Select$1} = _dll_material_ui__core;
+const {MenuItem: MenuItem$1} = _dll_material_ui__core;
+const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
+const {InputContainer: InputContainer$2} = _dll_pie_lib__config_ui;
+const {MathToolbar: MathToolbar$1} = _dll_pie_lib__math_toolbar;
+const _jsxFileName$2 = "/home/circleci/repo/packages/math-inline/configure/src/response.jsx";
+const styles$2 = theme => ({
+  responseContainer: {
+    marginTop: theme.spacing.unit * 2,
+    width: '100%',
+    border: '1px solid darkgray',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  },
+  cardContent: {
+    paddingBottom: `${theme.spacing.unit}px !important`
+  },
+  title: {
+    fontWeight: 700,
+    fontSize: '1.2rem',
+    flex: 3
+  },
+  selectContainer: {
+    flex: 2
+  },
+  inputContainer: {
+    marginTop: theme.spacing.unit
+  },
+  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%'
+  },
+  configPanel: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  alternateButton: {
+    border: '1px solid lightgrey'
+  },
+  removeAlternateButton: {
+    marginLeft: theme.spacing.unit * 2,
+    border: '1px solid lightgrey',
+    color: 'gray',
+    fontSize: '0.8rem'
+  },
+  checkboxContainer: {
+    marginTop: theme.spacing.unit * 2,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  configLabel: {
+    marginRight: 'auto'
+  }
+});
+class Response extends React$3.Component {
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes$2.object.isRequired,
+      defaultResponse: PropTypes$2.bool,
+      mode: PropTypes$2.oneOfType([PropTypes$2.string, PropTypes$2.number]),
+      index: PropTypes$2.number,
+      onResponseChange: PropTypes$2.func.isRequired,
+      response: PropTypes$2.object.isRequired,
+      cIgnoreOrder: PropTypes$2.object.isRequired,
+      cAllowTrailingZeros: PropTypes$2.object.isRequired
+    };
+  }
+  static __initStatic2() {
+    this.defaultProps = {
+      defaultResponse: false,
+      mode: 'miscellaneous'
+    };
+  }
+  constructor(props) {
+    super(props);
+    Response.prototype.__init.call(this);
+    Response.prototype.__init2.call(this);
+    Response.prototype.__init3.call(this);
+    Response.prototype.__init4.call(this);
+    Response.prototype.__init5.call(this);
+    Response.prototype.__init6.call(this);
+    Response.prototype.__init7.call(this);
+    Response.prototype.__init8.call(this);
+    Response.prototype.__init9.call(this);
+    Response.prototype.__init10.call(this);
+    Response.prototype.__init11.call(this);
+    const {response: {alternates} = {}} = props || ({});
+    const alternatesLength = Object.keys(alternates || ({})).length;
+    this.state = {
+      alternateIdCounter: alternatesLength + 1,
+      showKeypad: {
+        openCount: 0,
+        main: false
+      }
+    };
+  }
+  __init() {
+    this.onChange = name => evt => {
+      const {response, onResponseChange, index} = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse[name] = evt.target.value;
+      onResponseChange(newResponse, index);
+    };
+  }
+  __init2() {
+    this.onConfigChanged = name => evt => {
+      const {response, onResponseChange, index} = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse[name] = evt.target.checked;
+      onResponseChange(newResponse, index);
+    };
+  }
+  __init3() {
+    this.onLiteralOptionsChange = name => evt => {
+      const {response, onResponseChange, index} = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse[name] = !response[name];
+      onResponseChange(newResponse, index);
+    };
+  }
+  __init4() {
+    this.onAnswerChange = answer => {
+      const {response, onResponseChange, index} = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse.answer = answer;
+      onResponseChange(newResponse, index);
+    };
+  }
+  __init5() {
+    this.onAlternateAnswerChange = alternateId => answer => {
+      const {response, onResponseChange, index} = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse.alternates[alternateId] = answer;
+      onResponseChange(newResponse, index);
+    };
+  }
+  __init6() {
+    this.onAddAlternate = () => {
+      const {response, onResponseChange, index} = this.props;
+      const {alternateIdCounter} = this.state;
+      const newResponse = {
+        ...response
+      };
+      if (!newResponse.alternates) {
+        newResponse.alternates = {};
+      }
+      newResponse.alternates[alternateIdCounter] = '';
+      onResponseChange(newResponse, index);
+      this.setState({
+        alternateIdCounter: alternateIdCounter + 1
+      });
+    };
+  }
+  __init7() {
+    this.onRemoveAlternate = alternateId => () => {
+      const {response, onResponseChange, index} = this.props;
+      const newResponse = {
+        ...response
+      };
+      delete newResponse.alternates[alternateId];
+      onResponseChange(newResponse, index);
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount : state.showKeypad.openCount - 1
+        }
+      }));
+    };
+  }
+  __init8() {
+    this.onDone = () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: state.showKeypad.openCount - 1,
+          main: false
+        }
+      }));
+    };
+  }
+  __init9() {
+    this.onFocus = () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: !state.showKeypad.main ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+          main: true
+        }
+      }));
+    };
+  }
+  __init10() {
+    this.onAlternateFocus = alternateId => () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+          [alternateId]: true
+        }
+      }));
+    };
+  }
+  __init11() {
+    this.onAlternateDone = alternateId => () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: state.showKeypad.openCount - 1,
+          [alternateId]: false
+        }
+      }));
+    };
+  }
+  render() {
+    const {classes, mode, defaultResponse, index, response, cAllowTrailingZeros, cIgnoreOrder} = 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 React$3.createElement(Card, {
+      className: classes.responseContainer,
+      style: styles,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 271
+      }
+    }, React$3.createElement(CardContent, {
+      className: classes.cardContent,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 272
+      }
+    }, React$3.createElement('div', {
+      className: classes.titleBar,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 273
+      }
+    }, React$3.createElement(Typography, {
+      className: classes.title,
+      component: "h2",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 274
+      }
+    }, "Response", ' ', ''), React$3.createElement(InputContainer$2, {
+      label: "Validation",
+      className: classes.selectContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 282
+      }
+    }, React$3.createElement(Select$1, {
+      className: classes.select,
+      onChange: this.onChange('validation'),
+      value: validation || 'literal',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 286
+      }
+    }, React$3.createElement(MenuItem$1, {
+      value: "literal",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 291
+      }
+    }, "Literal Validation"), React$3.createElement(MenuItem$1, {
+      value: "symbolic",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 292
+      }
+    }, "Symbolic Validation")))), validation === 'literal' && React$3.createElement('div', {
+      className: classes.flexContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 297
+      }
+    }, cAllowTrailingZeros.enabled && React$3.createElement(FormControlLabel, {
+      label: cAllowTrailingZeros.label,
+      control: React$3.createElement(Checkbox, {
+        checked: allowTrailingZeros,
+        onChange: this.onLiteralOptionsChange('allowTrailingZeros'),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 302
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 299
+      }
+    }), cIgnoreOrder.enabled && React$3.createElement(FormControlLabel, {
+      label: cIgnoreOrder.label,
+      control: React$3.createElement(Checkbox, {
+        checked: ignoreOrder,
+        onChange: this.onLiteralOptionsChange('ignoreOrder'),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 316
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 313
+      }
+    })), React$3.createElement('div', {
+      className: classes.inputContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 325
+      }
+    }, React$3.createElement(InputLabel$1, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 326
+      }
+    }, "Correct Answer"), React$3.createElement(MathToolbar$1, {
+      keypadMode: mode,
+      classNames: classNames,
+      controlledKeypad: true,
+      showKeypad: showKeypad.main,
+      latex: answer || '',
+      onChange: this.onAnswerChange,
+      onFocus: this.onFocus,
+      onDone: this.onDone,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 327
+      }
+    })), hasAlternates && Object.keys(alternates).map((alternateId, altIdx) => React$3.createElement('div', {
+      className: classes.inputContainer,
+      key: alternateId,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 340
+      }
+    }, React$3.createElement('div', {
+      className: classes.alternateBar,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 341
+      }
+    }, React$3.createElement(InputLabel$1, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 342
+      }
+    }, "Alternate", Object.keys(alternates).length > 1 ? ` ${altIdx + 1}` : ''), React$3.createElement(Button, {
+      className: classes.removeAlternateButton,
+      type: "secondary",
+      onClick: this.onRemoveAlternate(alternateId),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 346
+      }
+    }, "Remove")), React$3.createElement(MathToolbar$1, {
+      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),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 354
+      }
+    }))), React$3.createElement('div', {
+      className: classes.configPanel,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 366
+      }
+    }, React$3.createElement(Button, {
+      className: classes.alternateButton,
+      type: "primary",
+      onClick: this.onAddAlternate,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 367
+      }
+    }, "ADD ALTERNATE"), React$3.createElement('div', {
+      className: classes.checkboxContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 374
+      }
+    }))));
+  }
+}
+Response.__initStatic();
+Response.__initStatic2();
+var Response$1 = withStyles$2(styles$2)(Response);
+const ResponseTypes = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+const React$2 = _dll_react;
+const PropTypes$1 = _dll_prop_types;
+const cx = _dll_classnames;
+const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
+const {InputLabel: InputLabel} = _dll_material_ui__core;
+const {Select: Select} = _dll_material_ui__core;
+const {MenuItem: MenuItem} = _dll_material_ui__core;
+const {isEqual: isEqual} = _dll_lodash;
+const EditableHtml$1 = _dll_pie_lib__editable_html;
+const {InputContainer: InputContainer$1} = _dll_pie_lib__config_ui;
+const {MathToolbar: MathToolbar} = _dll_pie_lib__math_toolbar;
+const MathQuill = _dll_pie_framework__mathquill;
+const _jsxFileName$1 = "/home/circleci/repo/packages/math-inline/configure/src/general-config-block.jsx";
+let registered = false;
+const styles$1 = theme => ({
+  container: {
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  templateTitle: {
+    fontSize: '0.85rem'
+  },
+  addResponseButton: {
+    border: '1px solid lightgrey',
+    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
+  },
+  inputContainer: {
+    marginBottom: theme.spacing.unit * 4,
+    display: 'flex',
+    flexDirection: 'column',
+    width: '90%'
+  },
+  responseEditor: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    minWidth: '500px',
+    maxWidth: 'inherit',
+    height: 'auto',
+    minHeight: '130px',
+    textAlign: 'left',
+    padding: theme.spacing.unit
+  },
+  promptHolder: {
+    width: '100%',
+    paddingBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  prompt: {
+    paddingTop: theme.spacing.unit * 2,
+    width: '100%',
+    maxWidth: '600px'
+  },
+  blockContainer: {
+    margin: theme.spacing.unit,
+    display: 'inline-flex',
+    border: '2px solid grey'
+  },
+  blockContainerGeneric: {
+    margin: theme.spacing.unit / 2
+  },
+  blockResponse: {
+    flex: 2,
+    color: 'grey',
+    background: 'lightgrey',
+    fontSize: '0.8rem',
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: '2px solid grey'
+  },
+  blockResponseGeneric: {
+    borderRight: 0
+  },
+  blockMath: {
+    color: '#bdbdbd',
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 8,
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  }
+});
+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;
+    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$2.Component {
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes$1.object.isRequired,
+      model: PropTypes$1.object.isRequired,
+      imageSupport: PropTypes$1.object,
+      configuration: PropTypes$1.object,
+      onChange: PropTypes$1.func.isRequired,
+      promptEnabled: PropTypes$1.bool,
+      rationaleEnabled: PropTypes$1.bool,
+      toolbarOpts: PropTypes$1.object
+    };
+  }
+  constructor(props) {
+    super(props);
+    GeneralConfigBlock.prototype.__init.call(this);
+    GeneralConfigBlock.prototype.__init2.call(this);
+    GeneralConfigBlock.prototype.__init3.call(this);
+    GeneralConfigBlock.prototype.__init4.call(this);
+    GeneralConfigBlock.prototype.__init5.call(this);
+    GeneralConfigBlock.prototype.__init6.call(this);
+    GeneralConfigBlock.prototype.__init7.call(this);
+    const responseAreas = {};
+    if (props.model && props.model.expression) {
+      let answerBlocks = 1;
+      props.model.expression.replace(REGEX, () => {
+        responseAreas[`r${answerBlocks++}`] = {
+          value: ''
+        };
+      });
+    }
+    this.state = {
+      showKeypad: false,
+      responseAreas,
+      responseIdCounter: Object.keys(responseAreas).length
+    };
+  }
+  __init() {
+    this.onChange = name => evtOrValue => {
+      const {model, onChange} = this.props;
+      const newModel = {
+        ...model
+      };
+      if (typeof evtOrValue === 'object') {
+        newModel[name] = evtOrValue.target.value;
+      } else {
+        newModel[name] = evtOrValue;
+      }
+      if (name === 'expression') {
+        newModel[name] = prepareForModel(evtOrValue);
+      }
+      onChange(newModel);
+    };
+  }
+  __init2() {
+    this.onDone = () => {
+      this.setState({
+        showKeypad: false
+      });
+    };
+  }
+  __init3() {
+    this.onFocus = () => {
+      this.setState({
+        showKeypad: true
+      });
+    };
+  }
+  __init4() {
+    this.onPromptFocus = () => {
+      this.setState({
+        showKeypad: false
+      });
+    };
+  }
+  UNSAFE_componentWillMount() {
+    const {classes} = this.props;
+    if (typeof window !== 'undefined') {
+      let MQ = MathQuill.getInterface(2);
+      if (!registered) {
+        MQ.registerEmbed('answerBlock', data => {
+          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();
+  }
+  __init5() {
+    this.handleAnswerBlockDomUpdate = () => {
+      const {model} = this.props;
+      const responseAreas = {};
+      if (model && model.expression) {
+        let answerBlocks = 1;
+        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) {
+                let MQ = MathQuill.getInterface(2);
+                MQ.StaticMath(el);
+                indexEl.textContent = `R${idx + 1}`;
+              }
+            });
+          }
+        });
+      }
+    };
+  }
+  __init6() {
+    this.onAddResponse = () => {
+      const {model, onChange} = this.props;
+      const {responseIdCounter} = this.state;
+      const newModel = {
+        ...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
+      });
+    };
+  }
+  __init7() {
+    this.onResponseChange = (response, index) => {
+      const {model, onChange} = this.props;
+      const newModel = {
+        ...model
+      };
+      newModel.responses[index] = response;
+      onChange(newModel);
+    };
+  }
+  render() {
+    const {classes, model, imageSupport, configuration, promptEnabled, rationaleEnabled, toolbarOpts} = this.props;
+    const {showKeypad} = this.state;
+    const {prompt, expression, equationEditor, promptEquationEditor = '8', responses, responseType, rationale} = model;
+    const {rationale: cRationale = {}, prompt: cPrompt = {}, ignoreOrder: cIgnoreOrder = {}, allowTrailingZeros: cAllowTrailingZeros = {}} = configuration || ({});
+    const classNames = {
+      editor: classes.responseEditor,
+      mathToolbar: classes.mathToolbar
+    };
+    const responsesToUse = responseType === ResponseTypes.advanced ? responses : responses.slice(0, 1);
+    return React$2.createElement('div', {
+      ref: r => this.root = r || this.root,
+      className: classes.container,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 356
+      }
+    }, promptEnabled && React$2.createElement(InputContainer$1, {
+      label: cPrompt.label,
+      className: classes.promptHolder,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 361
+      }
+    }, React$2.createElement(EditableHtml$1, {
+      onFocus: this.onPromptFocus,
+      className: classes.prompt,
+      markup: prompt || '',
+      onChange: this.onChange('prompt'),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 362
+      }
+    })), rationaleEnabled && React$2.createElement(InputContainer$1, {
+      label: cRationale.label,
+      className: classes.promptHolder,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 374
+      }
+    }, React$2.createElement(EditableHtml$1, {
+      className: classes.prompt,
+      markup: rationale || '',
+      pluginProps: {
+        math: {
+          controlledKeypadMode: false
+        }
+      },
+      onChange: this.onChange('rationale'),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 378
+      }
+    })), responseType === ResponseTypes.advanced && [React$2.createElement(InputContainer$1, {
+      key: "templateEditorType",
+      label: "Response Template Equation Editor",
+      className: classes.selectContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 394
+      }
+    }, React$2.createElement(Select, {
+      className: classes.select,
+      onChange: this.onChange('promptEquationEditor'),
+      value: promptEquationEditor,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 399
+      }
+    }, React$2.createElement(MenuItem, {
+      value: "non-negative-integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 404
+      }
+    }, "Numeric - Non-Negative Integers"), React$2.createElement(MenuItem, {
+      value: "integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 405
+      }
+    }, "Numeric - Integers"), React$2.createElement(MenuItem, {
+      value: "decimals",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 406
+      }
+    }, "Numeric - Decimals"), React$2.createElement(MenuItem, {
+      value: "fractions",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 407
+      }
+    }, "Numeric - Fractions"), React$2.createElement(MenuItem, {
+      value: 1,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 408
+      }
+    }, "Grade 1 - 2"), React$2.createElement(MenuItem, {
+      value: 3,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 409
+      }
+    }, "Grade 3 - 5"), React$2.createElement(MenuItem, {
+      value: 6,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 410
+      }
+    }, "Grade 6 - 7"), React$2.createElement(MenuItem, {
+      value: 8,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 411
+      }
+    }, "Grade 8 - HS"), React$2.createElement(MenuItem, {
+      value: 'geometry',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 412
+      }
+    }, "Geometry"), React$2.createElement(MenuItem, {
+      value: 'advanced-algebra',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 413
+      }
+    }, "Advanced Algebra"), React$2.createElement(MenuItem, {
+      value: 'statistics',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 414
+      }
+    }, "Statistics"), React$2.createElement(MenuItem, {
+      value: 'item-authoring',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 415
+      }
+    }, "Item Authoring"))), React$2.createElement('div', {
+      className: classes.inputContainer,
+      key: "templateHolder",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 418
+      }
+    }, React$2.createElement(InputLabel, {
+      className: classes.templateTitle,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 419
+      }
+    }, "RESPONSE TEMPLATE"), React$2.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,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 422
+      }
+    }))], React$2.createElement('h3', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 435
+      }
+    }, "Define Correct Response"), React$2.createElement('div', {
+      className: classes.flexContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 436
+      }
+    }, React$2.createElement(InputContainer$1, {
+      label: "Equation Editor",
+      className: classes.selectContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 437
+      }
+    }, React$2.createElement(Select, {
+      className: classes.select,
+      onChange: this.onChange('equationEditor'),
+      value: equationEditor,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 441
+      }
+    }, React$2.createElement(MenuItem, {
+      value: "non-negative-integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 446
+      }
+    }, "Numeric - Non-Negative Integers"), React$2.createElement(MenuItem, {
+      value: "integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 447
+      }
+    }, "Numeric - Integers"), React$2.createElement(MenuItem, {
+      value: "decimals",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 448
+      }
+    }, "Numeric - Decimals"), React$2.createElement(MenuItem, {
+      value: "fractions",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 449
+      }
+    }, "Numeric - Fractions"), React$2.createElement(MenuItem, {
+      value: 1,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 450
+      }
+    }, "Grade 1 - 2"), React$2.createElement(MenuItem, {
+      value: 3,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 451
+      }
+    }, "Grade 3 - 5"), React$2.createElement(MenuItem, {
+      value: 6,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 452
+      }
+    }, "Grade 6 - 7"), React$2.createElement(MenuItem, {
+      value: 8,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 453
+      }
+    }, "Grade 8 - HS"), React$2.createElement(MenuItem, {
+      value: 'geometry',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 454
+      }
+    }, "Geometry"), React$2.createElement(MenuItem, {
+      value: 'advanced-algebra',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 455
+      }
+    }, "Advanced Algebra"), React$2.createElement(MenuItem, {
+      value: 'statistics',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 456
+      }
+    }, "Statistics"), React$2.createElement(MenuItem, {
+      value: 'item-authoring',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 457
+      }
+    }, "Item Authoring")))), responsesToUse.map((response, idx) => React$2.createElement(Response$1, {
+      key: response.id,
+      mode: equationEditor,
+      response: response,
+      defaultResponse: responseType === ResponseTypes.simple,
+      onResponseChange: this.onResponseChange,
+      index: idx,
+      cIgnoreOrder: cIgnoreOrder,
+      cAllowTrailingZeros: cAllowTrailingZeros,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 462
+      }
+    })));
+  }
+}
+GeneralConfigBlock.__initStatic();
+var GeneralConfigBlock$1 = withStyles$1(styles$1)(GeneralConfigBlock);
+const React$1 = _dll_react;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const PropTypes = _dll_prop_types;
+const debug$1 = _dll_debug;
+const {FeedbackConfig: FeedbackConfig} = _dll_pie_lib__config_ui;
+const {settings: settings} = _dll_pie_lib__config_ui;
+const {layout: layout} = _dll_pie_lib__config_ui;
+const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
+const EditableHtml = _dll_pie_lib__editable_html;
+const _jsxFileName = "/home/circleci/repo/packages/math-inline/configure/src/configure.jsx";
+const log$1 = debug$1('@pie-element:math-inline:configure');
+const {Panel, toggle, radio} = settings;
+const styles = theme => ({
+  title: {
+    fontSize: '1.1rem',
+    display: 'block',
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit
+  },
+  content: {
+    marginTop: theme.spacing.unit * 2
+  },
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2
+  },
+  prompt: {
+    paddingTop: theme.spacing.unit * 2,
+    width: '100%'
+  }
+});
+class Configure extends React$1.Component {
+  constructor(...args) {
+    super(...args);
+    Configure.prototype.__init.call(this);
+    Configure.prototype.__init2.call(this);
+    Configure.prototype.__init3.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      onModelChanged: PropTypes.func,
+      onConfigurationChanged: PropTypes.func,
+      classes: PropTypes.object,
+      model: PropTypes.object.isRequired,
+      configuration: PropTypes.object.isRequired,
+      imageSupport: PropTypes.object
+    };
+  }
+  __init() {
+    this.onChange = model => {
+      this.props.onModelChanged(model);
+    };
+  }
+  __init2() {
+    this.changeTeacherInstructions = teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
+    };
+  }
+  __init3() {
+    this.onFeedbackChange = feedback => {
+      const {model, onModelChanged} = this.props;
+      model.feedback = feedback;
+      onModelChanged(model);
+    };
+  }
+  render() {
+    const {classes, model, imageSupport, onModelChanged, configuration, onConfigurationChanged} = this.props;
+    const {feedback = {}, responseType = {}, teacherInstructions = {}, studentInstructions = {}, rationale = {}, prompt = {}, scoringType = {}, ignoreOrder = {}, allowTrailingZeros = {}} = configuration || ({});
+    log$1('[render] model', model);
+    const {rationaleEnabled, promptEnabled, teacherInstructionsEnabled, feedbackEnabled} = model || ({});
+    const toolbarOpts = {};
+    switch (model.toolbarEditorPosition) {
+      case 'top':
+        toolbarOpts.position = 'top';
+        break;
+      default:
+        toolbarOpts.position = 'bottom';
+        break;
+    }
+    return React$1.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 92
+      }
+    }, React$1.createElement(layout.ConfigLayout, {
+      settings: React$1.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: config => onConfigurationChanged(config),
+        groups: {
+          'Settings': {
+            responseType: responseType.settings && radio(responseType.label, [ResponseTypes.simple, ResponseTypes.advanced]),
+            feedbackEnabled: feedback.settings && toggle(feedback.label),
+            'promptEnabled': prompt.settings && toggle(prompt.label)
+          },
+          'Properties': {
+            teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+            studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+            rationaleEnabled: rationale.settings && toggle(rationale.label),
+            scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+            'ignoreOrder.enabled': ignoreOrder.settings && toggle(ignoreOrder.label),
+            'allowTrailingZeros.enabled': allowTrailingZeros.settings && toggle(allowTrailingZeros.label)
+          }
+        },
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 95
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 93
+      }
+    }, React$1.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 126
+      }
+    }, React$1.createElement('div', {
+      className: classes.content,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 127
+      }
+    }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
+      label: teacherInstructions.label,
+      className: classes.promptHolder,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 129
+      }
+    }, React$1.createElement(EditableHtml, {
+      className: classes.prompt,
+      markup: model.teacherInstructions || '',
+      onChange: this.changeTeacherInstructions,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 130
+      }
+    })), React$1.createElement(GeneralConfigBlock$1, {
+      imageSupport: imageSupport,
+      model: model,
+      configuration: configuration,
+      onChange: this.onChange,
+      rationaleEnabled: rationaleEnabled,
+      promptEnabled: promptEnabled,
+      toolbarOpts: toolbarOpts,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 141
+      }
+    }), feedbackEnabled && React$1.createElement(FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.onFeedbackChange,
+      toolbarOpts: toolbarOpts,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 152
+      }
+    })))));
+  }
+}
+Configure.__initStatic();
+var Configure$1 = withStyles(styles)(Configure);
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelUpdatedEvent extends CustomEvent {
+  constructor(update, reset = false) {
+    super(ModelUpdatedEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        update,
+        reset
+      }
+    });
+    this.update = update;
+    this.reset = reset;
+  }
+}
+ModelUpdatedEvent.TYPE = 'model.updated';
+var ModelUpdatedEvent_1 = lib.ModelUpdatedEvent = ModelUpdatedEvent;
+class DeleteImageEvent extends CustomEvent {
+  constructor(src, done) {
+    super(DeleteImageEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        src,
+        done
+      }
+    });
+    this.src = src;
+    this.done = done;
+  }
+}
+DeleteImageEvent.TYPE = 'delete.image';
+var DeleteImageEvent_1 = lib.DeleteImageEvent = DeleteImageEvent;
+class InsertImageEvent extends CustomEvent {
+  constructor(handler) {
+    super(InsertImageEvent.TYPE, {
+      bubbles: true,
+      detail: handler
+    });
+    this.handler = handler;
+  }
+}
+InsertImageEvent.TYPE = 'insert.image';
+var InsertImageEvent_1 = lib.InsertImageEvent = InsertImageEvent;
+var defaults = {
+  model: {
+    partialScoring: true,
+    responseType: ResponseTypes.advanced,
+    element: 'math-inline',
+    feedback: {
+      correct: {
+        default: 'Correct',
+        type: 'none'
+      },
+      incorrect: {
+        default: 'Incorrect',
+        type: 'none'
+      },
+      partial: {
+        default: 'Nearly',
+        type: 'none'
+      }
+    },
+    equationEditor: '8',
+    expression: '',
+    rationale: 'Rationale goes here.',
+    note: 'The answer shown above is the primary correct answer specified by the author for this item, but other answers may also be recognized as correct.',
+    prompt: '',
+    responses: [],
+    customKeys: [],
+    scoringType: 'auto',
+    feedbackEnabled: true,
+    promptEnabled: true,
+    rationaleEnabled: true,
+    teacherInstructionsEnabled: true,
+    studentInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    validationDefault: 'literal',
+    ignoreOrderDefault: false,
+    allowTrailingZerosDefault: false
+  },
+  configuration: {
+    prompt: {
+      settings: true,
+      label: 'Prompt'
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback'
+    },
+    responseType: {
+      settings: true,
+      label: 'Response type'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale'
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions'
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    ignoreOrder: {
+      settings: false,
+      label: 'Ignore Order',
+      enabled: true
+    },
+    allowTrailingZeros: {
+      settings: false,
+      label: 'Allow Trailing Zeros',
+      enabled: true
+    }
+  }
+};
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const {isEmpty: isEmpty} = _dll_lodash;
+const debug = _dll_debug;
+const log = debug('pie-elements:math-inline:configure');
+class MathInlineConfigure extends HTMLElement {
+  static __initStatic() {
+    this.createDefaultModel = (model = {}) => {
+      if (!isEmpty(model.responses)) {
+        model.responses = model.responses.map(correctResponse => ({
+          ...correctResponse,
+          validation: correctResponse.validation || defaults.model.validationDefault,
+          allowTrailingZeros: correctResponse.allowTrailingZeros || defaults.model.allowTrailingZerosDefault,
+          ignoreOrder: correctResponse.ignoreOrder || defaults.model.ignoreOrderDefault || false
+        }));
+      }
+      return {
+        ...defaults.model,
+        ...model
+      };
+    };
+  }
+  constructor() {
+    super();
+    this._model = MathInlineConfigure.createDefaultModel();
+    this._configuration = defaults.configuration;
+  }
+  set model(m) {
+    this._model = MathInlineConfigure.createDefaultModel(m);
+    this._render();
+  }
+  set configuration(c) {
+    this._configuration = c;
+    this._render();
+  }
+  onModelChanged(model) {
+    this._model = model;
+    log('[onModelChanged]: ', this._model);
+    this._render();
+    this.dispatchEvent(new ModelUpdatedEvent_1(this._model));
+  }
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+    this._render();
+  }
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent_1(handler));
+  }
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent_1(src, done));
+  }
+  _render() {
+    if (this._model) {
+      const el = React.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)
+        }
+      });
+      ReactDOM.render(el, this);
+    }
+  }
+}
+MathInlineConfigure.__initStatic();
+export {MathInlineConfigure as default};