@pie-element/explicit-constructed-response 3.8.0 → 3.8.1-beta.587

package/configure/lib/alternateSection.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.AlternateSection = exports.Choice = void 0;
+exports["default"] = exports.Choice = exports.AlternateSection = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -43,17 +43,23 @@ var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
 
 var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
 
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
 var _styles = require("@material-ui/core/styles");
 
 var _max = _interopRequireDefault(require("lodash/max"));
 
-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 _classnames = _interopRequireDefault(require("classnames"));
+
+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; }
+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 styles = function styles() {
   return {
@@ -75,10 +81,27 @@ var styles = function styles() {
       fill: 'gray'
     },
     selectContainer: {
-      alignItems: 'center',
+      alignItems: 'flex-end',
       display: 'flex',
       justifyContent: 'space-between',
       width: '100%'
+    },
+    rightContainer: {
+      alignItems: 'center',
+      display: 'flex'
+    },
+    lengthField: {
+      width: '230px',
+      marginRight: '20px'
+    },
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      paddingTop: '5px'
+    },
+    inputError: {
+      border: '2px solid red',
+      borderRadius: '6px'
     }
   };
 };
@@ -115,29 +138,43 @@ var Choice = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2["default"])(Choice, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.markup) {
+        this.setState({
+          value: nextProps.markup
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var value = this.state.value;
       var _this$props = this.props,
           classes = _this$props.classes,
-          onDelete = _this$props.onDelete;
-      return /*#__PURE__*/_react["default"].createElement("div", {
+          onDelete = _this$props.onDelete,
+          spellCheck = _this$props.spellCheck,
+          error = _this$props.error;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           alignItems: 'center',
           display: 'flex',
           justifyContent: 'space-between'
         }
       }, /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
-        className: classes.choice,
+        className: (0, _classnames["default"])(classes.choice, error && classes.inputError),
         value: value,
         onChange: this.onChange,
         labelWidth: 0,
-        disableUnderline: true
+        disableUnderline: true,
+        spellCheck: spellCheck
       }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         "aria-label": "delete",
         className: classes.deleteBtn,
         onClick: onDelete
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error));
     }
   }]);
   return Choice;
@@ -202,16 +239,51 @@ var AlternateSection = /*#__PURE__*/function (_React$Component2) {
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onChoiceChanged", function (choice, value) {
-      var choiceChanged = _this2.props.choiceChanged;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onChoiceChanged", function (choice, value, index) {
+      var _this2$props2 = _this2.props,
+          choiceChanged = _this2$props2.choiceChanged,
+          lengthChanged = _this2$props2.lengthChanged,
+          maxLength = _this2$props2.maxLength,
+          choices = _this2$props2.choices;
+      var labelLengthsArr = choices.map(function (choice) {
+        return (choice.label || '').length;
+      });
+      labelLengthsArr[index] = value.length;
+      var newLength = Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));
       choiceChanged(_objectSpread(_objectSpread({}, choice), {}, {
         label: value
       }));
+
+      if (newLength > maxLength || newLength + 10 <= maxLength) {
+        lengthChanged((0, _markupUtils.getAdjustedLength)(newLength));
+      }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRemoveChoice", function (choice) {
       var choiceRemoved = _this2.props.choiceRemoved;
       choiceRemoved(choice.value);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getChoicesMaxLength", function () {
+      var choices = _this2.state.choices;
+
+      if (!choices) {
+        return 1;
+      }
+
+      var labelLengthsArr = choices.map(function (choice) {
+        return (choice.label || '').length;
+      });
+      return Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "changeLength", function (event) {
+      var lengthChanged = _this2.props.lengthChanged;
+      var numberValue = parseInt(event.target.value, 10);
+
+      var minLength = _this2.getChoicesMaxLength();
+
+      if (numberValue && numberValue >= minLength && numberValue <= minLength + 10) {
+        lengthChanged(numberValue);
+      }
+    });
     return _this2;
   }
 
@@ -233,8 +305,13 @@ var AlternateSection = /*#__PURE__*/function (_React$Component2) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           selectChoices = _this$props2.selectChoices,
-          value = _this$props2.value;
+          maxLength = _this$props2.maxLength,
+          showMaxLength = _this$props2.showMaxLength,
+          value = _this$props2.value,
+          spellCheck = _this$props2.spellCheck,
+          errors = _this$props2.errors;
       var choices = this.state.choices;
