@pie-element/inline-dropdown 4.7.1-beta.1 → 4.7.1-beta.4

package/configure/lib/main.js

@@ -0,0 +1,636 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Main = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
+var _configUi = require("@pie-lib/config-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _reduce = _interopRequireDefault(require("lodash/reduce"));
+var _max = _interopRequireDefault(require("lodash/max"));
+var _styles = require("@material-ui/core/styles");
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
+var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _inlineDropdownToolbar = _interopRequireDefault(require("./inline-dropdown-toolbar"));
+var _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var toggle = _configUi.settings.toggle,
+  Panel = _configUi.settings.Panel;
+var styles = function styles(theme) {
+  return {
+    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: theme.typography.fontSize + 2,
+      lineHeight: '19px',
+      color: '#495B8F',
+      marginRight: theme.spacing.unit
+    },
+    rationaleLabel: {
+      display: 'flex',
+      whiteSpace: 'break-spaces'
+    },
+    rationaleChoices: {
+      marginTop: theme.spacing.unit * 2
+    },
+    panelDetails: {
+      display: 'block'
+    },
+    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: 'red',
+      paddingTop: theme.spacing.unit
+    }
+  };
+};
+var createElementFromHTML = function createElementFromHTML(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = (htmlString || '').trim();
+  return div;
+};
+var prepareVal = function prepareVal(html) {
+  var tmp = document.createElement('DIV');
+  tmp.innerHTML = html;
+  var value = tmp.textContent || tmp.innerText || '';
+  return value.trim();
+};
+var Main = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Main, _React$Component);
+  var _super = _createSuper(Main);
+  function Main() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Main);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      warning: {
+        open: false
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelChange", function (newVal) {
+      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), newVal));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
+      _this.onModelChange({
+        prompt: prompt
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
+      _this.onModelChange({
+        rationale: rationale
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceRationaleChanged", function (index, choice) {
+      var model = _this.props.model;
+      var indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(function (elem) {
+        return elem.label === choice.label && elem.value === choice.value;
+      });
+      model.choices[index] && model.choices[index].splice(indexOfChoice, 1, choice);
+      _this.onModelChange(model);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
+      _this.onModelChange({
+        teacherInstructions: teacherInstructions
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMarkupChanged", function (slateMarkup) {
+      _this.onModelChange({
+        slateMarkup: slateMarkup
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (callback) {
+      _this.setState({
+        warning: {
+          open: true,
+          text: 'Response areas with under 2 options or with no correct answers will be discarded.',
+          onClose: function onClose() {
+            _this.setState({
+              warning: {
+                open: false
+              }
+            });
+          },
+          onConfirm: function onConfirm() {
+            _this.setState({
+              warning: {
+                open: false
+              }
+            }, callback);
+          }
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
+      var respAreaChoices = _this.state.respAreaChoices;
+      var domMarkup = createElementFromHTML(markup);
+      var allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
+      var allChoices = {};
+      allRespAreas.forEach(function (el) {
+        allChoices[el.dataset.index] = el.dataset.value || '';
+      });
+      var existingRespAreaChoices = (0, _reduce["default"])(respAreaChoices, function (obj, choices, key) {
+        if (!(0, _isUndefined["default"])(allChoices[key])) {
+          obj[key] = respAreaChoices[key];
+        }
+        return obj;
+      }, {});
+      var newRespAreaChoices = {};
+      var shouldWarn = false;
+      allRespAreas.forEach(function (el, index) {
+        var newChoices = existingRespAreaChoices[el.dataset.index] || [];
+        if (newChoices.length < 2 || !newChoices.find(function (c) {
+          return 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: function onClose() {
+              _this.setState({
+                warning: {
+                  open: false
+                }
+              });
+            },
+            onConfirm: function onConfirm() {
+              _this.setState({
+                warning: {
+                  open: false
+                }
+              }, function () {
+                return _this.onModelChange({
+                  choices: (0, _cloneDeep["default"])(newRespAreaChoices),
+                  slateMarkup: domMarkup.innerHTML
+                });
+              });
+            }
+          }
+        });
+      } else {
+        _this.onModelChange({
+          choices: (0, _cloneDeep["default"])(newRespAreaChoices),
+          slateMarkup: domMarkup.innerHTML
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddChoice", function (index, label) {
+      var respAreaChoices = _this.state.respAreaChoices;
+      var maxResponseAreaChoices = _this.props.configuration.maxResponseAreaChoices;
+      if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) {
+        _this.setState({
+          warning: {
+            open: true,
+            text: "There are only ".concat(maxResponseAreaChoices, " answers allowed per choice."),
+            onClose: undefined,
+            onConfirm: function onConfirm() {
+              _this.setState({
+                warning: {
+                  open: false
+                }
+              });
+            }
+          }
+        });
+        return;
+      }
+      if (!respAreaChoices[index]) {
+        respAreaChoices[index] = [];
+      }
+      if ((respAreaChoices[index] || []).find(function (r) {
+        return prepareVal(r.label) === prepareVal(label);
+      })) {
+        _this.setState({
+          warning: {
+            open: true,
+            text: 'Duplicate answers are not allowed.',
+            onClose: undefined,
+            onConfirm: function onConfirm() {
+              _this.setState({
+                warning: {
+                  open: false
+                }
+              });
+            }
+          }
+        });
+        return;
+      }
+      var value = respAreaChoices[index] && (0, _max["default"])(respAreaChoices[index].map(function (c) {
+        return parseInt(c.value);
+      }).filter(function (val) {
+        return !isNaN(val);
+      })) || 0;
+      respAreaChoices[index].push({
+        label: label,
+        value: "".concat(value + 1),
+        correct: false
+      });
+      _this.onModelChange({
+        choices: (0, _cloneDeep["default"])(respAreaChoices)
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveChoice", function (respIndex, index) {
+      var respAreaChoices = _this.state.respAreaChoices;
+      respAreaChoices[respIndex].splice(index, 1);
+      _this.onModelChange({
+        choices: (0, _cloneDeep["default"])(respAreaChoices)
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelectChoice", function (respIndex, selectedIndex) {
+      var respAreaChoices = _this.state.respAreaChoices;
+      respAreaChoices[respIndex] = respAreaChoices[respIndex].map(function (choice, index) {
+        return _objectSpread(_objectSpread({}, choice), {}, {
+          correct: index === selectedIndex
+        });
+      });
+      _this.onModelChange({
+        choices: (0, _cloneDeep["default"])(respAreaChoices)
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(Main, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var choices = this.props.model.choices;
+      this.setState({
+        respAreaChoices: (0, _cloneDeep["default"])(choices)
+      });
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nProps) {
+      var newState = {};
+      if (!(0, _isEqual["default"])(nProps.model.choices, this.props.model.choices) || !(0, _isEqual["default"])(nProps.model.choices, this.state.respAreaChoices)) {
+        newState.respAreaChoices = (0, _cloneDeep["default"])(nProps.model.choices);
+      }
+      if (!(0, _isEmpty["default"])(newState)) {
+        this.setState(newState);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      //eslint-disable-next-line
+      var domNode = _reactDom["default"].findDOMNode(this);
+      (0, _mathRendering.renderMath)(domNode);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var warning = this.state.warning;
+      var _this$props = this.props,
+        classes = _this$props.classes,
+        model = _this$props.model,
+        configuration = _this$props.configuration,
+        onConfigurationChanged = _this$props.onConfigurationChanged,
+        imageSupport = _this$props.imageSupport,
+        uploadSoundSupport = _this$props.uploadSoundSupport;
+      var _ref = configuration || {},
+        _ref$choiceRationale = _ref.choiceRationale,
+        choiceRationale = _ref$choiceRationale === void 0 ? {} : _ref$choiceRationale,
+        _ref$lockChoiceOrder = _ref.lockChoiceOrder,
+        lockChoiceOrder = _ref$lockChoiceOrder === void 0 ? {} : _ref$lockChoiceOrder,
+        maxResponseAreas = _ref.maxResponseAreas,
+        _ref$maxImageWidth = _ref.maxImageWidth,
+        maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+        _ref$maxImageHeight = _ref.maxImageHeight,
+        maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+        _ref$partialScoring = _ref.partialScoring,
+        partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
+        _ref$prompt = _ref.prompt,
+        prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
+        _ref$rationale = _ref.rationale,
+        rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
+        settingsPanelDisabled = _ref.settingsPanelDisabled,
+        _ref$spellCheck = _ref.spellCheck,
+        spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+        _ref$teacherInstructi = _ref.teacherInstructions,
+        teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
+        _ref$withRubric = _ref.withRubric,
+        withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric;
+      var _ref2 = model || {},
+        choiceRationaleEnabled = _ref2.choiceRationaleEnabled,
+        choices = _ref2.choices,
+        errors = _ref2.errors,
+        promptEnabled = _ref2.promptEnabled,
+        rationaleEnabled = _ref2.rationaleEnabled,
+        spellCheckEnabled = _ref2.spellCheckEnabled,
+        teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+        toolbarEditorPosition = _ref2.toolbarEditorPosition;
+      var _ref3 = errors || {},
+        responseAreasError = _ref3.responseAreasError,
+        responseAreaChoicesError = _ref3.responseAreaChoicesError;
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+      var renderChoiceRationale = function renderChoiceRationale() {
+        return (Object.keys(choices) || []).map(function (key, index) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: key,
+            className: classes.rationaleChoices
+          }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
+            expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
+          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            className: classes.text
+          }, "Rationale for response area #".concat(index + 1))), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
+            className: classes.panelDetails
+          }, (choices[key] || []).map(function (choice) {
+            return /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+              key: choice.label,
+              label: /*#__PURE__*/_react["default"].createElement("span", {
+                className: classes.rationaleLabel,
+                dangerouslySetInnerHTML: {
+                  __html: "".concat(rationale.label, " for ").concat(choice.label, " (").concat(choice.correct ? 'correct' : 'incorrect', ")")
+                }
+              }),
+              className: classes.promptHolder
+            }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+              className: classes.prompt,
+              markup: choice.rationale || '',
+              spellCheck: spellCheckEnabled,
+              onChange: function onChange(c) {
+                return _this2.onChoiceRationaleChanged(key, _objectSpread(_objectSpread({}, choice), {}, {
+                  rationale: c
+                }));
+              },
+              imageSupport: imageSupport,
+              maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+              maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+              uploadSoundSupport: uploadSoundSupport
+            }));
+          }))));
+        });
+      };
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      var panelSettings = {
+        partialScoring: partialScoring.settings && toggle(partialScoring.label),
+        lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label)
+      };
+      var 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 || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.design
+      }, /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        hideSettings: settingsPanelDisabled,
+        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+          model: model,
+          configuration: configuration,
+          onChangeModel: function onChangeModel(model) {
+            return _this2.onModelChange(model);
+          },
+          onChangeConfiguration: function onChangeConfiguration(configuration) {
+            return onConfigurationChanged(configuration, true);
+          },
+          groups: {
+            Settings: panelSettings,
+            Properties: panelProperties
+          }
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: teacherInstructions.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        className: classes.prompt,
+        markup: model.teacherInstructions || '',
+        onChange: this.onTeacherInstructionsChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: prompt.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        className: classes.prompt,
+        markup: model.prompt,
+        onChange: this.onPromptChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        disableUnderline: true,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rationale.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        className: classes.prompt,
+        markup: model.rationale || '',
+        onChange: this.onRationaleChanged,
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.flexContainer
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.text
+      }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        classes: {
+          tooltip: classes.tooltip
+        },
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage
+      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+        fontSize: 'small',
+        color: 'primary'
+      }))), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        activePlugins: _editableHtml.ALL_PLUGINS,
+        toolbarOpts: {
+          position: 'top'
+        },
+        ref: function ref(_ref4) {
+          window.editorRef = _ref4;
+        },
+        responseAreaProps: {
+          type: 'inline-dropdown',
+          options: {
+            duplicates: true
+          },
+          maxResponseAreas: maxResponseAreas,
+          respAreaToolbar: function respAreaToolbar(node, nodePath, editor, onToolbarDone) {
+            var respAreaChoices = _this2.state.respAreaChoices;
+            return function () {
+              return /*#__PURE__*/_react["default"].createElement(_inlineDropdownToolbar["default"], {
+                onAddChoice: _this2.onAddChoice,
+                onCheck: _this2.onCheck,
+                onRemoveChoice: function onRemoveChoice(index) {
+                  return _this2.onRemoveChoice(node.data.index, index);
+                },
+                onSelectChoice: function onSelectChoice(index) {
+                  return _this2.onSelectChoice(node.data.index, index);
+                },
+                editor: editor,
+                node: node,
+                nodePath: nodePath,
+                onToolbarDone: onToolbarDone,
+                choices: respAreaChoices[node.data.index],
+                spellCheck: spellCheckEnabled,
+                uploadSoundSupport: uploadSoundSupport
+              });
+            };
+          }
+        },
+        spellCheck: spellCheckEnabled,
+        className: classes.markup,
+        markup: model.slateMarkup || '',
+        onChange: this.onChange,
+        imageSupport: imageSupport,
+        disableImageAlignmentButtons: true,
+        onBlur: this.onBlur,
+        disabled: false,
+        highlightShape: false,
+        error: responseAreasError,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreasError), responseAreaChoicesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreaChoicesError), /*#__PURE__*/_react["default"].createElement("br", null), choiceRationaleEnabled && renderChoiceRationale(), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: warning.open,
+        title: "Warning",
+        text: warning.text,
+        onClose: warning.onClose,
+        onConfirm: warning.onConfirm
+      }))));
+    }
+  }]);
+  return Main;
+}(_react["default"].Component);
+exports.Main = Main;
+(0, _defineProperty2["default"])(Main, "propTypes", {
+  configuration: _propTypes["default"].object.isRequired,
+  model: _propTypes["default"].object.isRequired,
+  disableSidePanel: _propTypes["default"].bool,
+  onModelChanged: _propTypes["default"].func.isRequired,
+  onConfigurationChanged: _propTypes["default"].func.isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  imageSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  })
+});
+var Styled = (0, _styles.withStyles)(styles)(Main);
+var _default = Styled;
+exports["default"] = _default;
+//# sourceMappingURL=main.js.map