@pie-element/inline-dropdown 3.10.0 → 3.10.1-beta.1443

package/configure/lib/main.js

@@ -45,15 +45,11 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _reduce = _interopRequireDefault(require("lodash/reduce"));
 
-var _styles = require("@material-ui/core/styles");
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _max = _interopRequireDefault(require("lodash/max"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _styles = require("@material-ui/core/styles");
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
@@ -65,17 +61,19 @@ var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
 var _inlineDropdownToolbar = _interopRequireDefault(require("./inline-dropdown-toolbar"));
 
-var _max = _interopRequireDefault(require("lodash/max"));
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 
@@ -84,29 +82,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var toggle = _configUi.settings.toggle,
     Panel = _configUi.settings.Panel;
 
-var InfoDialog = function InfoDialog(_ref) {
-  var open = _ref.open,
-      onCancel = _ref.onCancel,
-      onOk = _ref.onOk,
-      title = _ref.title;
-  return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
-    open: open
-  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, title), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, onOk && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    onClick: onOk,
-    color: "primary"
-  }, "OK"), onCancel && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    onClick: onCancel,
-    color: "primary"
-  }, "Cancel")));
-};
-
-InfoDialog.propTypes = {
-  open: _propTypes["default"].bool,
-  onCancel: _propTypes["default"].func,
-  onOk: _propTypes["default"].func,
-  title: _propTypes["default"].string
-};
-
 var styles = function styles(theme) {
   return {
     promptHolder: {
@@ -142,19 +117,35 @@ var styles = function styles(theme) {
     },
     text: {
       fontFamily: 'Cerebri Sans',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize + 2,
       lineHeight: '19px',
-      color: '#495B8F'
+      color: '#495B8F',
+      marginRight: theme.spacing.unit
     },
     rationaleLabel: {
       display: 'flex',
       whiteSpace: 'break-spaces'
     },
     rationaleChoices: {
-      marginTop: '16px'
+      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
     }
   };
 };
@@ -188,7 +179,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      dialog: {
+      warning: {
         open: false
       }
     });
