@pie-element/drawing-response 3.7.3-next.672 → 3.7.3-next.721

package/configure/lib/defaults.js

@@ -19,6 +19,11 @@ var _default = {
     toolbarEditorPosition: 'bottom'
   },
   configuration: {
+    spellCheck: {
+      label: "Spellcheck",
+      settings: true,
+      enabled: true
+    },
     backgroundImage: {
       settings: true,
       label: 'Background Image'

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","toolbarEditorPosition","configuration","backgroundImage","settings","label","teacherInstructions"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,sBAAsB,EAAE,IAVnB;AAWLC,IAAAA,qBAAqB,EAAE;AAXlB,GADM;AAcbC,EAAAA,aAAa,EAAE;AACbC,IAAAA,eAAe,EAAE;AACfC,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbb,IAAAA,MAAM,EAAE;AACNY,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KALK;AASbC,IAAAA,mBAAmB,EAAE;AACnBF,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY;AATR;AAdF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    backgroundImageEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image'\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\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","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","toolbarEditorPosition","configuration","spellCheck","label","settings","enabled","backgroundImage","teacherInstructions"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,sBAAsB,EAAE,IAVnB;AAWLC,IAAAA,qBAAqB,EAAE;AAXlB,GADM;AAcbC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAC,IAFC;AAGVC,MAAAA,OAAO,EAAC;AAHE,KADC;AAMbC,IAAAA,eAAe,EAAE;AACfF,MAAAA,QAAQ,EAAE,IADK;AAEfD,MAAAA,KAAK,EAAE;AAFQ,KANJ;AAUbZ,IAAAA,MAAM,EAAE;AACNa,MAAAA,QAAQ,EAAE,IADJ;AAEND,MAAAA,KAAK,EAAE;AAFD,KAVK;AAcbI,IAAAA,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY;AAdR;AAdF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    backgroundImageEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    spellCheck: {\n      label: \"Spellcheck\",\n      settings:true,\n      enabled:true\n    },\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image'\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    }\n  }\n};\n"],"file":"defaults.js"}

package/configure/lib/image-container.js

@@ -37,6 +37,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -166,15 +170,17 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       var y = e.clientY - bounds.top;
       var fitsContainer = x <= maxImageWidth + 5;
       var hasMinimumWidth = x > 150 && y > 150;
+      var keepAspectRatioWidth = x > y ? x : 'auto';
+      var keepAspectRatioHeight = x > y ? 'auto' : y;
 
       if (fitsContainer && hasMinimumWidth) {
-        box.style.width = "".concat(x, "px");
-        box.style.height = "".concat(y, "px");
+        box.style.width = "".concat(keepAspectRatioWidth, "px");
+        box.style.height = "".concat(keepAspectRatioHeight, "px");
 
         _this.setState({
           dimensions: {
-            height: y,
-            width: x
+            height: keepAspectRatioHeight,
+            width: keepAspectRatioWidth
           }
         });
       }
@@ -234,7 +240,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           dropzoneActive = _this$state.dropzoneActive,
           dragEnabled = _this$state.dragEnabled,
           maxImageHeight = _this$state.maxImageHeight,
-          maxImageWidth = _this$state.maxImageWidth;
+          maxImageWidth = _this$state.maxImageWidth,
+          dimensions = _this$state.dimensions;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -261,10 +268,10 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           _this3.image = _ref3;
         },
         src: imageUrl,
