@pie-element/match 4.7.0 → 4.7.3-next.1014

package/configure/lib/answer-config-block.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"] = 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,8 +33,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
-var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
-
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
 var _styles = require("@material-ui/core/styles");
@@ -41,19 +41,25 @@ var _addRow = _interopRequireDefault(require("./add-row"));
 
 var _row = _interopRequireDefault(require("./row"));
 
-var _drag = require("@pie-lib/drag");
-
 var _debug = _interopRequireDefault(require("debug"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-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 _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
+
+var _common = require("./common");
 
-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 log = (0, _debug["default"])('pie-elements:match:configure');
 
@@ -73,7 +79,12 @@ var styles = function styles(theme) {
     rowItem: {
       flex: 1,
       display: 'flex',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      '&> div': {
+        width: '150px',
+        padding: '12px',
+        textAlign: 'center'
+      }
     },
     deleteIcon: {
       flex: 0.5,
@@ -82,7 +93,14 @@ var styles = function styles(theme) {
     questionText: {
       flex: 2,
       display: 'flex',
-      justifyContent: 'flex-start'
+      justifyContent: 'flex-start',
+      '&> div': {
+        width: '100%',
+        padding: 0,
+        maxWidth: 'unset',
+        textAlign: 'left',
+        minWidth: '350px'
+      }
     },
     rowTable: {
       display: 'flex',
@@ -95,8 +113,14 @@ var styles = function styles(theme) {
       width: '100%'
     },
     headerInput: {
-      textAlign: 'center',
-      maxWidth: '100px'
+      '&> div': {
+        fontWeight: 'bold'
+      }
+    },
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      paddingTop: '5px'
     }
   };
 };
@@ -116,6 +140,11 @@ var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      dialog: {
+        open: false
+      }
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveRow", function (from, to) {
       var _this$props = _this.props,
           model = _this$props.model,
@@ -123,9 +152,25 @@ var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
 
       var newModel = _objectSpread({}, model);
 
-      var rows = newModel.rows;
+      var rows = newModel.rows || [];
       log('[moveRow]: ', from, to);
-      var update = (0, _drag.swap)(rows, from, to);
+
+      var _rows$reduce = rows.reduce(function (acc, item, index) {
+        if (index === from) {
+          acc.movedRow = item;
+        } else {
+          acc.remainingRows.push(item);
+        }
+
+        return acc;
+      }, {
+        movedRow: null,
+        remainingRows: []
+      }),
+          movedRow = _rows$reduce.movedRow,
+          remainingRows = _rows$reduce.remainingRows;
+
+      var update = [].concat((0, _toConsumableArray2["default"])(remainingRows.slice(0, to)), [movedRow], (0, _toConsumableArray2["default"])(remainingRows.slice(to)));
       log('update: ', update);
       newModel.rows = update;
       onChange(newModel);
@@ -150,15 +195,45 @@ var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
       };
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHeaderChange", function (headerIndex) {
-      return function (event) {
+      return function (value) {
         var _this$props3 = _this.props,
             model = _this$props3.model,
             onChange = _this$props3.onChange;
 
         var newModel = _objectSpread({}, model);
 
-        newModel.headers[headerIndex] = event.target.value;
-        onChange(newModel);
+        if (headerIndex === 0) {
+          newModel.headers[headerIndex] = value;
+          onChange(newModel);
+          return;
+        }
+
+        var headers = newModel.headers || [];
+        var currentHeader = headers[headerIndex];
+        var sameValue = headers.filter(function (header) {
+          var wasChanged = currentHeader !== value && "<div>".concat(currentHeader, "</div>") !== value;
+          var sameValueEntered = header === value || "<div>".concat(header, "</div>") === value;
+          return wasChanged && sameValueEntered;
+        });
+        var empty = value === '<div></div>';
+
+        if (sameValue.length || empty) {
+          _this.setState({
+            dialog: {
+              open: true,
+              onOk: function onOk() {
+                _this.setState({
+                  dialog: {
+                    open: false
+                  }
+                });
+              }
+            }
+          });
+        } else {
+          newModel.headers[headerIndex] = value;
+          onChange(newModel);
+        }
       };
     });
     return _this;
@@ -174,34 +249,65 @@ var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
           model = _this$props4.model,
           onAddRow = _this$props4.onAddRow,
           imageSupport = _this$props4.imageSupport,
-          configuration = _this$props4.configuration;
+          configuration = _this$props4.configuration,
+          toolbarOpts = _this$props4.toolbarOpts,
+          spellCheck = _this$props4.spellCheck;
 
       var _ref2 = configuration || {},
           _ref2$headers = _ref2.headers,
-          headers = _ref2$headers === void 0 ? {} : _ref2$headers;
-
+          headers = _ref2$headers === void 0 ? {} : _ref2$headers,
+          _ref2$maxImageWidth = _ref2.maxImageWidth,
+          maxImageWidth = _ref2$maxImageWidth === void 0 ? {} : _ref2$maxImageWidth,
+          _ref2$maxImageHeight = _ref2.maxImageHeight,
+          maxImageHeight = _ref2$maxImageHeight === void 0 ? {} : _ref2$maxImageHeight;
+
+      var dialog = this.state.dialog;
+
+      var _ref3 = model || {},
+          errors = _ref3.errors;
+
+      var _ref4 = errors || {},
+          correctResponseError = _ref4.correctResponseError,
+          rowsErrors = _ref4.rowsErrors;
+
+      var filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(function (p) {
+        return p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list';
+      });
+      var labelPlugins = {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        }
+      };
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
       return /*#__PURE__*/React.createElement("div", {
         className: classes.container
       }, /*#__PURE__*/React.createElement(_Typography["default"], {
         type: "body1",
         component: "div"
-      }, "Click on the labels to edit or remove. Set the correct answers by clicking each correct answer per row."), /*#__PURE__*/React.createElement("div", {
+      }, "Click on the labels to edit or remove. Set the correct answers by clicking each correct answer per row."), correctResponseError && /*#__PURE__*/React.createElement("div", {
+        className: classes.errorText
+      }, correctResponseError), /*#__PURE__*/React.createElement("div", {
         className: classes.rowTable
       }, /*#__PURE__*/React.createElement("div", {
         className: classes.rowContainer
-      }, headers.settings && model.headers.map(function (header, idx) {
+      }, headers.settings && (model.headers || []).map(function (header, idx) {
         return /*#__PURE__*/React.createElement("div", {
           key: idx,
           className: (0, _classnames["default"])(classes.rowItem, (0, _defineProperty2["default"])({}, classes.questionText, idx === 0))
-        }, /*#__PURE__*/React.createElement(_Input["default"], {
-          type: "text",
-          disableUnderline: true,
-          classes: idx === 0 ? null : {
-            input: classes.headerInput
-          },
+        }, /*#__PURE__*/React.createElement(_editableHtml["default"], {
           onChange: _this2.onHeaderChange(idx),
-          value: header,
-          placeholder: "Enter Value"
+          markup: header,
+          className: classes.headerInput,
+          label: 'column label',
+          activePlugins: filteredDefaultPlugins,
+          pluginProps: labelPlugins,
+          autoWidthToolbar: true,
+          allowValidation: true,
+          spellCheck: spellCheck
         }));
       }), /*#__PURE__*/React.createElement("div", {
         className: classes.deleteIcon
@@ -219,11 +325,20 @@ var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
           onChange: _this2.props.onChange,
           onMoveRow: _this2.moveRow,
           imageSupport: imageSupport,
-          enableImages: model.enableImages
+          enableImages: model.enableImages,
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheck,
+          error: rowsErrors && rowsErrors[row.id],
+          maxImageWidth: maxImageWidth && maxImageWidth.rowTitles || defaultImageMaxWidth,
+          maxImageHeight: maxImageHeight && maxImageHeight.rowTitles || defaultImageMaxHeight
         });
       }), /*#__PURE__*/React.createElement(_addRow["default"], {
         onAddClick: onAddRow
-      })));
+      })), /*#__PURE__*/React.createElement(_common.InfoDialog, {
+        title: 'The column headings must be non-blank and unique.',
+        open: dialog.open,
+        onOk: dialog.onOk
+      }));
     }
   }]);
   return AnswerConfigBlock;
