@pie-element/explicit-constructed-response 3.12.2 → 3.12.5

package/module/configure.js

@@ -1,6 +1,6 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_material_ui__icons, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.3.1/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.22/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.22/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_material_ui__icons, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.8/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.2.7/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.31/module/index.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -494,7 +494,9 @@ const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
         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), "state", {
+        markup: ''
+      });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function () {
         var newValue = _this.state.markup;
         var _this$props = _this.props, node = _this$props.node, value = _this$props.value, onToolbarDone = _this$props.onToolbarDone, onChangeResponse = _this$props.onChangeResponse;
@@ -506,7 +508,7 @@ const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
         });
         var nextText = value.document.getNextText(node.key);
         change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-        onToolbarDone(change, false);
+        onToolbarDone(change, true);
         onChangeResponse(newValue);
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (e) {
@@ -559,7 +561,7 @@ const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
           },
           onChange: this.onChange,
           onBlur: this.onDone,
-          value: markup
+          value: markup || ''
         }));
       }
     }]);
@@ -655,13 +657,13 @@ const require$$9$2 = _dll_react;
 const require$$10$3 = _dll_prop_types;
 const {debounce: require$$11$3} = _dll_lodash;
 const {isEqual: require$$12$3} = _dll_lodash;
-const {max: require$$22} = _dll_lodash;
+const {max: require$$21} = _dll_lodash;
 const {OutlinedInput: require$$13$3} = _dll_material_ui__core;
 const {Button: require$$14$2} = _dll_material_ui__core;
 const {IconButton: require$$16$1} = _dll_material_ui__core;
 const {MenuItem: require$$17$1} = _dll_material_ui__core;
-const {Select: require$$18} = _dll_material_ui__core;
-const {TextField: require$$19} = _dll_material_ui__core;
+const {Select: require$$18$1} = _dll_material_ui__core;
+const {TextField: require$$19$1} = _dll_material_ui__core;
 const {Delete: require$$15$1} = _dll_material_ui__icons;
 const require$$20 = _dll_material_ui__core_styles;
 (function (exports) {
@@ -687,11 +689,11 @@ const require$$20 = _dll_material_ui__core_styles;
   var _Delete = _interopRequireDefault(require$$15$1);
   var _IconButton = _interopRequireDefault(require$$16$1);
   var _MenuItem = _interopRequireDefault(require$$17$1);
-  var _Select = _interopRequireDefault(require$$18);
-  var _TextField = _interopRequireDefault(require$$19);
+  var _Select = _interopRequireDefault(require$$18$1);
+  var _TextField = _interopRequireDefault(require$$19$1);
   var _styles = require$$20;
+  var _max = _interopRequireDefault(require$$21);
   var _markupUtils = markupUtils;
-  var _max = _interopRequireDefault(require$$22);
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
@@ -817,7 +819,7 @@ const require$$20 = _dll_material_ui__core_styles;
       key: "render",
       value: function render() {
         var value = this.state.value;
-        var _this$props = this.props, classes = _this$props.classes, onDelete = _this$props.onDelete;
+        var _this$props = this.props, classes = _this$props.classes, onDelete = _this$props.onDelete, spellCheck = _this$props.spellCheck;
         return _react["default"].createElement("div", {
           style: {
             alignItems: 'center',
@@ -829,7 +831,8 @@ const require$$20 = _dll_material_ui__core_styles;
           value: value,
           onChange: this.onChange,
           labelWidth: 0,
-          disableUnderline: true
+          disableUnderline: true,
+          spellCheck: spellCheck
         }), _react["default"].createElement(_IconButton["default"], {
           "aria-label": "delete",
           className: classes.deleteBtn,
@@ -894,12 +897,12 @@ const require$$20 = _dll_material_ui__core_styles;
           return (choice.label || '').length;
         });
         labelLengthsArr[index] = value.length;
-        var newLength = (0, _markupUtils.getAdjustedLength)(Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr)));
+        var newLength = Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));
         choiceChanged(_objectSpread(_objectSpread({}, choice), {}, {
           label: value
         }));