+      var minLength = this.getChoicesMaxLength();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.design
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -243,7 +320,8 @@ var AlternateSection = /*#__PURE__*/function (_React$Component2) {
         className: classes.select,
         displayEmpty: true,
         onChange: this.handleSelect,
-        value: value || ''
+        value: value || '',
+        readOnly: showMaxLength
       }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
         value: ""
       }, /*#__PURE__*/_react["default"].createElement("em", null, value ? 'Remove selection' : 'Select a response')), selectChoices.map(function (c, index) {
@@ -251,12 +329,26 @@ var AlternateSection = /*#__PURE__*/function (_React$Component2) {
           key: index,
           value: c.value
         }, c.label);
-      })), choices && choices.length > 0 && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      })), choices && choices.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.rightContainer
+      }, maxLength && showMaxLength && /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        className: classes.lengthField,
+        label: "Maximum length (characters)",
+        type: "number",
+        inputProps: {
+          min: minLength,
+          max: minLength + 10
+        },
+        value: maxLength,
+        onChange: this.changeLength
+      }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         className: classes.addButton,
         variant: "contained",
         color: "primary",
         onClick: this.onAddChoice
-      }, "Add")), /*#__PURE__*/_react["default"].createElement("div", {
+      }, "Add"))), errors && errors[0] && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, errors[0]), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.altChoices
       }, choices && choices.map(function (c, index) {
         return index > 0 && /*#__PURE__*/_react["default"].createElement(Choice, {
@@ -264,11 +356,13 @@ var AlternateSection = /*#__PURE__*/function (_React$Component2) {
           classes: classes,
           markup: c.label,
           onChange: function onChange(val) {
-            return _this3.onChoiceChanged(c, val);
+            return _this3.onChoiceChanged(c, val, index);
           },
           onDelete: function onDelete() {
             return _this3.onRemoveChoice(c);
-          }
+          },
+          spellCheck: spellCheck,
+          error: errors && errors[index]
         });
       })));
     }
@@ -283,8 +377,11 @@ exports.AlternateSection = AlternateSection;
   classes: _propTypes["default"].object.isRequired,
   onSelect: _propTypes["default"].func.isRequired,
   choiceChanged: _propTypes["default"].func.isRequired,
+  lengthChanged: _propTypes["default"].func,
   choiceRemoved: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].string
+  value: _propTypes["default"].string,
+  maxLength: _propTypes["default"].number,
+  showMaxLength: _propTypes["default"].bool
 });
 var Styled = (0, _styles.withStyles)(styles)(AlternateSection);
 var _default = Styled;

