@pie-element/explicit-constructed-response 3.9.0 → 3.9.3-next.1014

package/configure/lib/main.js

@@ -1,14 +1,16 @@
 "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
 });
 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"));
@@ -31,6 +33,10 @@ 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 = _interopRequireWildcard(require("@pie-lib/editable-html"));
 
 var _configUi = require("@pie-lib/config-ui");
@@ -39,17 +45,29 @@ 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"));
 
-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; }
+var _markupUtils = require("./markupUtils");
 
-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; }
+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); 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;
@@ -93,6 +111,20 @@ var styles = function styles(theme) {
       fontSize: '16px',
       lineHeight: '19px',
       marginTop: theme.spacing.unit * 4
+    },
+    tooltip: {
+      fontSize: '12px',
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      padding: '5px 0'
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'end'
     }
   };
 };
@@ -150,70 +182,167 @@ var Main = /*#__PURE__*/function (_React$Component) {
         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 choices = _this.props.model.choices;
+      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: '',
+          label: newVal || '',
           value: '0'
-        }];
-      }
+        }]; // add default values for missing choices up to the new index position
 
-      choices[index][0].label = newVal || '';
+        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 || '';
 
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        choices: choices
+        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 choices = _this.props.model.choices;
+      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) {
-        el.dataset.index = index;
-      });
-      allRespAreas.forEach(function (el, index) {
-        var newChoices = (0, _cloneDeep["default"])(Object.values(choices)[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[el.dataset.index] = newChoices;
+        allChoices[index] = newChoices;
+        el.dataset.index = index;
       });
 
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        choices: allChoices,
-        slateMarkup: domMarkup.innerHTML
-      }));
+      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 slateMarkup = this.props.model.slateMarkup;
+      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$props2 = this.props,
-          classes = _this$props2.classes,
-          model = _this$props2.model,
-          configuration = _this$props2.configuration,
-          onConfigurationChanged = _this$props2.onConfigurationChanged,
-          imageSupport = _this$props2.imageSupport;
+      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,
@@ -223,12 +352,47 @@ var Main = /*#__PURE__*/function (_React$Component) {
           _ref$rationale = _ref.rationale,
           rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
           _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi;
+          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,
+          _ref$playerSpellCheck = _ref.playerSpellCheck,
+          playerSpellCheck = _ref$playerSpellCheck === void 0 ? {} : _ref$playerSpellCheck,
+          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;
 
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
           promptEnabled = _ref2.promptEnabled,
-          rationaleEnabled = _ref2.rationaleEnabled;
+          rationaleEnabled = _ref2.rationaleEnabled,
+          maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
+          errors = _ref2.errors;
+
+      var toolbarOpts = {};
+
+      var _ref3 = errors || {},
+          responseAreasError = _ref3.responseAreasError,
+          _ref3$choicesErrors = _ref3.choicesErrors,
+          choicesErrors = _ref3$choicesErrors === void 0 ? {} : _ref3$choicesErrors;
+
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+      switch (model.toolbarEditorPosition) {
+        case 'top':
+          toolbarOpts.position = 'top';
+          break;
+
+        default:
+          toolbarOpts.position = 'bottom';
+          break;
+      }
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.design
@@ -244,12 +408,15 @@ var Main = /*#__PURE__*/function (_React$Component) {
           },
           groups: {
             Settings: {
-              partialScoring: partialScoring.settings && toggle(partialScoring.label)
+              partialScoring: partialScoring.settings && toggle(partialScoring.label),
+              maxLengthPerChoiceEnabled: maxLengthPerChoice.settings && toggle(maxLengthPerChoice.label)
             },
             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),
+              playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label)
             }
           }
         })
@@ -261,7 +428,11 @@ 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
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: prompt.label,
         className: classes.promptHolder
@@ -271,19 +442,43 @@ var Main = /*#__PURE__*/function (_React$Component) {
         onChange: this.onPromptChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        disableUnderline: true
-      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        disableUnderline: true,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight
+      })), /*#__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(_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',
+        style: {
+          marginLeft: '5px'
+        }
+      }))), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreasError), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         activePlugins: _editableHtml.ALL_PLUGINS,
         toolbarOpts: {
           position: 'top'
         },
+        spellCheck: spellCheckEnabled,
         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];
@@ -298,7 +493,11 @@ var Main = /*#__PURE__*/function (_React$Component) {
                 correctChoice: correctChoice
               });
             };
