@pie-element/explicit-constructed-response 3.7.19-next.85 → 3.8.1-beta.587

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)
         }
       });
 

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","ExplicitConstructedResponse","_model","prepareModel","_configuration","sensibleDefaults","configuration","onModelChanged","bind","onConfigurationChanged","s","_render","c","_disableSidePanel","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","dispatchModelUpdated","handler","InsertImageEvent","src","done","DeleteImageEvent","element","React","createElement","Main","model","disableSidePanel","imageSupport","add","insertImage","onDeleteImage","ReactDOM","render","HTMLElement","joinedObj","slateMarkup","markup","choices","processedMarkup","Object","keys","forEach","key","map","item","index","value"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport defaults from 'lodash/defaults';\nimport isArray from 'lodash/isArray';\nimport {\n  DeleteImageEvent,\n  InsertImageEvent,\n  ModelUpdatedEvent\n} from '@pie-framework/pie-configure-events';\n\nimport Main from './main';\n\nimport sensibleDefaults from './defaults';\nimport { processMarkup, createSlateMarkup } from './markupUtils'\n\nconst log = debug('explicit-constructed-response:configure');\n\nexport default class ExplicitConstructedResponse extends HTMLElement {\n  static prepareModel = (model = {}) => {\n    const joinedObj = {\n      ...sensibleDefaults.model,\n      ...model,\n    };\n    const slateMarkup = joinedObj.slateMarkup || createSlateMarkup(joinedObj.markup, joinedObj.choices);\n    const processedMarkup = processMarkup(slateMarkup);\n\n    // this was added to treat an exception, when the model has choices without the \"value\" property\n    // like: { label: 'test' }\n    if (joinedObj.choices) {\n      Object.keys(joinedObj.choices).forEach(key => {\n        if (isArray(joinedObj.choices[key])) {\n          joinedObj.choices[key] = (joinedObj.choices[key] || []).map((item, index) => {\n            if (!item.value) {\n              log('Choice does not contain \"value\" property, which is required.', item);\n              return { value: `${index}`, ...item };\n            }\n\n            return item;\n          })\n        }\n      });\n    }\n\n    return {\n      ...joinedObj,\n      slateMarkup,\n      markup: processedMarkup\n    };\n  };\n\n  constructor() {\n    super();\n    this._model = ExplicitConstructedResponse.prepareModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = ExplicitConstructedResponse.prepareModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = defaults(c, sensibleDefaults.configuration);\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = ExplicitConstructedResponse.prepareModel(m);\n    this._render();\n    this.dispatchModelUpdated(reset);\n  }\n\n  onConfigurationChanged(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  /** @param {done, progress, file} handler */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Main, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      disableSidePanel: this._disableSidePanel,\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this)\n      }\n    });\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","ExplicitConstructedResponse","_model","prepareModel","_configuration","sensibleDefaults","configuration","onModelChanged","bind","onConfigurationChanged","s","_render","c","_disableSidePanel","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","dispatchModelUpdated","handler","InsertImageEvent","src","done","DeleteImageEvent","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Main","model","disableSidePanel","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","ReactDOM","render","HTMLElement","joinedObj","slateMarkup","markup","choices","processedMarkup","Object","keys","forEach","key","map","item","index","value"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport defaults from 'lodash/defaults';\nimport isArray from 'lodash/isArray';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport Main from './main';\n\nimport sensibleDefaults from './defaults';\nimport { processMarkup, createSlateMarkup } from './markupUtils';\n\nconst log = debug('explicit-constructed-response:configure');\n\nexport default class ExplicitConstructedResponse extends HTMLElement {\n  static prepareModel = (model = {}) => {\n    const joinedObj = {\n      ...sensibleDefaults.model,\n      ...model,\n    };\n    const slateMarkup = joinedObj.slateMarkup || createSlateMarkup(joinedObj.markup, joinedObj.choices);\n    const processedMarkup = processMarkup(slateMarkup);\n\n    // this was added to treat an exception, when the model has choices without the \"value\" property\n    // like: { label: 'test' }\n    if (joinedObj.choices) {\n      Object.keys(joinedObj.choices).forEach((key) => {\n        if (isArray(joinedObj.choices[key])) {\n          joinedObj.choices[key] = (joinedObj.choices[key] || []).map((item, index) => {\n            if (!item.value) {\n              log('Choice does not contain \"value\" property, which is required.', item);\n              return { value: `${index}`, ...item };\n            }\n\n            return item;\n          });\n        }\n      });\n    }\n\n    return {\n      ...joinedObj,\n      slateMarkup,\n      markup: processedMarkup,\n    };\n  };\n\n  constructor() {\n    super();\n    this._model = ExplicitConstructedResponse.prepareModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = ExplicitConstructedResponse.prepareModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = defaults(c, sensibleDefaults.configuration);\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = ExplicitConstructedResponse.prepareModel(m);\n    this._render();\n    this.dispatchModelUpdated(reset);\n  }\n\n  onConfigurationChanged(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  /** @param {done, progress, file} handler */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Main, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      disableSidePanel: this._disableSidePanel,\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}

package/configure/lib/main.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Main = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -31,6 +33,10 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
 var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
 
 var _configUi = require("@pie-lib/config-ui");
@@ -39,17 +45,29 @@ var _styles = require("@material-ui/core/styles");
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
 var _ecrToolbar = _interopRequireDefault(require("./ecr-toolbar"));
 
 var _alternateResponses = _interopRequireDefault(require("./alternateResponses"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _markupUtils = require("./markupUtils");
+
+var _utils = require("./utils");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var toggle = _configUi.settings.toggle,
     Panel = _configUi.settings.Panel;
@@ -90,9 +108,23 @@ var styles = function styles(theme) {
     text: {
       color: '#495B8F',
       fontFamily: 'Cerebri Sans',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize + 2,
       lineHeight: '19px',
       marginTop: theme.spacing.unit * 4
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: 'red',
+      paddingTop: theme.spacing.unit
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'end'
     }
   };
 };
@@ -150,89 +182,229 @@ var Main = /*#__PURE__*/function (_React$Component) {
         choices: choices
       }));
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLengthChanged", function (maxLengthPerChoice) {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onModelChanged = _this$props2.onModelChanged;
+      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+        maxLengthPerChoice: maxLengthPerChoice
+      }));
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeResponse", function (index, newVal) {
-      var choices = _this.props.model.choices;
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
+      var choices = model.choices;
+      var maxLengthPerChoice = model.maxLengthPerChoice;
+      var newValLength = (newVal || '').length;
 
       if (!choices[index]) {
         choices[index] = [{
-          label: '',
+          label: newVal || '',
           value: '0'
-        }];
-      }
+        }]; // add default values for missing choices up to the new index position
 