package/configure/lib/alternateSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/alternateSection.jsx"],"names":["styles","altChoices","alignItems","flexDirection","display","padding","marginBottom","width","choice","flex","marginRight","deleteBtn","fill","selectContainer","justifyContent","Choice","value","props","markup","onChange","e","target","setState","updateText","state","classes","onDelete","React","Component","PropTypes","object","string","func","isRequired","AlternateSection","choices","onSelect","selectChoices","find","c","length","label","map","parseInt","filter","id","isNaN","choiceChanged","choiceRemoved","nextProps","updateChoicesIfNeeded","design","select","handleSelect","index","addButton","onAddChoice","val","onChoiceChanged","onRemoveChoice","array","Styled"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash/debounce';\nimport isEqual from 'lodash/isEqual';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Button from '@material-ui/core/Button';\nimport Delete from '@material-ui/icons/Delete';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { withStyles } from '@material-ui/core/styles';\nimport max from 'lodash/max';\n\nconst styles = () => ({\n  altChoices: {\n    alignItems: 'flex-start',\n    flexDirection: 'column',\n    display: 'flex',\n    padding: '20px 0 0 0',\n    '& > *': {\n      marginBottom: '20px',\n      width: '100%'\n    }\n  },\n  choice: {\n    flex: '1',\n    marginRight: '20px'\n  },\n  deleteBtn: {\n    fill: 'gray'\n  },\n  selectContainer: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%'\n  }\n});\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    markup: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    onDelete: PropTypes.func.isRequired,\n    value: PropTypes.string\n  };\n\n  state = {\n    value: this.props.markup\n  };\n\n  updateText = debounce(this.props.onChange, 300);\n\n  onChange = (e) => {\n    const { value } = e.target;\n\n    this.setState({ value });\n    this.updateText(value);\n  };\n\n  render() {\n    const { value } = this.state;\n    const { classes, onDelete } = this.props;\n\n    return (\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'space-between'\n        }}\n      >\n        <OutlinedInput\n          className={classes.choice}\n          value={value}\n          onChange={this.onChange}\n          labelWidth={0}\n          disableUnderline\n        />\n        <IconButton\n          aria-label=\"delete\"\n          className={classes.deleteBtn}\n          onClick={onDelete}\n        >\n          <Delete />\n        </IconButton>\n      </div>\n    );\n  }\n}\n\nexport class AlternateSection extends React.Component {\n  static propTypes = {\n    choices: PropTypes.array,\n    selectChoices: PropTypes.array.isRequired,\n    classes: PropTypes.object.isRequired,\n    onSelect: PropTypes.func.isRequired,\n    choiceChanged: PropTypes.func.isRequired,\n    choiceRemoved: PropTypes.func.isRequired,\n    value: PropTypes.string\n  };\n\n  state = {};\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    this.updateChoicesIfNeeded(nextProps);\n  }\n\n  componentDidMount() {\n    this.updateChoicesIfNeeded(this.props);\n  }\n\n  updateChoicesIfNeeded = props => {\n    if (!this.state.choices\n      || !isEqual(props.choices, this.state.choices)\n      || !isEqual(props.choices, this.props.choices)\n    ) {\n      this.setState({\n        choices: props.choices\n      });\n    }\n  };\n\n  handleSelect = e => {\n    const { onSelect, selectChoices } = this.props;\n    const { value } = e.target;\n\n    onSelect(selectChoices.find(c => c.value === value));\n  };\n\n  onAddChoice = () => {\n    const { choices } = this.state;\n\n    if (choices.length && choices[choices.length - 1].label !== '') {\n      const value = max(choices.map(c => parseInt(c.value)).filter(id => !isNaN(id))) || 0;\n\n      this.setState({\n        choices: [\n          ...choices,\n          {\n            value: `${value + 1}`,\n            label: ''\n          }\n        ]\n      });\n    }\n  };\n\n  onChoiceChanged = (choice, value) => {\n    const { choiceChanged } = this.props;\n\n    choiceChanged({\n      ...choice,\n      label: value\n    });\n  };\n\n  onRemoveChoice = choice => {\n    const { choiceRemoved } = this.props;\n\n    choiceRemoved(choice.value);\n  };\n\n  render() {\n    const {\n      classes,\n      selectChoices,\n      value\n    } = this.props;\n    const { choices } = this.state;\n\n    return (\n      <div className={classes.design}>\n        <div\n          className={classes.selectContainer}\n        >\n          <Select\n            className={classes.select}\n            displayEmpty\n            onChange={this.handleSelect}\n            value={value || ''}\n          >\n            <MenuItem value=\"\">\n              <em>\n                {value ? 'Remove selection' : 'Select a response'}\n              </em>\n            </MenuItem>\n            {selectChoices.map((c, index) => <MenuItem key={index} value={c.value}>{c.label}</MenuItem>)}\n          </Select>\n          {\n            choices && choices.length > 0 &&\n            <Button\n              className={classes.addButton}\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={this.onAddChoice}\n            >\n              Add\n            </Button>\n          }\n        </div>\n        <div\n          className={classes.altChoices}\n        >\n          {\n            choices &&\n            choices.map((c, index) => index > 0 && (\n              <Choice\n                key={index}\n                classes={classes}\n                markup={c.label}\n                onChange={val => this.onChoiceChanged(c, val)}\n                onDelete={() => this.onRemoveChoice(c)}\n              />\n            ))\n          }\n        </div>\n      </div>\n    );\n  }\n}\n\nconst Styled = withStyles(styles)(AlternateSection);\n\nexport default Styled;\n"],"file":"alternateSection.js"}
+{"version":3,"sources":["../src/alternateSection.jsx"],"names":["styles","altChoices","alignItems","flexDirection","display","padding","marginBottom","width","choice","flex","marginRight","deleteBtn","fill","selectContainer","justifyContent","rightContainer","lengthField","errorText","fontSize","color","paddingTop","inputError","border","borderRadius","Choice","value","props","markup","onChange","e","target","setState","updateText","nextProps","state","classes","onDelete","spellCheck","error","React","Component","PropTypes","object","string","func","isRequired","AlternateSection","choices","onSelect","selectChoices","find","c","length","label","map","parseInt","filter","id","isNaN","index","choiceChanged","lengthChanged","maxLength","labelLengthsArr","newLength","Math","max","choiceRemoved","event","numberValue","minLength","getChoicesMaxLength","updateChoicesIfNeeded","showMaxLength","errors","design","select","handleSelect","min","changeLength","addButton","onAddChoice","val","onChoiceChanged","onRemoveChoice","array","number","bool","Styled"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash/debounce';\nimport isEqual from 'lodash/isEqual';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Button from '@material-ui/core/Button';\nimport Delete from '@material-ui/icons/Delete';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport TextField from '@material-ui/core/TextField';\nimport { withStyles } from '@material-ui/core/styles';\nimport max from 'lodash/max';\nimport classnames from 'classnames';\n\nimport { getAdjustedLength } from './markupUtils';\n\nconst styles = () => ({\n  altChoices: {\n    alignItems: 'flex-start',\n    flexDirection: 'column',\n    display: 'flex',\n    padding: '20px 0 0 0',\n    '& > *': {\n      marginBottom: '20px',\n      width: '100%',\n    },\n  },\n  choice: {\n    flex: '1',\n    marginRight: '20px',\n  },\n  deleteBtn: {\n    fill: 'gray',\n  },\n  selectContainer: {\n    alignItems: 'flex-end',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  rightContainer: {\n    alignItems: 'center',\n    display: 'flex',\n  },\n  lengthField: {\n    width: '230px',\n    marginRight: '20px',\n  },\n  errorText: {\n    fontSize: '12px',\n    color: 'red',\n    paddingTop: '5px',\n  },\n  inputError: {\n    border: '2px solid red',\n    borderRadius: '6px',\n  },\n});\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    markup: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    onDelete: PropTypes.func.isRequired,\n    value: PropTypes.string,\n  };\n\n  state = {\n    value: this.props.markup,\n  };\n\n  updateText = debounce(this.props.onChange, 300);\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.markup) {\n      this.setState({ value: nextProps.markup });\n    }\n  }\n\n  onChange = (e) => {\n    const { value } = e.target;\n\n    this.setState({ value });\n    this.updateText(value);\n  };\n\n  render() {\n    const { value } = this.state;\n    const { classes, onDelete, spellCheck, error } = this.props;\n\n    return (\n      <>\n        <div\n          style={{\n            alignItems: 'center',\n            display: 'flex',\n            justifyContent: 'space-between',\n          }}\n        >\n          <OutlinedInput\n            className={classnames(classes.choice, error && classes.inputError)}\n            value={value}\n            onChange={this.onChange}\n            labelWidth={0}\n            disableUnderline\n            spellCheck={spellCheck}\n          />\n          <IconButton aria-label=\"delete\" className={classes.deleteBtn} onClick={onDelete}>\n            <Delete />\n          </IconButton>\n        </div>\n        {error && <div className={classes.errorText}>{error}</div>}\n      </>\n    );\n  }\n}\n\nexport class AlternateSection extends React.Component {\n  static propTypes = {\n    choices: PropTypes.array,\n    selectChoices: PropTypes.array.isRequired,\n    classes: PropTypes.object.isRequired,\n    onSelect: PropTypes.func.isRequired,\n    choiceChanged: PropTypes.func.isRequired,\n    lengthChanged: PropTypes.func,\n    choiceRemoved: PropTypes.func.isRequired,\n    value: PropTypes.string,\n    maxLength: PropTypes.number,\n    showMaxLength: PropTypes.bool,\n  };\n\n  state = {};\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    this.updateChoicesIfNeeded(nextProps);\n  }\n\n  componentDidMount() {\n    this.updateChoicesIfNeeded(this.props);\n  }\n\n  updateChoicesIfNeeded = (props) => {\n    if (\n      !this.state.choices ||\n      !isEqual(props.choices, this.state.choices) ||\n      !isEqual(props.choices, this.props.choices)\n    ) {\n      this.setState({\n        choices: props.choices,\n      });\n    }\n  };\n\n  handleSelect = (e) => {\n    const { onSelect, selectChoices } = this.props;\n    const { value } = e.target;\n\n    onSelect(selectChoices.find((c) => c.value === value));\n  };\n\n  onAddChoice = () => {\n    const { choices } = this.state;\n\n    if (choices.length && choices[choices.length - 1].label !== '') {\n      const value = max(choices.map((c) => parseInt(c.value)).filter((id) => !isNaN(id))) || 0;\n\n      this.setState({\n        choices: [\n          ...choices,\n          {\n            value: `${value + 1}`,\n            label: '',\n          },\n        ],\n      });\n    }\n  };\n\n  onChoiceChanged = (choice, value, index) => {\n    const { choiceChanged, lengthChanged, maxLength, choices } = this.props;\n\n    const labelLengthsArr = choices.map((choice) => (choice.label || '').length);\n    labelLengthsArr[index] = value.length;\n\n    const newLength = Math.max(...labelLengthsArr);\n\n    choiceChanged({\n      ...choice,\n      label: value,\n    });\n\n    if (newLength > maxLength || newLength + 10 <= maxLength) {\n      lengthChanged(getAdjustedLength(newLength));\n    }\n  };\n\n  onRemoveChoice = (choice) => {\n    const { choiceRemoved } = this.props;\n\n    choiceRemoved(choice.value);\n  };\n\n  getChoicesMaxLength = () => {\n    const { choices } = this.state;\n\n    if (!choices) {\n      return 1;\n    }\n\n    const labelLengthsArr = choices.map((choice) => (choice.label || '').length);\n\n    return Math.max(...labelLengthsArr);\n  };\n\n  changeLength = (event) => {\n    const { lengthChanged } = this.props;\n    const numberValue = parseInt(event.target.value, 10);\n    const minLength = this.getChoicesMaxLength();\n\n    if (numberValue && numberValue >= minLength && numberValue <= minLength + 10) {\n      lengthChanged(numberValue);\n    }\n  };\n\n  render() {\n    const { classes, selectChoices, maxLength, showMaxLength, value, spellCheck, errors } = this.props;\n    const { choices } = this.state;\n    const minLength = this.getChoicesMaxLength();\n\n    return (\n      <div className={classes.design}>\n        <div className={classes.selectContainer}>\n          <Select\n            className={classes.select}\n            displayEmpty\n            onChange={this.handleSelect}\n            value={value || ''}\n            readOnly={showMaxLength}\n          >\n            <MenuItem value=\"\">\n              <em>{value ? 'Remove selection' : 'Select a response'}</em>\n            </MenuItem>\n            {selectChoices.map((c, index) => (\n              <MenuItem key={index} value={c.value}>\n                {c.label}\n              </MenuItem>\n            ))}\n          </Select>\n          {choices && choices.length > 0 && (\n            <div className={classes.rightContainer}>\n              {maxLength && showMaxLength && (\n                <TextField\n                  className={classes.lengthField}\n                  label=\"Maximum length (characters)\"\n                  type=\"number\"\n                  inputProps={{\n                    min: minLength,\n                    max: minLength + 10,\n                  }}\n                  value={maxLength}\n                  onChange={this.changeLength}\n                />\n              )}\n              <Button className={classes.addButton} variant=\"contained\" color=\"primary\" onClick={this.onAddChoice}>\n                Add\n              </Button>\n            </div>\n          )}\n        </div>\n        {errors && errors[0] && <div className={classes.errorText}>{errors[0]}</div>}\n        <div className={classes.altChoices}>\n          {choices &&\n            choices.map(\n              (c, index) =>\n                index > 0 && (\n                  <Choice\n                    key={index}\n                    classes={classes}\n                    markup={c.label}\n                    onChange={(val) => this.onChoiceChanged(c, val, index)}\n                    onDelete={() => this.onRemoveChoice(c)}\n                    spellCheck={spellCheck}\n                    error={errors && errors[index]}\n                  />\n                ),\n            )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst Styled = withStyles(styles)(AlternateSection);\n\nexport default Styled;\n"],"file":"alternateSection.js"}

package/configure/lib/defaults.js

@@ -11,6 +11,10 @@ var _default = {
     prompt: 'Use the inputs to complete the sentence',
     shuffle: true,
     markup: '<p>The {{0}} jumped {{1}} the {{2}}</p>',
+    toolbarEditorPosition: 'bottom',
+    displayType: 'block',
+    spellCheckEnabled: true,
+    playerSpellCheckEnabled: true,
     choices: {
       0: [{
         label: 'cow',
@@ -44,6 +48,7 @@ var _default = {
         value: '3'
       }]
     },
+    maxLengthPerChoiceEnabled: true,
     rationaleEnabled: true,
     promptEnabled: true,
     teacherInstructionsEnabled: true,
@@ -62,9 +67,39 @@ var _default = {
       settings: true,
       label: 'Rationale'
     },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    playerSpellCheck: {
+      label: 'Student Spellcheck',
+      settings: true,
+      enabled: true
+    },
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions'
+    },
+    maxLengthPerChoice: {
+      settings: true,
+      label: 'Maximum Length Per Choice'
+    },
+    maxResponseAreas: 10,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
     }
   }
 };

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","disabled","mode","prompt","shuffle","markup","choices","label","value","correct","rationaleEnabled","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","configuration","settings","partialScoring","rationale","teacherInstructions"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,KADL;AAELC,IAAAA,IAAI,EAAE,QAFD;AAGLC,IAAAA,MAAM,EAAE,yCAHH;AAILC,IAAAA,OAAO,EAAE,IAJJ;AAKLC,IAAAA,MAAM,EAAE,yCALH;AAMLC,IAAAA,OAAO,EAAE;AACP,SAAG,CACD;AACEC,QAAAA,KAAK,EAAE,KADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OADC,EAKD;AACED,QAAAA,KAAK,EAAE,QADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OALC,EASD;AACED,QAAAA,KAAK,EAAE,MADT;AAEEC,QAAAA,KAAK,EAAE,GAFT;AAGEC,QAAAA,OAAO,EAAE;AAHX,OATC,CADI;AAgBP,SAAG,CACD;AACEF,QAAAA,KAAK,EAAE,MADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OADC,EAKD;AACED,QAAAA,KAAK,EAAE,MADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OALC,EASD;AACED,QAAAA,KAAK,EAAE,QADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OATC,CAhBI;AA8BP,SAAG,CACD;AACED,QAAAA,KAAK,EAAE,MADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OADC,EAKD;AACED,QAAAA,KAAK,EAAE,WADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OALC,EASD;AACED,QAAAA,KAAK,EAAE,QADT;AAEEC,QAAAA,KAAK,EAAE;AAFT,OATC;AA9BI,KANJ;AAmDLE,IAAAA,gBAAgB,EAAE,IAnDb;AAoDLC,IAAAA,aAAa,EAAE,IApDV;AAqDLC,IAAAA,0BAA0B,EAAE,IArDvB;AAsDLC,IAAAA,0BAA0B,EAAE;AAtDvB,GADM;AAyDbC,EAAAA,aAAa,EAAE;AACbX,IAAAA,MAAM,EAAE;AACNY,MAAAA,QAAQ,EAAE,IADJ;AAENR,MAAAA,KAAK,EAAE;AAFD,KADK;AAKbS,IAAAA,cAAc,EAAE;AACdD,MAAAA,QAAQ,EAAE,KADI;AAEdR,MAAAA,KAAK,EAAE;AAFO,KALH;AASbU,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETR,MAAAA,KAAK,EAAE;AAFE,KATE;AAabW,IAAAA,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBR,MAAAA,KAAK,EAAE;AAFY;AAbR;AAzDF,C","sourcesContent":["export default {\n  model: {\n    disabled: false,\n    mode: 'gather',\n    prompt: 'Use the inputs to complete the sentence',\n    shuffle: true,\n    markup: '<p>The {{0}} jumped {{1}} the {{2}}</p>',\n    choices: {\n      0: [\n        {\n          label: 'cow',\n          value: '0'\n        },\n        {\n          label: 'cattle',\n          value: '1'\n        },\n        {\n          label: 'calf',\n          value: '2',\n          correct: false\n        }\n      ],\n      1: [\n        {\n          label: 'over',\n          value: '0'\n        },\n        {\n          label: 'past',\n          value: '1'\n        },\n        {\n          label: 'beyond',\n          value: '2'\n        }\n      ],\n      2: [\n        {\n          label: 'moon',\n          value: '0'\n        },\n        {\n          label: 'satellite',\n          value: '2'\n        },\n        {\n          label: 'house ',\n          value: '3'\n        }\n      ]\n    },\n    rationaleEnabled: true,\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true\n  },\n  configuration: {\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring'\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale'\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions'\n    },\n  }\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","disabled","mode","prompt","shuffle","markup","toolbarEditorPosition","displayType","spellCheckEnabled","playerSpellCheckEnabled","choices","label","value","correct","maxLengthPerChoiceEnabled","rationaleEnabled","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","configuration","settings","partialScoring","rationale","settingsPanelDisabled","spellCheck","enabled","playerSpellCheck","teacherInstructions","maxLengthPerChoice","maxResponseAreas","maxImageWidth","maxImageHeight","withRubric"],"mappings":"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","sourcesContent":["export default {\n  model: {\n    disabled: false,\n    mode: 'gather',\n    prompt: 'Use the inputs to complete the sentence',\n    shuffle: true,\n    markup: '<p>The {{0}} jumped {{1}} the {{2}}</p>',\n    toolbarEditorPosition: 'bottom',\n    displayType: 'block',\n    spellCheckEnabled: true,\n    playerSpellCheckEnabled: true,\n    choices: {\n      0: [\n        {\n          label: 'cow',\n          value: '0',\n        },\n        {\n          label: 'cattle',\n          value: '1',\n        },\n        {\n          label: 'calf',\n          value: '2',\n          correct: false,\n        },\n      ],\n      1: [\n        {\n          label: 'over',\n          value: '0',\n        },\n        {\n          label: 'past',\n          value: '1',\n        },\n        {\n          label: 'beyond',\n          value: '2',\n        },\n      ],\n      2: [\n        {\n          label: 'moon',\n          value: '0',\n        },\n        {\n          label: 'satellite',\n          value: '2',\n        },\n        {\n          label: 'house ',\n          value: '3',\n        },\n      ],\n    },\n    maxLengthPerChoiceEnabled: true,\n    rationaleEnabled: true,\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n  },\n  configuration: {\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    playerSpellCheck: {\n      label: 'Student Spellcheck',\n      settings: true,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    maxLengthPerChoice: {\n      settings: true,\n      label: 'Maximum Length Per Choice',\n    },\n    maxResponseAreas: 10,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n  },\n};\n"],"file":"defaults.js"}