-          }
+          },
+          error: function error() {
+            return choicesErrors;
+          },
+          onHandleAreaChange: this.onHandleAreaChange
         },
         className: classes.markup,
         markup: model.slateMarkup,
@@ -306,12 +505,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         onBlur: this.onBlur,
         disabled: false,
-        highlightShape: false
+        highlightShape: false,
+        error: responseAreasError
       }), !(0, _isEmpty["default"])(model.choices) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.text
-      }, "Define Alternates"), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
+      }, "Define Alternates ".concat(maxLengthPerChoiceEnabled ? 'and Character Limits' : '')), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
         model: model,
-        onChange: this.onResponsesChanged
+        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
@@ -319,7 +523,11 @@ var Main = /*#__PURE__*/function (_React$Component) {
         className: classes.prompt,
         markup: model.rationale || '',
         onChange: this.onRationaleChanged,
-        imageSupport: imageSupport
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight
       })))));
     }
   }]);

package/configure/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["toggle","settings","Panel","styles","theme","promptHolder","width","paddingBottom","spacing","unit","marginBottom","prompt","paddingTop","markup","minHeight","design","choiceConfiguration","switchElement","justifyContent","margin","addButton","text","color","fontFamily","fontSize","lineHeight","marginTop","createElementFromHTML","htmlString","div","document","createElement","innerHTML","trim","Main","newVal","props","onModelChanged","model","rationale","teacherInstructions","slateMarkup","choices","index","label","value","domMarkup","allRespAreas","querySelectorAll","allChoices","forEach","el","dataset","newChoices","Object","values","setState","classes","configuration","onConfigurationChanged","imageSupport","partialScoring","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","onModelChange","Settings","Properties","onTeacherInstructionsChanged","onPromptChanged","ALL_PLUGINS","position","type","options","duplicates","respAreaToolbar","node","onToolbarDone","correctChoice","data","get","onChangeResponse","onChange","onBlur","onResponsesChanged","onRationaleChanged","React","Component","PropTypes","object","isRequired","disableSidePanel","bool","func","shape","add","Styled"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEmpty from 'lodash/isEmpty';\nimport EditableHtml, { ALL_PLUGINS } from '@pie-lib/editable-html';\nimport { InputContainer, layout, settings } from '@pie-lib/config-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\n\nconst { toggle, Panel } = settings;\nimport ECRToolbar from './ecr-toolbar';\nimport AlternateResponses from './alternateResponses';\n\nconst styles = theme => ({\n  promptHolder: {\n    width: '100%',\n    paddingBottom: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  markup: {\n    minHeight: '100px',\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%',\n    '& [data-slate-editor=\"true\"]': {\n      minHeight: '100px'\n    }\n  },\n  design: {\n    paddingTop: theme.spacing.unit * 3\n  },\n  choiceConfiguration: {\n    paddingTop: theme.spacing.unit * 2,\n    paddingBottom: theme.spacing.unit * 2\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 0\n  },\n  addButton: {\n    float: 'right'\n  },\n  text: {\n    color: '#495B8F',\n    fontFamily: 'Cerebri Sans',\n    fontSize: '16px',\n    lineHeight: '19px',\n    marginTop: theme.spacing.unit * 4\n  }\n});\n\nconst createElementFromHTML = htmlString => {\n  const div = document.createElement('div');\n\n  div.innerHTML = htmlString.trim();\n\n  return div;\n};\n\nexport class Main extends React.Component {\n  static propTypes = {\n    configuration: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    disableSidePanel: PropTypes.bool,\n    onModelChanged: PropTypes.func.isRequired,\n    onConfigurationChanged: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    })\n  };\n\n  state = {};\n\n  componentDidMount() {\n    const {\n      model: { slateMarkup }\n    } = this.props;\n\n    this.setState({\n      markup: slateMarkup\n    });\n  }\n\n  onModelChange = newVal => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      ...newVal\n    });\n  };\n\n  onPromptChanged = prompt => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      prompt\n    });\n  };\n\n  onRationaleChanged = rationale => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      rationale\n    });\n  };\n\n  onTeacherInstructionsChanged = teacherInstructions => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions\n    });\n  };\n\n  onMarkupChanged = slateMarkup => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      slateMarkup\n    });\n  };\n\n  onResponsesChanged = choices => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      choices\n    });\n  };\n\n  onChangeResponse = (index, newVal) => {\n    const {\n      model: { choices }\n    } = this.props;\n\n    if (!choices[index]) {\n      choices[index] = [{ label: '', value: '0' }];\n    }\n\n    choices[index][0].label = newVal || '';\n\n    this.props.onModelChanged({\n      ...this.props.model,\n      choices\n    });\n  };\n\n  onChange = markup => {\n    const {\n      model: { choices }\n    } = this.props;\n    const domMarkup = createElementFromHTML(markup);\n    const allRespAreas = domMarkup.querySelectorAll(\n      '[data-type=\"explicit_constructed_response\"]'\n    );\n\n    const allChoices = {};\n\n    allRespAreas.forEach((el, index) => {\n      el.dataset.index = index;\n    });\n\n    allRespAreas.forEach((el, index) => {\n      const newChoices = cloneDeep(Object.values(choices)[index]);\n\n      if (newChoices) {\n        newChoices[0] = {\n          label: el.dataset.value || '',\n          value: '0'\n        };\n      }\n\n      allChoices[el.dataset.index] = newChoices;\n    });\n\n    this.props.onModelChanged({\n      ...this.props.model,\n      choices: allChoices,\n      slateMarkup: domMarkup.innerHTML\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      model,\n      configuration,\n      onConfigurationChanged,\n      imageSupport\n    } = this.props;\n    const {\n      prompt = {},\n      partialScoring = {},\n      rationale = {},\n      teacherInstructions = {}\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled } =\n      model || {};\n\n    return (\n      <div className={classes.design}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              configuration={configuration}\n              onChangeModel={model => this.onModelChange(model)}\n              onChangeConfiguration={configuration =>\n                onConfigurationChanged(configuration, true)\n              }\n              groups={{\n                Settings: {\n                  partialScoring:\n                    partialScoring.settings && toggle(partialScoring.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label),\n                  rationaleEnabled:\n                    rationale.settings && toggle(rationale.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                }\n              }}\n            />\n          }\n        >\n          <div>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.promptHolder}\n              >\n                <EditableHtml\n                  className={classes.prompt}\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                />\n              </InputContainer>\n            )}\n            {promptEnabled && (\n              <InputContainer\n                label={prompt.label}\n                className={classes.promptHolder}\n              >\n                <EditableHtml\n                  className={classes.prompt}\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  disableUnderline\n                />\n              </InputContainer>\n            )}\n            <Typography className={classes.text}>\n              Define Template, Choices, and Correct Responses\n            </Typography>\n            <EditableHtml\n              activePlugins={ALL_PLUGINS}\n              toolbarOpts={{ position: 'top' }}\n              responseAreaProps={{\n                type: 'explicit-constructed-response',\n                options: {\n                  duplicates: true\n                },\n                respAreaToolbar: (node, value, onToolbarDone) => {\n                  const { model } = this.props;\n                  const correctChoice = (model.choices[\n                    node.data.get('index')\n                  ] || [])[0];\n\n                  return () => (\n                    <ECRToolbar\n                      onChangeResponse={newVal =>\n                        this.onChangeResponse(node.data.get('index'), newVal)\n                      }\n                      node={node}\n                      value={value}\n                      onToolbarDone={onToolbarDone}\n                      correctChoice={correctChoice}\n                    />\n                  );\n                }\n              }}\n              className={classes.markup}\n              markup={model.slateMarkup}\n              onChange={this.onChange}\n              imageSupport={imageSupport}\n              onBlur={this.onBlur}\n              disabled={false}\n              highlightShape={false}\n            />\n            {!isEmpty(model.choices) && (\n              <Typography className={classes.text}>\n                Define Alternates\n              </Typography>\n            )}\n            <AlternateResponses\n              model={model}\n              onChange={this.onResponsesChanged}\n            />\n            {rationaleEnabled && (\n              <InputContainer\n                label={rationale.label}\n                className={classes.promptHolder}\n              >\n                <EditableHtml\n                  className={classes.prompt}\n                  markup={model.rationale || ''}\n                  onChange={this.onRationaleChanged}\n                  imageSupport={imageSupport}\n                />\n              </InputContainer>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst Styled = withStyles(styles)(Main);\n\nexport default Styled;\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["toggle","settings","Panel","styles","theme","promptHolder","width","paddingBottom","spacing","unit","marginBottom","prompt","paddingTop","markup","minHeight","design","choiceConfiguration","switchElement","justifyContent","margin","addButton","text","color","fontFamily","fontSize","lineHeight","marginTop","tooltip","whiteSpace","maxWidth","errorText","padding","flexContainer","display","alignItems","createElementFromHTML","htmlString","div","document","createElement","innerHTML","trim","Main","newVal","props","onModelChanged","model","rationale","teacherInstructions","slateMarkup","choices","maxLengthPerChoice","index","newValLength","length","label","value","nbOfMissingChoices","Array","fill","splice","domMarkup","allRespAreas","querySelectorAll","allChoices","updatedMaxLengthPerChoice","forEach","el","newChoices","dataset","callback","setState","cachedChoices","undefined","nodes","state","newCachedChoices","node","keyForNode","data","get","Object","assign","hasOwnProperty","trailing","leading","undefinedLengths","values","choice","labelLengthsArr","map","Math","max","classes","configuration","onConfigurationChanged","imageSupport","partialScoring","spellCheck","playerSpellCheck","maxResponseAreas","maxImageWidth","maxImageHeight","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","maxLengthPerChoiceEnabled","spellCheckEnabled","errors","toolbarOpts","responseAreasError","choicesErrors","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarEditorPosition","position","onModelChange","Settings","Properties","playerSpellCheckEnabled","onTeacherInstructionsChanged","onPromptChanged","marginLeft","ALL_PLUGINS","type","options","duplicates","respAreaToolbar","onToolbarDone","correctChoice","onChangeResponse","error","onHandleAreaChange","onChange","onBlur","onResponsesChanged","onLengthChanged","onRationaleChanged","React","Component","PropTypes","object","isRequired","disableSidePanel","bool","func","shape","add","Styled"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEmpty from 'lodash/isEmpty';\nimport pick from 'lodash/pick';\nimport throttle from 'lodash/throttle';\nimport EditableHtml, {ALL_PLUGINS} from '@pie-lib/editable-html';\n// import EditableHtmlNew from 'editable-html';\nimport {InputContainer, layout, settings} from '@pie-lib/config-ui';\nimport {withStyles} from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport ECRToolbar from './ecr-toolbar';\nimport AlternateResponses from './alternateResponses';\nimport { getAdjustedLength } from './markupUtils';\nimport {generateValidationMessage} from './utils';\n\nconst { toggle, Panel } = settings;\n\nconst styles = theme => ({\n  promptHolder: {\n    width: '100%',\n    paddingBottom: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  markup: {\n    minHeight: '100px',\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%',\n    '& [data-slate-editor=\"true\"]': {\n      minHeight: '100px'\n    }\n  },\n  design: {\n    paddingTop: theme.spacing.unit * 3\n  },\n  choiceConfiguration: {\n    paddingTop: theme.spacing.unit * 2,\n    paddingBottom: theme.spacing.unit * 2\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 0\n  },\n  addButton: {\n    float: 'right'\n  },\n  text: {\n    color: '#495B8F',\n    fontFamily: 'Cerebri Sans',\n    fontSize: '16px',\n    lineHeight: '19px',\n    marginTop: theme.spacing.unit * 4\n  },\n  tooltip: {\n    fontSize: '12px',\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: '12px',\n    color: 'red',\n    padding: '5px 0'\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'end'\n  }\n});\n\nconst createElementFromHTML = htmlString => {\n  const div = document.createElement('div');\n\n  div.innerHTML = htmlString.trim();\n\n  return div;\n};\n\nexport class Main extends React.Component {\n  static propTypes = {\n    configuration: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    disableSidePanel: PropTypes.bool,\n    onModelChanged: PropTypes.func.isRequired,\n    onConfigurationChanged: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    })\n  };\n\n  state = {};\n\n  componentDidMount() {\n    const {\n      model: { slateMarkup, choices, maxLengthPerChoice = []},\n      onModelChanged\n    } = this.props;\n    const undefinedLengths = !maxLengthPerChoice.length;\n\n    this.setState({ markup: slateMarkup });\n\n    // calculate maxLengthPerChoice array if it is not defined or defined incorrectly\n    Object.values(choices).forEach((choice, index) => {\n      const labelLengthsArr = (choice || []).map(choice => (choice.label || '').length);\n      const length = Math.max(...labelLengthsArr);\n\n      if (\n        undefinedLengths\n        || !maxLengthPerChoice[index]\n        || maxLengthPerChoice[index] < length\n        || maxLengthPerChoice[index] > length + 10\n      ) {\n        maxLengthPerChoice[index] = getAdjustedLength(length);\n      }\n    });\n\n    onModelChanged({\n      ...this.props.model,\n      maxLengthPerChoice\n    });\n  }\n\n  onModelChange = newVal => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      ...newVal\n    });\n  };\n\n  onPromptChanged = prompt => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      prompt\n    });\n  };\n\n  onRationaleChanged = rationale => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      rationale\n    });\n  };\n\n  onTeacherInstructionsChanged = teacherInstructions => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions\n    });\n  };\n\n  onMarkupChanged = slateMarkup => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      slateMarkup\n    });\n  };\n\n  onResponsesChanged = choices => {\n    this.props.onModelChanged({\n      ...this.props.model,\n      choices\n    });\n  };\n\n  onLengthChanged = maxLengthPerChoice => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      maxLengthPerChoice\n    });\n  };\n\n  onChangeResponse = (index, newVal) => {\n    const { model, onModelChanged} = this.props;\n    const { choices } = model;\n    let { maxLengthPerChoice } = model;\n    const newValLength = (newVal || '').length;\n\n    if (!choices[index]) {\n      choices[index] = [{ label: newVal || '', value: '0' }];\n\n      // add default values for missing choices up to the new index position\n      const nbOfMissingChoices = index > maxLengthPerChoice.length ? index - maxLengthPerChoice.length : 0;\n\n      maxLengthPerChoice = [ ...maxLengthPerChoice, ...Array(nbOfMissingChoices).fill(1) ];\n\n      maxLengthPerChoice.splice(index, 0, getAdjustedLength(newValLength));\n    } else {\n      choices[index][0].label = newVal || '';\n\n      if (\n        maxLengthPerChoice\n        && (maxLengthPerChoice[index] < newValLength || maxLengthPerChoice[index] > newValLength + 10)\n      ) {\n        maxLengthPerChoice[index] = getAdjustedLength(newValLength);\n      }\n    }\n\n    onModelChanged({\n      ...model,\n      choices,\n      maxLengthPerChoice\n    });\n  };\n\n  onChange = markup => {\n    const {\n      model: { choices, maxLengthPerChoice },\n      onModelChanged\n    } = this.props;\n    const domMarkup = createElementFromHTML(markup);\n    const allRespAreas = domMarkup.querySelectorAll(\n      '[data-type=\"explicit_constructed_response\"]'\n    );\n\n    const allChoices = {};\n    const updatedMaxLengthPerChoice = [];\n\n    allRespAreas.forEach((el, index) => {\n      const newChoices = cloneDeep(choices[el.dataset.index]);\n\n      if (newChoices) {\n        newChoices[0] = {\n          label: el.dataset.value || '',\n          value: '0'\n        };\n\n        updatedMaxLengthPerChoice[index] = maxLengthPerChoice[el.dataset.index];\n      }\n\n      allChoices[index] = newChoices;\n      el.dataset.index = index;\n    });\n\n    const callback = () => onModelChanged({\n      ...this.props.model,\n      choices: allChoices,\n      slateMarkup: domMarkup.innerHTML,\n      maxLengthPerChoice: updatedMaxLengthPerChoice\n    });\n\n    this.setState({\n      cachedChoices: undefined\n    }, callback);\n  };\n\n  onHandleAreaChange = throttle((nodes) => {\n    const {\n      model: { choices },\n      onModelChanged\n    } = this.props;\n    const { cachedChoices } = this.state;\n\n    if (!nodes) {\n      return;\n    }\n\n    const newChoices = choices ? cloneDeep(choices) : {};\n    const newCachedChoices = cachedChoices ? cloneDeep(cachedChoices) : {};\n\n    nodes.forEach((node) => {\n      const keyForNode = node.data.get('index');\n\n      if (!newChoices[keyForNode] && newCachedChoices[keyForNode]) {\n        Object.assign(newChoices, pick(newCachedChoices, keyForNode));\n\n        if (newCachedChoices.hasOwnProperty(keyForNode)) {\n          delete newCachedChoices[keyForNode];\n        }\n      } else {\n        Object.assign(newCachedChoices, pick(newChoices, keyForNode));\n\n        if (newChoices.hasOwnProperty(keyForNode)) {\n          delete newChoices[keyForNode];\n        }\n      }\n    });\n\n    const callback = () => onModelChanged({\n      ...this.props.model,\n      choices: newChoices\n    });\n\n    this.setState({\n      cachedChoices: newCachedChoices\n    }, callback);\n  }, 500, { trailing: false, leading: true });\n\n  render() {\n    const {\n      classes,\n      model,\n      configuration,\n      onConfigurationChanged,\n      imageSupport\n    } = this.props;\n    const {\n      prompt = {},\n      partialScoring = {},\n      rationale = {},\n      teacherInstructions = {},\n      maxLengthPerChoice = {},\n      spellCheck = {},\n      playerSpellCheck = {},\n      maxResponseAreas,\n      maxImageWidth = {},\n      maxImageHeight = {}\n    } = configuration || {};\n    const {\n      teacherInstructionsEnabled,\n      promptEnabled,\n      rationaleEnabled,\n      maxLengthPerChoiceEnabled,\n      spellCheckEnabled,\n      errors\n    } = model || {};\n    const toolbarOpts = {};\n\n    const { responseAreasError, choicesErrors = {} } = errors || {};\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n    return (\n      <div className={classes.design}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              configuration={configuration}\n              onChangeModel={model => this.onModelChange(model)}\n              onChangeConfiguration={configuration =>\n                onConfigurationChanged(configuration, true)\n              }\n              groups={{\n                Settings: {\n                  partialScoring:\n                    partialScoring.settings && toggle(partialScoring.label),\n                  maxLengthPerChoiceEnabled:\n                    maxLengthPerChoice.settings && toggle(maxLengthPerChoice.label),\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label),\n                  rationaleEnabled:\n                    rationale.settings && toggle(rationale.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label),\n                  spellCheckEnabled:\n                  spellCheck.settings && toggle(spellCheck.label),\n                  playerSpellCheckEnabled:\n                  playerSpellCheck.settings && toggle(playerSpellCheck.label),\n                }\n              }}\n            />\n          }\n        >\n          <div>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.promptHolder}\n              >\n                <EditableHtml\n                  className={classes.prompt}\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}\n                  maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}\n                />\n              </InputContainer>\n            )}\n            {promptEnabled && (\n              <InputContainer\n                label={prompt.label}\n                className={classes.promptHolder}\n              >\n                <EditableHtml\n                  className={classes.prompt}\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  disableUnderline\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  maxImageWidth={defaultImageMaxWidth}\n                  maxImageHeight={defaultImageMaxHeight}\n                />\n                {/*<EditableHtmlNew*/}\n                {/*  className={classes.prompt}*/}\n                {/*  markup={model.prompt}*/}\n                {/*  onChange={this.onPromptChanged}*/}\n                {/*  imageSupport={imageSupport}*/}\n                {/*  nonEmpty={false}*/}\n                {/*  disableUnderline*/}\n                {/*  toolbarOpts={toolbarOpts}*/}\n                {/*  spellCheck={spellCheckEnabled}*/}\n                {/*/>*/}\n              </InputContainer>\n            )}\n            <div className={classes.flexContainer}>\n              <Typography className={classes.text}>\n                Define Template, Choices, and Correct Responses\n              </Typography>\n              <Tooltip\n                classes={{tooltip: classes.tooltip}}\n                disableFocusListener\n                disableTouchListener\n                placement={'right'}\n                title={validationMessage}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '5px' }}/>\n              </Tooltip>\n            </div>\n            {responseAreasError && <div className={classes.errorText}>{responseAreasError}</div>}\n\n            <EditableHtml\n              activePlugins={ALL_PLUGINS}\n              toolbarOpts={{ position: 'top' }}\n              spellCheck={spellCheckEnabled}\n              responseAreaProps={{\n                type: 'explicit-constructed-response',\n                options: {\n                  duplicates: true\n                },\n                maxResponseAreas: maxResponseAreas,\n                respAreaToolbar: (node, value, onToolbarDone) => {\n                  const { model } = this.props;\n                  const correctChoice = (model.choices[\n                    node.data.get('index')\n                  ] || [])[0];\n\n                  return () => (\n                    <ECRToolbar\n                      onChangeResponse={newVal =>\n                        this.onChangeResponse(node.data.get('index'), newVal)\n                      }\n                      node={node}\n                      value={value}\n                      onToolbarDone={onToolbarDone}\n                      correctChoice={correctChoice}\n                    />\n                  );\n                },\n                error: () => choicesErrors,\n                onHandleAreaChange: this.onHandleAreaChange\n              }}\n              className={classes.markup}\n              markup={model.slateMarkup}\n              onChange={this.onChange}\n              imageSupport={imageSupport}\n              onBlur={this.onBlur}\n              disabled={false}\n              highlightShape={false}\n              error={responseAreasError}\n            />\n            {!isEmpty(model.choices) && (\n              <Typography className={classes.text}>\n                {`Define Alternates ${maxLengthPerChoiceEnabled ? 'and Character Limits' : ''}`}\n              </Typography>\n            )}\n            <AlternateResponses\n              model={model}\n              onChange={this.onResponsesChanged}\n              onLengthChange={this.onLengthChanged}\n              maxLengthPerChoiceEnabled={maxLengthPerChoiceEnabled}\n              spellCheck={spellCheckEnabled}\n              choicesErrors={choicesErrors}\n            />\n            {rationaleEnabled && (\n              <InputContainer\n                label={rationale.label}\n                className={classes.promptHolder}\n              >\n                <EditableHtml\n                  className={classes.prompt}\n                  markup={model.rationale || ''}\n                  onChange={this.onRationaleChanged}\n                  imageSupport={imageSupport}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  maxImageWidth={maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth}\n                  maxImageHeight={maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight}\n                />\n              </InputContainer>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst Styled = withStyles(styles)(Main);\n\nexport default Styled;\n"],"file":"main.js"}

package/configure/lib/markupUtils.js

@@ -5,12 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSlateMarkup = exports.processMarkup = exports.removeUnwantedCharacters = void 0;
+exports.removeUnwantedCharacters = exports.processMarkup = exports.getAdjustedLength = exports.createSlateMarkup = void 0;
 
 var _escape = _interopRequireDefault(require("lodash/escape"));
 
+// do not remove \t from \times, \triangle, \tan, \theta or \therefore
+var tSymbols = 'imes|riangle|an|heta|herefore'; // do not remove \n from \nthroot, \nparallel, \ncong, \napprox, \neq, \ne or \nsim
+
+var nSymbols = 'throot|parallel|cong|approx|eq|e|sim'; // match all \t and \n that are not part of math symbols that starts with \t or \n
+
+var matchTabAndNewLine = new RegExp("(\\t(?!".concat(tSymbols, "))|(\\n(?!").concat(nSymbols, "))|(\\\\t(?!").concat(tSymbols, "))|(\\\\n(?!").concat(nSymbols, "))"), 'g');
+
 var removeUnwantedCharacters = function removeUnwantedCharacters(markup) {
-  return markup.replace(/(\t+(?!imes))|(\n)|(\\t+(?!imes))|(\\n)/g, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
+  return markup.replace(matchTabAndNewLine, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
 };
 
 exports.removeUnwantedCharacters = removeUnwantedCharacters;
@@ -45,7 +52,26 @@ var createSlateMarkup = function createSlateMarkup(markup, choices) {
     var label = choices[g][0].label || '';
     return "<span data-type=\"explicit_constructed_response\" data-index=\"".concat(g, "\" data-value=\"").concat((0, _escape["default"])(label), "\"></span>");
   });
-};
+}; // also used in controller/src/index.js
+
 
 exports.createSlateMarkup = createSlateMarkup;
+
+var getAdjustedLength = function getAdjustedLength(length) {
+  if (length <= 2) {
+    return length + 2;
+  }
+
+  if (length <= 4) {
+    return length + 3;
+  }
+
+  if (length <= 6) {
+    return length + 4;
+  }
+
+  return length + 5;
+};
+
+exports.getAdjustedLength = getAdjustedLength;
 //# sourceMappingURL=markupUtils.js.map