@pie-element/explicit-constructed-response 6.12.1-next.1 → 6.12.1-next.2

package/configure/lib/main.js

@@ -0,0 +1,611 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Main = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _ecrToolbar = _interopRequireDefault(require("./ecr-toolbar"));
+
+var _alternateResponses = _interopRequireDefault(require("./alternateResponses"));
+
+var _markupUtils = require("./markupUtils");
+
+var _utils = require("./utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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',
+      paddingTop: theme.spacing.unit,
+      width: '100%',
+      '& [data-slate-editor="true"]': {
+        minHeight: '100px'
+      }
+    },
+    choiceConfiguration: {
+      paddingTop: theme.spacing.unit * 2,
+      paddingBottom: theme.spacing.unit * 2
+    },
+    switchElement: {
+      justifyContent: 'space-between',
+      margin: 0
+    },
+    addButton: {
+      "float": 'right'
+    },
+    text: {
+      fontSize: theme.typography.fontSize + 2
+    },
+    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
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'end'
+    },
+    responseHeader: {
+      marginTop: theme.spacing.unit * 3,
+      marginBottom: theme.spacing.unit
+    }
+  };
+};
+
+var createElementFromHTML = function createElementFromHTML(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+  return div;
+};
+
+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", {});
+    (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.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+        prompt: prompt
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
+      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+        rationale: rationale
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
+      var _this$props = _this.props,
+          model = _this$props.model,
+          onModelChanged = _this$props.onModelChanged;
+      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+        teacherInstructions: teacherInstructions
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMarkupChanged", function (slateMarkup) {
+      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+        slateMarkup: slateMarkup
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponsesChanged", function (choices) {
+      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+        choices: choices
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLengthChanged", function (maxLengthPerChoice) {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onModelChanged = _this$props2.onModelChanged;
+      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+        maxLengthPerChoice: maxLengthPerChoice
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeResponse", function (index, newVal) {
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
+      var choices = model.choices;
+      var maxLengthPerChoice = model.maxLengthPerChoice;
+      var newValLength = (newVal || '').length;
+
+      if (!choices[index]) {
+        choices[index] = [{
+          label: newVal || '',
+          value: '0'
+        }]; // add default values for missing choices up to the new index position
+
+        var nbOfMissingChoices = index > maxLengthPerChoice.length ? index - maxLengthPerChoice.length : 0;
+        maxLengthPerChoice = [].concat((0, _toConsumableArray2["default"])(maxLengthPerChoice), (0, _toConsumableArray2["default"])(Array(nbOfMissingChoices).fill(1)));
+        maxLengthPerChoice.splice(index, 0, (0, _markupUtils.getAdjustedLength)(newValLength));
+      } else {
+        choices[index][0].label = newVal || '';
+
+        if (maxLengthPerChoice && (maxLengthPerChoice[index] < newValLength || maxLengthPerChoice[index] > newValLength + 10)) {
+          maxLengthPerChoice[index] = (0, _markupUtils.getAdjustedLength)(newValLength);
+        }
+      }
+
+      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+        choices: choices,
+        maxLengthPerChoice: maxLengthPerChoice
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
+      var _this$props4 = _this.props,
+          _this$props4$model = _this$props4.model,
+          choices = _this$props4$model.choices,
+          maxLengthPerChoice = _this$props4$model.maxLengthPerChoice,
+          onModelChanged = _this$props4.onModelChanged;
+      var domMarkup = createElementFromHTML(markup);
+      var allRespAreas = domMarkup.querySelectorAll('[data-type="explicit_constructed_response"]');
+      var allChoices = {};
+      var updatedMaxLengthPerChoice = [];
+      allRespAreas.forEach(function (el, index) {
+        var newChoices = (0, _cloneDeep["default"])(choices[el.dataset.index]);
+
+        if (newChoices) {
+          newChoices[0] = {
+            label: el.dataset.value || '',
+            value: '0'
+          };
+          updatedMaxLengthPerChoice[index] = maxLengthPerChoice[el.dataset.index];
+        }
+
+        allChoices[index] = newChoices;
+        el.dataset.index = index;
+      });
+
+      var callback = function callback() {
+        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: allChoices,
+          slateMarkup: domMarkup.innerHTML,
+          maxLengthPerChoice: updatedMaxLengthPerChoice
+        }));
+      };
+
+      _this.setState({
+        cachedChoices: undefined
+      }, callback);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHandleAreaChange", (0, _throttle["default"])(function (nodes) {
+      var _this$props5 = _this.props,
+          choices = _this$props5.model.choices,
+          onModelChanged = _this$props5.onModelChanged;
+      var cachedChoices = _this.state.cachedChoices;
+
+      if (!nodes) {
+        return;
+      }
+
+      var newChoices = choices ? (0, _cloneDeep["default"])(choices) : {};
+      var newCachedChoices = cachedChoices ? (0, _cloneDeep["default"])(cachedChoices) : {};
+      nodes.forEach(function (node) {
+        var keyForNode = node.data.get('index');
+
+        if (!newChoices[keyForNode] && newCachedChoices[keyForNode]) {
+          Object.assign(newChoices, (0, _pick["default"])(newCachedChoices, keyForNode));
+
+          if (newCachedChoices.hasOwnProperty(keyForNode)) {
+            delete newCachedChoices[keyForNode];
+          }
+        } else {
+          Object.assign(newCachedChoices, (0, _pick["default"])(newChoices, keyForNode));
+
+          if (newChoices.hasOwnProperty(keyForNode)) {
+            delete newChoices[keyForNode];
+          }
+        }
+      });
+
+      var callback = function callback() {
+        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: newChoices
+        }));
+      };
+
+      _this.setState({
+        cachedChoices: newCachedChoices
+      }, callback);
+    }, 500, {
+      trailing: false,
+      leading: true
+    }));
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Main, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props6 = this.props,
+          _this$props6$model = _this$props6.model,
+          slateMarkup = _this$props6$model.slateMarkup,
+          choices = _this$props6$model.choices,
+          _this$props6$model$ma = _this$props6$model.maxLengthPerChoice,
+          maxLengthPerChoice = _this$props6$model$ma === void 0 ? [] : _this$props6$model$ma,
+          onModelChanged = _this$props6.onModelChanged;
+      var undefinedLengths = !maxLengthPerChoice.length;
+      this.setState({
+        markup: slateMarkup
+      }); // calculate maxLengthPerChoice array if it is not defined or defined incorrectly
+
+      Object.values(choices).forEach(function (choice, index) {
+        var labelLengthsArr = (choice || []).map(function (choice) {
+          return (choice.label || '').length;
+        });
+        var length = Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));
+
+        if (undefinedLengths || !maxLengthPerChoice[index] || maxLengthPerChoice[index] < length || maxLengthPerChoice[index] > length + 10) {
+          maxLengthPerChoice[index] = (0, _markupUtils.getAdjustedLength)(length);
+        }
+      });
+      onModelChanged(_objectSpread(_objectSpread({}, this.props.model), {}, {
+        maxLengthPerChoice: maxLengthPerChoice
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props7 = this.props,
+          classes = _this$props7.classes,
+          model = _this$props7.model,
+          configuration = _this$props7.configuration,
+          onConfigurationChanged = _this$props7.onConfigurationChanged,
+          imageSupport = _this$props7.imageSupport,
+          uploadSoundSupport = _this$props7.uploadSoundSupport;
+
+      var _ref = configuration || {},
+          _ref$baseInputConfigu = _ref.baseInputConfiguration,
+          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
+          _ref$contentDimension = _ref.contentDimensions,
+          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+          _ref$maxLengthPerChoi = _ref.maxLengthPerChoice,
+          maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi,
+          maxResponseAreas = _ref.maxResponseAreas,
+          _ref$partialScoring = _ref.partialScoring,
+          partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
+          _ref$playerSpellCheck = _ref.playerSpellCheck,
+          playerSpellCheck = _ref$playerSpellCheck === void 0 ? {} : _ref$playerSpellCheck,
+          _ref$prompt = _ref.prompt,
+          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
+          _ref$rationale = _ref.rationale,
+          rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
+          _ref$template = _ref.template,
+          template = _ref$template === void 0 ? {} : _ref$template,
+          settingsPanelDisabled = _ref.settingsPanelDisabled,
+          _ref$spellCheck = _ref.spellCheck,
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+          _ref$editSource = _ref.editSource,
+          editSource = _ref$editSource === void 0 ? {} : _ref$editSource,
+          _ref$teacherInstructi = _ref.teacherInstructions,
+          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
+          _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 || {},
+          errors = _ref2.errors,
+          maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled,
+          promptEnabled = _ref2.promptEnabled,
+          rationaleEnabled = _ref2.rationaleEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
+          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+          toolbarEditorPosition = _ref2.toolbarEditorPosition;
+
+      var _ref3 = errors || {},
+          _ref3$choices = _ref3.choices,
+          choicesErrors = _ref3$choices === void 0 ? {} : _ref3$choices,
+          promptError = _ref3.prompt,
+          rationaleError = _ref3.rationale,
+          responseAreasError = _ref3.responseAreas,
+          teacherInstructionsError = _ref3.teacherInstructions;
+
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+      var panelSettings = {
+        partialScoring: partialScoring.settings && toggle(partialScoring.label),
+        maxLengthPerChoiceEnabled: maxLengthPerChoice.settings && toggle(maxLengthPerChoice.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),
+        promptEnabled: prompt.settings && toggle(prompt.label),
+        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+        playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
+        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label),
+        'editSource.enabled': (editSource === null || editSource === void 0 ? void 0 : editSource.settings) && toggle(editSource.label, true)
+      };
+
+      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',
+        style: {
+          marginLeft: '8px'
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        activePlugins: _editableHtml.ALL_PLUGINS,
+        toolbarOpts: {
+          position: 'top'
+        },
+        spellCheck: spellCheckEnabled,
+        pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration),
+        responseAreaProps: {
+          type: 'explicit-constructed-response',
+          options: {
+            duplicates: true
+          },
+          maxResponseAreas: maxResponseAreas,
+          respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
+            var model = _this2.props.model;
+            var correctChoice = (model.choices[node.data.get('index')] || [])[0];
+            return function () {
+              return /*#__PURE__*/_react["default"].createElement(_ecrToolbar["default"], {
+                onChangeResponse: function onChangeResponse(newVal) {
+                  return _this2.onChangeResponse(node.data.get('index'), newVal);
+                },
+                node: node,
+                value: value,
+                onToolbarDone: onToolbarDone,
+                correctChoice: correctChoice,
+                maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled
+              });
+            };
+          },
+          error: function error() {
+            return choicesErrors;
+          },
+          onHandleAreaChange: this.onHandleAreaChange
+        },
+        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'
+        }],
+        mathMlOptions: mathMlOptions
+      }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreasError), !(0, _isEmpty["default"])(model.choices) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: (0, _classnames["default"])(classes.text, classes.responseHeader)
+      }, "Define Alternates ".concat(maxLengthPerChoiceEnabled ? 'and Character Limits' : '')), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
+        model: model,
+        onChange: this.onResponsesChanged,
+        onLengthChange: this.onLengthChanged,
+        maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled,
+        spellCheck: spellCheckEnabled,
+        choicesErrors: choicesErrors
+      }), 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)));
+    }
+  }]);
+  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"].object
+});
+var Styled = (0, _styles.withStyles)(styles)(Main);
+var _default = Styled;
+exports["default"] = _default;
+//# sourceMappingURL=main.js.map