package/configure/lib/ecr-toolbar.js

@@ -29,13 +29,15 @@ var _styles = require("@material-ui/core/styles");
 
 var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
 
-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 _classnames = _interopRequireDefault(require("classnames"));
 
-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 findSlateNode = function findSlateNode(key) {
   return window.document.querySelector('[data-key="' + key + '"]');
@@ -56,25 +58,33 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
     }
 
     _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,
+          nodePath = _this$props.nodePath,
+          editor = _this$props.editor,
           onToolbarDone = _this$props.onToolbarDone,
           onChangeResponse = _this$props.onChangeResponse;
 
-      var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
+      var update = _objectSpread(_objectSpread({}, node.data), {}, {
         value: newValue
       });
 
-      var change = value.change().setNodeByKey(node.key, {
-        data: update
+      editor.apply({
+        type: 'set_node',
+        path: nodePath,
+        properties: {
+          data: node.data
+        },
+        newProperties: {
+          data: update
+        }
       });
-      var nextText = value.document.getNextText(node.key);
-      change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-      onToolbarDone(change, false);
+      onToolbarDone(true);
       onChangeResponse(newValue);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (e) {
@@ -115,7 +125,11 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var classes = this.props.classes;
+      var _node$data;
+
+      var _this$props3 = this.props,
+          classes = _this$props3.classes,
+          node = _this$props3.node;
       var _this$state = this.state,
           markup = _this$state.markup,
           toolbarStyle = _this$state.toolbarStyle;
@@ -124,6 +138,9 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
           backgroundColor: '#E0E1E6'
         })
       }, /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
