@pie-element/inline-dropdown 3.7.0 → 3.7.1-beta.587

package/configure/lib/main.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -45,56 +45,43 @@ 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 _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+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 _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 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 _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 _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 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 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: {
@@ -130,16 +117,42 @@ 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: 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();
+  div.innerHTML = (htmlString || '').trim();
   return div;
 };
 
@@ -166,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
       }
     });
@@ -183,6 +196,15 @@ var Main = /*#__PURE__*/function (_React$Component) {
         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
@@ -193,6 +215,28 @@ var Main = /*#__PURE__*/function (_React$Component) {
         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);
@@ -226,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({
+                warning: {
+                  open: false
+                }
+              });
+            },
+            onConfirm: function onConfirm() {
               _this.setState({
-                dialog: {
+                warning: {
                   open: false
                 }
               }, function () {
@@ -240,13 +291,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
                   slateMarkup: domMarkup.innerHTML
                 });
               });
-            },
-            onCancel: function onCancel() {
-              return _this.setState({
-                dialog: {
-                  open: false
-                }
-              });
             }
           }
         });
@@ -259,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] = [];
@@ -268,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
                 }
               });
@@ -309,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
         });
       });
@@ -356,34 +421,115 @@ 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$teacherInstruct = _ref2.teacherInstructions,
-          teacherInstructions = _ref2$teacherInstruct === void 0 ? {} : _ref2$teacherInstruct;
-
-      var _ref3 = model || {},
-          rationaleEnabled = _ref3.rationaleEnabled,
-          promptEnabled = _ref3.promptEnabled,
-          teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled;
-
+          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,
@@ -394,15 +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),
-              promptEnabled: prompt.settings && toggle(prompt.label)
-            }
+            Settings: panelSettings,
+            Properties: panelProperties
           }
         })
       }, /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
@@ -413,7 +552,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
         markup: model.teacherInstructions || '',
         onChange: this.onTeacherInstructionsChanged,
         imageSupport: imageSupport,
-        nonEmpty: false
+        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
@@ -423,7 +572,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
         onChange: this.onPromptChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        disableUnderline: true
+        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
@@ -431,50 +590,95 @@ var Main = /*#__PURE__*/function (_React$Component) {
         className: classes.prompt,
         markup: model.rationale || '',
         onChange: this.onRationaleChanged,
-        imageSupport: imageSupport
-      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        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(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'
         },
+        ref: function ref(_ref4) {
+          window.editorRef = _ref4;
+        },
         responseAreaProps: {
           type: 'inline-dropdown',
           options: {
             duplicates: true
           },
-          respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
+          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.get('index'), index);
+                  return _this2.onRemoveChoice(node.data.index, index);
                 },
                 onSelectChoice: function onSelectChoice(index) {
-                  return _this2.onSelectChoice(node.data.get('index'), index);
+                  return _this2.onSelectChoice(node.data.index, index);
                 },
+                editor: editor,
                 node: node,
-                value: value,
+                nodePath: nodePath,
                 onToolbarDone: onToolbarDone,
-                choices: respAreaChoices[node.data.get('index')]
+                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
+        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
       }))));
     }
   }]);
@@ -492,6 +696,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);