@@ -239,10 +354,11 @@ var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
   imageSupport: _propTypes["default"].shape({
     add: _propTypes["default"].func.isRequired,
     "delete": _propTypes["default"].func.isRequired
-  })
+  }),
+  toolbarOpts: _propTypes["default"].object
 });
 
-var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(styles)(AnswerConfigBlock));
+var _default = (0, _styles.withStyles)(styles)(AnswerConfigBlock);
 
 exports["default"] = _default;
 //# sourceMappingURL=answer-config-block.js.map

package/configure/lib/answer-config-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/answer-config-block.jsx"],"names":["log","styles","theme","container","marginTop","spacing","unit","display","flexDirection","rowContainer","alignItems","flex","rowItem","justifyContent","deleteIcon","minWidth","questionText","rowTable","separator","border","borderTop","width","headerInput","textAlign","maxWidth","AnswerConfigBlock","from","to","props","model","onChange","newModel","rows","update","name","isBoolean","target","value","checked","lodash","set","headerIndex","event","headers","classes","onAddRow","imageSupport","configuration","settings","map","header","idx","input","onHeaderChange","row","onDeleteRow","moveRow","enableImages","React","Component","PropTypes","object","isRequired","func","shape","add"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport Input from '@material-ui/core/Input';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport AddRow from './add-row';\nimport Row from './row';\nimport { swap, withDragContext } from '@pie-lib/drag';\nimport debug from 'debug';\nimport lodash from 'lodash';\n\nconst log = debug('pie-elements:match:configure');\n\nconst styles = theme => ({\n  container: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  rowContainer: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1\n  },\n  rowItem: {\n    flex: 1,\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  deleteIcon: {\n    flex: 0.5,\n    minWidth: '88px'\n  },\n  questionText: {\n    flex: 2,\n    display: 'flex',\n    justifyContent: 'flex-start'\n  },\n  rowTable: {\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  separator: {\n    marginTop: theme.spacing.unit * 2,\n    border: 0,\n    borderTop: '2px solid lightgray',\n    width: '100%'\n  },\n  headerInput: {\n    textAlign: 'center',\n    maxWidth: '100px'\n  }\n});\n\nclass AnswerConfigBlock extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onDeleteRow: PropTypes.func.isRequired,\n    onAddRow: PropTypes.func.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    })\n  };\n\n  moveRow = (from, to) => {\n    const { model, onChange } = this.props;\n    const newModel = { ...model };\n    const rows = newModel.rows;\n\n    log('[moveRow]: ', from, to);\n\n    const update = swap(rows, from, to);\n\n    log('update: ', update);\n\n    newModel.rows = update;\n\n    onChange(newModel);\n  };\n\n  onChange = (name, isBoolean) => ({ target }) => {\n    const { model, onChange } = this.props;\n    let value;\n\n    if (isBoolean) {\n      value = target.checked;\n    } else {\n      value = target.value;\n    }\n\n    lodash.set(model, name, value);\n    onChange(model, name);\n  };\n\n  onHeaderChange = headerIndex => event => {\n    const { model, onChange } = this.props;\n    const newModel = { ...model };\n\n    newModel.headers[headerIndex] = event.target.value;\n\n    onChange(newModel);\n  };\n\n  render() {\n    const {\n      classes,\n      model,\n      onAddRow,\n      imageSupport,\n      configuration\n    } = this.props;\n    const { headers = {} } = configuration || {};\n\n    return (\n      <div className={classes.container}>\n        <Typography type=\"body1\" component=\"div\">\n          Click on the labels to edit or remove. Set the correct answers by\n          clicking each correct answer per row.\n        </Typography>\n        <div className={classes.rowTable}>\n          <div className={classes.rowContainer}>\n            {headers.settings &&\n              model.headers.map((header, idx) => (\n                <div\n                  key={idx}\n                  className={cx(classes.rowItem, {\n                    [classes.questionText]: idx === 0\n                  })}\n                >\n                  <Input\n                    type=\"text\"\n                    disableUnderline\n                    classes={idx === 0 ? null : { input: classes.headerInput }}\n                    onChange={this.onHeaderChange(idx)}\n                    value={header}\n                    placeholder=\"Enter Value\"\n                  />\n                </div>\n              ))}\n            <div className={classes.deleteIcon}>\n              <Button disabled>\n                <div />\n              </Button>\n            </div>\n          </div>\n          <hr className={classes.separator} />\n          {model.rows.map((row, idx) => (\n            <Row\n              key={idx}\n              model={model}\n              row={row}\n              idx={idx}\n              onDeleteRow={this.props.onDeleteRow}\n              onChange={this.props.onChange}\n              onMoveRow={this.moveRow}\n              imageSupport={imageSupport}\n              enableImages={model.enableImages}\n            />\n          ))}\n          <AddRow onAddClick={onAddRow} />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default withDragContext(withStyles(styles)(AnswerConfigBlock));\n"],"file":"answer-config-block.js"}
+{"version":3,"sources":["../src/answer-config-block.jsx"],"names":["log","styles","theme","container","marginTop","spacing","unit","display","flexDirection","rowContainer","alignItems","flex","rowItem","justifyContent","width","padding","textAlign","deleteIcon","minWidth","questionText","maxWidth","rowTable","separator","border","borderTop","headerInput","fontWeight","errorText","fontSize","color","paddingTop","AnswerConfigBlock","dialog","open","from","to","props","model","onChange","newModel","rows","reduce","acc","item","index","movedRow","remainingRows","push","update","slice","name","isBoolean","target","value","checked","lodash","set","headerIndex","headers","currentHeader","sameValue","filter","header","wasChanged","sameValueEntered","empty","length","setState","onOk","classes","onAddRow","imageSupport","configuration","toolbarOpts","spellCheck","maxImageWidth","maxImageHeight","state","errors","correctResponseError","rowsErrors","filteredDefaultPlugins","DEFAULT_PLUGINS","p","labelPlugins","audio","disabled","video","defaultImageMaxWidth","prompt","defaultImageMaxHeight","settings","map","idx","onHeaderChange","row","onDeleteRow","moveRow","enableImages","id","rowTitles","React","Component","PropTypes","object","isRequired","func","shape","add"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport AddRow from './add-row';\nimport Row from './row';\nimport debug from 'debug';\nimport lodash from 'lodash';\nimport EditableHTML, { DEFAULT_PLUGINS } from '@pie-lib/editable-html';\nimport { InfoDialog } from './common';\n\nconst log = debug('pie-elements:match:configure');\n\nconst styles = theme => ({\n  container: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  rowContainer: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1\n  },\n  rowItem: {\n    flex: 1,\n    display: 'flex',\n    justifyContent: 'center',\n    '&> div': {\n      width: '150px',\n      padding: '12px',\n      textAlign: 'center'\n    },\n  },\n  deleteIcon: {\n    flex: 0.5,\n    minWidth: '88px'\n  },\n  questionText: {\n    flex: 2,\n    display: 'flex',\n    justifyContent: 'flex-start',\n    '&> div': {\n      width: '100%',\n      padding: 0,\n      maxWidth: 'unset',\n      textAlign: 'left',\n      minWidth: '350px'\n    }\n  },\n  rowTable: {\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  separator: {\n    marginTop: theme.spacing.unit * 2,\n    border: 0,\n    borderTop: '2px solid lightgray',\n    width: '100%'\n  },\n  headerInput: {\n    '&> div': {\n      fontWeight: 'bold'\n    }\n  },\n  errorText: {\n    fontSize: '12px',\n    color: 'red',\n    paddingTop: '5px'\n  }\n});\n\nclass AnswerConfigBlock extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onDeleteRow: PropTypes.func.isRequired,\n    onAddRow: PropTypes.func.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    }),\n    toolbarOpts: PropTypes.object\n  };\n\n  state = {\n    dialog: {\n      open: false\n    }\n  };\n\n  moveRow = (from, to) => {\n    const { model, onChange } = this.props;\n    const newModel = { ...model };\n    const rows = newModel.rows || [];\n\n    log('[moveRow]: ', from, to);\n\n    const { movedRow, remainingRows } = rows.reduce(\n      (acc, item, index) => {\n        if (index === from) {\n          acc.movedRow = item;\n        } else {\n          acc.remainingRows.push(item);\n        }\n\n        return acc;\n      },\n      { movedRow: null, remainingRows: [] }\n    );\n\n    const update = [\n      ...remainingRows.slice(0, to),\n        movedRow,\n      ...remainingRows.slice(to)\n    ];\n\n    log('update: ', update);\n\n    newModel.rows = update;\n\n    onChange(newModel);\n  };\n\n  onChange = (name, isBoolean) => ({ target }) => {\n    const { model, onChange } = this.props;\n    let value;\n\n    if (isBoolean) {\n      value = target.checked;\n    } else {\n      value = target.value;\n    }\n\n    lodash.set(model, name, value);\n    onChange(model, name);\n  };\n\n  onHeaderChange = headerIndex => value => {\n    const { model, onChange } = this.props;\n    const newModel = { ...model };\n\n    if(headerIndex === 0) {\n      newModel.headers[headerIndex] = value;\n      onChange(newModel);\n\n      return;\n    }\n\n    const headers = newModel.headers || [];\n\n    const currentHeader = headers[headerIndex];\n\n    const sameValue = headers.filter(header => {\n      const wasChanged = currentHeader !== value && `<div>${currentHeader}</div>` !== value;\n      const sameValueEntered = header === value || `<div>${header}</div>` === value;\n\n      return wasChanged && sameValueEntered;\n    });\n\n    const empty = value === '<div></div>';\n\n    if (sameValue.length || empty) {\n      this.setState({\n        dialog: {\n          open: true,\n          onOk: () => {\n            this.setState(\n              {\n                dialog: {\n                  open: false\n                }\n              }\n            );\n          }\n        }\n      });\n    } else {\n      newModel.headers[headerIndex] = value;\n\n      onChange(newModel);\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      model,\n      onAddRow,\n      imageSupport,\n      configuration,\n      toolbarOpts,\n      spellCheck\n    } = this.props;\n    const { headers = {}, maxImageWidth = {}, maxImageHeight = {} } = configuration || {};\n    const { dialog } = this.state;\n    const { errors } = model || {};\n    const { correctResponseError, rowsErrors } = errors || {};\n\n    const filteredDefaultPlugins = (DEFAULT_PLUGINS || [])\n      .filter(p => p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list');\n    const labelPlugins = {\n      audio: { disabled: true },\n      video: { disabled: true }\n    };\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    return (\n      <div className={classes.container}>\n        <Typography type=\"body1\" component=\"div\">\n          Click on the labels to edit or remove. Set the correct answers by\n          clicking each correct answer per row.\n        </Typography>\n        {correctResponseError && <div className={classes.errorText}>{correctResponseError}</div>}\n        <div className={classes.rowTable}>\n          <div className={classes.rowContainer}>\n            {headers.settings &&\n            (model.headers || []).map((header, idx) => (\n                <div\n                  key={idx}\n                  className={cx(classes.rowItem, {\n                    [classes.questionText]: idx === 0\n                  })}\n                >\n                  <EditableHTML\n                    onChange={this.onHeaderChange(idx)}\n                    markup={header}\n                    className={classes.headerInput}\n                    label={'column label'}\n                    activePlugins={filteredDefaultPlugins}\n                    pluginProps={labelPlugins}\n                    autoWidthToolbar\n                    allowValidation\n                    spellCheck={spellCheck}\n                  />\n                </div>\n              ))}\n            <div className={classes.deleteIcon}>\n              <Button disabled>\n                <div />\n              </Button>\n            </div>\n          </div>\n          <hr className={classes.separator} />\n          {model.rows.map((row, idx) => (\n            <Row\n              key={idx}\n              model={model}\n              row={row}\n              idx={idx}\n              onDeleteRow={this.props.onDeleteRow}\n              onChange={this.props.onChange}\n              onMoveRow={this.moveRow}\n              imageSupport={imageSupport}\n              enableImages={model.enableImages}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheck}\n              error={rowsErrors && rowsErrors[row.id]}\n              maxImageWidth={maxImageWidth && maxImageWidth.rowTitles || defaultImageMaxWidth}\n              maxImageHeight={maxImageHeight && maxImageHeight.rowTitles || defaultImageMaxHeight}\n            />\n          ))}\n          <AddRow onAddClick={onAddRow} />\n        </div>\n          <InfoDialog\n            title={'The column headings must be non-blank and unique.'}\n            open={dialog.open}\n            onOk={dialog.onOk}\n          />\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(AnswerConfigBlock);\n"],"file":"answer-config-block.js"}

package/configure/lib/common.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoDialog = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+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; }
+
+var InfoDialog = function InfoDialog(_ref) {
+  var title = _ref.title,
+      open = _ref.open,
+      onOk = _ref.onOk;
+  return /*#__PURE__*/React.createElement(_Dialog["default"], {
+    open: open
+  }, /*#__PURE__*/React.createElement(_DialogTitle["default"], null, title), /*#__PURE__*/React.createElement(_DialogActions["default"], null, onOk && /*#__PURE__*/React.createElement(_Button["default"], {
+    onClick: onOk,
+    color: "primary"
+  }, "OK")));
+};
+
+exports.InfoDialog = InfoDialog;
+InfoDialog.propTypes = {
+  title: _propTypes["default"].string,
+  open: _propTypes["default"].bool,
+  onOk: _propTypes["default"].func
+};
+//# sourceMappingURL=common.js.map

package/configure/lib/common.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/common.jsx"],"names":["InfoDialog","title","open","onOk","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,IAAV,QAAUA,IAAV;AAAA,MAAgBC,IAAhB,QAAgBA,IAAhB;AAAA,sBACxB,oBAAC,kBAAD;AAAQ,IAAA,IAAI,EAAED;AAAd,kBACE,oBAAC,uBAAD,QAAcD,KAAd,CADF,eAEE,oBAAC,yBAAD,QACGE,IAAI,iBACH,oBAAC,kBAAD;AAAQ,IAAA,OAAO,EAAEA,IAAjB;AAAuB,IAAA,KAAK,EAAC;AAA7B,UAFJ,CAFF,CADwB;AAAA,CAAnB;;;AAaPH,UAAU,CAACI,SAAX,GAAuB;AACrBH,EAAAA,KAAK,EAAEI,sBAAUC,MADI;AAErBJ,EAAAA,IAAI,EAAEG,sBAAUE,IAFK;AAGrBJ,EAAAA,IAAI,EAAEE,sBAAUG;AAHK,CAAvB","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport Button from '@material-ui/core/Button';\n\nexport const InfoDialog = ({ title, open, onOk }) => (\n  <Dialog open={open}>\n    <DialogTitle>{title}</DialogTitle>\n    <DialogActions>\n      {onOk && (\n        <Button onClick={onOk} color=\"primary\">\n          OK\n        </Button>\n      )}\n    </DialogActions>\n  </Dialog>\n);\n\nInfoDialog.propTypes = {\n  title: PropTypes.string,\n  open: PropTypes.bool,\n  onOk: PropTypes.func,\n};\n"],"file":"common.js"}

package/configure/lib/configure.js

@@ -29,6 +29,8 @@ var _configUi = require("@pie-lib/config-ui");
 
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
+var _drag = require("@pie-lib/drag");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _debug = _interopRequireDefault(require("debug"));
@@ -37,13 +39,13 @@ var _generalConfigBlock = _interopRequireDefault(require("./general-config-block
 
 var _answerConfigBlock = _interopRequireDefault(require("./answer-config-block"));
 
-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"])('@pie-element:match:configure');
 var Panel = _configUi.settings.Panel,
@@ -230,14 +232,35 @@ var Configure = /*#__PURE__*/function (_React$Component) {
           _ref$prompt = _ref.prompt,
           prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
           _ref$feedback = _ref.feedback,
-          feedback = _ref$feedback === void 0 ? {} : _ref$feedback;
+          feedback = _ref$feedback === void 0 ? {} : _ref$feedback,
+          _ref$spellCheck = _ref.spellCheck,
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight;
 
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
           promptEnabled = _ref2.promptEnabled,
           rationaleEnabled = _ref2.rationaleEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
           feedbackEnabled = _ref2.feedbackEnabled;
 
+      var toolbarOpts = {};
+
+      switch (model.toolbarEditorPosition) {
+        case 'top':
+          toolbarOpts.position = 'top';
+          break;
+
+        default:
+          toolbarOpts.position = 'bottom';
+          break;
+      }
+
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
       log('[render] model', model);
       return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
         settings: /*#__PURE__*/_react["default"].createElement(Panel, {
@@ -261,6 +284,7 @@ var Configure = /*#__PURE__*/function (_React$Component) {
               studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
               promptEnabled: prompt.settings && toggle(prompt.label),
               rationaleEnabled: rationale.settings && toggle(rationale.label),
+              spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
               scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
             }
           }
@@ -275,7 +299,11 @@ var Configure = /*#__PURE__*/function (_React$Component) {
         markup: model.teacherInstructions || '',
         onChange: this.onTeacherInstructionsChanged,
         imageSupport: imageSupport,
-        nonEmpty: false
+        nonEmpty: false,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: prompt.label,
         className: classes.promptHolder
@@ -285,7 +313,11 @@ var Configure = /*#__PURE__*/function (_React$Component) {
         onChange: this.onPromptChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        disableUnderline: true
+        disableUnderline: true,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+        maxImageHeight: maxImageHeight && maxImageHeight.prompt
       })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: rationale.label,
         className: classes.promptHolder
@@ -293,7 +325,11 @@ var Configure = /*#__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
       })), /*#__PURE__*/_react["default"].createElement(_generalConfigBlock["default"], {
         model: model,
         configuration: configuration,
@@ -305,10 +341,13 @@ var Configure = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         onChange: this.onChange,
         onAddRow: this.onAddRow,
-        onDeleteRow: this.onDeleteRow
+        onDeleteRow: this.onDeleteRow,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled
       }), feedbackEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.FeedbackConfig, {
         feedback: model.feedback,
-        onChange: this.onFeedbackChange
+        onChange: this.onFeedbackChange,
+        toolbarOpts: toolbarOpts
       })));
     }
   }]);
@@ -332,7 +371,7 @@ var Configure = /*#__PURE__*/function (_React$Component) {
 var Config = Configure;
 exports.Config = Config;
 
-var _default = (0, _styles.withStyles)(styles)(Configure);
+var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(styles)(Configure));
 
 exports["default"] = _default;
 //# sourceMappingURL=configure.js.map