-        style: {
+        style: _objectSpread({
           maxWidth: maxImageWidth,
           maxHeight: maxImageHeight
-        },
+        }, dimensions),
         alt: ""
       }), /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref4) {

package/configure/lib/image-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-container.jsx"],"names":["isImage","file","imageType","type","match","ImageContainer","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","target","files","handleFileRead","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","offsetHeight","offsetWidth","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: 0,\n      maxImageHeight: 0,\n      dragEnabled: true,\n      dropzoneActive: false,\n    }\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive= () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth } }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: offsetHeight,\n      width: offsetWidth\n    };\n\n    this.setState({ dimensions });\n    onUpdateImageDimension(dimensions);\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  stopResizing = () => {\n    const { onUpdateImageDimension } = this.props;\n    const { dimensions } = this.state;\n\n    this.handleEnableDrag();\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  startResizing = (e) => {\n    const box = this.image;\n    const { maxImageWidth } = this.state;\n\n    const bounds = e.target.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n\n    const fitsContainer = x <= maxImageWidth + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth) {\n      box.style.width = `${x}px`;\n      box.style.height = `${y}px`;\n\n      this.setState({ dimensions: { height: y, width: x }});\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button\n          label={label}\n          onClick={this.handleInputClick}\n        />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={ref => { this.input = ref; }}\n          type=\"file\"\n        />\n      </div>\n    )\n  }\n\n  render() {\n    const {\n      classes,\n      imageUrl\n    } = this.props;\n    const {\n      dropzoneActive,\n      dragEnabled,\n      maxImageHeight,\n      maxImageWidth\n    } = this.state;\n\n    return (\n      <div className={classes.base} >\n        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n             {...dragEnabled ? {\n               onDragExit: this.handleOnDragExit,\n               onDragLeave: this.handleOnDragExit,\n               onDragOver: this.handleOnDragOver ,\n               onDrop: this.handleOnDrop\n             } : {}}\n        >\n          <div className={classes.toolbar}>\n            {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}\n          </div>\n\n          <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={ref => { this.image = ref; }}\n                  src={imageUrl}\n                  style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}\n                  alt=''\n                />\n                <div ref={ref => { this.resize = ref; }} className={classes.resize} />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 2\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px'\n  },\n  boxActive: {\n    border: '1px solid #0032C2'\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center'\n  },\n  drawableHeight: {\n    minHeight: 350\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px'\n  },\n  input: {\n    display: 'none'\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px'\n  }\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}
+{"version":3,"sources":["../src/image-container.jsx"],"names":["isImage","file","imageType","type","match","ImageContainer","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","target","files","handleFileRead","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","offsetHeight","offsetWidth","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","keepAspectRatioWidth","keepAspectRatioHeight","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: 0,\n      maxImageHeight: 0,\n      dragEnabled: true,\n      dropzoneActive: false,\n    };\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height,\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive = () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth } }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: offsetHeight,\n      width: offsetWidth,\n    };\n\n    this.setState({ dimensions });\n    onUpdateImageDimension(dimensions);\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  stopResizing = () => {\n    const { onUpdateImageDimension } = this.props;\n    const { dimensions } = this.state;\n\n    this.handleEnableDrag();\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  startResizing = (e) => {\n    const box = this.image;\n    const { maxImageWidth } = this.state;\n\n    const bounds = e.target.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n\n    const fitsContainer = x <= maxImageWidth + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    const keepAspectRatioWidth = x > y ? x : 'auto';\n    const keepAspectRatioHeight = x > y ? 'auto' : y;\n\n    if (fitsContainer && hasMinimumWidth) {\n      box.style.width = `${keepAspectRatioWidth}px`;\n      box.style.height = `${keepAspectRatioHeight}px`;\n\n      this.setState({\n        dimensions: {\n          height: keepAspectRatioHeight,\n          width: keepAspectRatioWidth,\n        },\n      });\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button label={label} onClick={this.handleInputClick} />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={(ref) => {\n            this.input = ref;\n          }}\n          type=\"file\"\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const { classes, imageUrl } = this.props;\n    const {\n      dropzoneActive,\n      dragEnabled,\n      maxImageHeight,\n      maxImageWidth,\n      dimensions,\n    } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${\n            dropzoneActive ? classes.boxActive : ''\n          }`}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            {this.renderUploadControl(\n              imageUrl ? 'Replace Image' : 'Upload Image'\n            )}\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={(ref) => {\n                    this.image = ref;\n                  }}\n                  src={imageUrl}\n                  style={{\n                    maxWidth: maxImageWidth,\n                    maxHeight: maxImageHeight,\n                    ...dimensions,\n                  }}\n                  alt=\"\"\n                />\n                <div\n                  ref={(ref) => {\n                    this.resize = ref;\n                  }}\n                  className={classes.resize}\n                />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  input: {\n    display: 'none',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px',\n  },\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}

package/configure/lib/index.js

@@ -35,9 +35,9 @@ var _root = _interopRequireDefault(require("./root"));
 
 var _defaults = _interopRequireDefault(require("./defaults"));
 
-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); }; }
 

package/configure/lib/root.js

@@ -37,9 +37,9 @@ var _imageContainer = _interopRequireDefault(require("./image-container"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-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); }; }
 
