@pie-element/inline-dropdown 5.10.2-next.1 → 5.10.2-next.2

package/configure/lib/main.js

@@ -0,0 +1,737 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 = require("@pie-lib/pie-toolbox/editable-html");
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
+
+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 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,
+    dropdown = _configUi.settings.dropdown;
+
+var styles = function styles(theme) {
+  return {
+    promptHolder: {
+      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',
+      whiteSpace: 'break-spaces'
+    },
+    rationaleChoices: {
+      marginBottom: theme.spacing.unit * 2.5
+    },
+    responseArea: {
+      paddingBottom: 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
+    }
+  };
+};
+
+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, choiceIndex) {
+      var _respAreaChoices$inde;
+
+      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);
+      })) {
+        // show warning for duplicated answers
+        _this.setState({
+          warning: {
+            open: true,
+            text: 'Duplicate answers are not allowed.',
+            onClose: undefined,
+            onConfirm: function onConfirm() {
+              _this.setState({
+                warning: {
+                  open: false
+                }
+              });
+            }
+          }
+        });
+
+        return;
+      }
+
+      if (choiceIndex >= 0 && (_respAreaChoices$inde = respAreaChoices[index]) !== null && _respAreaChoices$inde !== void 0 && _respAreaChoices$inde[choiceIndex]) {
+        // we need to update the choice label with the new value
+        respAreaChoices[index][choiceIndex].label = label;
+      } else {
+        // add a new choice
+        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, _mathRenderingAccessible.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$baseInputConfigu = _ref.baseInputConfiguration,
+          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
+          _ref$choiceRationale = _ref.choiceRationale,
+          choiceRationale = _ref$choiceRationale === void 0 ? {} : _ref$choiceRationale,
+          _ref$contentDimension = _ref.contentDimensions,
+          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
+          _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$template = _ref.template,
+          template = _ref$template === void 0 ? {} : _ref$template,
+          _ref$withRubric = _ref.withRubric,
+          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
+          _ref$mathMlOptions = _ref.mathMlOptions,
+          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
+          _ref$language = _ref.language,
+          language = _ref$language === void 0 ? {} : _ref$language,
+          _ref$languageChoices = _ref.languageChoices,
+          languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices;
+
+      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 || {},
+          promptError = _ref3.prompt,
+          rationaleError = _ref3.rationale,
+          responseAreasError = _ref3.responseAreasError,
+          responseAreaChoicesError = _ref3.responseAreaChoicesError,
+          teacherInstructionsError = _ref3.teacherInstructions;
+
+      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.EditableHtml, {
+              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,
+              mathMlOptions: mathMlOptions
+            }));
+          }))));
+        });
+      };
+
+      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),
+        'language.enabled': language.settings && toggle(language.label, true),
+        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+      };
+      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)
+      };
+
+      var getPluginProps = function getPluginProps() {
+        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
+      };
+
+      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        dimensions: contentDimensions,
+        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
+          }
+        })
+      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: teacherInstructions.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.teacherInstructions || '',
+        onChange: this.onTeacherInstructionsChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        error: teacherInstructionsError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? 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["default"].createElement("div", {
+        className: classes.errorText
+      }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: prompt.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.prompt,
+        onChange: this.onPromptChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        disableUnderline: true,
+        error: promptError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.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("div", {
+        className: classes.responseArea
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration),
+        activePlugins: _editableHtml.ALL_PLUGINS,
+        toolbarOpts: {
+          position: 'top'
+        },
+        responseAreaProps: {
+          type: 'inline-dropdown',
+          options: {
+            duplicates: true
+          },
+          maxResponseAreas: maxResponseAreas,
+          respAreaToolbar: function respAreaToolbar(node, value, 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.get('index'), index);
+                },
+                onSelectChoice: function onSelectChoice(index) {
+                  return _this2.onSelectChoice(node.data.get('index'), index);
+                },
+                node: node,
+                value: value,
+                onToolbarDone: onToolbarDone,
+                choices: respAreaChoices[node.data.get('index')],
+                spellCheck: spellCheckEnabled,
+                uploadSoundSupport: uploadSoundSupport,
+                mathMlOptions: mathMlOptions
+              });
+            };
+          }
+        },
+        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
+      }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreasError), responseAreaChoicesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreaChoicesError)), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rationale.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.rationale || '',
+        onChange: this.onRationaleChanged,
+        imageSupport: imageSupport,
+        error: rationaleError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? 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["default"].createElement("div", {
+        className: classes.errorText
+      }, rationaleError)), /*#__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