-        if (newLength > maxLength || newLength + 10 < maxLength) {
-          lengthChanged(newLength);
+        if (newLength > maxLength || newLength + 10 <= maxLength) {
+          lengthChanged((0, _markupUtils.getAdjustedLength)(newLength));
         }
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRemoveChoice", function (choice) {
@@ -914,7 +917,7 @@ const require$$20 = _dll_material_ui__core_styles;
         var labelLengthsArr = choices.map(function (choice) {
           return (choice.label || '').length;
         });
-        return (0, _markupUtils.getAdjustedLength)(Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr)));
+        return Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "changeLength", function (event) {
         var lengthChanged = _this2.props.lengthChanged;
@@ -940,7 +943,7 @@ const require$$20 = _dll_material_ui__core_styles;
       key: "render",
       value: function render() {
         var _this3 = this;
-        var _this$props2 = this.props, classes = _this$props2.classes, selectChoices = _this$props2.selectChoices, maxLength = _this$props2.maxLength, showMaxLength = _this$props2.showMaxLength, value = _this$props2.value;
+        var _this$props2 = this.props, classes = _this$props2.classes, selectChoices = _this$props2.selectChoices, maxLength = _this$props2.maxLength, showMaxLength = _this$props2.showMaxLength, value = _this$props2.value, spellCheck = _this$props2.spellCheck;
         var choices = this.state.choices;
         var minLength = this.getChoicesMaxLength();
         return _react["default"].createElement("div", {
@@ -989,7 +992,8 @@ const require$$20 = _dll_material_ui__core_styles;
             },
             onDelete: function onDelete() {
               return _this3.onRemoveChoice(c);
-            }
+            },
+            spellCheck: spellCheck
           });
         })));
       }
@@ -1206,7 +1210,7 @@ const {cloneDeep: require$$14$1} = _dll_lodash;
       value: function render() {
         var _this2 = this;
         var choices = this.state.choices;
-        var _this$props$model = this.props.model, maxLengthPerChoice = _this$props$model.maxLengthPerChoice, maxLengthPerChoiceEnabled = _this$props$model.maxLengthPerChoiceEnabled;
+        var _this$props2 = this.props, _this$props2$model = _this$props2.model, maxLengthPerChoice = _this$props2$model.maxLengthPerChoice, maxLengthPerChoiceEnabled = _this$props2$model.maxLengthPerChoiceEnabled, spellCheck = _this$props2.spellCheck;
         return _react["default"].createElement("div", null, (0, _map["default"])(choices, function (c, key) {
           if (c && (maxLengthPerChoiceEnabled || c.length > 1)) {
             var selected = _this2.state.values[key];
@@ -1228,7 +1232,8 @@ const {cloneDeep: require$$14$1} = _dll_lodash;
               selectChoices: [selected],
               choices: c,
               maxLength: maxLengthPerChoice[key],
-              showMaxLength: maxLengthPerChoiceEnabled
+              showMaxLength: maxLengthPerChoiceEnabled,
+              spellCheck: spellCheck
             });
           }
         }), choices && Object.keys(this.state.values).length !== Object.keys(choices).length && _react["default"].createElement(_alternateSection["default"], {
@@ -1242,7 +1247,8 @@ const {cloneDeep: require$$14$1} = _dll_lodash;
           choiceRemoved: function choiceRemoved(value) {
             return _this2.onChoiceRemoved(value);
           },
-          selectChoices: this.getRemainingChoices()
+          selectChoices: this.getRemainingChoices(),
+          spellCheck: spellCheck
         }));
       }
     }]);
@@ -1263,10 +1269,12 @@ const require$$10$1 = _dll_react;
 const require$$11$1 = _dll_prop_types;
 const {cloneDeep: require$$12$1} = _dll_lodash;
 const {isEmpty: require$$13$1} = _dll_lodash;