@@ -226,22 +217,22 @@ var Main = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (callback) {
       _this.setState({
-        dialog: {
+        warning: {
           open: true,
-          message: 'Response areas with under 2 options or with no correct answers will be discarded',
-          onOk: function onOk() {
+          text: 'Response areas with under 2 options or with no correct answers will be discarded.',
+          onClose: function onClose() {
             _this.setState({
-              dialog: {
+              warning: {
                 open: false
               }
-            }, callback);
+            });
           },
-          onCancel: function onCancel() {
-            return _this.setState({
-              dialog: {
+          onConfirm: function onConfirm() {
+            _this.setState({
+              warning: {
                 open: false
               }
-            });
+            }, callback);
           }
         }
       });
@@ -279,12 +270,19 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
       if (shouldWarn) {
         _this.setState({
-          dialog: {
+          warning: {
             open: true,
-            message: 'Response areas with under 2 options or with no correct answers will be discarded',
-            onOk: function onOk() {
+            text: 'Response areas with under 2 options or with no correct answers will be discarded.',
+            onClose: function onClose() {
               _this.setState({
-                dialog: {
+                warning: {
+                  open: false
+                }
+              });
+            },
+            onConfirm: function onConfirm() {
+              _this.setState({
+                warning: {
                   open: false
                 }
               }, function () {
@@ -293,13 +291,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
                   slateMarkup: domMarkup.innerHTML
                 });
               });
-            },
-            onCancel: function onCancel() {
-              return _this.setState({
-                dialog: {
-                  open: false
-                }
-              });
             }
           }
         });
@@ -312,6 +303,26 @@ var Main = /*#__PURE__*/function (_React$Component) {
     });
     (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] = [];
@@ -321,12 +332,13 @@ var Main = /*#__PURE__*/function (_React$Component) {
         return prepareVal(r.label) === prepareVal(label);
       })) {
         _this.setState({
-          dialog: {
+          warning: {
             open: true,
-            message: 'Duplicate answers are not allowed.',
-            onOk: function onOk() {
+            text: 'Duplicate answers are not allowed.',
+            onClose: undefined,
+            onConfirm: function onConfirm() {
               _this.setState({
-                dialog: {
+                warning: {
                   open: false
                 }
               });
@@ -362,8 +374,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelectChoice", function (respIndex, selectedIndex) {
       var respAreaChoices = _this.state.respAreaChoices;
-      respAreaChoices[respIndex] = respAreaChoices[respIndex].map(function (ch, index) {
-        return _objectSpread(_objectSpread({}, ch), {}, {
+      respAreaChoices[respIndex] = respAreaChoices[respIndex].map(function (choice, index) {
+        return _objectSpread(_objectSpread({}, choice), {}, {
           correct: index === selectedIndex
         });
       });
@@ -409,37 +421,58 @@ var Main = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var dialog = this.state.dialog;
+      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;
-
-      var _ref2 = configuration || {},
-          _ref2$prompt = _ref2.prompt,
-          prompt = _ref2$prompt === void 0 ? {} : _ref2$prompt,
-          _ref2$partialScoring = _ref2.partialScoring,
-          partialScoring = _ref2$partialScoring === void 0 ? {} : _ref2$partialScoring,
-          _ref2$lockChoiceOrder = _ref2.lockChoiceOrder,
-          lockChoiceOrder = _ref2$lockChoiceOrder === void 0 ? {} : _ref2$lockChoiceOrder,
-          _ref2$rationale = _ref2.rationale,
-          rationale = _ref2$rationale === void 0 ? {} : _ref2$rationale,
-          _ref2$choiceRationale = _ref2.choiceRationale,
-          choiceRationale = _ref2$choiceRationale === void 0 ? {} : _ref2$choiceRationale,
-          _ref2$teacherInstruct = _ref2.teacherInstructions,
-          teacherInstructions = _ref2$teacherInstruct === void 0 ? {} : _ref2$teacherInstruct;
-
-      var _ref3 = model || {},
-          rationaleEnabled = _ref3.rationaleEnabled,
-          choiceRationaleEnabled = _ref3.choiceRationaleEnabled,
-          promptEnabled = _ref3.promptEnabled,
-          teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled,
-          choices = _ref3.choices;
+          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) {
+        return (Object.keys(choices) || []).map(function (key, index) {
           return /*#__PURE__*/_react["default"].createElement("div", {
             key: key,
             className: classes.rationaleChoices
@@ -447,7 +480,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
             expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
           }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.text
-          }, "Rationale for response area #".concat(parseInt(key) + 1))), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
+          }, "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, {
@@ -462,32 +495,41 @@ var Main = /*#__PURE__*/function (_React$Component) {
             }, /*#__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
+              imageSupport: imageSupport,
+              maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+              maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+              uploadSoundSupport: uploadSoundSupport
             }));
           }))));
         });
       };
 
-      var toolbarOpts = {};
-
-      switch (model.toolbarEditorPosition) {
-        case 'top':
-          toolbarOpts.position = 'top';
-          break;
-
-        default:
-          toolbarOpts.position = 'bottom';
-          break;
-      }
-
+      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,
@@ -498,16 +540,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
             return 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),
-              choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
-              promptEnabled: prompt.settings && toggle(prompt.label)
-            }
+            Settings: panelSettings,
+            Properties: panelProperties
           }
         })
       }, /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
@@ -519,7 +553,16 @@ var Main = /*#__PURE__*/function (_React$Component) {
         onChange: this.onTeacherInstructionsChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        toolbarOpts: toolbarOpts
+        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
@@ -530,7 +573,16 @@ var Main = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         nonEmpty: false,
         disableUnderline: true,
-        toolbarOpts: toolbarOpts
+        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
@@ -539,15 +591,32 @@ var Main = /*#__PURE__*/function (_React$Component) {
         markup: model.rationale || '',
         onChange: this.onRationaleChanged,
         imageSupport: imageSupport,
-        toolbarOpts: toolbarOpts
-      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        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(InfoDialog, {
-        open: dialog.open,
-        title: dialog.message,
-        onCancel: dialog.onCancel,
-        onOk: dialog.onOk
-      }), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+      }, "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'
@@ -557,6 +626,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
           options: {
             duplicates: true
           },
+          maxResponseAreas: maxResponseAreas,
           respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
             var respAreaChoices = _this2.state.respAreaChoices;
             return function () {
@@ -572,19 +642,40 @@ var Main = /*#__PURE__*/function (_React$Component) {
                 node: node,
                 value: value,
                 onToolbarDone: onToolbarDone,
-                choices: respAreaChoices[node.data.get('index')]
+                choices: respAreaChoices[node.data.get('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
-      }), /*#__PURE__*/_react["default"].createElement("br", null), choiceRationaleEnabled && renderChoiceRationale())));
+        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;
@@ -601,6 +692,10 @@ exports.Main = Main;
   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);