+        style: {
+          width: '100%'
+        },
         autoFocus: true,
         labelWidth: 0,
         classes: {
@@ -131,7 +148,7 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
         },
         onChange: this.onChange,
         onBlur: this.onDone,
-        value: markup
+        value: markup || (node === null || node === void 0 ? void 0 : (_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.value) || ''
       }));
     }
   }]);
@@ -143,15 +160,11 @@ exports.ECRToolbar = ECRToolbar;
   correctChoice: _propTypes["default"].object,
   classes: _propTypes["default"].object,
   node: _propTypes["default"].object,
+  nodePath: _propTypes["default"].array,
   onDone: _propTypes["default"].func,
   onChangeResponse: _propTypes["default"].func.isRequired,
   onToolbarDone: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].shape({
-    change: _propTypes["default"].func.isRequired,
-    document: _propTypes["default"].shape({
-      getNextText: _propTypes["default"].func.isRequired
-    })
-  })
+  editor: _propTypes["default"].object
 });
 var StyledECRToolbar = (0, _styles.withStyles)({
   respArea: {
@@ -160,6 +173,9 @@ var StyledECRToolbar = (0, _styles.withStyles)({
   input: {
     backgroundColor: '#fff',
     padding: '10px 20px 10px 10px'
+  },
+  errorInput: {
+    border: '2px solid red'
   }
 })(ECRToolbar);
 var _default = StyledECRToolbar;

package/configure/lib/ecr-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ecr-toolbar.jsx"],"names":["findSlateNode","key","window","document","querySelector","ECRToolbar","newValue","state","markup","props","node","value","onToolbarDone","onChangeResponse","update","data","toJSON","change","setNodeByKey","nextText","getNextText","moveFocusTo","moveAnchorTo","e","setState","target","correctChoice","choice","domNode","domNodeRect","getBoundingClientRect","editor","closest","editorRect","top","left","label","toolbarStyle","position","height","width","classes","backgroundColor","input","onChange","onDone","React","Component","PropTypes","object","func","isRequired","shape","StyledECRToolbar","respArea","padding"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\n\nconst findSlateNode = key => {\n  return window.document.querySelector('[data-key=\"' + key + '\"]');\n};\n\nexport class ECRToolbar extends React.Component {\n  static propTypes = {\n    correctChoice: PropTypes.object,\n    classes: PropTypes.object,\n    node: PropTypes.object,\n    onDone: PropTypes.func,\n    onChangeResponse: PropTypes.func.isRequired,\n    onToolbarDone: PropTypes.func.isRequired,\n    value: PropTypes.shape({\n      change: PropTypes.func.isRequired,\n      document: PropTypes.shape({\n        getNextText: PropTypes.func.isRequired\n      })\n    })\n  };\n\n  state = {};\n\n  componentDidMount() {\n    const { correctChoice, node } = this.props;\n    const choice = correctChoice || {};\n\n    const domNode = findSlateNode(node.key);\n\n    if (domNode) {\n      //eslint-disable-next-line\n      const domNodeRect = domNode.getBoundingClientRect();\n      const editor = domNode.closest('[data-slate-editor]');\n      const editorRect = editor.getBoundingClientRect();\n      const top = domNodeRect.top - editorRect.top;\n      const left = domNodeRect.left - editorRect.left;\n\n      this.setState({\n        markup: choice.label,\n        toolbarStyle: {\n          position: 'absolute',\n          top: `${top + domNodeRect.height + 20}px`,\n          left: `${left + 20}px`,\n          width: domNodeRect.width\n        }\n      });\n    }\n  }\n\n  onDone = () => {\n    const { markup: newValue } = this.state;\n    const { node, value, onToolbarDone, onChangeResponse } = this.props;\n    const update = { ...node.data.toJSON(), value: newValue };\n    const change = value.change().setNodeByKey(node.key, { data: update });\n\n    const nextText = value.document.getNextText(node.key);\n\n    change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);\n\n    onToolbarDone(change, false);\n    onChangeResponse(newValue);\n  };\n\n  onChange = e => this.setState({ markup: e.target.value });\n\n  render() {\n    const { classes } = this.props;\n    const { markup, toolbarStyle } = this.state;\n\n    return (\n      <div\n        style={{\n          ...toolbarStyle,\n          backgroundColor: '#E0E1E6'\n        }}\n      >\n        <OutlinedInput\n          autoFocus\n          labelWidth={0}\n          classes={{\n            input: classes.input\n          }}\n          onChange={this.onChange}\n          onBlur={this.onDone}\n          value={markup}\n        />\n      </div>\n    );\n  }\n}\n\nconst StyledECRToolbar = withStyles({\n  respArea: {\n    backgroundColor: '#fff'\n  },\n  input: {\n    backgroundColor: '#fff',\n    padding: '10px 20px 10px 10px'\n  }\n})(ECRToolbar);\n\nexport default StyledECRToolbar;\n"],"file":"ecr-toolbar.js"}
+{"version":3,"sources":["../src/ecr-toolbar.jsx"],"names":["findSlateNode","key","window","document","querySelector","ECRToolbar","markup","newValue","state","props","node","nodePath","editor","onToolbarDone","onChangeResponse","update","data","value","apply","type","path","properties","newProperties","e","setState","target","correctChoice","choice","domNode","domNodeRect","getBoundingClientRect","closest","editorRect","top","left","label","toolbarStyle","position","height","width","classes","backgroundColor","input","onChange","onDone","React","Component","PropTypes","object","array","func","isRequired","StyledECRToolbar","respArea","padding","errorInput","border"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport classNames from 'classnames';\n\nconst findSlateNode = (key) => {\n  return window.document.querySelector('[data-key=\"' + key + '\"]');\n};\n\nexport class ECRToolbar extends React.Component {\n  static propTypes = {\n    correctChoice: PropTypes.object,\n    classes: PropTypes.object,\n    node: PropTypes.object,\n    nodePath: PropTypes.array,\n    onDone: PropTypes.func,\n    onChangeResponse: PropTypes.func.isRequired,\n    onToolbarDone: PropTypes.func.isRequired,\n    editor: PropTypes.object\n  };\n\n  state = {\n    markup: '',\n  };\n\n  componentDidMount() {\n    const { correctChoice, node } = this.props;\n    const choice = correctChoice || {};\n\n    const domNode = findSlateNode(node.key);\n\n    if (domNode) {\n      //eslint-disable-next-line\n      const domNodeRect = domNode.getBoundingClientRect();\n      const editor = domNode.closest('[data-slate-editor]');\n      const editorRect = editor.getBoundingClientRect();\n      const top = domNodeRect.top - editorRect.top;\n      const left = domNodeRect.left - editorRect.left;\n\n      this.setState({\n        markup: choice.label,\n        toolbarStyle: {\n          position: 'absolute',\n          top: `${top + domNodeRect.height + 20}px`,\n          left: `${left + 20}px`,\n          width: domNodeRect.width,\n        },\n      });\n    }\n  }\n\n  onDone = () => {\n    const { markup: newValue } = this.state;\n    const { node, nodePath, editor, onToolbarDone, onChangeResponse } = this.props;\n    const update = { ...node.data, value: newValue };\n\n    editor.apply({\n      type: 'set_node',\n      path: nodePath,\n      properties: {\n        data: node.data\n      },\n      newProperties: { data: update }\n    });\n\n    onToolbarDone(true);\n    onChangeResponse(newValue);\n  };\n\n  onChange = (e) => this.setState({ markup: e.target.value });\n\n  render() {\n    const { classes, node } = this.props;\n    const { markup, toolbarStyle } = this.state;\n\n    return (\n      <div\n        style={{\n          ...toolbarStyle,\n          backgroundColor: '#E0E1E6',\n        }}\n      >\n        <OutlinedInput\n          style={{ width: '100%' }}\n          autoFocus\n          labelWidth={0}\n          classes={{\n            input: classes.input,\n          }}\n          onChange={this.onChange}\n          onBlur={this.onDone}\n          value={markup || node?.data?.value || ''}\n        />\n      </div>\n    );\n  }\n}\n\nconst StyledECRToolbar = withStyles({\n  respArea: {\n    backgroundColor: '#fff',\n  },\n  input: {\n    backgroundColor: '#fff',\n    padding: '10px 20px 10px 10px',\n  },\n  errorInput: {\n    border: '2px solid red',\n  },\n})(ECRToolbar);\n\nexport default StyledECRToolbar;\n"],"file":"ecr-toolbar.js"}

package/configure/lib/index.js

@@ -41,13 +41,13 @@ var _defaults2 = _interopRequireDefault(require("./defaults"));
 
 var _markupUtils = require("./markupUtils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-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 log = (0, _debug["default"])('explicit-constructed-response:configure');
 
@@ -123,6 +123,16 @@ var ExplicitConstructedResponse = /*#__PURE__*/function (_HTMLElement) {
     value: function onDeleteImage(src, done) {
       this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
     }
+  }, {
+    key: "insertSound",
+    value: function insertSound(handler) {
+      this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+    }
+  }, {
+    key: "onDeleteSound",
+    value: function onDeleteSound(src, done) {
+      this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+    }
   }, {
     key: "_render",
     value: function _render() {
@@ -137,6 +147,10 @@ var ExplicitConstructedResponse = /*#__PURE__*/function (_HTMLElement) {
         imageSupport: {
           add: this.insertImage.bind(this),
           "delete": this.onDeleteImage.bind(this)
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          "delete": this.onDeleteSound.bind(this)
         }
       });