-      choices[index][0].label = newVal || '';
+        var nbOfMissingChoices = index > maxLengthPerChoice.length ? index - maxLengthPerChoice.length : 0;
+        maxLengthPerChoice = [].concat((0, _toConsumableArray2["default"])(maxLengthPerChoice), (0, _toConsumableArray2["default"])(Array(nbOfMissingChoices).fill(1)));
+        maxLengthPerChoice.splice(index, 0, (0, _markupUtils.getAdjustedLength)(newValLength));
+      } else {
+        choices[index][0].label = newVal || '';
 
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        choices: choices
+        if (maxLengthPerChoice && (maxLengthPerChoice[index] < newValLength || maxLengthPerChoice[index] > newValLength + 10)) {
+          maxLengthPerChoice[index] = (0, _markupUtils.getAdjustedLength)(newValLength);
+        }
+      }
+
+      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+        choices: choices,
+        maxLengthPerChoice: maxLengthPerChoice
       }));
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
-      var choices = _this.props.model.choices;
+      var _this$props4 = _this.props,
+          _this$props4$model = _this$props4.model,
+          choices = _this$props4$model.choices,
+          maxLengthPerChoice = _this$props4$model.maxLengthPerChoice,
+          onModelChanged = _this$props4.onModelChanged;
       var domMarkup = createElementFromHTML(markup);
       var allRespAreas = domMarkup.querySelectorAll('[data-type="explicit_constructed_response"]');
       var allChoices = {};
