@pie-element/inline-dropdown 8.0.2-esm.0 → 8.1.0

package/esm/configure.js

@@ -1,1552 +0,0 @@
-import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import EditableHtml, { ALL_PLUGINS } from '@pie-lib/editable-html';
-import { layout, InputContainer, AlertDialog, settings } from '@pie-lib/config-ui';
-import { renderMath } from '@pie-lib/math-rendering';
-import { color } from '@pie-lib/render-ui';
-import cloneDeep from 'lodash/cloneDeep';
-import isEqual from 'lodash/isEqual';
-import isUndefined from 'lodash/isUndefined';
-import isEmpty from 'lodash/isEmpty';
-import reduce from 'lodash/reduce';
-import max from 'lodash/max';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Info from '@material-ui/icons/Info';
-import classnames from 'classnames';
-import AddIcon from '@material-ui/icons/Add';
-import CheckIcon from '@material-ui/icons/Check';
-import CloseIcon from '@material-ui/icons/Close';
-import EditIcon from '@material-ui/icons/Edit';
-import IconButton from '@material-ui/core/IconButton';
-import debug from 'debug';
-import defaults from 'lodash/defaults';
-import escape from 'lodash/escape';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const generateValidationMessage = config => {
-  const {
-    maxResponseAreas,
-    maxResponseAreaChoices
-  } = config;
-  const responseAreasMessage = '\nThere should be at least 1 ' + (maxResponseAreas ? `and at most ${maxResponseAreas} ` : '') + 'response area' + (maxResponseAreas ? 's' : '') + ' defined.' + (maxResponseAreaChoices ? `\nThere should be at most ${maxResponseAreaChoices} choices defined per response area.` : '');
-  const message = 'Validation requirements:' + responseAreasMessage;
-  return message;
-};
-const getPluginProps = (props = {}, baseInputConfiguration = {}) => _extends({}, baseInputConfiguration, props);
-
-class MenuItemComp extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.onRemoveClick = e => {
-      const {
-        onRemoveChoice
-      } = this.props;
-      e.preventDefault();
-      e.stopPropagation();
-      onRemoveChoice();
-    };
-
-    this.onEditClick = e => {
-      const {
-        onEditChoice
-      } = this.props;
-      e.preventDefault();
-      e.stopPropagation();
-      onEditChoice();
-    };
-  }
-
-  render() {
-    const {
-      classes,
-      correct,
-      onClick,
-      value
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.wrapper
-    }, correct && /*#__PURE__*/React.createElement("div", {
-      className: classes.selectedIcon,
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement(CheckIcon, {
-      fontSize: "inherit"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: classnames(classes.valueHolder, {
-        [classes.correct]: correct
-      }),
-      onClick: onClick,
-      dangerouslySetInnerHTML: {
-        __html: value
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      className: classes.actionButtons
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      className: classes.iconButton,
-      onClick: this.onEditClick,
-      size: "small",
-      "aria-label": "Edit"
-    }, /*#__PURE__*/React.createElement(EditIcon, {
-      fontSize: "inherit"
-    })), /*#__PURE__*/React.createElement(IconButton, {
-      className: classes.iconButton,
-      onClick: this.onRemoveClick,
-      size: "small",
-      "aria-label": "Remove"
-    }, /*#__PURE__*/React.createElement(CloseIcon, {
-      fontSize: "inherit"
-    }))));
-  }
-
-}
-
-MenuItemComp.propTypes = {
-  classes: PropTypes.object.isRequired,
-  correct: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  onRemoveChoice: PropTypes.func.isRequired,
-  onEditChoice: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired
-};
-const MenuItem = withStyles(theme => ({
-  wrapper: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    position: 'relative',
-    background: theme.palette.common.white,
-    borderBottom: `1px solid ${theme.palette.grey[400]}`,
-    '&:last-child': {
-      borderRadius: '0 0 4px 4px'
-    }
-  },
-  correct: {
-    background: color.correctSecondary()
-  },
-  actionButtons: {
-    margin: theme.spacing.unit / 2,
-    display: 'flex'
-  },
-  iconButton: {
-    fontSize: theme.typography.fontSize,
-    padding: theme.spacing.unit / 2,
-    color: theme.palette.common.black
-  },
-  selectedIcon: {
-    display: 'flex',
-    justifyContent: 'center',
-    color: theme.palette.common.white,
-    fontSize: theme.typography.fontSize,
-    fontStyle: 'normal',
-    position: 'absolute',
-    transform: 'translate(0, -50%)',
-    backgroundColor: color.correct(),
-    borderRadius: '50%',
-    top: theme.spacing.unit * 2,
-    left: theme.spacing.unit,
-    zIndex: 3
-  },
-  valueHolder: {
-    flex: 1,
-    padding: theme.spacing.unit * 0.75,
-    paddingLeft: theme.spacing.unit * 3.5
-  }
-}))(MenuItemComp);
-
-const findSlateNode = key => {
-  return window.document.querySelector('[data-key="' + key + '"]');
-};
-
-const createElementFromHTML$2 = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = (htmlString || '').trim();
-  return div;
-};
-
-class RespAreaToolbar extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.clickedInside = false;
-    this.preventDone = false;
-    this.state = {
-      respAreaMarkup: '',
-      editedChoiceIndex: -1
-    };
-
-    this.onRespAreaChange = respAreaMarkup => {
-      this.setState({
-        respAreaMarkup
-      });
-    };
-
-    this.onAddChoice = () => {
-      if (this.editorRef) {
-        this.editorRef.finishEditing();
-      }
-    };
-
-    this.onDone = val => {
-      var _choices$editedChoice;
-
-      const {
-        choices,
-        node,
-        value,
-        onAddChoice,
-        onToolbarDone
-      } = this.props;
-      const {
-        editedChoiceIndex
-      } = this.state;
-      const onlyText = createElementFromHTML$2(val).textContent.trim();
-
-      if (editedChoiceIndex >= 0 && choices != null && (_choices$editedChoice = choices[editedChoiceIndex]) != null && _choices$editedChoice.correct) {
-        const update = _extends({}, node.data.toJSON(), {
-          value: val
-        });
-
-        const change = value.change().setNodeByKey(node.key, {
-          data: update
-        });
-        onToolbarDone(change, false);
-      }
-
-      if (!isEmpty(onlyText)) {
-        onAddChoice(node.data.get('index'), val, editedChoiceIndex);
-      }
-
-      this.setState({
-        editedChoiceIndex: -1
-      });
-    };
-
-    this.onSelectChoice = (newValue, index) => {
-      const {
-        node,
-        value,
-        onToolbarDone,
-        onSelectChoice
-      } = this.props;
-
-      const update = _extends({}, node.data.toJSON(), {
-        value: newValue
-      });
-
-      const change = value.change().setNodeByKey(node.key, {
-        data: update
-      });
-      const nextText = value.document.getNextText(node.key);
-      change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-      onToolbarDone(change, false);
-      onSelectChoice(index);
-    };
-
-    this.onRemoveChoice = (val, index) => {
-      const {
-        node,
-        value,
-        onToolbarDone,
-        onRemoveChoice
-      } = this.props;
-
-      if (isEqual(val, node.data.get('value'))) {
-        const update = _extends({}, node.data.toJSON(), {
-          value: null
-        });
-
-        const change = value.change().setNodeByKey(node.key, {
-          data: update
-        });
-        onToolbarDone(change, false);
-      }
-
-      onRemoveChoice(index);
-    };
-
-    this.onEditChoice = (val, index) => {
-      this.onRespAreaChange(val);
-      this.setState({
-        editedChoiceIndex: index
-      });
-    };
-
-    this.onKeyDown = event => {
-      if (event.key === 'Enter') {
-        this.preventDone = false;
-        this.onAddChoice(); // Cancelling event
-
-        return false;
-      }
-    };
-
-    this.onBlur = () => {
-      if (this.clickedInside) {
-        this.clickedInside = false;
-        return;
-      }
-
-      const {
-        node,
-        choices,
-        onCheck,
-        onToolbarDone,
-        value
-      } = this.props;
-      const correctResponse = (choices || []).find(choice => choice.correct);
-      this.onAddChoice();
-
-      if (!choices || choices && choices.length < 2 || !correctResponse) {
-        onCheck(() => {
-          const change = value.change();
-          change.removeNodeByKey(node.get('key'));
-          onToolbarDone(change, false);
-        });
-      }
-    };
-
-    this.onClickInside = () => {
-      this.clickedInside = true;
-    };
-
-    this.focusInput = () => {
-      // we need to focus the input so that math is saved even without pressing the green checkmark
-      const slateEditorRef = this.editorRef && this.editorRef.rootRef && this.editorRef.rootRef.slateEditor;
-      const inputRef = slateEditorRef && slateEditorRef.editorRef && slateEditorRef.editorRef.element;
-
-      if (inputRef) {
-        inputRef.focus();
-      }
-    };
-  }
-
-  componentDidMount() {
-    const {
-      node
-    } = this.props;
-    const domNode = findSlateNode(node.key);
-
-    if (domNode) {
-      //eslint-disable-next-line
-      const domNodeRect = domNode.getBoundingClientRect();
-      const editor = domNode.closest('[data-slate-editor]');
-      const editorRect = editor.getBoundingClientRect();
-      const top = domNodeRect.top - editorRect.top;
-      const left = domNodeRect.left - editorRect.left;
-      this.setState({
-        toolbarStyle: {
-          position: 'absolute',
-          top: `${top + domNodeRect.height + 60}px`,
-          left: `${left + 25}px`
-        }
-      });
-    }
-  }
-
-  componentDidUpdate() {
-    //eslint-disable-next-line
-    const domNode = ReactDOM.findDOMNode(this);
-    renderMath(domNode);
-  }
-
-  render() {
-    const {
-      classes,
-      choices,
-      spellCheck,
-      uploadSoundSupport,
-      mathMlOptions = {},
-      baseInputConfiguration = {},
-      responseAreaInputConfiguration = {}
-    } = this.props;
-    const {
-      respAreaMarkup,
-      toolbarStyle
-    } = this.state;
-
-    if (!toolbarStyle) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.responseContainer,
-      style: _extends({}, toolbarStyle, {
-        backgroundColor: '#E0E1E6'
-      }),
-      onMouseDown: this.onClickInside
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.itemBuilder
-    }, /*#__PURE__*/React.createElement(EditableHtml, {
-      ref: ref => {
-        if (ref) {
-          this.editorRef = ref;
-        }
-      },
-      autoFocus: true,
-      autoSave: true,
-      className: classes.respArea,
-      toolbarOpts: {
-        position: 'top',
-        alwaysVisible: false,
-        showDone: false,
-        doneOn: 'blur'
-      },
-      markup: respAreaMarkup,
-      onKeyDown: this.onKeyDown,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      onChange: respAreaMarkup => {
-        if (this.preventDone) {
-          return;
-        }
-
-        this.onRespAreaChange(respAreaMarkup);
-      },
-      onDone: val => {
-        if (this.preventDone) {
-          return;
-        }
-
-        this.onDone(val);
-      },
-      onBlur: e => {
-        if (!e.relatedTarget) {
-          return;
-        }
-
-        const isInInsertCharacter = !!(e.relatedTarget && e.relatedTarget.closest('.insert-character-dialog'));
-        const isInDoneButton = !!(e.relatedTarget && e.relatedTarget.closest('[aria-label="Done"]'));
-        this.preventDone = isInInsertCharacter || isInDoneButton;
-
-        if (isInInsertCharacter || isInDoneButton) {
-          this.clickedInside = true;
-        }
-
-        this.onBlur(e);
-      },
-      placeholder: "Add Choice",
-      pluginProps: getPluginProps(responseAreaInputConfiguration == null ? void 0 : responseAreaInputConfiguration.inputConfiguration, baseInputConfiguration),
-      spellCheck: spellCheck,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions
-    }), /*#__PURE__*/React.createElement(IconButton, {
-      className: classes.addButton,
-      onMouseDown: () => this.focusInput(),
-      onClick: () => this.onAddChoice(),
-      size: "small",
-      "aria-label": "Add"
-    }, /*#__PURE__*/React.createElement(AddIcon, {
-      fontSize: "inherit"
-    }))), choices && /*#__PURE__*/React.createElement("div", {
-      className: classes.choicesHolder
-    }, choices.map(({
-      label,
-      correct
-    }, index) => /*#__PURE__*/React.createElement(MenuItem, {
-      key: index,
-      onClick: () => this.onSelectChoice(label, index),
-      onRemoveChoice: () => this.onRemoveChoice(label, index),
-      onEditChoice: () => this.onEditChoice(label, index),
-      value: label,
-      correct: correct
-    }))));
-  }
-
-}
-RespAreaToolbar.propTypes = {
-  classes: PropTypes.object,
-  node: PropTypes.object,
-  uploadSoundSupport: PropTypes.object,
-  onDone: PropTypes.func,
-  choices: PropTypes.array,
-  onAddChoice: PropTypes.func.isRequired,
-  onCheck: PropTypes.func,
-  onRemoveChoice: PropTypes.func.isRequired,
-  onSelectChoice: PropTypes.func.isRequired,
-  onToolbarDone: PropTypes.func.isRequired,
-  value: PropTypes.shape({
-    change: PropTypes.func.isRequired,
-    document: PropTypes.shape({
-      getNextText: PropTypes.func.isRequired
-    })
-  }),
-  spellCheck: PropTypes.bool
-};
-const StyledRespAreaToolbar = withStyles(theme => ({
-  responseContainer: {
-    boxShadow: theme.shadows[2],
-    borderRadius: '4px',
-    width: '400px'
-  },
-  respArea: {
-    borderRadius: '4px',
-    backgroundColor: theme.palette.common.white,
-    '& [data-slate-editor="true"]': {
-      minHeight: 'initial !important'
-    }
-  },
-  addButton: {
-    fontSize: theme.typography.fontSize + 2,
-    padding: theme.spacing.unit / 2,
-    color: theme.palette.common.black,
-    position: 'absolute',
-    top: '50%',
-    right: theme.spacing.unit * 2,
-    transform: 'translate(0, -50%)'
-  },
-  choicesHolder: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > div:last-child': {
-      border: 'none'
-    }
-  },
-  itemBuilder: {
-    padding: theme.spacing.unit / 2,
-    position: 'relative'
-  }
-}))(RespAreaToolbar);
-
-const styles$1 = theme => ({
-  responseArea: {
-    paddingBottom: theme.spacing.unit * 2.5
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit
-  }
-});
-
-class ResponseAreaComponent extends React.Component {
-  componentDidMount() {
-    // eslint-disable-next-line react/no-find-dom-node
-    const domNode = ReactDOM.findDOMNode(this);
-    renderMath(domNode);
-  }
-
-  render() {
-    const {
-      editableHtmlProps,
-      responseAreasError,
-      responseAreaChoicesError,
-      classes
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.responseArea
-    }, /*#__PURE__*/React.createElement(EditableHtml, editableHtmlProps), responseAreasError && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, responseAreasError), responseAreaChoicesError && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, responseAreaChoicesError));
-  }
-
-}
-
-ResponseAreaComponent.propTypes = {
-  editableHtmlProps: PropTypes.object.isRequired,
-  classes: PropTypes.object.isRequired,
-  responseAreasError: PropTypes.string,
-  responseAreaChoicesError: PropTypes.string
-};
-var ResponseAreaComponent$1 = withStyles(styles$1)(ResponseAreaComponent);
-
-const {
-  toggle,
-  Panel,
-  dropdown
-} = settings;
-
-const styles = theme => ({
-  promptHolder: {
-    width: '100%',
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2
-  },
-  choiceRationaleHolder: {
-    width: '100%',
-    paddingTop: theme.spacing.unit / 2,
-    marginBottom: theme.spacing.unit * 2
-  },
-  markup: {
-    minHeight: '100px',
-    width: '100%',
-    '& [data-slate-editor="true"]': {
-      minHeight: '100px'
-    }
-  },
-  choiceConfiguration: {
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2
-  },
-  text: {
-    fontSize: theme.typography.fontSize + 2,
-    marginRight: theme.spacing.unit
-  },
-  rationaleLabel: {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'break-spaces',
-    color: color.disabled(),
-    padding: 0,
-    fontSize: theme.typography.fontSize - 2,
-    lineHeight: 1
-  },
-  rationaleChoices: {
-    marginBottom: theme.spacing.unit * 2.5
-  },
-  panelDetails: {
-    display: 'block',
-    paddingTop: 0,
-    paddingBottom: 0
-  },
-  flexContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: theme.spacing.unit
-  },
-  tooltip: {
-    fontSize: theme.typography.fontSize - 2,
-    whiteSpace: 'pre',
-    maxWidth: '500px'
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit
-  }
-});
-
-const createElementFromHTML$1 = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = (htmlString || '').trim();
-  return div;
-};
-
-class Main extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      warning: {
-        open: false
-      }
-    };
-
-    this.onModelChange = newVal => {
-      this.props.onModelChanged(_extends({}, this.props.model, newVal));
-    };
-
-    this.onPromptChanged = prompt => {
-      this.onModelChange({
-        prompt
-      });
-    };
-
-    this.onRationaleChanged = rationale => {
-      this.onModelChange({
-        rationale
-      });
-    };
-
-    this.onChoiceRationaleChanged = (index, choice) => {
-      const {
-        model
-      } = this.props;
-      const indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(elem => elem.label === choice.label && elem.value === choice.value);
-      model.choices[index] && model.choices[index].splice(indexOfChoice, 1, choice);
-      this.onModelChange(model);
-    };
-
-    this.onTeacherInstructionsChanged = teacherInstructions => {
-      this.onModelChange({
-        teacherInstructions
-      });
-    };
-
-    this.onMarkupChanged = slateMarkup => {
-      this.onModelChange({
-        slateMarkup
-      });
-    };
-
-    this.onCheck = callback => {
-      this.setState({
-        warning: {
-          open: true,
-          text: 'Response areas with under 2 options or with no correct answers will be discarded.',
-          onClose: () => {
-            this.setState({
-              warning: {
-                open: false
-              }
-            });
-          },
-          onConfirm: () => {
-            this.setState({
-              warning: {
-                open: false
-              }
-            }, callback);
-          }
-        }
-      });
-    };
-
-    this.onChange = markup => {
-      const {
-        respAreaChoices
-      } = this.state;
-      const domMarkup = createElementFromHTML$1(markup);
-      const allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
-      const allChoices = {};
-      allRespAreas.forEach(el => {
-        allChoices[el.dataset.index] = el.dataset.value || '';
-      });
-      const existingRespAreaChoices = reduce(respAreaChoices, (obj, choices, key) => {
-        if (!isUndefined(allChoices[key])) {
-          obj[key] = respAreaChoices[key];
-        }
-
-        return obj;
-      }, {});
-      const newRespAreaChoices = {};
-      let shouldWarn = false;
-      allRespAreas.forEach((el, index) => {
-        const newChoices = existingRespAreaChoices[el.dataset.index] || [];
-
-        if (newChoices.length < 2 || !newChoices.find(c => c.correct)) {
-          el.remove();
-          shouldWarn = true;
-        } else {
-          newRespAreaChoices[index] = existingRespAreaChoices[el.dataset.index] || [];
-          el.dataset.index = index;
-        }
-      });
-
-      if (shouldWarn) {
-        this.setState({
-          warning: {
-            open: true,
-            text: 'Response areas with under 2 options or with no correct answers will be discarded.',
-            onClose: () => {
-              this.setState({
-                warning: {
-                  open: false
-                }
-              });
-            },
-            onConfirm: () => {
-              this.setState({
-                warning: {
-                  open: false
-                }
-              }, () => this.onModelChange({
-                choices: cloneDeep(newRespAreaChoices),
-                slateMarkup: domMarkup.innerHTML
-              }));
-            }
-          }
-        });
-      } else {
-        this.onModelChange({
-          choices: cloneDeep(newRespAreaChoices),
-          slateMarkup: domMarkup.innerHTML
-        });
-      }
-    };
-
-    this.onAddChoice = (index, label, choiceIndex) => {
-      var _respAreaChoices$inde;
-
-      const {
-        respAreaChoices
-      } = this.state;
-      const {
-        maxResponseAreaChoices
-      } = this.props.configuration;
-
-      if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) {
-        this.setState({
-          warning: {
-            open: true,
-            text: `There are only ${maxResponseAreaChoices} answers allowed per choice.`,
-            onClose: undefined,
-            onConfirm: () => {
-              this.setState({
-                warning: {
-                  open: false
-                }
-              });
-            }
-          }
-        });
-        return;
-      }
-
-      if (!respAreaChoices[index]) {
-        respAreaChoices[index] = [];
-      } // check for duplicate answer, but exclude the one that is currently edited
-
-
-      if ((respAreaChoices[index] || []).find((r, idx) => r.label === label && idx !== choiceIndex)) {
-        // show warning for duplicated answers
-        this.setState({
-          warning: {
-            open: true,
-            text: 'Duplicate answers are not allowed.',
-            onClose: undefined,
-            onConfirm: () => {
-              this.setState({
-                warning: {
-                  open: false
-                }
-              });
-            }
-          }
-        });
-        return;
-      }
-
-      if (choiceIndex >= 0 && (_respAreaChoices$inde = respAreaChoices[index]) != null && _respAreaChoices$inde[choiceIndex]) {
-        // we need to update the choice label with the new value
-        respAreaChoices[index][choiceIndex].label = label;
-      } else {
-        // add a new choice
-        const value = respAreaChoices[index] && max(respAreaChoices[index].map(c => parseInt(c.value)).filter(val => !isNaN(val))) || 0;
-        respAreaChoices[index].push({
-          label,
-          value: `${value + 1}`,
-          correct: false
-        });
-      }
-
-      this.onModelChange({
-        choices: cloneDeep(respAreaChoices)
-      });
-    };
-
-    this.onRemoveChoice = (respIndex, index) => {
-      const {
-        respAreaChoices
-      } = this.state;
-      respAreaChoices[respIndex].splice(index, 1);
-      this.onModelChange({
-        choices: cloneDeep(respAreaChoices)
-      });
-    };
-
-    this.onSelectChoice = (respIndex, selectedIndex) => {
-      const {
-        respAreaChoices
-      } = this.state;
-      respAreaChoices[respIndex] = respAreaChoices[respIndex].map((choice, index) => _extends({}, choice, {
-        correct: index === selectedIndex
-      }));
-      this.onModelChange({
-        choices: cloneDeep(respAreaChoices)
-      });
-    };
-  }
-
-  componentDidMount() {
-    const {
-      model: {
-        choices
-      }
-    } = this.props;
-    this.setState({
-      respAreaChoices: cloneDeep(choices)
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps(nProps) {
-    const newState = {};
-
-    if (!isEqual(nProps.model.choices, this.props.model.choices) || !isEqual(nProps.model.choices, this.state.respAreaChoices)) {
-      newState.respAreaChoices = cloneDeep(nProps.model.choices);
-    }
-
-    if (!isEmpty(newState)) {
-      this.setState(newState);
-    }
-  }
-
-  componentDidUpdate() {
-    //eslint-disable-next-line
-    const domNode = ReactDOM.findDOMNode(this);
-    renderMath(domNode);
-  }
-
-  render() {
-    const {
-      warning
-    } = this.state;
-    const {
-      classes,
-      model,
-      configuration,
-      onConfigurationChanged,
-      imageSupport,
-      uploadSoundSupport
-    } = this.props;
-    const {
-      baseInputConfiguration = {},
-      choiceRationale = {},
-      contentDimensions = {},
-      lockChoiceOrder = {},
-      maxResponseAreas,
-      maxImageWidth = {},
-      maxImageHeight = {},
-      partialScoring = {},
-      prompt = {},
-      rationale = {},
-      settingsPanelDisabled,
-      spellCheck = {},
-      teacherInstructions = {},
-      template = {},
-      withRubric = {},
-      mathMlOptions = {},
-      language = {},
-      languageChoices = {},
-      responseAreaInputConfiguration = {}
-    } = configuration || {};
-    const {
-      choiceRationaleEnabled,
-      choices,
-      errors,
-      extraCSSRules,
-      promptEnabled,
-      rationaleEnabled,
-      spellCheckEnabled,
-      teacherInstructionsEnabled,
-      toolbarEditorPosition
-    } = model || {};
-    const {
-      prompt: promptError,
-      rationale: rationaleError,
-      responseAreasError,
-      responseAreaChoicesError,
-      teacherInstructions: teacherInstructionsError
-    } = errors || {};
-    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-
-    const renderChoiceRationale = () => (Object.keys(choices) || []).map((key, index) => /*#__PURE__*/React.createElement("div", {
-      key: key,
-      className: classes.rationaleChoices
-    }, /*#__PURE__*/React.createElement(ExpansionPanel, null, /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
-      expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, null)
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: classes.text
-    }, `Rationale for response area #${index + 1}`)), /*#__PURE__*/React.createElement(ExpansionPanelDetails, {
-      className: classes.panelDetails
-    }, (choices[key] || []).map(choice => /*#__PURE__*/React.createElement(React.Fragment, {
-      key: choice.label
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classes.rationaleLabel,
-      dangerouslySetInnerHTML: {
-        __html: `${rationale.label} for ${choice.label} (${choice.correct ? 'correct' : 'incorrect'})`
-      }
-    }), /*#__PURE__*/React.createElement(InputContainer, {
-      className: classes.choiceRationaleHolder
-    }, /*#__PURE__*/React.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: choice.rationale || '',
-      spellCheck: spellCheckEnabled,
-      onChange: c => this.onChoiceRationaleChanged(key, _extends({}, choice, {
-        rationale: c
-      })),
-      imageSupport: imageSupport,
-      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions
-    }))))))));
-
-    const toolbarOpts = {
-      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-    };
-    const validationMessage = generateValidationMessage(configuration);
-    const panelSettings = {
-      partialScoring: partialScoring.settings && toggle(partialScoring.label),
-      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
-      'language.enabled': language.settings && toggle(language.label, true),
-      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
-    };
-    const panelProperties = {
-      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-      rationaleEnabled: rationale.settings && toggle(rationale.label),
-      choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
-      promptEnabled: prompt.settings && toggle(prompt.label),
-      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-      rubricEnabled: (withRubric == null ? void 0 : withRubric.settings) && toggle(withRubric == null ? void 0 : withRubric.label)
-    };
-
-    const getPluginProps = (props = {}) => _extends({}, baseInputConfiguration, props);
-
-    return /*#__PURE__*/React.createElement(layout.ConfigLayout, {
-      extraCSSRules: extraCSSRules,
-      dimensions: contentDimensions,
-      hideSettings: settingsPanelDisabled,
-      settings: /*#__PURE__*/React.createElement(Panel, {
-        model: model,
-        configuration: configuration,
-        onChangeModel: model => this.onModelChange(model),
-        onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
-        groups: {
-          Settings: panelSettings,
-          Properties: panelProperties
-        }
-      })
-    }, teacherInstructionsEnabled && /*#__PURE__*/React.createElement(InputContainer, {
-      label: teacherInstructions.label,
-      className: classes.promptHolder
-    }, /*#__PURE__*/React.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.teacherInstructions || '',
-      onChange: this.onTeacherInstructionsChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      error: teacherInstructionsError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration),
-      spellCheck: spellCheckEnabled,
-      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
-      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), teacherInstructionsError && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/React.createElement(InputContainer, {
-      label: prompt.label,
-      className: classes.promptHolder
-    }, /*#__PURE__*/React.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.prompt,
-      onChange: this.onPromptChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      disableUnderline: true,
-      error: promptError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(prompt == null ? void 0 : prompt.inputConfiguration),
-      spellCheck: spellCheckEnabled,
-      maxImageWidth: defaultImageMaxWidth,
-      maxImageHeight: defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), promptError && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, promptError)), /*#__PURE__*/React.createElement("div", {
-      className: classes.flexContainer
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: classes.text,
-      component: 'div'
-    }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/React.createElement(Tooltip, {
-      classes: {
-        tooltip: classes.tooltip
-      },
-      disableFocusListener: true,
-      disableTouchListener: true,
-      placement: 'right',
-      title: validationMessage
-    }, /*#__PURE__*/React.createElement(Info, {
-      fontSize: 'small',
-      color: 'primary'
-    }))), /*#__PURE__*/React.createElement(ResponseAreaComponent$1, {
-      responseAreasError: responseAreasError,
-      responseAreaChoicesError: responseAreaChoicesError,
-      editableHtmlProps: {
-        pluginProps: getPluginProps(template == null ? void 0 : template.inputConfiguration),
-        activePlugins: ALL_PLUGINS,
-        toolbarOpts: {
-          position: 'top'
-        },
-        responseAreaProps: {
-          type: 'inline-dropdown',
-          options: {
-            duplicates: true
-          },
-          maxResponseAreas: maxResponseAreas,
-          respAreaToolbar: (node, value, onToolbarDone) => {
-            const {
-              respAreaChoices
-            } = this.state;
-            return () => /*#__PURE__*/React.createElement(StyledRespAreaToolbar, {
-              onAddChoice: this.onAddChoice,
-              onCheck: this.onCheck,
-              onRemoveChoice: index => this.onRemoveChoice(node.data.get('index'), index),
-              onSelectChoice: index => this.onSelectChoice(node.data.get('index'), index),
-              node: node,
-              value: value,
-              onToolbarDone: onToolbarDone,
-              choices: respAreaChoices[node.data.get('index')],
-              spellCheck: spellCheckEnabled,
-              uploadSoundSupport: uploadSoundSupport,
-              mathMlOptions: mathMlOptions,
-              baseInputConfiguration: baseInputConfiguration,
-              responseAreaInputConfiguration: responseAreaInputConfiguration
-            });
-          }
-        },
-        spellCheck: spellCheckEnabled,
-        className: classes.markup,
-        markup: model.slateMarkup || '',
-        onChange: this.onChange,
-        imageSupport: imageSupport,
-        disableImageAlignmentButtons: true,
-        disabled: false,
-        highlightShape: false,
-        error: responseAreasError,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }
-    }), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/React.createElement(InputContainer, {
-      label: rationale.label,
-      className: classes.promptHolder
-    }, /*#__PURE__*/React.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.rationale || '',
-      onChange: this.onRationaleChanged,
-      imageSupport: imageSupport,
-      error: rationaleError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(rationale == null ? void 0 : rationale.inputConfiguration),
-      spellCheck: spellCheckEnabled,
-      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    }), rationaleError && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, rationaleError)), /*#__PURE__*/React.createElement(AlertDialog, {
-      open: warning.open,
-      title: "Warning",
-      text: warning.text,
-      onClose: warning.onClose,
-      onConfirm: warning.onConfirm
-    }));
-  }
-
-}
-Main.propTypes = {
-  configuration: PropTypes.object.isRequired,
-  model: PropTypes.object.isRequired,
-  disableSidePanel: PropTypes.bool,
-  onModelChanged: PropTypes.func.isRequired,
-  onConfigurationChanged: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired,
-  imageSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  }),
-  uploadSoundSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  })
-};
-const Styled = withStyles(styles)(Main);
-
-var sensibleDefaults = {
-  model: {
-    alternateResponse: {},
-    choiceRationaleEnabled: true,
-    choices: {},
-    disabled: false,
-    displayType: 'block',
-    markup: '',
-    mode: 'gather',
-    prompt: '',
-    promptEnabled: true,
-    rationale: '',
-    rationaleEnabled: true,
-    shuffle: true,
-    studentInstructionsEnabled: true,
-    teacherInstructions: '',
-    teacherInstructionsEnabled: true,
-    toolbarEditorPosition: 'bottom'
-  },
-  configuration: {
-    baseInputConfiguration: {
-      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: {
-      settings: true,
-      label: 'Prompt',
-      required: false,
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
-    },
-    responseAreaInputConfiguration: {
-      inputConfiguration: {
-        audio: {
-          disabled: true
-        },
-        video: {
-          disabled: true
-        },
-        image: {
-          disabled: true
-        },
-        table: {
-          disabled: true
-        },
-        ul_list: {
-          disabled: true
-        },
-        ol_list: {
-          disabled: true
-        }
-      }
-    },
-    settingsPanelDisabled: false,
-    spellCheck: {
-      label: 'Spellcheck',
-      settings: false,
-      enabled: true
-    },
-    lockChoiceOrder: {
-      settings: true,
-      label: 'Lock Choice Order'
-    },
-    partialScoring: {
-      settings: false,
-      label: 'Allow Partial Scoring'
-    },
-    rationale: {
-      settings: true,
-      label: 'Rationale',
-      required: false,
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
-    },
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions',
-      required: false,
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
-    },
-    template: {
-      inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
-    },
-    choiceRationale: {
-      settings: true,
-      label: 'Choice Rationale'
-    },
-    toolbarEditorPosition: {
-      settings: false,
-      label: 'Toolbar Editor Position'
-    },
-    maxResponseAreas: 10,
-    maxResponseAreaChoices: 10,
-    maxImageWidth: {
-      teacherInstructions: 300,
-      prompt: 300,
-      rationale: 300
-    },
-    maxImageHeight: {
-      teacherInstructions: 300,
-      prompt: 300,
-      rationale: 300
-    },
-    withRubric: {
-      settings: false,
-      label: 'Add Rubric'
-    },
-    mathMlOptions: {
-      mmlOutput: false,
-      mmlEditing: false
-    },
-    language: {
-      settings: false,
-      label: 'Specify Language',
-      enabled: false
-    },
-    languageChoices: {
-      label: 'Language Choices',
-      options: []
-    }
-  }
-};
-
-const 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 = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-  return div;
-};
-const processMarkup = markup => {
-  const newMarkup = removeUnwantedCharacters(markup);
-  const slateMarkup = createElementFromHTML(newMarkup);
-  slateMarkup.querySelectorAll('[data-type="inline_dropdown"]').forEach(s => {
-    s.replaceWith(`{{${s.dataset.index}}}`);
-  });
-  return slateMarkup.innerHTML;
-};
-const REGEX = /\{\{(\d+)\}\}/g;
-const createSlateMarkup = (markup, choices) => {
-  const newMarkup = removeUnwantedCharacters(markup);
-
-  const createSelect = index => {
-    let correctChoice = choices[index] && choices[index].find(c => c.correct);
-
-    if (!correctChoice || !correctChoice.value) {
-      correctChoice = {
-        id: '',
-        value: '',
-        label: ''
-      };
-    }
-
-    return `<span data-type="inline_dropdown" data-index="${index}" data-value="${escape(correctChoice.label)}"></span>`;
-  };
-
-  return newMarkup.replace(REGEX, (match, g) => {
-    return createSelect(g);
-  });
-};
-
-const log = debug('multiple-choice:configure');
-class InlineDropdown extends HTMLElement {
-  constructor() {
-    super();
-    this._model = InlineDropdown.prepareModel();
-    this._configuration = sensibleDefaults.configuration;
-    this.onModelChanged = this.onModelChanged.bind(this);
-    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
-  }
-
-  set model(s) {
-    this._model = InlineDropdown.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 = InlineDropdown.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.createElement(Styled, {
-      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);
-  }
-
-}
-
-InlineDropdown.prepareModel = (model = {}) => {
-  const currModal = _extends({}, sensibleDefaults.model, model);
-
-  const slateMarkup = model.slateMarkup || createSlateMarkup(currModal.markup, currModal.choices);
-  const markup = processMarkup(slateMarkup);
-  return _extends({}, currModal, {
-    slateMarkup,
-    markup
-    /*...processedMarkup,*/
-
-  });
-};
-
-export { InlineDropdown as default };
-//# sourceMappingURL=configure.js.map