@@ -116,11 +116,14 @@ var Root = /*#__PURE__*/function (_React$Component) {
           _ref$prompt = _ref.prompt,
           prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
           _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi;
+          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
+          _ref$spellCheck = _ref.spellCheck,
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck;
 
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
           promptEnabled = _ref2.promptEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
           backgroundImageEnabled = _ref2.backgroundImageEnabled;
 
       var toolbarOpts = {};
@@ -149,7 +152,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
               promptEnabled: prompt.settings && toggle(prompt.label)
             },
             Properties: {
-              teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label)
+              teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+              spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label)
             }
           }
         })
@@ -163,7 +167,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: this.onTeacherInstructionsChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        toolbarOpts: toolbarOpts
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: "Item Stem",
         className: classes.prompt
@@ -171,6 +176,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         markup: model.prompt,
         onChange: this.onPromptChanged,
         toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
         imageSupport: imageSupport
       })), backgroundImageEnabled && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.label,

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","teacherInstructionsEnabled","promptEnabled","backgroundImageEnabled","toolbarOpts","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = prompt => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({\n      ...update,\n      prompt\n    });\n  };\n\n  onTeacherInstructionsChanged = teacherInstructions => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageDimensions: dimensions\n    });\n  };\n\n  onImageUpload = imageUrl => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageUrl\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onModelChanged\n    } = this.props;\n    const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =\n      configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, backgroundImageEnabled} =\n      model || {};\n    const toolbarOpts = {};\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChanged}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                Settings: {\n                  backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label)\n                }\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                />\n              </InputContainer>\n            )}\n\n            {promptEnabled && (\n              <InputContainer label=\"Item Stem\" className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  toolbarOpts={toolbarOpts}\n                  imageSupport={imageSupport}\n                />\n              </InputContainer>\n            )}\n\n            {backgroundImageEnabled && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Define Background Image\n                </Typography>\n\n                <ImageContainer\n                  imageUrl={model.imageUrl}\n                  onUpdateImageDimension={this.onUpdateImageDimension}\n                  onImageUpload={this.onImageUpload}\n                />\n              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 3\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3\n  }\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func\n  }),\n  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","spellCheck","teacherInstructionsEnabled","promptEnabled","spellCheckEnabled","backgroundImageEnabled","toolbarOpts","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = (prompt) => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({\n      ...update,\n      prompt,\n    });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions,\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageDimensions: dimensions,\n    });\n  };\n\n  onImageUpload = (imageUrl) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageUrl,\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onModelChanged,\n    } = this.props;\n    const {\n      backgroundImage = {},\n      prompt = {},\n      teacherInstructions = {},\n      spellCheck = {},\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } =\n      model || {};\n    const toolbarOpts = {};\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChanged}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                Settings: {\n                  backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label),\n                  spellCheckEnabled:\n                    spellCheck.settings && toggle(spellCheck.label),\n                },\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                />\n              </InputContainer>\n            )}\n\n            {promptEnabled && (\n              <InputContainer label=\"Item Stem\" className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  imageSupport={imageSupport}\n                />\n              </InputContainer>\n            )}\n\n            {backgroundImageEnabled && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Define Background Image\n                </Typography>\n\n                <ImageContainer\n                  imageUrl={model.imageUrl}\n                  onUpdateImageDimension={this.onUpdateImageDimension}\n                  onImageUpload={this.onImageUpload}\n                />\n              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 3,\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4,\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3,\n  },\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/src/__tests__/__snapshots__/root.test.jsx.snap

@@ -15,6 +15,11 @@ exports[`Root snapshot renders 1`] = `
               "label": "Prompt",
               "settings": true,
             },
+            "spellCheck": Object {
+              "enabled": true,
+              "label": "Spellcheck",
+              "settings": true,
+            },
             "teacherInstructions": Object {
               "label": "Teacher Instructions",
               "settings": true,
@@ -24,6 +29,7 @@ exports[`Root snapshot renders 1`] = `
         groups={
           Object {
             "Properties": Object {
+              "spellCheckEnabled": undefined,
               "teacherInstructionsEnabled": undefined,
             },
             "Settings": Object {

package/configure/src/defaults.js

@@ -13,6 +13,11 @@ export default {
     toolbarEditorPosition: 'bottom',
   },
   configuration: {
+    spellCheck: {
+      label: "Spellcheck",
+      settings:true,
+      enabled:true
+    },
     backgroundImage: {
       settings: true,
       label: 'Background Image'

package/configure/src/image-container.jsx

@@ -17,7 +17,7 @@ export class ImageContainer extends Component {
       maxImageHeight: 0,
       dragEnabled: true,
       dropzoneActive: false,
-    }
+    };
   }
 
   componentDidMount() {
@@ -26,7 +26,7 @@ export class ImageContainer extends Component {
       const { height, width } = positionInfo;
       this.setState({
         maxImageWidth: width,
-        maxImageHeight: height
+        maxImageHeight: height,
       });
     }
   }
@@ -46,7 +46,7 @@ export class ImageContainer extends Component {
     this.handleFileRead(file);
   };
 
-  makeDropzoneActive= () => this.setState({ dropzoneActive: true });
+  makeDropzoneActive = () => this.setState({ dropzoneActive: true });
 
   makeDropzoneInactive = () => this.setState({ dropzoneActive: false });
 
@@ -90,7 +90,7 @@ export class ImageContainer extends Component {
 
     const dimensions = {
       height: offsetHeight,
-      width: offsetWidth
+      width: offsetWidth,
     };
 
     this.setState({ dimensions });
@@ -126,11 +126,19 @@ export class ImageContainer extends Component {
     const fitsContainer = x <= maxImageWidth + 5;
     const hasMinimumWidth = x > 150 && y > 150;
 
+    const keepAspectRatioWidth = x > y ? x : 'auto';
+    const keepAspectRatioHeight = x > y ? 'auto' : y;
+
     if (fitsContainer && hasMinimumWidth) {
-      box.style.width = `${x}px`;
-      box.style.height = `${y}px`;
+      box.style.width = `${keepAspectRatioWidth}px`;
+      box.style.height = `${keepAspectRatioHeight}px`;
 
-      this.setState({ dimensions: { height: y, width: x }});
+      this.setState({
+        dimensions: {
+          height: keepAspectRatioHeight,
+          width: keepAspectRatioWidth,
+        },
+      });
     }
 
     this.handleDisableDrag();
@@ -141,60 +149,80 @@ export class ImageContainer extends Component {
 
     return (
       <div>
-        <Button
-          label={label}
-          onClick={this.handleInputClick}
-        />
+        <Button label={label} onClick={this.handleInputClick} />
         <input
           accept="image/*"
           className={classes.input}
           onChange={this.handleUploadImage}
-          ref={ref => { this.input = ref; }}
+          ref={(ref) => {
+            this.input = ref;
+          }}
           type="file"
         />
       </div>
-    )
+    );
   }
 
   render() {
-    const {
-      classes,
-      imageUrl
-    } = this.props;
+    const { classes, imageUrl } = this.props;
     const {
       dropzoneActive,
       dragEnabled,
       maxImageHeight,
-      maxImageWidth
+      maxImageWidth,
+      dimensions,
     } = this.state;
 
     return (
-      <div className={classes.base} >
-        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
-             {...dragEnabled ? {
-               onDragExit: this.handleOnDragExit,
-               onDragLeave: this.handleOnDragExit,
-               onDragOver: this.handleOnDragOver ,
-               onDrop: this.handleOnDrop
-             } : {}}
+      <div className={classes.base}>
+        <div
+          className={`${classes.box} ${
+            dropzoneActive ? classes.boxActive : ''
+          }`}
+          {...(dragEnabled
+            ? {
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+              }
+            : {})}
         >
           <div className={classes.toolbar}>
-            {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}
+            {this.renderUploadControl(
+              imageUrl ? 'Replace Image' : 'Upload Image'
+            )}
           </div>
 
-          <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>
+          <div
+            ref={(ref) => {
+              this.imageSection = ref;
+            }}
+            className={classes.drawableHeight}
+          >
             {imageUrl ? (
               <div className={classes.imageContainer}>
                 <img
                   className={classes.image}
                   height="auto"
                   onLoad={this.handleOnImageLoad}
-                  ref={ref => { this.image = ref; }}
+                  ref={(ref) => {
+                    this.image = ref;
+                  }}
                   src={imageUrl}
-                  style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}
-                  alt=''
+                  style={{
+                    maxWidth: maxImageWidth,
+                    maxHeight: maxImageHeight,
+                    ...dimensions,
+                  }}
+                  alt=""
+                />
+                <div
+                  ref={(ref) => {
+                    this.resize = ref;
+                  }}
+                  className={classes.resize}
                 />
-                <div ref={ref => { this.resize = ref; }} className={classes.resize} />
               </div>
             ) : (
               <div className={`${classes.drawableHeight} ${classes.centered}`}>
@@ -210,25 +238,25 @@ export class ImageContainer extends Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
   box: {
     border: '1px solid #E0E1E6',
-    borderRadius: '5px'
+    borderRadius: '5px',
   },
   boxActive: {
-    border: '1px solid #0032C2'
+    border: '1px solid #0032C2',
   },
   centered: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   drawableHeight: {
-    minHeight: 350
+    minHeight: 350,
   },
   image: {
     alignItems: 'center',
@@ -237,7 +265,7 @@ const styles = theme => ({
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   resize: {
     borderBottom: '1px solid #727272',
@@ -247,10 +275,10 @@ const styles = theme => ({
     height: '10px',
     position: 'absolute',
     right: '-10px',
-    width: '10px'
+    width: '10px',
   },
   input: {
-    display: 'none'
+    display: 'none',
   },
   toolbar: {
     backgroundColor: '#ECEDF1',
@@ -258,15 +286,15 @@ const styles = theme => ({
     borderTopLeftRadius: '5px',
     borderTopRightRadius: '5px',
     display: 'flex',
-    padding: '12px 8px'
-  }
+    padding: '12px 8px',
+  },
 });
 
 ImageContainer.propTypes = {
   classes: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   onImageUpload: PropTypes.func.isRequired,
-  onUpdateImageDimension: PropTypes.func.isRequired
+  onUpdateImageDimension: PropTypes.func.isRequired,
 };
 
 export default withStyles(styles)(ImageContainer);

package/configure/src/root.jsx

@@ -11,22 +11,22 @@ import cloneDeep from 'lodash/cloneDeep';
 const { Panel, toggle } = settings;
 
 export class Root extends React.Component {
-  onPromptChanged = prompt => {
+  onPromptChanged = (prompt) => {
     const { model, onModelChanged } = this.props;
     const update = cloneDeep(model);
 
     onModelChanged({
       ...update,
-      prompt
+      prompt,
     });
   };
 
-  onTeacherInstructionsChanged = teacherInstructions => {
+  onTeacherInstructionsChanged = (teacherInstructions) => {
     const { model, onModelChanged } = this.props;
 
     onModelChanged({
       ...model,
-      teacherInstructions
+      teacherInstructions,
     });
   };
 
@@ -35,16 +35,16 @@ export class Root extends React.Component {
 
     onModelChanged({
       ...model,
-      imageDimensions: dimensions
+      imageDimensions: dimensions,
     });
   };
 
-  onImageUpload = imageUrl => {
+  onImageUpload = (imageUrl) => {
     const { model, onModelChanged } = this.props;
 
     onModelChanged({
       ...model,
-      imageUrl
+      imageUrl,
     });
   };
 
@@ -55,11 +55,15 @@ export class Root extends React.Component {
       model,
       imageSupport,
       onConfigurationChanged,
-      onModelChanged
+      onModelChanged,
     } = this.props;
-    const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =
-      configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, backgroundImageEnabled} =
+    const {
+      backgroundImage = {},
+      prompt = {},
+      teacherInstructions = {},
+      spellCheck = {},
+    } = configuration || {};
+    const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } =
       model || {};
     const toolbarOpts = {};
 
@@ -89,8 +93,10 @@ export class Root extends React.Component {
                 Properties: {
                   teacherInstructionsEnabled:
                     teacherInstructions.settings &&
-                    toggle(teacherInstructions.label)
-                }
+                    toggle(teacherInstructions.label),
+                  spellCheckEnabled:
+                    spellCheck.settings && toggle(spellCheck.label),
+                },
               }}
             />
           }
@@ -107,6 +113,7 @@ export class Root extends React.Component {
                   imageSupport={imageSupport}
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                 />
               </InputContainer>
             )}
@@ -117,6 +124,7 @@ export class Root extends React.Component {
                   markup={model.prompt}
                   onChange={this.onPromptChanged}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                   imageSupport={imageSupport}
                 />
               </InputContainer>
@@ -142,20 +150,20 @@ export class Root extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 3,
   },
   label: {
-    marginTop: theme.spacing.unit * 4
+    marginTop: theme.spacing.unit * 4,
   },
   prompt: {
     paddingTop: theme.spacing.unit * 2,
-    width: '100%'
+    width: '100%',
   },
   regular: {
-    marginBottom: theme.spacing.unit * 3
-  }
+    marginBottom: theme.spacing.unit * 3,
+  },
 });
 
 Root.propTypes = {
@@ -164,7 +172,7 @@ Root.propTypes = {
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
     add: PropTypes.func,
-    delete: PropTypes.func
+    delete: PropTypes.func,
   }),
   onModelChanged: PropTypes.func.isRequired,
   onConfigurationChanged: PropTypes.func.isRequired,

package/controller/lib/index.js

@@ -5,9 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createDefaultModel = void 0;
 exports.model = model;
+exports.normalize = void 0;
 exports.outcome = outcome;
-exports.createDefaultModel = exports.normalize = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,9 +16,9 @@ var _debug = _interopRequireDefault(require("debug"));
 
 var _defaults = _interopRequireDefault(require("./defaults"));
 
-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; }
 
 var log = (0, _debug["default"])('pie-elements:drawing-response:controller');
 
@@ -68,7 +69,9 @@ var createDefaultModel = function createDefaultModel() {
 
 exports.createDefaultModel = createDefaultModel;
 
-function outcome() {
+function
+  /*config, session*/
+outcome() {
   return new Promise(function (resolve) {
     log('outcome...');
     resolve({

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE,IAHG;AAI/BC,IAAAA,sBAAsB,EAAE;AAJO,KAK5BJ,QAL4B;AAAA,CAA1B;;;;AAQA,SAASK,KAAT,CAAeL,QAAf,EAAyBM,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGT,SAAS,CAACC,QAAD,CAApC;AACA,MACES,QADF,GAMID,kBANJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAMIF,kBANJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAMIH,kBANJ,CAGEG,MAHF;AAAA,MAIEV,aAJF,GAMIO,kBANJ,CAIEP,aAJF;AAAA,MAKEG,sBALF,GAMII,kBANJ,CAKEJ,sBALF;AAQA,SAAO,IAAIQ,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEV,aAAa,GAAGU,MAAH,GAAY,IALvB;AAMVP,MAAAA,sBAAsB,EAAtBA;AANU,KAAZ;;AASA,QAAIG,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACN,0BAAnB,GAAgDM,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAjBM,CAAP;AAkBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA,SAASgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bf,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAe,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  backgroundImageEnabled: true,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    imageDimensions,\n    prompt,\n    promptEnabled,\n    backgroundImageEnabled\n  } = normalizedQuestion;\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    })\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise(resolve => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring'\n    });\n  });\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE,IAHG;AAI/BC,IAAAA,sBAAsB,EAAE;AAJO,KAK5BJ,QAL4B;AAAA,CAA1B;;;;AAQA,SAASK,KAAT,CAAeL,QAAf,EAAyBM,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGT,SAAS,CAACC,QAAD,CAApC;AACA,MACES,QADF,GAMID,kBANJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAMIF,kBANJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAMIH,kBANJ,CAGEG,MAHF;AAAA,MAIEV,aAJF,GAMIO,kBANJ,CAIEP,aAJF;AAAA,MAKEG,sBALF,GAMII,kBANJ,CAKEJ,sBALF;AAQA,SAAO,IAAIQ,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEV,aAAa,GAAGU,MAAH,GAAY,IALvB;AAMVP,MAAAA,sBAAsB,EAAtBA;AANU,KAAZ;;AASA,QAAIG,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACN,0BAAnB,GAAgDM,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAjBM,CAAP;AAkBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA;AAAiB;AAARgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bf,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAe,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  backgroundImageEnabled: true,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    imageDimensions,\n    prompt,\n    promptEnabled,\n    backgroundImageEnabled\n  } = normalizedQuestion;\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    })\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise(resolve => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring'\n    });\n  });\n}\n"],"file":"index.js"}

package/docs/config-schema.json

@@ -4,7 +4,7 @@
   "type": "object",
   "properties": {
     "backgroundImage": {
-      "title": "ConfigureProp",
+      "title": "ConfigurePropWithEnabled",
       "type": "object",
       "properties": {
         "settings": {
@@ -16,6 +16,11 @@
           "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
           "type": "string",
           "title": "label"
+        },
+        "enabled": {
+          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
+          "type": "boolean",
+          "title": "enabled"
         }
       }
     },
@@ -35,6 +40,22 @@
         }
       }
     },
+    "spellCheck": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
     "studentInstructions": {
       "title": "ConfigureProp",
       "type": "object",
@@ -81,6 +102,27 @@
     }
   },
   "definitions": {
+    "ConfigurePropWithEnabled": {
+      "title": "ConfigurePropWithEnabled",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        },
+        "enabled": {
+          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
+          "type": "boolean",
+          "title": "enabled"
+        }
+      }
+    },
     "ConfigureProp": {
       "title": "ConfigureProp",
       "type": "object",

package/docs/config-schema.json.md

@@ -14,6 +14,11 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+## `enabled` (boolean)
+
+Indicates the value of the item if it affects config-ui
+(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
+
 # `partialScoring` (object)
 
 Properties of the `partialScoring` object:
@@ -26,6 +31,18 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `spellCheck` (object)
+
+Properties of the `spellCheck` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
 # `studentInstructions` (object)
 
 Properties of the `studentInstructions` object:
@@ -68,6 +85,23 @@ Default: `"Item Stemm"`
 
 The schema defines the following additional types:
 
+## `ConfigurePropWithEnabled` (object)
+
+Properties of the `ConfigurePropWithEnabled` object:
+
+### `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+### `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+### `enabled` (boolean)
+
+Indicates the value of the item if it affects config-ui
+(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
+
 ## `ConfigureProp` (object)
 
 Properties of the `ConfigureProp` object:

package/docs/pie-schema.json

@@ -63,6 +63,11 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "backgroundImageEnabled": {
       "description": "Indicates if Background Image is enabled",
       "type": "boolean",
@@ -94,10 +99,32 @@
     "element",
     "id",
     "imageDimensions",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
   "definitions": {
+    "ConfigurePropWithEnabled": {
+      "title": "ConfigurePropWithEnabled",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        },
+        "enabled": {
+          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
+          "type": "boolean",
+          "title": "enabled"
+        }
+      }
+    },
     "ConfigureProp": {
       "title": "ConfigureProp",
       "type": "object",

package/docs/pie-schema.json.md

@@ -46,6 +46,10 @@ Indicates if Student Instructions are enabled
 
 Indicates if Teacher Instructions are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled
+
 # `backgroundImageEnabled` (boolean, required)
 
 Indicates if Background Image is enabled
@@ -75,6 +79,23 @@ The html Element tag name
 
 The schema defines the following additional types:
 
+## `ConfigurePropWithEnabled` (object)
+
+Properties of the `ConfigurePropWithEnabled` object:
+
+### `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+### `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+### `enabled` (boolean)
+
+Indicates the value of the item if it affects config-ui
+(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
+
 ## `ConfigureProp` (object)
 
 Properties of the `ConfigureProp` object:

package/lib/drawing-response/drawable-image.js

@@ -27,8 +27,8 @@ var DrawableImage = function DrawableImage(_ref) {
     src: url,
     style: {
       height: height,
-      maxWidth: width,
-      maxHeight: height,
+      maxWidth: 598,
+      maxHeight: 350,
       width: width
     }
   }));

package/lib/drawing-response/drawable-image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAEH,KAFL;AAGLI,MAAAA,SAAS,EAAEL,MAHN;AAILC,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      alt=\"drawing-response-image\"\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: width,\n        maxHeight: height,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  }\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAE,GAFL;AAGLC,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      alt=\"drawing-response-image\"\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: 598,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  }\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}

package/lib/drawing-response/drawable-main.js

@@ -47,9 +47,9 @@ var _button = _interopRequireDefault(require("./button"));
 
 var _factory = _interopRequireDefault(require("./factory"));
 
-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); }; }
 

package/lib/drawing-response/drawable-text.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.generateId = void 0;
+exports.generateId = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,9 +21,9 @@ var _reactKonva = require("react-konva");
 
 var _drawableTransformer = _interopRequireDefault(require("./drawable-transformer"));
 
-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; }
 
 var generateId = function generateId() {
   return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "3.7.3-next.672+01e4d0147",
+  "version": "3.7.3-next.721+278dd60f1",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "01e4d014720f0b5414e0edba270248e914372eb4",
+  "gitHead": "278dd60f1aef0c9f196b8531f7df61daca98ce75",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/drawable-image.jsx

@@ -10,8 +10,8 @@ const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
       src={url}
       style={{
         height,
-        maxWidth: width,
-        maxHeight: height,
+        maxWidth: 598,
+        maxHeight: 350,
         width,
       }}
     />