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

package/esm/configure.js

@@ -0,0 +1,1552 @@
+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