-const require$$16 = _dll_material_ui__core_styles;
-const {Typography: require$$17} = _dll_material_ui__core;
-const require$$14 = _dll_pie_lib__editable_html;
-const require$$15 = _dll_pie_lib__config_ui;
+const {pick: require$$14} = _dll_lodash;
+const {throttle: require$$15} = _dll_lodash;
+const require$$18 = _dll_material_ui__core_styles;
+const {Typography: require$$19} = _dll_material_ui__core;
+const require$$16 = _dll_pie_lib__editable_html;
+const require$$17 = _dll_pie_lib__config_ui;
 (function (exports) {
   var _interopRequireDefault = interopRequireDefault.exports;
   var _typeof$1 = _typeof.exports;
@@ -1286,10 +1294,12 @@ const require$$15 = _dll_pie_lib__config_ui;
   var _propTypes = _interopRequireDefault(require$$11$1);
   var _cloneDeep = _interopRequireDefault(require$$12$1);
   var _isEmpty = _interopRequireDefault(require$$13$1);
-  var _editableHtml = _interopRequireWildcard(require$$14);
-  var _configUi = require$$15;
-  var _styles = require$$16;
-  var _Typography = _interopRequireDefault(require$$17);
+  var _pick = _interopRequireDefault(require$$14);
+  var _throttle = _interopRequireDefault(require$$15);
+  var _editableHtml = _interopRequireWildcard(require$$16);
+  var _configUi = require$$17;
+  var _styles = require$$18;
+  var _Typography = _interopRequireDefault(require$$19);
   var _ecrToolbar = _interopRequireDefault(ecrToolbar);
   var _alternateResponses = _interopRequireDefault(alternateResponses);
   var _markupUtils = markupUtils;
@@ -1482,18 +1492,22 @@ const require$$15 = _dll_pie_lib__config_ui;
       });
       (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, maxLengthPerChoice = model.maxLengthPerChoice;
-        var newValLength = (0, _markupUtils.getAdjustedLength)((newVal || '').length);
+        var choices = model.choices;
+        var maxLengthPerChoice = model.maxLengthPerChoice;
+        var newValLength = (newVal || '').length;
         if (!choices[index]) {
           choices[index] = [{
-            label: '',
+            label: newVal || '',
             value: '0'
           }];
-          maxLengthPerChoice.splice(index, 0, newValLength);
-        }
-        choices[index][0].label = newVal || '';
-        if (maxLengthPerChoice && newVal && maxLengthPerChoice[index] < newValLength) {
-          maxLengthPerChoice[index] = newValLength;
+          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,
@@ -1501,7 +1515,7 @@ const require$$15 = _dll_pie_lib__config_ui;
         }));
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
-        var _this$props$model = _this.props.model, choices = _this$props$model.choices, maxLengthPerChoice = _this$props$model.maxLengthPerChoice;
+        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 = {};
@@ -1518,18 +1532,57 @@ const require$$15 = _dll_pie_lib__config_ui;
           allChoices[index] = newChoices;
           el.dataset.index = index;
         });
-        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-          choices: allChoices,
-          slateMarkup: domMarkup.innerHTML,
-          maxLengthPerChoice: updatedMaxLengthPerChoice
-        }));
+        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$props4 = this.props, _this$props4$model = _this$props4.model, slateMarkup = _this$props4$model.slateMarkup, choices = _this$props4$model.choices, _this$props4$model$ma = _this$props4$model.maxLengthPerChoice, maxLengthPerChoice = _this$props4$model$ma === void 0 ? [] : _this$props4$model$ma, onModelChanged = _this$props4.onModelChanged;
+        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
@@ -1538,9 +1591,9 @@ const require$$15 = _dll_pie_lib__config_ui;
           var labelLengthsArr = (choice || []).map(function (choice) {
             return (choice.label || '').length;
           });