+      var updatedMaxLengthPerChoice = [];
       allRespAreas.forEach(function (el, index) {
-        el.dataset.index = index;
-      });
-      allRespAreas.forEach(function (el, index) {
-        var newChoices = (0, _cloneDeep["default"])(Object.values(choices)[index]);
+        var newChoices = (0, _cloneDeep["default"])(choices[el.dataset.index]);
 
         if (newChoices) {
           newChoices[0] = {
             label: el.dataset.value || '',
             value: '0'
           };
+          updatedMaxLengthPerChoice[index] = maxLengthPerChoice[el.dataset.index];
         }
 
-        allChoices[el.dataset.index] = newChoices;
+        allChoices[index] = newChoices;
+        el.dataset.index = index;
       });
 
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        choices: allChoices,
-        slateMarkup: domMarkup.innerHTML
-      }));
+      var callback = function callback() {
+        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: allChoices,
+          slateMarkup: domMarkup.innerHTML,
+          maxLengthPerChoice: updatedMaxLengthPerChoice
+        }));
+      };
+
+      _this.setState({
+        cachedChoices: undefined
+      }, callback);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHandleAreaChange", (0, _throttle["default"])(function (nodes) {
+      var _this$props5 = _this.props,
+          choices = _this$props5.model.choices,
+          onModelChanged = _this$props5.onModelChanged;
+      var cachedChoices = _this.state.cachedChoices;
+
+      if (!nodes) {
+        return;
+      }
+
+      var newChoices = choices ? (0, _cloneDeep["default"])(choices) : {};
+      var newCachedChoices = cachedChoices ? (0, _cloneDeep["default"])(cachedChoices) : {};
+      nodes.forEach(function (node) {
+        var keyForNode = node.data.index;
+
+        if (!newChoices[keyForNode] && newCachedChoices[keyForNode]) {
+          Object.assign(newChoices, (0, _pick["default"])(newCachedChoices, keyForNode));
+
+          if (newCachedChoices.hasOwnProperty(keyForNode)) {
+            delete newCachedChoices[keyForNode];
+          }
+        } else {
+          Object.assign(newCachedChoices, (0, _pick["default"])(newChoices, keyForNode));
+
+          if (newChoices.hasOwnProperty(keyForNode)) {
+            delete newChoices[keyForNode];
+          }
+        }
+      });
+
+      var callback = function callback() {
+        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: newChoices
+        }));
+      };
+
+      _this.setState({
+        cachedChoices: newCachedChoices
+      }, callback);
+    }, 500, {
+      trailing: false,
+      leading: true
+    }));
     return _this;
   }
 
   (0, _createClass2["default"])(Main, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var slateMarkup = this.props.model.slateMarkup;
+      var _this$props6 = this.props,
+          _this$props6$model = _this$props6.model,
+          slateMarkup = _this$props6$model.slateMarkup,
+          choices = _this$props6$model.choices,
+          _this$props6$model$ma = _this$props6$model.maxLengthPerChoice,
+          maxLengthPerChoice = _this$props6$model$ma === void 0 ? [] : _this$props6$model$ma,
+          onModelChanged = _this$props6.onModelChanged;
+      var undefinedLengths = !maxLengthPerChoice.length;
       this.setState({
         markup: slateMarkup
+      }); // calculate maxLengthPerChoice array if it is not defined or defined incorrectly
+
+      Object.values(choices).forEach(function (choice, index) {
+        var labelLengthsArr = (choice || []).map(function (choice) {
+          return (choice.label || '').length;
+        });
+        var length = Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));
+
+        if (undefinedLengths || !maxLengthPerChoice[index] || maxLengthPerChoice[index] < length || maxLengthPerChoice[index] > length + 10) {
+          maxLengthPerChoice[index] = (0, _markupUtils.getAdjustedLength)(length);
+        }
       });
+      onModelChanged(_objectSpread(_objectSpread({}, this.props.model), {}, {
+        maxLengthPerChoice: maxLengthPerChoice
+      }));
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          model = _this$props2.model,
-          configuration = _this$props2.configuration,
-          onConfigurationChanged = _this$props2.onConfigurationChanged,
-          imageSupport = _this$props2.imageSupport;
+      var _this$props7 = this.props,
+          classes = _this$props7.classes,
+          model = _this$props7.model,
+          configuration = _this$props7.configuration,
+          onConfigurationChanged = _this$props7.onConfigurationChanged,
+          imageSupport = _this$props7.imageSupport,
+          uploadSoundSupport = _this$props7.uploadSoundSupport;
 
       var _ref = configuration || {},
-          _ref$prompt = _ref.prompt,
-          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+          _ref$maxLengthPerChoi = _ref.maxLengthPerChoice,
+          maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi,
+          maxResponseAreas = _ref.maxResponseAreas,
           _ref$partialScoring = _ref.partialScoring,
           partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
+          _ref$playerSpellCheck = _ref.playerSpellCheck,
+          playerSpellCheck = _ref$playerSpellCheck === void 0 ? {} : _ref$playerSpellCheck,
+          _ref$prompt = _ref.prompt,
+          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
           _ref$rationale = _ref.rationale,
           rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
+          settingsPanelDisabled = _ref.settingsPanelDisabled,
+          _ref$spellCheck = _ref.spellCheck,
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
           _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi;
+          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
+          _ref$withRubric = _ref.withRubric,
+          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric;
 
       var _ref2 = model || {},
-          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+          errors = _ref2.errors,
+          maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled,
           promptEnabled = _ref2.promptEnabled,
