@pie-element/math-templated 5.0.2-esm.0 → 5.2.0

package/esm/configure.js

@@ -1,1342 +0,0 @@
-import * as React from 'react';
-import React__default from 'react';
-import ReactDOM from 'react-dom';
-import debug from 'debug';
-import defaults from 'lodash/defaults';
-import isArray from 'lodash/isArray';
-import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import Info from '@material-ui/icons/Info';
-import Tooltip from '@material-ui/core/Tooltip';
-import cloneDeep from 'lodash/cloneDeep';
-import pick from 'lodash/pick';
-import throttle from 'lodash/throttle';
-import { InputContainer, dropdown, layout, settings } from '@pie-lib/config-ui';
-import EditableHtml, { ALL_PLUGINS } from '@pie-lib/editable-html';
-import { MathToolbar } from '@pie-lib/math-toolbar';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import InputLabel from '@material-ui/core/InputLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import IconButton from '@material-ui/core/IconButton';
-import Delete from '@material-ui/icons/Delete';
-import { color } from '@pie-lib/render-ui';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-class Response extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChange = name => evt => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-
-      const newResponse = _extends({}, response);
-
-      newResponse[name] = evt.target.value;
-      onResponseChange(newResponse, responseKey);
-    };
-
-    this.onConfigChanged = name => evt => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-
-      const newResponse = _extends({}, response);
-
-      newResponse[name] = evt.target.checked;
-      onResponseChange(newResponse, responseKey);
-    };
-
-    this.onLiteralOptionsChange = name => () => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-
-      const newResponse = _extends({}, response);
-
-      newResponse[name] = !response[name];
-      onResponseChange(newResponse, responseKey);
-    };
-
-    this.onAnswerChange = answer => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-
-      const newResponse = _extends({}, response);
-
-      newResponse.answer = answer;
-      onResponseChange(newResponse, responseKey);
-    };
-
-    this.onAlternateAnswerChange = alternateId => answer => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-
-      const newResponse = _extends({}, response);
-
-      newResponse.alternates[alternateId] = answer;
-      onResponseChange(newResponse, responseKey);
-    };
-
-    this.onAddAlternate = () => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-      const {
-        alternateIdCounter
-      } = this.state;
-
-      const newResponse = _extends({}, response);
-
-      if (!newResponse.alternates) {
-        newResponse.alternates = {};
-      }
-
-      newResponse.alternates[alternateIdCounter] = '';
-      onResponseChange(newResponse, responseKey);
-      this.setState({
-        alternateIdCounter: alternateIdCounter + 1
-      });
-    };
-
-    this.onRemoveAlternate = alternateId => () => {
-      const {
-        response,
-        onResponseChange,
-        responseKey
-      } = this.props;
-
-      const newResponse = _extends({}, response);
-
-      delete newResponse.alternates[alternateId];
-      onResponseChange(newResponse, responseKey);
-      this.setState(state => ({
-        showKeypad: _extends({}, state.showKeypad, {
-          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount : state.showKeypad.openCount - 1
-        })
-      }));
-    };
-
-    this.onDone = () => {
-      const {
-        onResponseDone
-      } = this.props;
-      this.setState(state => ({
-        showKeypad: _extends({}, state.showKeypad, {
-          openCount: state.showKeypad.openCount - 1,
-          main: false
-        })
-      }));
-      onResponseDone();
-    };
-
-    this.onFocus = () => {
-      this.setState(state => ({
-        showKeypad: _extends({}, state.showKeypad, {
-          openCount: !state.showKeypad.main ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
-          main: true
-        })
-      }));
-    };
-
-    this.onAlternateFocus = alternateId => () => {
-      this.setState(state => ({
-        showKeypad: _extends({}, state.showKeypad, {
-          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
-          [alternateId]: true
-        })
-      }));
-    };
-
-    this.onAlternateDone = alternateId => () => {
-      this.setState(state => ({
-        showKeypad: _extends({}, state.showKeypad, {
-          openCount: state.showKeypad.openCount - 1,
-          [alternateId]: false
-        })
-      }));
-    };
-
-    const {
-      response: {
-        alternates
-      } = {}
-    } = props || {};
-    const alternatesLength = Object.keys(alternates || {}).length;
-    this.state = {
-      alternateIdCounter: alternatesLength + 1,
-      showKeypad: {
-        openCount: 0,
-        main: false
-      }
-    };
-  }
-
-  render() {
-    const {
-      classes,
-      mode,
-      responseKey,
-      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`
-    }; // add 1 to index to display R 1 instead of R 0
-
-    const keyToDisplay = `R ${parseInt(responseKey) + 1}`;
-    return /*#__PURE__*/React.createElement(Card, {
-      className: classes.responseContainer,
-      style: styles
-    }, /*#__PURE__*/React.createElement(CardContent, {
-      className: classes.cardContent
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.titleBar
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: classes.title,
-      component: "div"
-    }, "Response for ", /*#__PURE__*/React.createElement("div", {
-      className: classes.responseBox
-    }, keyToDisplay)), /*#__PURE__*/React.createElement(InputContainer, {
-      label: "Validation",
-      className: classes.selectContainer
-    }, /*#__PURE__*/React.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('validation'),
-      value: validation || 'literal'
-    }, /*#__PURE__*/React.createElement(MenuItem, {
-      value: "literal"
-    }, "Literal Validation"), /*#__PURE__*/React.createElement(MenuItem, {
-      value: "symbolic"
-    }, "Symbolic Validation")))), validation === 'literal' && /*#__PURE__*/React.createElement("div", {
-      className: classes.flexContainer
-    }, cAllowTrailingZeros.enabled && /*#__PURE__*/React.createElement(FormControlLabel, {
-      label: cAllowTrailingZeros.label,
-      control: /*#__PURE__*/React.createElement(Checkbox, {
-        className: classes.customColor,
-        checked: allowTrailingZeros,
-        onChange: this.onLiteralOptionsChange('allowTrailingZeros')
-      })
-    }), cIgnoreOrder.enabled && /*#__PURE__*/React.createElement(FormControlLabel, {
-      label: cIgnoreOrder.label,
-      control: /*#__PURE__*/React.createElement(Checkbox, {
-        className: classes.customColor,
-        checked: ignoreOrder,
-        onChange: this.onLiteralOptionsChange('ignoreOrder')
-      })
-    })), /*#__PURE__*/React.createElement("div", {
-      className: classes.inputContainer
-    }, /*#__PURE__*/React.createElement(InputLabel, null, "Correct Answer"), /*#__PURE__*/React.createElement(MathToolbar, {
-      keypadMode: mode,
-      classNames: classNames,
-      controlledKeypad: true,
-      showKeypad: showKeypad.main,
-      latex: answer || '',
-      onChange: this.onAnswerChange,
-      onFocus: this.onFocus,
-      onDone: this.onDone,
-      error: error && error.answer
-    }), error && error.answer ? /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, error.answer) : null), hasAlternates && Object.keys(alternates).map((alternateId, altIdx) => /*#__PURE__*/React.createElement("div", {
-      className: classes.inputContainer,
-      key: alternateId
-    }, /*#__PURE__*/React.createElement(InputLabel, null, "Alternate", Object.keys(alternates).length > 1 ? ` ${altIdx + 1}` : ''), /*#__PURE__*/React.createElement("div", {
-      className: classes.alternateBar
-    }, /*#__PURE__*/React.createElement(MathToolbar, {
-      classNames: classNames,
-      controlledKeypad: true,
-      keypadMode: mode,
-      showKeypad: showKeypad[alternateId] || false,
-      latex: alternates[alternateId] || '',
-      onChange: this.onAlternateAnswerChange(alternateId),
-      onFocus: this.onAlternateFocus(alternateId),
-      onDone: this.onAlternateDone(alternateId),
-      error: error && error[alternateId]
-    }), /*#__PURE__*/React.createElement(IconButton, {
-      className: classes.removeAlternateButton,
-      onClick: this.onRemoveAlternate(alternateId)
-    }, /*#__PURE__*/React.createElement(Delete, null))), error && error[alternateId] ? /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, error[alternateId]) : null)), /*#__PURE__*/React.createElement(Button, {
-      className: classes.alternateButton,
-      type: "primary",
-      onClick: this.onAddAlternate
-    }, "ADD ALTERNATE")));
-  }
-
-}
-Response.propTypes = {
-  classes: PropTypes.object.isRequired,
-  defaultResponse: PropTypes.bool,
-  error: PropTypes.object,
-  mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onResponseChange: PropTypes.func.isRequired,
-  onResponseDone: PropTypes.func.isRequired,
-  response: PropTypes.object.isRequired,
-  cIgnoreOrder: PropTypes.object.isRequired,
-  cAllowTrailingZeros: PropTypes.object.isRequired,
-  responseKey: PropTypes.number.isRequired
-};
-Response.defaultProps = {
-  defaultResponse: false,
-  mode: '8'
-};
-
-const styles = theme => ({
-  responseContainer: {
-    marginBottom: theme.spacing.unit * 2.5,
-    width: '100%',
-    minWidth: '548px',
-    border: `1px solid ${theme.palette.grey[700]}`,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between'
-  },
-  cardContent: {
-    paddingBottom: `${theme.spacing.unit * 2}px !important`
-  },
-  title: {
-    fontWeight: 700,
-    fontSize: '1.2rem',
-    flex: 3
-  },
-  selectContainer: {
-    flex: 2
-  },
-  inputContainer: {
-    marginBottom: theme.spacing.unit * 2
-  },
-  titleBar: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  responseEditor: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    minWidth: '500px',
-    maxWidth: '900px',
-    height: 'auto',
-    minHeight: '40px'
-  },
-  mathToolbar: {
-    width: '100%'
-  },
-  alternateButton: {
-    border: `1px solid ${theme.palette.grey['A100']}`
-  },
-  removeAlternateButton: {
-    marginLeft: theme.spacing.unit
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit
-  },
-  responseBox: {
-    background: theme.palette.grey['A100'],
-    color: theme.palette.grey['A700'],
-    display: 'inline',
-    minWidth: '50px',
-    padding: '8px',
-    border: '1px solid #C0C3CF'
-  },
-  alternateBar: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`
-  }
-});
-
-var Response$1 = withStyles(styles)(Response);
-
-// do not remove \t from \times, \triangle, \tan, \theta or \therefore
-const tSymbols = 'imes|riangle|an|heta|herefore'; // do not remove \n from \nthroot, \nparallel, \ncong, \napprox, \neq, \ne or \nsim
-
-const nSymbols = 'throot|parallel|cong|approx|eq|e|sim'; // match all \t and \n that are not part of math symbols that starts with \t or \n
-
-const matchTabAndNewLine = new RegExp(`(\\t(?!${tSymbols}))|(\\n(?!${nSymbols}))|(\\\\t(?!${tSymbols}))|(\\\\n(?!${nSymbols}))`, 'g');
-const removeUnwantedCharacters = markup => markup.replace(matchTabAndNewLine, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
-
-const createElementFromHTML$1 = (htmlString = '') => {
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-  return div;
-};
-
-const processMarkup = markup => {
-  const newMarkup = removeUnwantedCharacters(markup || '');
-  const slateMarkup = createElementFromHTML$1(newMarkup || '');
-  slateMarkup.querySelectorAll('[data-type="math_templated"]').forEach(s => s.replaceWith(`{{${s.dataset.index}}}`));
-  return slateMarkup.innerHTML;
-};
-const REGEX = /\{\{(\d+)\}\}/g;
-const createSlateMarkup = (markup, responses) => {
-  if (!markup) {
-    return '';
-  }
-
-  const newMarkup = removeUnwantedCharacters(markup);
-  return newMarkup.replace(REGEX, (match, groupIndex) => {
-    var _responses$groupIndex;
-
-    const responseValue = ((_responses$groupIndex = responses[groupIndex]) == null ? void 0 : _responses$groupIndex.answer) || '';
-    return `<span data-type="math_templated" data-index="${groupIndex}" data-value="${responseValue}"></span>`;
-  });
-};
-
-const generateValidationMessage = config => {
-  const {
-    maxResponseAreas
-  } = config;
-  const responseAreasMessage = '\nCorrect answers should not be blank.' + '\nEach answer defined for a response area should be unique.' + '\nThere should be at least 1 ' + (maxResponseAreas ? `and at most ${maxResponseAreas} ` : '') + 'response area' + (maxResponseAreas ? 's' : '') + ' defined.';
-  return 'Validation requirements:' + responseAreasMessage;
-};
-
-const {
-  Panel,
-  toggle
-} = settings;
-
-const createElementFromHTML = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-  return div;
-};
-
-class Design extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {};
-
-    this.handleChange = (key, value) => {
-      const {
-        onModelChanged,
-        model
-      } = this.props;
-      const updatedModel = cloneDeep(model);
-      updatedModel[key] = value;
-      onModelChanged(updatedModel);
-    };
-
-    this.onResponseChange = (response, index) => {
-      const {
-        model,
-        onModelChanged
-      } = this.props;
-
-      const newModel = _extends({}, model);
-
-      newModel.responses[index] = response;
-      onModelChanged(newModel);
-    };
-
-    this.onResponseDone = () => {
-      const {
-        model,
-        onModelChanged
-      } = this.props;
-      onModelChanged(_extends({}, model, {
-        slateMarkup: createSlateMarkup(model.markup, model.responses)
-      }));
-    };
-
-    this.onChangeResponse = (index, newVal) => {
-      const {
-        model,
-        onModelChanged
-      } = this.props;
-      const {
-        responses
-      } = model;
-
-      if (!responses[index]) {
-        responses[index] = [{
-          answer: newVal || '',
-          id: 'response' + index,
-          allowSpaces: true
-        }];
-      } else {
-        responses[index][0].answer = newVal || '';
-      }
-
-      onModelChanged(_extends({}, model, {
-        responses
-      }));
-    };
-
-    this.onResponsesChanged = responses => {
-      this.props.onModelChanged(_extends({}, this.props.model, {
-        responses
-      }));
-    };
-
-    this.onChange = markup => {
-      const {
-        model: {
-          responses,
-          validationDefault,
-          allowTrailingZerosDefault,
-          ignoreOrderDefault
-        },
-        onModelChanged
-      } = this.props;
-      const newResponses = {};
-      const domMarkup = createElementFromHTML(markup);
-      const responseAreas = domMarkup.querySelectorAll('[data-type="math_templated"]');
-      responseAreas.forEach((element, index) => {
-        const {
-          value,
-          index: dataIndex
-        } = element.dataset;
-
-        if (!value) {
-          element.dataset.value = '';
-        }
-
-        newResponses[index] = responses[dataIndex] || {
-          allowSpaces: true,
-          validation: validationDefault || 'symbolic',
-          allowTrailingZeros: allowTrailingZerosDefault || false,
-          ignoreOrder: ignoreOrderDefault || false,
-          answer: '',
-          alternates: {}
-        };
-        element.dataset.index = index.toString();
-      });
-      console.log('newResponses', newResponses);
-      const processedMarkup = processMarkup(markup);
-
-      const callback = () => onModelChanged(_extends({}, this.props.model, {
-        slateMarkup: domMarkup.innerHTML,
-        responses: newResponses,
-        markup: processedMarkup
-      }));
-
-      this.setState({
-        cachedResponses: undefined
-      }, callback);
-    };
-
-    this.onHandleAreaChange = throttle(nodes => {
-      const {
-        model: {
-          responses
-        },
-        onModelChanged
-      } = this.props;
-      const {
-        cachedResponses
-      } = this.state;
-
-      if (!nodes) {
-        return;
-      }
-
-      const newChoices = responses ? cloneDeep(responses) : {};
-      const newCachedResponses = cachedResponses ? cloneDeep(cachedResponses) : {};
-      nodes.forEach(node => {
-        const keyForNode = node.data.get('index');
-
-        if (!newChoices[keyForNode] && newCachedResponses[keyForNode]) {
-          Object.assign(newChoices, pick(newCachedResponses, keyForNode));
-
-          if (newCachedResponses.hasOwnProperty(keyForNode)) {
-            delete newCachedResponses[keyForNode];
-          }
-        } else {
-          Object.assign(newCachedResponses, pick(newChoices, keyForNode));
-
-          if (newChoices.hasOwnProperty(keyForNode)) {
-            delete newChoices[keyForNode];
-          }
-        }
-      });
-
-      const callback = () => onModelChanged(_extends({}, this.props.model, {
-        responses: newChoices
-      }));
-
-      this.setState({
-        cachedResponses: newCachedResponses
-      }, callback);
-    }, 500, {
-      trailing: false,
-      leading: true
-    });
-
-    this.onBlur = e => {
-      const {
-        relatedTarget,
-        currentTarget
-      } = e || {};
-
-      function getParentWithRoleTooltip(element, depth = 0) {
-        // only run this max 16 times
-        if (!element || depth >= 16) return null;
-        const parent = element.offsetParent;
-        if (!parent) return null;
-
-        if (parent.getAttribute('role') === 'tooltip') {
-          return parent;
-        }
-
-        return getParentWithRoleTooltip(parent, depth + 1);
-      }
-
-      function getDeepChildDataKeypad(element, depth = 0) {
-        var _element$children;
-
-        // only run this max 4 times
-        if (!element || depth >= 4) return null;
-        const child = element == null ? void 0 : (_element$children = element.children) == null ? void 0 : _element$children[0];
-        if (!child) return null;
-
-        if (child.attributes && child.attributes['data-keypad']) {
-          return child;
-        }
-
-        return getDeepChildDataKeypad(child, depth + 1);
-      }
-
-      const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
-      const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
-
-      if (!relatedTarget || !currentTarget || !(childWithDataKeypad != null && childWithDataKeypad.attributes['data-keypad'])) {
-        this.setState({
-          activeAnswerBlock: ''
-        });
-      }
-    };
-  }
-
-  componentDidMount() {
-    const {
-      model: {
-        slateMarkup
-      }
-    } = this.props;
-    this.setState({
-      markup: slateMarkup
-    });
-  }
-
-  render() {
-    const {
-      classes,
-      configuration,
-      imageSupport,
-      model,
-      onConfigurationChanged,
-      onModelChanged,
-      uploadSoundSupport
-    } = this.props;
-    const {
-      baseInputConfiguration = {},
-      contentDimensions = {},
-      prompt = {},
-      rationale = {},
-      settingsPanelDisabled,
-      teacherInstructions = {},
-      language = {},
-      languageChoices = {},
-      spellCheck = {},
-      playerSpellCheck = {},
-      maxImageWidth = {},
-      maxImageHeight = {},
-      mathMlOptions = {},
-      template = {},
-      editSource = {},
-      ignoreOrder: cIgnoreOrder = {},
-      allowTrailingZeros: cAllowTrailingZeros = {},
-      partialScoring = {},
-      maxResponseAreas
-    } = configuration || {};
-    const {
-      errors,
-      extraCSSRules,
-      promptEnabled,
-      rationaleEnabled,
-      spellCheckEnabled,
-      teacherInstructionsEnabled,
-      toolbarEditorPosition,
-      responses,
-      equationEditor
-    } = model || {};
-    const {
-      prompt: promptError,
-      rationale: rationaleError,
-      responseAreas: responseAreasError,
-      teacherInstructions: teacherInstructionsError,
-      responses: responsesErrors = {}
-    } = errors || {};
-    const validationMessage = generateValidationMessage(configuration);
-    const panelSettings = {
-      'language.enabled': language.settings && toggle(language.label, true),
-      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
-    };
-    const panelProperties = {
-      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-      rationaleEnabled: rationale.settings && toggle(rationale.label),
-      promptEnabled: prompt.settings && toggle(prompt.label),
-      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-      playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
-      'editSource.enabled': (editSource == null ? void 0 : editSource.settings) && toggle(editSource.label, true),
-      partialScoring: partialScoring.settings && toggle(partialScoring.label)
-    };
-    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-    const toolbarOpts = {
-      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-    };
-
-    const getPluginProps = (props = {}, baseInputConfiguration = {}) => _extends({}, baseInputConfiguration, props);
-
-    return /*#__PURE__*/React__default.createElement(layout.ConfigLayout, {
-      extraCSSRules: extraCSSRules,
-      dimensions: contentDimensions,
-      hideSettings: settingsPanelDisabled,
-      settings: /*#__PURE__*/React__default.createElement(Panel, {
-        model: model,
-        configuration: configuration,
-        onChangeModel: updatedModel => onModelChanged(updatedModel),
-        onChangeConfiguration: onConfigurationChanged,
-        groups: {
-          Settings: panelSettings,
-          Properties: panelProperties
-        }
-      })
-    }, teacherInstructionsEnabled && /*#__PURE__*/React__default.createElement(InputContainer, {
-      label: teacherInstructions.label,
-      className: classes.promptHolder
-    }, /*#__PURE__*/React__default.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.teacherInstructions || '',
-      onChange: value => this.handleChange('teacherInstructions', value),
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      error: teacherInstructionsError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
-      spellCheck: spellCheckEnabled,
-      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
-      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), teacherInstructionsError && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.errorText
-    }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/React__default.createElement(InputContainer, {
-      label: prompt.label,
-      className: classes.promptHolder
-    }, /*#__PURE__*/React__default.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.prompt,
-      onChange: value => this.handleChange('prompt', value),
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      disableUnderline: true,
-      error: promptError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
-      spellCheck: spellCheckEnabled,
-      maxImageWidth: defaultImageMaxWidth,
-      maxImageHeight: defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), promptError && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.errorText
-    }, promptError)), /*#__PURE__*/React__default.createElement("div", {
-      className: classes.tooltipContainer
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: classes.title,
-      component: 'div'
-    }, "Response Template"), /*#__PURE__*/React__default.createElement(Tooltip, {
-      classes: {
-        tooltip: classes.tooltip
-      },
-      disableFocusListener: true,
-      disableTouchListener: true,
-      placement: 'right',
-      title: validationMessage
-    }, /*#__PURE__*/React__default.createElement(Info, {
-      fontSize: 'small',
-      color: 'primary'
-    }))), /*#__PURE__*/React__default.createElement(EditableHtml, {
-      activePlugins: ALL_PLUGINS,
-      toolbarOpts: {
-        position: 'top'
-      },
-      spellCheck: spellCheckEnabled,
-      pluginProps: getPluginProps(template == null ? void 0 : template.inputConfiguration, baseInputConfiguration),
-      responseAreaProps: {
-        type: 'math-templated',
-        respAreaToolbar: null,
-        error: () => responsesErrors,
-        onHandleAreaChange: this.onHandleAreaChange,
-        maxResponseAreas: maxResponseAreas
-      },
-      className: classes.markup,
-      markup: model.slateMarkup,
-      onChange: this.onChange,
-      imageSupport: imageSupport,
-      disableImageAlignmentButtons: true,
-      onBlur: this.onBlur,
-      disabled: false,
-      highlightShape: false,
-      error: responseAreasError,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), responseAreasError && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.responseAreaError
-    }, responseAreasError), /*#__PURE__*/React__default.createElement(Typography, {
-      className: classes.title
-    }, "Define Response"), /*#__PURE__*/React__default.createElement(InputContainer, {
-      label: "Response Template Equation Editor",
-      className: classes.selectContainer
-    }, /*#__PURE__*/React__default.createElement(Select, {
-      className: classes.select,
-      onChange: event => this.handleChange('equationEditor', event.target.value),
-      value: equationEditor
-    }, /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: "non-negative-integers"
-    }, "Numeric - Non-Negative Integers"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: "integers"
-    }, "Numeric - Integers"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: "decimals"
-    }, "Numeric - Decimals"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: "fractions"
-    }, "Numeric - Fractions"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 1
-    }, "Grade 1 - 2"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 3
-    }, "Grade 3 - 5"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 6
-    }, "Grade 6 - 7"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 8
-    }, "Grade 8 - HS"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 'geometry'
-    }, "Geometry"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 'advanced-algebra'
-    }, "Advanced Algebra"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 'statistics'
-    }, "Statistics"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      value: 'item-authoring'
-    }, "Item Authoring"))), Object.keys(responses || {}).map((responseKey, idx) => {
-      const response = responses[idx];
-
-      if (response) {
-        return /*#__PURE__*/React__default.createElement(Response$1, {
-          key: idx,
-          responseKey: idx,
-          mode: equationEditor,
-          response: response,
-          onResponseChange: this.onResponseChange,
-          onResponseDone: this.onResponseDone,
-          index: idx,
-          cIgnoreOrder: cIgnoreOrder,
-          cAllowTrailingZeros: cAllowTrailingZeros,
-          error: responsesErrors && responsesErrors[idx]
-        });
-      }
-
-      return null;
-    }), rationaleEnabled && /*#__PURE__*/React__default.createElement(InputContainer, {
-      label: rationale.label,
-      className: classes.promptHolder
-    }, /*#__PURE__*/React__default.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.rationale || '',
-      onChange: value => this.handleChange('rationale', value),
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      error: rationaleError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(rationale == null ? void 0 : rationale.inputConfiguration, _extends({}, baseInputConfiguration, {
-        math: {
-          controlledKeypadMode: false
-        }
-      })),
-      spellCheck: spellCheckEnabled,
-      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), rationaleError && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.errorText
-    }, rationaleError)));
-  }
-
-}
-Design.propTypes = {
-  model: PropTypes.object.isRequired,
-  configuration: PropTypes.object.isRequired,
-  classes: PropTypes.object.isRequired,
-  onModelChanged: PropTypes.func.isRequired,
-  onConfigurationChanged: PropTypes.func.isRequired,
-  imageSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  }),
-  uploadSoundSupport: PropTypes.object
-};
-var Main = withStyles(theme => ({
-  promptHolder: {
-    width: '100%',
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2
-  },
-  prompt: {
-    width: '100%'
-  },
-  errorText: {
-    color: theme.palette.error.main,
-    fontSize: '0.75rem',
-    marginTop: theme.spacing.unit
-  },
-  responseAreaError: {
-    color: theme.palette.error.main,
-    fontSize: '0.75rem',
-    marginBottom: theme.spacing.unit
-  },
-  markup: {
-    width: '100%',
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 3
-  },
-  selectContainer: {
-    width: '100%',
-    marginTop: theme.spacing.unit * 2
-  },
-  select: {
-    width: '100%'
-  },
-  title: {
-    fontSize: theme.typography.fontSize * 1.25,
-    fontWeight: 'bold'
-  },
-  tooltipContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px'
-  },
-  tooltip: {
-    fontSize: theme.typography.fontSize - 2,
-    whiteSpace: 'pre',
-    maxWidth: '500px'
-  }
-}))(Design);
-
-// Should be exactly the same as controller/defaults.js
-var sensibleDefaults = {
-  model: {
-    allowTrailingZerosDefault: false,
-    equationEditor: '8',
-    ignoreOrderDefault: false,
-    markup: '',
-    playerSpellCheckEnabled: true,
-    prompt: '',
-    promptEnabled: true,
-    rationale: '',
-    rationaleEnabled: true,
-    responses: {},
-    spellCheckEnabled: true,
-    teacherInstructions: '',
-    teacherInstructionsEnabled: true,
-    toolbarEditorPosition: 'bottom',
-    validationDefault: 'literal'
-  },
-  configuration: {
-    ignoreOrder: {
-      settings: false,
-      label: 'Ignore Order',
-      enabled: true
-    },
-    allowTrailingZeros: {
-      settings: false,
-      label: 'Allow Trailing Zeros',
-      enabled: true
-    },
-    partialScoring: {
-      settings: true,
-      label: 'Allow Partial Scoring'
-    },
-    baseInputConfiguration: {
-      html: {
-        disabled: true
-      },
-      audio: {
-        disabled: false
-      },
-      video: {
-        disabled: false
-      },
-      image: {
-        disabled: false
-      },
-      h3: {
-        disabled: true
-      },
-      blockquote: {
-        disabled: true
-      },
-      textAlign: {
-        disabled: true
-      },
-      showParagraphs: {
-        disabled: false
-      },
-      separateParagraphs: {
-        disabled: true
-      }
-    },
-    prompt: {
-      label: 'Prompt',
-      settings: true,
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      },
-      required: false
-    },
-    spellCheck: {
-      label: 'Spellcheck',
-      settings: false,
-      enabled: true
-    },
-    editSource: {
-      label: 'Edit Source',
-      settings: false,
-      enabled: false
-    },
-    playerSpellCheck: {
-      label: 'Student Spellcheck',
-      settings: true,
-      enabled: true
-    },
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions',
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      },
-      required: false
-    },
-    rationale: {
-      settings: true,
-      label: 'Rationale',
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      },
-      required: false
-    },
-    template: {
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
-    },
-    maxImageWidth: {
-      teacherInstructions: 300,
-      prompt: 300,
-      rationale: 300
-    },
-    maxImageHeight: {
-      teacherInstructions: 300,
-      prompt: 300,
-      rationale: 300
-    },
-    mathMlOptions: {
-      mmlOutput: false,
-      mmlEditing: false
-    },
-    language: {
-      settings: false,
-      label: 'Specify Language',
-      enabled: false
-    },
-    languageChoices: {
-      label: 'Language Choices',
-      options: []
-    },
-    maxResponseAreas: 10
-  }
-};
-
-const log = debug('math-templated:configure');
-class MathTemplateConfigure extends HTMLElement {
-  constructor() {
-    super();
-    this._model = MathTemplateConfigure.prepareModel();
-    this._configuration = sensibleDefaults.configuration;
-    this.onModelChanged = this.onModelChanged.bind(this);
-    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
-  }
-
-  set model(s) {
-    this._model = MathTemplateConfigure.prepareModel(s);
-
-    this._render();
-  }
-
-  set configuration(c) {
-    var _c$language;
-
-    this._configuration = defaults(c, sensibleDefaults.configuration); // if language:enabled is true, then the corresponding default item model should include a language value;
-    // if it is false, then the language field should be omitted from the item model.
-    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
-    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
-
-    if ((_c$language = c.language) != null && _c$language.enabled) {
-      var _c$languageChoices, _c$languageChoices$op;
-
-      if ((_c$languageChoices = c.languageChoices) != null && (_c$languageChoices$op = _c$languageChoices.options) != null && _c$languageChoices$op.length) {
-        this._model.language = c.languageChoices.options[0].value;
-      }
-    } else if (c.language.settings && this._model.language) {
-      this._configuration.language.enabled = true;
-
-      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
-        this._configuration.languageChoices.options = [];
-      } // check if the language is already included in the languageChoices.options array
-      // and if not, then add it.
-
-
-      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
-        this._configuration.languageChoices.options.push({
-          value: this._model.language,
-          label: this._model.language
-        });
-      }
-    } else {
-      delete this._model.language;
-    }
-
-    this._render();
-  }
-
-  set disableSidePanel(s) {
-    this._disableSidePanel = s;
-
-    this._render();
-  }
-
-  dispatchModelUpdated(reset) {
-    const resetValue = !!reset;
-    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
-  }
-
-  onModelChanged(m, reset) {
-    this._model = MathTemplateConfigure.prepareModel(m);
-
-    this._render();
-
-    this.dispatchModelUpdated(reset);
-  }
-
-  onConfigurationChanged(c) {
-    this._configuration = c;
-
-    this._render();
-  }
-  /** @param {done, progress, file} handler */
-
-
-  insertImage(handler) {
-    this.dispatchEvent(new InsertImageEvent(handler));
-  }
-
-  onDeleteImage(src, done) {
-    this.dispatchEvent(new DeleteImageEvent(src, done));
-  }
-
-  insertSound(handler) {
-    this.dispatchEvent(new InsertSoundEvent(handler));
-  }
-
-  onDeleteSound(src, done) {
-    this.dispatchEvent(new DeleteSoundEvent(src, done));
-  }
-
-  _render() {
-    log('_render');
-    let element = /*#__PURE__*/React__default.createElement(Main, {
-      model: this._model,
-      configuration: this._configuration,
-      onModelChanged: this.onModelChanged,
-      onConfigurationChanged: this.onConfigurationChanged,
-      disableSidePanel: this._disableSidePanel,
-      imageSupport: {
-        add: this.insertImage.bind(this),
-        delete: this.onDeleteImage.bind(this)
-      },
-      uploadSoundSupport: {
-        add: this.insertSound.bind(this),
-        delete: this.onDeleteSound.bind(this)
-      }
-    });
-    ReactDOM.render(element, this);
-  }
-
-}
-
-MathTemplateConfigure.prepareModel = (model = {}) => {
-  const {
-    validationDefault,
-    allowTrailingZerosDefault,
-    ignoreOrderDefault,
-    responses = {}
-  } = model;
-  const updatedResponses = Object.keys(responses).reduce((acc, responseId) => {
-    const correctResponse = responses[responseId];
-    acc[responseId] = _extends({}, correctResponse, {
-      validation: correctResponse.validation || validationDefault,
-      allowTrailingZeros: correctResponse.allowTrailingZeros || allowTrailingZerosDefault,
-      ignoreOrder: correctResponse.ignoreOrder || ignoreOrderDefault
-    });
-    return acc;
-  }, {});
-
-  const joinedObj = _extends({}, sensibleDefaults.model, model, {
-    responses: updatedResponses
-  });
-
-  const slateMarkup = joinedObj.slateMarkup || createSlateMarkup(joinedObj.markup, joinedObj.responses);
-  const processedMarkup = processMarkup(slateMarkup); // this was added to treat an exception, when the model has responses without the "answer" property
-
-  if (joinedObj.responses) {
-    Object.keys(joinedObj.responses).forEach(key => {
-      if (isArray(joinedObj.responses[key])) {
-        joinedObj.responses[key] = (joinedObj.responses[key] || []).map((item, index) => {
-          if (!item.answer) {
-            log('Choice does not contain "answer" property, which is required.', item);
-            return _extends({
-              answer: `${index}`
-            }, item);
-          }
-
-          return item;
-        });
-      }
-    });
-  }
-
-  return _extends({}, joinedObj, {
-    slateMarkup,
-    markup: processedMarkup
-  });
-};
-
-export { MathTemplateConfigure as default };
-//# sourceMappingURL=configure.js.map