-          var length = (0, _markupUtils.getAdjustedLength)(Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr)));
-          if (undefinedLengths || !maxLengthPerChoice[index] || maxLengthPerChoice[index] < length) {
-            maxLengthPerChoice[index] = 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), {}, {
@@ -1551,9 +1604,9 @@ const require$$15 = _dll_pie_lib__config_ui;
       key: "render",
       value: function render() {
         var _this2 = this;
-        var _this$props5 = this.props, classes = _this$props5.classes, model = _this$props5.model, configuration = _this$props5.configuration, onConfigurationChanged = _this$props5.onConfigurationChanged, imageSupport = _this$props5.imageSupport;
-        var _ref = configuration || ({}), _ref$prompt = _ref.prompt, prompt = _ref$prompt === void 0 ? {} : _ref$prompt, _ref$partialScoring = _ref.partialScoring, partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring, _ref$rationale = _ref.rationale, rationale = _ref$rationale === void 0 ? {} : _ref$rationale, _ref$teacherInstructi = _ref.teacherInstructions, teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi, _ref$maxLengthPerChoi = _ref.maxLengthPerChoice, maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi;
-        var _ref2 = model || ({}), teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled, promptEnabled = _ref2.promptEnabled, rationaleEnabled = _ref2.rationaleEnabled, maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled;
+        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;
+        var _ref = configuration || ({}), _ref$prompt = _ref.prompt, prompt = _ref$prompt === void 0 ? {} : _ref$prompt, _ref$partialScoring = _ref.partialScoring, partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring, _ref$rationale = _ref.rationale, rationale = _ref$rationale === void 0 ? {} : _ref$rationale, _ref$teacherInstructi = _ref.teacherInstructions, teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi, _ref$maxLengthPerChoi = _ref.maxLengthPerChoice, maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi, _ref$spellCheck = _ref.spellCheck, spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck;
+        var _ref2 = model || ({}), teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled, promptEnabled = _ref2.promptEnabled, rationaleEnabled = _ref2.rationaleEnabled, maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled, spellCheckEnabled = _ref2.spellCheckEnabled;
         var toolbarOpts = {};
         switch (model.toolbarEditorPosition) {
           case 'top':
@@ -1583,7 +1636,8 @@ const require$$15 = _dll_pie_lib__config_ui;
               Properties: {
                 teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
                 rationaleEnabled: rationale.settings && toggle(rationale.label),
-                promptEnabled: prompt.settings && toggle(prompt.label)
+                promptEnabled: prompt.settings && toggle(prompt.label),
+                spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label)
               }
             }
           })
@@ -1596,7 +1650,8 @@ const require$$15 = _dll_pie_lib__config_ui;
           onChange: this.onTeacherInstructionsChanged,
           imageSupport: imageSupport,
           nonEmpty: false,
-          toolbarOpts: toolbarOpts
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheckEnabled
         })), promptEnabled && _react["default"].createElement(_configUi.InputContainer, {
           label: prompt.label,
           className: classes.promptHolder
@@ -1607,7 +1662,8 @@ const require$$15 = _dll_pie_lib__config_ui;
           imageSupport: imageSupport,
           nonEmpty: false,
           disableUnderline: true,
-          toolbarOpts: toolbarOpts
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheckEnabled
         })), _react["default"].createElement(_Typography["default"], {
           className: classes.text
         }, "Define Template, Choices, and Correct Responses"), _react["default"].createElement(_editableHtml["default"], {
@@ -1615,6 +1671,7 @@ const require$$15 = _dll_pie_lib__config_ui;
           toolbarOpts: {
             position: 'top'
           },
+          spellCheck: spellCheckEnabled,
           responseAreaProps: {
             type: 'explicit-constructed-response',
             options: {
@@ -1634,7 +1691,8 @@ const require$$15 = _dll_pie_lib__config_ui;
                   correctChoice: correctChoice
                 });
               };
-            }
+            },
+            onHandleAreaChange: this.onHandleAreaChange
           },
           className: classes.markup,
           markup: model.slateMarkup,
@@ -1649,7 +1707,8 @@ const require$$15 = _dll_pie_lib__config_ui;
           model: model,
           onChange: this.onResponsesChanged,
           onLengthChange: this.onLengthChanged,
-          maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled
+          maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled,
+          spellCheck: spellCheckEnabled
         }), rationaleEnabled && _react["default"].createElement(_configUi.InputContainer, {
           label: rationale.label,
           className: classes.promptHolder
@@ -1658,7 +1717,8 @@ const require$$15 = _dll_pie_lib__config_ui;
           markup: model.rationale || '',
           onChange: this.onRationaleChanged,
           imageSupport: imageSupport,
-          toolbarOpts: toolbarOpts
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheckEnabled
         })))));
       }
     }]);