-          rationaleEnabled = _ref2.rationaleEnabled;
-
+          rationaleEnabled = _ref2.rationaleEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
+          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+          toolbarEditorPosition = _ref2.toolbarEditorPosition;
+
+      var _ref3 = errors || {},
+          _ref3$choicesErrors = _ref3.choicesErrors,
+          choicesErrors = _ref3$choicesErrors === void 0 ? {} : _ref3$choicesErrors,
+          responseAreasError = _ref3.responseAreasError;
+
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+      var panelSettings = {
+        partialScoring: partialScoring.settings && toggle(partialScoring.label),
+        maxLengthPerChoiceEnabled: maxLengthPerChoice.settings && toggle(maxLengthPerChoice.label)
+      };
+      var panelProperties = {
+        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+        rationaleEnabled: rationale.settings && toggle(rationale.label),
+        promptEnabled: prompt.settings && toggle(prompt.label),
+        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+        playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
+        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
+      };
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.design
       }, /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        hideSettings: settingsPanelDisabled,
         settings: /*#__PURE__*/_react["default"].createElement(Panel, {
           model: model,
           configuration: configuration,
@@ -243,14 +415,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
             return onConfigurationChanged(configuration, true);
           },
           groups: {
-            Settings: {
-              partialScoring: partialScoring.settings && toggle(partialScoring.label)
-            },
-            Properties: {
-              teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-              rationaleEnabled: rationale.settings && toggle(rationale.label),
-              promptEnabled: prompt.settings && toggle(prompt.label)
-            }
+            Settings: panelSettings,
+            Properties: panelProperties
           }
         })
       }, /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
@@ -261,7 +427,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
         markup: model.teacherInstructions || '',
         onChange: this.onTeacherInstructionsChanged,
         imageSupport: imageSupport,
-        nonEmpty: false
+        nonEmpty: false,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: prompt.label,
         className: classes.promptHolder
@@ -271,47 +447,94 @@ var Main = /*#__PURE__*/function (_React$Component) {
         onChange: this.onPromptChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        disableUnderline: true
-      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        disableUnderline: true,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.flexContainer
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.text
-      }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+      }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        classes: {
+          tooltip: classes.tooltip
+        },
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage
+      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '8px'
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         activePlugins: _editableHtml.ALL_PLUGINS,
         toolbarOpts: {
           position: 'top'
         },
+        spellCheck: spellCheckEnabled,
         responseAreaProps: {
           type: 'explicit-constructed-response',
           options: {
             duplicates: true
           },
-          respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
+          maxResponseAreas: maxResponseAreas,
+          respAreaToolbar: function respAreaToolbar(node, nodePath, editor, onToolbarDone) {
             var model = _this2.props.model;
-            var correctChoice = (model.choices[node.data.get('index')] || [])[0];
+            var correctChoice = (model.choices[node.data.index] || [])[0];
             return function () {
               return /*#__PURE__*/_react["default"].createElement(_ecrToolbar["default"], {
                 onChangeResponse: function onChangeResponse(newVal) {
-                  return _this2.onChangeResponse(node.data.get('index'), newVal);
+                  return _this2.onChangeResponse(node.data.index, newVal);
                 },
                 node: node,
-                value: value,
+                nodePath: nodePath,
+                editor: editor,
                 onToolbarDone: onToolbarDone,
                 correctChoice: correctChoice
               });
             };
-          }
+          },
+          error: function error() {
+            return choicesErrors;
+          },
+          onHandleAreaChange: this.onHandleAreaChange
         },
         className: classes.markup,
         markup: model.slateMarkup,
         onChange: this.onChange,
         imageSupport: imageSupport,
+        disableImageAlignmentButtons: true,
         onBlur: this.onBlur,
         disabled: false,
-        highlightShape: false
-      }), !(0, _isEmpty["default"])(model.choices) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        highlightShape: false,
+        error: responseAreasError,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, responseAreasError), !(0, _isEmpty["default"])(model.choices) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.text
-      }, "Define Alternates"), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
+      }, "Define Alternates ".concat(maxLengthPerChoiceEnabled ? 'and Character Limits' : '')), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
         model: model,
-        onChange: this.onResponsesChanged
+        onChange: this.onResponsesChanged,
+        onLengthChange: this.onLengthChanged,
+        maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled,
+        spellCheck: spellCheckEnabled,
+        choicesErrors: choicesErrors
       }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: rationale.label,
         className: classes.promptHolder
@@ -319,7 +542,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
         className: classes.prompt,
         markup: model.rationale || '',
         onChange: this.onRationaleChanged,
-        imageSupport: imageSupport
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
       })))));
     }
   }]);