@pie-element/inline-dropdown 3.8.2 → 3.8.3-next.1008

package/module/configure.js

@@ -1,1338 +0,0 @@
-import {_dll_pie_lib__editable_html, _dll_pie_lib__config_ui, _dll_pie_framework__pie_configure_events} from "../../shared-config@^1.8.13/module/index.js";
-import {_dll_react, _dll_react_dom, _dll_prop_types, _dll_pie_lib__math_rendering, _dll_material_ui__core_styles, _dll_lodash, _dll_material_ui__core} from "../../../@pie-ui/shared-lib@^4.3.3/module/index.js";
-function createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var classnames = createCommonjsModule(function (module) {
-  (function () {
-    var hasOwn = ({}).hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-const React = _dll_react;
-const ReactDOM = _dll_react_dom;
-const PropTypes = _dll_prop_types;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {isEqual: isEqual} = _dll_lodash;
-const {isEmpty: isEmpty} = _dll_lodash;
-const EditableHtml = _dll_pie_lib__editable_html;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx";
-class MenuItemComp extends React.Component {
-  constructor(...args) {
-    super(...args);
-    MenuItemComp.prototype.__init.call(this);
-  }
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes.object.isRequired,
-      correct: PropTypes.bool.isRequired,
-      onClick: PropTypes.func.isRequired,
-      onRemoveChoice: PropTypes.func.isRequired,
-      value: PropTypes.string.isRequired
-    };
-  }
-  __init() {
-    this.onRemoveClick = e => {
-      const {onRemoveChoice} = this.props;
-      e.preventDefault();
-      e.stopPropagation();
-      onRemoveChoice();
-    };
-  }
-  render() {
-    const {classes, correct, onClick, value} = this.props;
-    return React.createElement('div', {
-      className: classnames(classes.wrapper, {
-        [classes.correct]: correct
-      }),
-      onClick: onClick,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 33
-      }
-    }, React.createElement('div', {
-      className: classes.valueHolder,
-      dangerouslySetInnerHTML: {
-        __html: value
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 34
-      }
-    }), React.createElement('i', {
-      className: classes.removeIcon,
-      onClick: this.onRemoveClick,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 40
-      }
-    }, "x"));
-  }
-}
-MenuItemComp.__initStatic();
-const MenuItem = withStyles({
-  wrapper: {
-    background: '#fff',
-    borderBottom: '1px solid black',
-    boxSizing: 'border-box',
-    display: 'block',
-    cursor: 'pointer',
-    lineHeight: '30px',
-    padding: '10px 25px 10px 10px',
-    position: 'relative'
-  },
-  correct: {
-    background: '#C4DCFA'
-  },
-  removeIcon: {
-    cursor: 'pointer',
-    fontSize: '20px',
-    fontStyle: 'normal',
-    position: 'absolute',
-    transform: 'translate(0, -50%)',
-    top: '50%',
-    right: '5px',
-    zIndex: 3
-  },
-  valueHolder: {
-    wordBreak: 'break-all'
-  }
-})(MenuItemComp);
-const findSlateNode = key => {
-  return window.document.querySelector('[data-key="' + key + '"]');
-};
-const createElementFromHTML = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = (htmlString || '').trim();
-  return div;
-};
-class RespAreaToolbar extends React.Component {
-  constructor(...args2) {
-    super(...args2);
-    RespAreaToolbar.prototype.__init2.call(this);
-    RespAreaToolbar.prototype.__init3.call(this);
-    RespAreaToolbar.prototype.__init4.call(this);
-    RespAreaToolbar.prototype.__init5.call(this);
-    RespAreaToolbar.prototype.__init6.call(this);
-    RespAreaToolbar.prototype.__init7.call(this);
-    RespAreaToolbar.prototype.__init8.call(this);
-  }
-  static __initStatic2() {
-    this.propTypes = {
-      classes: PropTypes.object,
-      node: PropTypes.object,
-      onDone: PropTypes.func,
-      choices: PropTypes.array,
-      onAddChoice: PropTypes.func.isRequired,
-      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
-        })
-      })
-    };
-  }
-  __init2() {
-    this.state = {
-      respAreaMarkup: ''
-    };
-  }
-  componentDidMount() {
-    const {node} = this.props;
-    const domNode = findSlateNode(node.key);
-    if (domNode) {
-      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`,
-          width: domNodeRect.width
-        }
-      });
-    }
-  }
-  componentDidUpdate() {
-    const domNode = ReactDOM.findDOMNode(this);
-    renderMath(domNode);
-  }
-  __init3() {
-    this.onRespAreaChange = respAreaMarkup => {
-      this.setState({
-        respAreaMarkup
-      });
-    };
-  }
-  __init4() {
-    this.onAddChoice = () => {
-      if (this.editorRef) {
-        this.editorRef.finishEditing();
-      }
-    };
-  }
-  __init5() {
-    this.onDone = val => {
-      const {node, onAddChoice} = this.props;
-      const onlyText = createElementFromHTML(val).textContent;
-      if (!isEmpty(onlyText)) {
-        onAddChoice(node.data.get('index'), val);
-      }
-    };
-  }
-  __init6() {
-    this.onSelectChoice = (newValue, index) => {
-      const {node, value, onToolbarDone, onSelectChoice} = this.props;
-      const update = {
-        ...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);
-    };
-  }
-  __init7() {
-    this.onRemoveChoice = (val, index) => {
-      const {node, value, onToolbarDone, onRemoveChoice} = this.props;
-      if (isEqual(val, node.data.get('value'))) {
-        const update = {
-          ...node.data.toJSON(),
-          value: null
-        };
-        const change = value.change().setNodeByKey(node.key, {
-          data: update
-        });
-        onToolbarDone(change, false);
-      }
-      onRemoveChoice(index);
-    };
-  }
-  __init8() {
-    this.onKeyDown = event => {
-      if (event.key === 'Enter') {
-        this.onAddChoice();
-        return false;
-      }
-    };
-  }
-  render() {
-    const {classes, choices} = this.props;
-    const {respAreaMarkup, toolbarStyle} = this.state;
-    if (!toolbarStyle) {
-      return null;
-    }
-    return React.createElement('div', {
-      style: {
-        ...toolbarStyle,
-        backgroundColor: '#E0E1E6'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 205
-      }
-    }, React.createElement('div', {
-      className: classes.itemBuilder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 211
-      }
-    }, 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: 'custom'
-      },
-      markup: respAreaMarkup,
-      onKeyDown: this.onKeyDown,
-      onChange: this.onRespAreaChange,
-      onDone: this.onDone,
-      placeholder: "Add Choice",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 212
-      }
-    }), React.createElement('i', {
-      style: {
-        cursor: 'pointer',
-        fontSize: '20px',
-        fontStyle: 'normal',
-        position: 'absolute',
-        top: '50%',
-        right: '15px',
-        transform: 'translate(0, -50%)'
-      },
-      contentEditable: false,
-      onMouseDown: () => this.onAddChoice(),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 233
-      }
-    }, "+")), choices && React.createElement('div', {
-      className: classes.choicesHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 250
-      }
-    }, choices.map(({label, correct}, index) => React.createElement(MenuItem, {
-      key: index,
-      onClick: () => this.onSelectChoice(label, index),
-      onRemoveChoice: () => this.onRemoveChoice(label, index),
-      value: label,
-      correct: correct,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 252
-      }
-    }))));
-  }
-}
-RespAreaToolbar.__initStatic2();
-const StyledRespAreaToolbar = withStyles({
-  respArea: {
-    backgroundColor: '#fff',
-    '& [data-slate-editor="true"]': {
-      minHeight: 'initial !important'
-    }
-  },
-  choicesHolder: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > div:last-child': {
-      border: 'none'
-    }
-  },
-  itemBuilder: {
-    padding: '8px',
-    position: 'relative'
-  }
-})(RespAreaToolbar);
-const React$1 = _dll_react;
-const ReactDOM$1 = _dll_react_dom;
-const PropTypes$1 = _dll_prop_types;
-const {renderMath: renderMath$1} = _dll_pie_lib__math_rendering;
-const {cloneDeep: cloneDeep} = _dll_lodash;
-const {isEqual: isEqual$1} = _dll_lodash;
-const {isUndefined: isUndefined} = _dll_lodash;
-const {isEmpty: isEmpty$1} = _dll_lodash;
-const {reduce: reduce} = _dll_lodash;
-const {max: max} = _dll_lodash;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const {Button: Button} = _dll_material_ui__core;
-const {Dialog: Dialog} = _dll_material_ui__core;
-const {DialogTitle: DialogTitle} = _dll_material_ui__core;
-const {DialogActions: DialogActions} = _dll_material_ui__core;
-const {Typography: Typography} = _dll_material_ui__core;
-const EditableHtml$1 = _dll_pie_lib__editable_html;
-const {ALL_PLUGINS: ALL_PLUGINS} = _dll_pie_lib__editable_html;
-const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
-const {layout: layout} = _dll_pie_lib__config_ui;
-const {settings: settings} = _dll_pie_lib__config_ui;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/packages/inline-dropdown/configure/src/main.jsx";
-const {toggle, Panel} = settings;
-const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dialog, {
-  open: open,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$1,
-    lineNumber: 25
-  }
-}, React$1.createElement(DialogTitle, {
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$1,
-    lineNumber: 26
-  }
-}, title), React$1.createElement(DialogActions, {
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$1,
-    lineNumber: 27
-  }
-}, onOk && React$1.createElement(Button, {
-  onClick: onOk,
-  color: "primary",
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$1,
-    lineNumber: 29
-  }
-}, "OK"), onCancel && React$1.createElement(Button, {
-  onClick: onCancel,
-  color: "primary",
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$1,
-    lineNumber: 34
-  }
-}, "Cancel")));
-InfoDialog.propTypes = {
-  open: PropTypes$1.bool,
-  onCancel: PropTypes$1.func,
-  onOk: PropTypes$1.func,
-  title: PropTypes$1.string
-};
-const styles = theme => ({
-  promptHolder: {
-    width: '100%',
-    paddingBottom: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2
-  },
-  prompt: {
-    paddingTop: theme.spacing.unit * 2,
-    width: '100%'
-  },
-  markup: {
-    minHeight: '100px',
-    paddingTop: theme.spacing.unit * 2,
-    width: '100%',
-    '& [data-slate-editor="true"]': {
-      minHeight: '100px'
-    }
-  },
-  design: {
-    paddingTop: theme.spacing.unit * 3
-  },
-  choiceConfiguration: {
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2
-  },
-  switchElement: {
-    justifyContent: 'space-between',
-    margin: 0
-  },
-  addButton: {
-    float: 'right'
-  },
-  text: {
-    fontFamily: 'Cerebri Sans',
-    fontSize: '16px',
-    lineHeight: '19px',
-    color: '#495B8F'
-  }
-});
-const createElementFromHTML$1 = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-  return div;
-};
-const prepareVal = html => {
-  const tmp = document.createElement('DIV');
-  tmp.innerHTML = html;
-  const value = tmp.textContent || tmp.innerText || '';
-  return value.trim();
-};
-class Main extends React$1.Component {
-  constructor(...args) {
-    super(...args);
-    Main.prototype.__init.call(this);
-    Main.prototype.__init2.call(this);
-    Main.prototype.__init3.call(this);
-    Main.prototype.__init4.call(this);
-    Main.prototype.__init5.call(this);
-    Main.prototype.__init6.call(this);
-    Main.prototype.__init7.call(this);
-    Main.prototype.__init8.call(this);
-    Main.prototype.__init9.call(this);
-    Main.prototype.__init10.call(this);
-  }
-  static __initStatic() {
-    this.propTypes = {
-      configuration: PropTypes$1.object.isRequired,
-      model: PropTypes$1.object.isRequired,
-      disableSidePanel: PropTypes$1.bool,
-      onModelChanged: PropTypes$1.func.isRequired,
-      onConfigurationChanged: PropTypes$1.func.isRequired,
-      classes: PropTypes$1.object.isRequired,
-      imageSupport: PropTypes$1.shape({
-        add: PropTypes$1.func.isRequired,
-        delete: PropTypes$1.func.isRequired
-      })
-    };
-  }
-  __init() {
-    this.state = {
-      dialog: {
-        open: false
-      }
-    };
-  }
-  componentDidMount() {
-    const {model: {choices}} = this.props;
-    this.setState({
-      respAreaChoices: cloneDeep(choices)
-    });
-  }
-  UNSAFE_componentWillReceiveProps(nProps) {
-    const newState = {};
-    if (!isEqual$1(nProps.model.choices, this.props.model.choices) || !isEqual$1(nProps.model.choices, this.state.respAreaChoices)) {
-      newState.respAreaChoices = cloneDeep(nProps.model.choices);
-    }
-    if (!isEmpty$1(newState)) {
-      this.setState(newState);
-    }
-  }
-  componentDidUpdate() {
-    const domNode = ReactDOM$1.findDOMNode(this);
-    renderMath$1(domNode);
-  }
-  __init2() {
-    this.onModelChange = newVal => {
-      this.props.onModelChanged({
-        ...this.props.model,
-        ...newVal
-      });
-    };
-  }
-  __init3() {
-    this.onPromptChanged = prompt => {
-      this.onModelChange({
-        prompt
-      });
-    };
-  }
-  __init4() {
-    this.onRationaleChanged = rationale => {
-      this.onModelChange({
-        rationale
-      });
-    };
-  }
-  __init5() {
-    this.onTeacherInstructionsChanged = teacherInstructions => {
-      this.onModelChange({
-        teacherInstructions
-      });
-    };
-  }
-  __init6() {
-    this.onMarkupChanged = slateMarkup => {
-      this.onModelChange({
-        slateMarkup
-      });
-    };
-  }
-  __init7() {
-    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({
-          dialog: {
-            open: true,
-            message: 'Response areas with under 2 options or with no correct answers will be discarded',
-            onOk: () => {
-              this.setState({
-                dialog: {
-                  open: false
-                }
-              }, () => this.onModelChange({
-                choices: cloneDeep(newRespAreaChoices),
-                slateMarkup: domMarkup.innerHTML
-              }));
-            },
-            onCancel: () => this.setState({
-              dialog: {
-                open: false
-              }
-            })
-          }
-        });
-      } else {
-        this.onModelChange({
-          choices: cloneDeep(newRespAreaChoices),
-          slateMarkup: domMarkup.innerHTML
-        });
-      }
-    };
-  }
-  __init8() {
-    this.onAddChoice = (index, label) => {
-      const {respAreaChoices} = this.state;
-      if (!respAreaChoices[index]) {
-        respAreaChoices[index] = [];
-      }
-      if ((respAreaChoices[index] || []).find(r => prepareVal(r.label) === prepareVal(label))) {
-        this.setState({
-          dialog: {
-            open: true,
-            message: 'Duplicate answers are not allowed.',
-            onOk: () => {
-              this.setState({
-                dialog: {
-                  open: false
-                }
-              });
-            }
-          }
-        });
-        return;
-      }
-      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)
-      });
-    };
-  }
-  __init9() {
-    this.onRemoveChoice = (respIndex, index) => {
-      const {respAreaChoices} = this.state;
-      respAreaChoices[respIndex].splice(index, 1);
-      this.onModelChange({
-        choices: cloneDeep(respAreaChoices)
-      });
-    };
-  }
-  __init10() {
-    this.onSelectChoice = (respIndex, selectedIndex) => {
-      const {respAreaChoices} = this.state;
-      respAreaChoices[respIndex] = respAreaChoices[respIndex].map((ch, index) => ({
-        ...ch,
-        correct: index === selectedIndex
-      }));
-      this.onModelChange({
-        choices: cloneDeep(respAreaChoices)
-      });
-    };
-  }
-  render() {
-    const {dialog} = this.state;
-    const {classes, model, configuration, onConfigurationChanged, imageSupport} = this.props;
-    const {prompt = {}, partialScoring = {}, lockChoiceOrder = {}, rationale = {}, teacherInstructions = {}} = configuration || ({});
-    const {rationaleEnabled, promptEnabled, teacherInstructionsEnabled} = model || ({});
-    return React$1.createElement('div', {
-      className: classes.design,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 335
-      }
-    }, React$1.createElement(layout.ConfigLayout, {
-      settings: React$1.createElement(Panel, {
-        model: model,
-        configuration: configuration,
-        onChangeModel: model => this.onModelChange(model),
-        onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
-        groups: {
-          Settings: {
-            partialScoring: partialScoring.settings && toggle(partialScoring.label),
-            lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label)
-          },
-          Properties: {
-            teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-            rationaleEnabled: rationale.settings && toggle(rationale.label),
-            promptEnabled: prompt.settings && toggle(prompt.label)
-          }
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 338
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 336
-      }
-    }, React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 364
-      }
-    }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
-      label: teacherInstructions.label,
-      className: classes.promptHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 366
-      }
-    }, React$1.createElement(EditableHtml$1, {
-      className: classes.prompt,
-      markup: model.teacherInstructions || '',
-      onChange: this.onTeacherInstructionsChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 370
-      }
-    })), promptEnabled && React$1.createElement(InputContainer, {
-      label: prompt.label,
-      className: classes.promptHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 381
-      }
-    }, React$1.createElement(EditableHtml$1, {
-      className: classes.prompt,
-      markup: model.prompt,
-      onChange: this.onPromptChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      disableUnderline: true,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 385
-      }
-    })), rationaleEnabled && React$1.createElement(InputContainer, {
-      label: rationale.label,
-      className: classes.promptHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 397
-      }
-    }, React$1.createElement(EditableHtml$1, {
-      className: classes.prompt,
-      markup: model.rationale || '',
-      onChange: this.onRationaleChanged,
-      imageSupport: imageSupport,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 401
-      }
-    })), React$1.createElement(Typography, {
-      className: classes.text,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 410
-      }
-    }, "Define Template, Choices, and Correct Responses"), React$1.createElement(InfoDialog, {
-      open: dialog.open,
-      title: dialog.message,
-      onCancel: dialog.onCancel,
-      onOk: dialog.onOk,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 413
-      }
-    }), React$1.createElement(EditableHtml$1, {
-      activePlugins: ALL_PLUGINS,
-      toolbarOpts: {
-        position: 'top'
-      },
-      responseAreaProps: {
-        type: 'inline-dropdown',
-        options: {
-          duplicates: true
-        },
-        respAreaToolbar: (node, value, onToolbarDone) => {
-          const {respAreaChoices} = this.state;
-          return () => React$1.createElement(StyledRespAreaToolbar, {
-            onAddChoice: this.onAddChoice,
-            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')],
-            __self: this,
-            __source: {
-              fileName: _jsxFileName$1,
-              lineNumber: 431
-            }
-          });
-        }
-      },
-      className: classes.markup,
-      markup: model.slateMarkup || '',
-      onChange: this.onChange,
-      imageSupport: imageSupport,
-      onBlur: this.onBlur,
-      disabled: false,
-      highlightShape: false,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 419
-      }
-    }))));
-  }
-}
-Main.__initStatic();
-const Styled = withStyles$1(styles)(Main);
-var s = 1000;
-var m = s * 60;
-var h = m * 60;
-var d = h * 24;
-var w = d * 7;
-var y = d * 365.25;
-var ms = function (val, options) {
-  options = options || ({});
-  var type = typeof val;
-  if (type === 'string' && val.length > 0) {
-    return parse(val);
-  } else if (type === 'number' && isFinite(val)) {
-    return options.long ? fmtLong(val) : fmtShort(val);
-  }
-  throw new Error('val is not a non-empty string or a valid number. val=' + JSON.stringify(val));
-};
-function parse(str) {
-  str = String(str);
-  if (str.length > 100) {
-    return;
-  }
-  var match = (/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i).exec(str);
-  if (!match) {
-    return;
-  }
-  var n = parseFloat(match[1]);
-  var type = (match[2] || 'ms').toLowerCase();
-  switch (type) {
-    case 'years':
-    case 'year':
-    case 'yrs':
-    case 'yr':
-    case 'y':
-      return n * y;
-    case 'weeks':
-    case 'week':
-    case 'w':
-      return n * w;
-    case 'days':
-    case 'day':
-    case 'd':
-      return n * d;
-    case 'hours':
-    case 'hour':
-    case 'hrs':
-    case 'hr':
-    case 'h':
-      return n * h;
-    case 'minutes':
-    case 'minute':
-    case 'mins':
-    case 'min':
-    case 'm':
-      return n * m;
-    case 'seconds':
-    case 'second':
-    case 'secs':
-    case 'sec':
-    case 's':
-      return n * s;
-    case 'milliseconds':
-    case 'millisecond':
-    case 'msecs':
-    case 'msec':
-    case 'ms':
-      return n;
-    default:
-      return undefined;
-  }
-}
-function fmtShort(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return Math.round(ms / d) + 'd';
-  }
-  if (msAbs >= h) {
-    return Math.round(ms / h) + 'h';
-  }
-  if (msAbs >= m) {
-    return Math.round(ms / m) + 'm';
-  }
-  if (msAbs >= s) {
-    return Math.round(ms / s) + 's';
-  }
-  return ms + 'ms';
-}
-function fmtLong(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return plural(ms, msAbs, d, 'day');
-  }
-  if (msAbs >= h) {
-    return plural(ms, msAbs, h, 'hour');
-  }
-  if (msAbs >= m) {
-    return plural(ms, msAbs, m, 'minute');
-  }
-  if (msAbs >= s) {
-    return plural(ms, msAbs, s, 'second');
-  }
-  return ms + ' ms';
-}
-function plural(ms, msAbs, n, name) {
-  var isPlural = msAbs >= n * 1.5;
-  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
-}
-function setup(env) {
-  createDebug.debug = createDebug;
-  createDebug.default = createDebug;
-  createDebug.coerce = coerce;
-  createDebug.disable = disable;
-  createDebug.enable = enable;
-  createDebug.enabled = enabled;
-  createDebug.humanize = ms;
-  Object.keys(env).forEach(function (key) {
-    createDebug[key] = env[key];
-  });
-  createDebug.instances = [];
-  createDebug.names = [];
-  createDebug.skips = [];
-  createDebug.formatters = {};
-  function selectColor(namespace) {
-    var hash = 0;
-    for (var i = 0; i < namespace.length; i++) {
-      hash = (hash << 5) - hash + namespace.charCodeAt(i);
-      hash |= 0;
-    }
-    return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
-  }
-  createDebug.selectColor = selectColor;
-  function createDebug(namespace) {
-    var prevTime;
-    function debug() {
-      if (!debug.enabled) {
-        return;
-      }
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      var self = debug;
-      var curr = Number(new Date());
-      var ms = curr - (prevTime || curr);
-      self.diff = ms;
-      self.prev = prevTime;
-      self.curr = curr;
-      prevTime = curr;
-      args[0] = createDebug.coerce(args[0]);
-      if (typeof args[0] !== 'string') {
-        args.unshift('%O');
-      }
-      var index = 0;
-      args[0] = args[0].replace(/%([a-zA-Z%])/g, function (match, format) {
-        if (match === '%%') {
-          return match;
-        }
-        index++;
-        var formatter = createDebug.formatters[format];
-        if (typeof formatter === 'function') {
-          var val = args[index];
-          match = formatter.call(self, val);
-          args.splice(index, 1);
-          index--;
-        }
-        return match;
-      });
-      createDebug.formatArgs.call(self, args);
-      var logFn = self.log || createDebug.log;
-      logFn.apply(self, args);
-    }
-    debug.namespace = namespace;
-    debug.enabled = createDebug.enabled(namespace);
-    debug.useColors = createDebug.useColors();
-    debug.color = selectColor(namespace);
-    debug.destroy = destroy;
-    debug.extend = extend;
-    if (typeof createDebug.init === 'function') {
-      createDebug.init(debug);
-    }
-    createDebug.instances.push(debug);
-    return debug;
-  }
-  function destroy() {
-    var index = createDebug.instances.indexOf(this);
-    if (index !== -1) {
-      createDebug.instances.splice(index, 1);
-      return true;
-    }
-    return false;
-  }
-  function extend(namespace, delimiter) {
-    return createDebug(this.namespace + (typeof delimiter === 'undefined' ? ':' : delimiter) + namespace);
-  }
-  function enable(namespaces) {
-    createDebug.save(namespaces);
-    createDebug.names = [];
-    createDebug.skips = [];
-    var i;
-    var split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
-    var len = split.length;
-    for (i = 0; i < len; i++) {
-      if (!split[i]) {
-        continue;
-      }
-      namespaces = split[i].replace(/\*/g, '.*?');
-      if (namespaces[0] === '-') {
-        createDebug.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));
-      } else {
-        createDebug.names.push(new RegExp('^' + namespaces + '$'));
-      }
-    }
-    for (i = 0; i < createDebug.instances.length; i++) {
-      var instance = createDebug.instances[i];
-      instance.enabled = createDebug.enabled(instance.namespace);
-    }
-  }
-  function disable() {
-    createDebug.enable('');
-  }
-  function enabled(name) {
-    if (name[name.length - 1] === '*') {
-      return true;
-    }
-    var i;
-    var len;
-    for ((i = 0, len = createDebug.skips.length); i < len; i++) {
-      if (createDebug.skips[i].test(name)) {
-        return false;
-      }
-    }
-    for ((i = 0, len = createDebug.names.length); i < len; i++) {
-      if (createDebug.names[i].test(name)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function coerce(val) {
-    if (val instanceof Error) {
-      return val.stack || val.message;
-    }
-    return val;
-  }
-  createDebug.enable(createDebug.load());
-  return createDebug;
-}
-var common = setup;
-var browser = createCommonjsModule(function (module, exports) {
-  function _typeof(obj) {
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function _typeof(obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-    return _typeof(obj);
-  }
-  exports.log = log;
-  exports.formatArgs = formatArgs;
-  exports.save = save;
-  exports.load = load;
-  exports.useColors = useColors;
-  exports.storage = localstorage();
-  exports.colors = ['#0000CC', '#0000FF', '#0033CC', '#0033FF', '#0066CC', '#0066FF', '#0099CC', '#0099FF', '#00CC00', '#00CC33', '#00CC66', '#00CC99', '#00CCCC', '#00CCFF', '#3300CC', '#3300FF', '#3333CC', '#3333FF', '#3366CC', '#3366FF', '#3399CC', '#3399FF', '#33CC00', '#33CC33', '#33CC66', '#33CC99', '#33CCCC', '#33CCFF', '#6600CC', '#6600FF', '#6633CC', '#6633FF', '#66CC00', '#66CC33', '#9900CC', '#9900FF', '#9933CC', '#9933FF', '#99CC00', '#99CC33', '#CC0000', '#CC0033', '#CC0066', '#CC0099', '#CC00CC', '#CC00FF', '#CC3300', '#CC3333', '#CC3366', '#CC3399', '#CC33CC', '#CC33FF', '#CC6600', '#CC6633', '#CC9900', '#CC9933', '#CCCC00', '#CCCC33', '#FF0000', '#FF0033', '#FF0066', '#FF0099', '#FF00CC', '#FF00FF', '#FF3300', '#FF3333', '#FF3366', '#FF3399', '#FF33CC', '#FF33FF', '#FF6600', '#FF6633', '#FF9900', '#FF9933', '#FFCC00', '#FFCC33'];
-  function useColors() {
-    if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
-      return true;
-    }
-    if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
-      return false;
-    }
-    return typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || typeof window !== 'undefined' && window.console && (window.console.firebug || window.console.exception && window.console.table) || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31 || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
-  }
-  function formatArgs(args) {
-    args[0] = (this.useColors ? '%c' : '') + this.namespace + (this.useColors ? ' %c' : ' ') + args[0] + (this.useColors ? '%c ' : ' ') + '+' + module.exports.humanize(this.diff);
-    if (!this.useColors) {
-      return;
-    }
-    var c = 'color: ' + this.color;
-    args.splice(1, 0, c, 'color: inherit');
-    var index = 0;
-    var lastC = 0;
-    args[0].replace(/%[a-zA-Z%]/g, function (match) {
-      if (match === '%%') {
-        return;
-      }
-      index++;
-      if (match === '%c') {
-        lastC = index;
-      }
-    });
-    args.splice(lastC, 0, c);
-  }
-  function log() {
-    var _console;
-    return (typeof console === "undefined" ? "undefined" : _typeof(console)) === 'object' && console.log && (_console = console).log.apply(_console, arguments);
-  }
-  function save(namespaces) {
-    try {
-      if (namespaces) {
-        exports.storage.setItem('debug', namespaces);
-      } else {
-        exports.storage.removeItem('debug');
-      }
-    } catch (error) {}
-  }
-  function load() {
-    var r;
-    try {
-      r = exports.storage.getItem('debug');
-    } catch (error) {}
-    if (!r && typeof process !== 'undefined' && ('env' in process)) {
-      r = process.env.DEBUG;
-    }
-    return r;
-  }
-  function localstorage() {
-    try {
-      return localStorage;
-    } catch (error) {}
-  }
-  module.exports = common(exports);
-  var formatters = module.exports.formatters;
-  formatters.j = function (v) {
-    try {
-      return JSON.stringify(v);
-    } catch (error) {
-      return '[UnexpectedJSONParseError]: ' + error.message;
-    }
-  };
-});
-browser.log;
-browser.formatArgs;
-browser.save;
-browser.load;
-browser.useColors;
-browser.storage;
-browser.colors;
-var sensibleDefaults = {
-  model: {
-    disabled: false,
-    mode: 'gather',
-    prompt: 'Use the dropdowns to complete the sentence',
-    shuffle: true,
-    markup: '',
-    choices: {},
-    alternateResponse: {},
-    promptEnabled: true,
-    rationaleEnabled: true,
-    teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true
-  },
-  configuration: {
-    prompt: {
-      settings: true,
-      label: 'Prompt'
-    },
-    lockChoiceOrder: {
-      settings: true,
-      label: 'Lock Choice Order'
-    },
-    partialScoring: {
-      settings: false,
-      label: 'Allow Partial Scoring'
-    },
-    rationale: {
-      settings: true,
-      label: 'Rationale'
-    },
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions'
-    }
-  }
-};
-const {escape: escape} = _dll_lodash;
-const removeUnwantedCharacters = markup => markup.replace(/(\t+(?!imes))|(\n)|(\\t+(?!imes))|(\\n)/g, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
-const createElementFromHTML$2 = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-  return div;
-};
-const processMarkup = markup => {
-  const newMarkup = removeUnwantedCharacters(markup);
-  const slateMarkup = createElementFromHTML$2(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 {DeleteImageEvent: DeleteImageEvent} = _dll_pie_framework__pie_configure_events;
-const {InsertImageEvent: InsertImageEvent} = _dll_pie_framework__pie_configure_events;
-const {ModelUpdatedEvent: ModelUpdatedEvent} = _dll_pie_framework__pie_configure_events;
-const React$2 = _dll_react;
-const ReactDOM$2 = _dll_react_dom;
-const {defaults: defaults} = _dll_lodash;
-const log = browser('multiple-choice:configure');
-class InlineDropdown extends HTMLElement {
-  static __initStatic() {
-    this.prepareModel = (model = {}) => {
-      const currModal = {
-        ...sensibleDefaults.model,
-        ...model
-      };
-      const slateMarkup = model.slateMarkup || createSlateMarkup(currModal.markup, currModal.choices);
-      const markup = processMarkup(slateMarkup);
-      return {
-        ...currModal,
-        slateMarkup,
-        markup
-      };
-    };
-  }
-  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) {
-    this._configuration = defaults(c, sensibleDefaults.configuration);
-    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();
-  }
-  insertImage(handler) {
-    this.dispatchEvent(new InsertImageEvent(handler));
-  }
-  onDeleteImage(src, done) {
-    this.dispatchEvent(new DeleteImageEvent(src, done));
-  }
-  _render() {
-    log('_render');
-    let element = React$2.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)
-      }
-    });
-    ReactDOM$2.render(element, this);
-  }
-}
-InlineDropdown.__initStatic();
-export default InlineDropdown;