@@ -1697,6 +1757,7 @@ var defaults = {};
       markup: '<p>The {{0}} jumped {{1}} the {{2}}</p>',
       toolbarEditorPosition: 'bottom',
       displayType: 'block',
+      spellCheckEnabled: false,
       choices: {
         0: [{
           label: 'cow',
@@ -1749,6 +1810,11 @@ var defaults = {};
         settings: true,
         label: 'Rationale'
       },
+      spellCheck: {
+        label: "Spellcheck",
+        settings: true,
+        enabled: true
+      },
       teacherInstructions: {
         settings: true,
         label: 'Teacher Instructions'

package/module/controller.js

@@ -21223,10 +21223,15 @@ function model(question, session, env) {
     // calculate maxLengthPerChoice array if it is not defined or defined incorrectly
     Object.values(choices).forEach((choice, index) => {
       const labelLengthsArr = (choice || []).map(choice => (choice.label || '').length);
-      const length = getAdjustedLength(Math.max(...labelLengthsArr));
-
-      if (undefinedLengths || !maxLengthPerChoice[index] || maxLengthPerChoice[index] < length) {
-        maxLengthPerChoice[index] = length;
+      const length = Math.max(...labelLengthsArr);
+
+      if (
+        undefinedLengths
+        || !maxLengthPerChoice[index]
+        || maxLengthPerChoice[index] < length
+        || maxLengthPerChoice[index] > length + 10
+      ) {
+        maxLengthPerChoice[index] = getAdjustedLength(length);
       }
     });
 

package/module/demo.js

@@ -18,7 +18,7 @@ generate.model = (id, element) => ({
     1: [choice('over', '0'), choice('past', '1'), choice('beyond', '2')],
     2: [choice('moon', '0')]
   },
-  maxLengthPerChoice: [10, 11, 7],
+  maxLengthPerChoice: [7, 10, 4],
   prompt: 'Complete the sentence',
   note: 'The answer shown above is the most common correct answer for this item. One or more additional correct answers are also defined, and will also be recognized as correct.',
   promptEnabled: true,

package/module/element.js

@@ -1,6 +1,6 @@
-import {_dll_debug, _dll_lodash, _dll_react, _dll_react_dom_server, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_classnames, _dll_react_dom, _dll_pie_lib__render_ui, _dll_pie_lib__correct_answer_toggle} from "../../../@pie-lib/shared-module@^1.3.1/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.24/module/index.js";
-import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.22/module/index.js";
+import {_dll_debug, _dll_lodash, _dll_react, _dll_react_dom_server, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_classnames, _dll_react_dom, _dll_pie_lib__render_ui, _dll_pie_lib__correct_answer_toggle} from "../../../@pie-lib/shared-module@^1.4.8/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.33/module/index.js";
+import {_dll_pie_lib__drag} from "../../../@pie-lib/drag-module@^1.0.31/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 var lib$1 = {};
 Object.defineProperty(lib$1, "__esModule", {
@@ -12976,6 +12976,12 @@ const rules = [marks, {
       ...normalAttrs
     });
     const object = getObject(type);
+    if (el.tagName.toLowerCase() === 'math') {
+      return {
+        isMath: true,
+        nodes: [el]
+      };
+    }
     return {
       object,
       type,
@@ -13040,6 +13046,19 @@ const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode)
   const children = [];
   (layout.nodes || []).forEach((n, index) => {
     const key = `${n.type}-${index}`;
+    if (n.isMath) {
+      children.push(React$c.createElement('span', {
+        dangerouslySetInnerHTML: {
+          __html: `<math>${n.nodes[0].innerHTML}</math>`
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$b,
+          lineNumber: 49
+        }
+      }));
+      return children;
+    }
     if (rootRenderChildren) {
       const c = rootRenderChildren(n, value, onChange);
       if (c) {
@@ -13063,7 +13082,7 @@ const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode)
               __self: undefined,
               __source: {
                 fileName: _jsxFileName$b,
-                lineNumber: 70
+                lineNumber: 77
               }
             }, content));
             break;
@@ -13080,7 +13099,7 @@ const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode)
           __self: undefined,
           __source: {
             fileName: _jsxFileName$b,
-            lineNumber: 80
+            lineNumber: 87
           }
         }, subNodes));
       } else {
@@ -13092,7 +13111,7 @@ const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode)
             __self: undefined,
             __source: {
               fileName: _jsxFileName$b,
-              lineNumber: 85
+              lineNumber: 92
             }
           }, subNodes));
         } else {
@@ -13102,7 +13121,7 @@ const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode)
             __self: undefined,
             __source: {
               fileName: _jsxFileName$b,
-              lineNumber: 90
+              lineNumber: 97
             }
           }));
         }
