@pie-element/math-inline 5.9.10 → 6.0.0

package/module/configure.js

@@ -1,1568 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_classnames, _dll_lodash, _dll_material_ui__icons, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.17/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.2.4/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.4/module/index.js";
-import {_dll_pie_lib__math_toolbar, _dll_pie_framework__mathquill} from "../../../@pie-lib/math-edit-module@^1.2.4/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'
-  },
-  errorText: {
-    fontSize: '12px',
-    color: 'red',
-    padding: '5px 0'
-  }
-});
-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, 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 React$3.createElement(Card, {
-      className: classes.responseContainer,
-      style: styles,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 278
-      }
-    }, React$3.createElement(CardContent, {
-      className: classes.cardContent,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 279
-      }
-    }, React$3.createElement('div', {
-      className: classes.titleBar,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 280
-      }
-    }, React$3.createElement(Typography, {
-      className: classes.title,
-      component: "h2",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 281
-      }
-    }, "Response", ' ', ''), React$3.createElement(InputContainer$2, {
-      label: "Validation",
-      className: classes.selectContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 289
-      }
-    }, React$3.createElement(Select$1, {
-      className: classes.select,
-      onChange: this.onChange('validation'),
-      value: validation || 'literal',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 293
-      }
-    }, React$3.createElement(MenuItem$1, {
-      value: "literal",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 298
-      }
-    }, "Literal Validation"), React$3.createElement(MenuItem$1, {
-      value: "symbolic",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 299
-      }
-    }, "Symbolic Validation")))), validation === 'literal' && React$3.createElement('div', {
-      className: classes.flexContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 304
-      }
-    }, 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: 309
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 306
-      }
-    }), 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: 323
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 320
-      }
-    })), React$3.createElement('div', {
-      className: classes.inputContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 332
-      }
-    }, React$3.createElement(InputLabel$1, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 333
-      }
-    }, "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,
-      error: error && error.answer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 334
-      }
-    }), error && error.answer ? React$3.createElement('div', {
-      className: classes.errorText,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 345
-      }
-    }, error.answer) : null), hasAlternates && Object.keys(alternates).map((alternateId, altIdx) => React$3.createElement('div', {
-      className: classes.inputContainer,
-      key: alternateId,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 349
-      }
-    }, React$3.createElement('div', {
-      className: classes.alternateBar,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 350
-      }
-    }, React$3.createElement(InputLabel$1, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 351
-      }
-    }, "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: 355
-      }
-    }, "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),
-      error: error && error[altIdx + 1],
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 363
-      }
-    }), error && error[altIdx + 1] ? React$3.createElement('div', {
-      className: classes.errorText,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 374
-      }
-    }, error[altIdx + 1]) : null)), React$3.createElement('div', {
-      className: classes.configPanel,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 377
-      }
-    }, React$3.createElement(Button, {
-      className: classes.alternateButton,
-      type: "primary",
-      onClick: this.onAddAlternate,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 378
-      }
-    }, "ADD ALTERNATE"), React$3.createElement('div', {
-      className: classes.checkboxContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 385
-      }
-    }))));
-  }
-}
-Response.__initStatic();
-Response.__initStatic2();
-var Response$1 = withStyles$2(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 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 {Tooltip: Tooltip} = _dll_material_ui__core;
-const {isEqual: isEqual} = _dll_lodash;
-const {Info: Info} = _dll_material_ui__icons;
-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'
-        }
-      }
-    }
-  },
-  tooltip: {
-    fontSize: '12px',
-    whiteSpace: 'pre',
-    maxWidth: '500px'
-  },
-  errorText: {
-    fontSize: '12px',
-    color: 'red',
-    padding: '5px 0'
-  }
-});
-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, spellCheckEnabled, errors = {}} = model;
-    const {rationale: cRationale = {}, prompt: cPrompt = {}, ignoreOrder: cIgnoreOrder = {}, allowTrailingZeros: cAllowTrailingZeros = {}, maxResponseAreas} = configuration || ({});
-    const validationMessage = generateValidationMessage(configuration, model);
-    const {responsesErrors, responseAreasError} = errors;
-    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: 372
-      }
-    }, promptEnabled && React$2.createElement(InputContainer$1, {
-      label: cPrompt.label,
-      className: classes.promptHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 377
-      }
-    }, React$2.createElement(EditableHtml$1, {
-      onFocus: this.onPromptFocus,
-      className: classes.prompt,
-      markup: prompt || '',
-      onChange: this.onChange('prompt'),
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      toolbarOpts: toolbarOpts,
-      spellCheck: spellCheckEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 378
-      }
-    })), rationaleEnabled && React$2.createElement(InputContainer$1, {
-      label: cRationale.label,
-      className: classes.promptHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 391
-      }
-    }, React$2.createElement(EditableHtml$1, {
-      className: classes.prompt,
-      markup: rationale || '',
-      pluginProps: {
-        math: {
-          controlledKeypadMode: false
-        }
-      },
-      onChange: this.onChange('rationale'),
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      toolbarOpts: toolbarOpts,
-      spellCheck: spellCheckEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 395
-      }
-    })), React$2.createElement('div', {
-      className: classes.flexContainer,
-      style: {
-        justifyContent: 'flex-start'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 411
-      }
-    }, React$2.createElement('h3', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 412
-      }
-    }, "Define Response"), React$2.createElement(Tooltip, {
-      classes: {
-        tooltip: classes.tooltip
-      },
-      disableFocusListener: true,
-      disableTouchListener: true,
-      placement: 'right',
-      title: validationMessage,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 413
-      }
-    }, React$2.createElement(Info, {
-      fontSize: 'small',
-      color: 'primary',
-      style: {
-        marginLeft: '5px'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 420
-      }
-    }))), responseAreasError && React$2.createElement('div', {
-      className: classes.errorText,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 423
-      }
-    }, responseAreasError), 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: 426
-      }
-    }, React$2.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('promptEquationEditor'),
-      value: promptEquationEditor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 431
-      }
-    }, React$2.createElement(MenuItem, {
-      value: "non-negative-integers",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 436
-      }
-    }, "Numeric - Non-Negative Integers"), React$2.createElement(MenuItem, {
-      value: "integers",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 437
-      }
-    }, "Numeric - Integers"), React$2.createElement(MenuItem, {
-      value: "decimals",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 438
-      }
-    }, "Numeric - Decimals"), React$2.createElement(MenuItem, {
-      value: "fractions",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 439
-      }
-    }, "Numeric - Fractions"), React$2.createElement(MenuItem, {
-      value: 1,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 440
-      }
-    }, "Grade 1 - 2"), React$2.createElement(MenuItem, {
-      value: 3,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 441
-      }
-    }, "Grade 3 - 5"), React$2.createElement(MenuItem, {
-      value: 6,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 442
-      }
-    }, "Grade 6 - 7"), React$2.createElement(MenuItem, {
-      value: 8,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 443
-      }
-    }, "Grade 8 - HS"), React$2.createElement(MenuItem, {
-      value: 'geometry',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 444
-      }
-    }, "Geometry"), React$2.createElement(MenuItem, {
-      value: 'advanced-algebra',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 445
-      }
-    }, "Advanced Algebra"), React$2.createElement(MenuItem, {
-      value: 'statistics',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 446
-      }
-    }, "Statistics"), React$2.createElement(MenuItem, {
-      value: 'item-authoring',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 447
-      }
-    }, "Item Authoring"))), React$2.createElement('div', {
-      className: classes.inputContainer,
-      key: "templateHolder",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 450
-      }
-    }, React$2.createElement(InputLabel, {
-      className: classes.templateTitle,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 451
-      }
-    }, "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,
-      maxResponseAreas: maxResponseAreas,
-      error: responseAreasError,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 454
-      }
-    }))], React$2.createElement('h4', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 469
-      }
-    }, "Define Correct Response"), React$2.createElement('div', {
-      className: classes.flexContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 470
-      }
-    }, React$2.createElement(InputContainer$1, {
-      label: "Equation Editor",
-      className: classes.selectContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 471
-      }
-    }, React$2.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('equationEditor'),
-      value: equationEditor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 475
-      }
-    }, React$2.createElement(MenuItem, {
-      value: "non-negative-integers",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 480
-      }
-    }, "Numeric - Non-Negative Integers"), React$2.createElement(MenuItem, {
-      value: "integers",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 481
-      }
-    }, "Numeric - Integers"), React$2.createElement(MenuItem, {
-      value: "decimals",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 482
-      }
-    }, "Numeric - Decimals"), React$2.createElement(MenuItem, {
-      value: "fractions",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 483
-      }
-    }, "Numeric - Fractions"), React$2.createElement(MenuItem, {
-      value: 1,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 484
-      }
-    }, "Grade 1 - 2"), React$2.createElement(MenuItem, {
-      value: 3,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 485
-      }
-    }, "Grade 3 - 5"), React$2.createElement(MenuItem, {
-      value: 6,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 486
-      }
-    }, "Grade 6 - 7"), React$2.createElement(MenuItem, {
-      value: 8,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 487
-      }
-    }, "Grade 8 - HS"), React$2.createElement(MenuItem, {
-      value: 'geometry',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 488
-      }
-    }, "Geometry"), React$2.createElement(MenuItem, {
-      value: 'advanced-algebra',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 489
-      }
-    }, "Advanced Algebra"), React$2.createElement(MenuItem, {
-      value: 'statistics',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 490
-      }
-    }, "Statistics"), React$2.createElement(MenuItem, {
-      value: 'item-authoring',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 491
-      }
-    }, "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,
-      error: responsesErrors && responsesErrors[idx],
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 496
-      }
-    })));
-  }
-}
-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 = {}, spellCheck = {}} = configuration || ({});
-    log$1('[render] model', model);
-    const {rationaleEnabled, promptEnabled, teacherInstructionsEnabled, feedbackEnabled, spellCheckEnabled} = 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: 93
-      }
-    }, 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),
-            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)
-          }
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 96
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 94
-      }
-    }, React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 129
-      }
-    }, React$1.createElement('div', {
-      className: classes.content,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 130
-      }
-    }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
-      label: teacherInstructions.label,
-      className: classes.promptHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 132
-      }
-    }, React$1.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.teacherInstructions || '',
-      onChange: this.changeTeacherInstructions,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      toolbarOpts: toolbarOpts,
-      spellCheck: spellCheckEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 133
-      }
-    })), React$1.createElement(GeneralConfigBlock$1, {
-      imageSupport: imageSupport,
-      model: model,
-      configuration: configuration,
-      onChange: this.onChange,
-      rationaleEnabled: rationaleEnabled,
-      promptEnabled: promptEnabled,
-      toolbarOpts: toolbarOpts,
-      spellCheck: spellCheckEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 145
-      }
-    }), feedbackEnabled && React$1.createElement(FeedbackConfig, {
-      feedback: model.feedback,
-      onChange: this.onFeedbackChange,
-      toolbarOpts: toolbarOpts,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 157
-      }
-    })))));
-  }
-}
-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'
-    },
-    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'
-    },
-    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};