@@ -13113,14 +13132,14 @@ const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode)
 };
 const MaskContainer = withStyles$5(() => ({
   main: {
-    display: 'inherit'
+    display: 'initial'
   }
 }))(props => React$c.createElement('div', {
   className: props.classes.main,
   __self: undefined,
   __source: {
     fileName: _jsxFileName$b,
-    lineNumber: 102
+    lineNumber: 109
   }
 }, props.children));
 class Mask extends React$c.Component {
@@ -13152,7 +13171,7 @@ class Mask extends React$c.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 124
+        lineNumber: 131
       }
     }, children);
   }
@@ -13402,6 +13421,7 @@ const useStyles = withStyles$3(() => ({
     minWidth: '90px',
     fontSize: 'inherit',
     minHeight: '32px',
+    height: 'auto',
     maxWidth: '374px',
     position: 'relative'
   },
@@ -13490,7 +13510,7 @@ class BlankContent extends React$8.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$7,
-          lineNumber: 115
+          lineNumber: 116
         }
       }, React$8.createElement('span', {
         className: classnames$1(classes.chipLabel, isOver && classes.over, {
@@ -13506,7 +13526,7 @@ class BlankContent extends React$8.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$7,
-          lineNumber: 116
+          lineNumber: 117
         }
       }, ' '), draggedLabel && React$8.createElement('span', {
         className: classnames$1(classes.chipLabel, isOver && classes.over, classes.dragged),
@@ -13520,7 +13540,7 @@ class BlankContent extends React$8.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$7,
-          lineNumber: 132
+          lineNumber: 133
         }
       }, ' ')),
       className: classnames$1(classes.chip, isOver && classes.over, {
@@ -13539,7 +13559,7 @@ class BlankContent extends React$8.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$7,
-        lineNumber: 108
+        lineNumber: 109
       }
     });
   }
@@ -13553,14 +13573,14 @@ const connectedBlankContent = useStyles(({connectDragSource, connectDropTarget,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$7,
-      lineNumber: 171
+      lineNumber: 172
     }
   }, React$8.createElement(StyledBlankContent, {
     ...props,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$7,
-      lineNumber: 172
+      lineNumber: 173
     }
   }))));
 });

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/explicit-constructed-response@3.12.1</title>
+      <title>@pie-element/explicit-constructed-response@3.12.4</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,18 +1,18 @@
 {
   "name": "@pie-element/explicit-constructed-response",
-  "version": "3.12.1",
+  "version": "3.12.4",
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.3.1"
+      "version": "^1.4.8"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.24"
+      "version": "^1.0.33"
     },
     {
       "name": "@pie-lib/drag-module",
-      "version": "^1.0.22"
+      "version": "^1.0.31"
     }
   ]
 }

package/module/print-demo.js

@@ -16,7 +16,7 @@ generate.model = (id, element) => ({
     1: [choice('over', '0'), choice('past', '1'), choice('beyond', '2')],
     2: [choice('moon', '0')]
   },
-  maxLengthPerChoice: [10, 11, 7],
+  maxLengthPerChoice: [7, 10, 4],
   prompt: 'Complete the sentence',
   note: 'The answer shown above is the most common correct answer for this item. One or more additional correct answers are also defined, and will also be recognized as correct.',
   promptEnabled: true,

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/explicit-constructed-response@3.12.1</title>
+      <title>@pie-element/explicit-constructed-response@3.12.4</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"