@pie-lib/rubric 1.0.0-beta.5 → 1.0.0-next.0

package/lib/authoring.js

@@ -8,38 +8,37 @@ exports["default"] = exports.RubricType = exports.RawAuthoring = exports.PointCo
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _styles = require("@mui/material/styles");
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _times = _interopRequireDefault(require("lodash/times"));
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-var _DragIndicator = _interopRequireDefault(require("@material-ui/icons/DragIndicator"));
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/FormGroup"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragIndicator"));
+var _dnd = require("@hello-pangea/dnd");
 var _debug = _interopRequireDefault(require("debug"));
 var _takeRight = _interopRequireDefault(require("lodash/takeRight"));
 var _pointMenu = _interopRequireDefault(require("./point-menu"));
 var _range = _interopRequireDefault(require("lodash/range"));
-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; } }
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+var _configUi = require("@pie-lib/config-ui");
+var _colors = require("@mui/material/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var log = (0, _debug["default"])('pie-lib:rubric:authoring');
 var reorder = function reorder(list, startIndex, endIndex) {
   var result = Array.from(list);
@@ -49,134 +48,187 @@ var reorder = function reorder(list, startIndex, endIndex) {
   result.splice(endIndex, 0, removed);
   return result;
 };
-var RubricType = _propTypes["default"].shape({
+var RubricType = exports.RubricType = _propTypes["default"].shape({
   excludeZero: _propTypes["default"].bool,
   points: _propTypes["default"].arrayOf(_propTypes["default"].string),
   sampleAnswers: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  maxPoints: _propTypes["default"].number
+  maxPoints: _propTypes["default"].number,
+  rubriclessInstruction: _propTypes["default"].string
 });
-exports.RubricType = RubricType;
-var MaxPoints = (0, _styles.withStyles)(function (theme) {
-  return {
-    formControl: {
-      minWidth: '120px',
-      margin: theme.spacing.unit
-    }
-  };
-})(function (props) {
+var MaxPoints = function MaxPoints(props) {
   var value = props.value,
     _onChange = props.onChange,
-    max = props.max,
-    classes = props.classes;
+    max = props.max;
+  var labelId = 'max-points-label';
   return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
-    className: classes.formControl,
+    sx: {
+      minWidth: 120,
+      m: 1
+    },
     variant: "outlined"
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
-    width: 100,
-    htmlFor: "..."
+    id: labelId
   }, "Max Points"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    labelId: labelId,
+    label: "Max Points",
     value: value,
     onChange: function onChange(e) {
       return _onChange(e.target.value);
     },
     input: /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
-      labelWidth: 80
-    })
-  }, (0, _range["default"])(1, max).map(function (v) {
+      label: "Max Points"
+    }),
+    MenuProps: {
+      transitionDuration: {
+        enter: 225,
+        exit: 195
+      }
+    }
+  }, (0, _range["default"])(1, max + 1).map(function (v) {
     return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
       key: "".concat(v),
       value: v
     }, v);
   })));
-});
+};
 
 // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
 // if the value is '', the Sample Answer input field will be empty
 var checkSampleAnswer = function checkSampleAnswer(sampleAnswer) {
   return sampleAnswer === null || sampleAnswer === 'null';
 };
-var PointConfig = (0, _styles.withStyles)(function (theme) {
+var Row = (0, _styles.styled)('div')(function () {
   return {
-    pointConfig: {},
-    row: {
-      display: 'flex',
-      width: '100%',
-      position: 'relative'
-    },
-    editor: {
-      width: '100%',
-      backgroundColor: "".concat(theme.palette.common.white, " !important")
-    },
-    dragIndicator: {
-      paddingTop: theme.spacing.unit,
-      color: _grey["default"][500]
-    },
-    pointsLabel: {
-      color: _grey["default"][500],
-      paddingBottom: theme.spacing.unit,
-      textTransform: 'uppercase'
-    },
-    sampleAnswersEditor: {
-      paddingLeft: theme.spacing.unit * 3
-    },
-    pointMenu: {
-      position: 'absolute',
-      right: 0
-    }
+    display: 'flex',
+    width: '100%',
+    position: 'relative'
+  };
+});
+var EditorDiv = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: '100%',
+    backgroundColor: "".concat(theme.palette.common.white)
   };
-})(function (props) {
+});
+var DragIndicatorStyled = (0, _styles.styled)(_DragIndicator["default"])(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingTop: theme.spacing(1),
+    color: _colors.grey[500]
+  };
+});
+var PointsLabel = (0, _styles.styled)(_Typography["default"])(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    color: _colors.grey[500],
+    paddingBottom: theme.spacing(1),
+    textTransform: 'uppercase'
+  };
+});
+var SampleAnswersEditor = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    paddingLeft: theme.spacing(3)
+  };
+});
+var ErrorText = (0, _styles.styled)('div')(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingLeft: theme.spacing(3),
+    paddingTop: theme.spacing(1)
+  };
+});
+var PointMenuWrapper = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'absolute',
+    right: 0
+  };
+});
+var PointConfig = exports.PointConfig = function PointConfig(props) {
   var points = props.points,
     content = props.content,
-    classes = props.classes,
     sampleAnswer = props.sampleAnswer,
     _props$mathMlOptions = props.mathMlOptions,
-    mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions;
+    mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions,
+    error = props.error,
+    _props$pluginOpts = props.pluginOpts,
+    pluginOpts = _props$pluginOpts === void 0 ? {} : _props$pluginOpts;
   var pointsLabel = "".concat(points, " ").concat(points <= 1 ? 'pt' : 'pts');
   var showSampleAnswer = checkSampleAnswer(sampleAnswer);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.pointConfig
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    variant: "overline",
-    className: classes.pointsLabel
-  }, pointsLabel), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.row
-  }, /*#__PURE__*/_react["default"].createElement(_DragIndicator["default"], {
-    className: classes.dragIndicator
-  }), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editor,
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PointsLabel, {
+    variant: "overline"
+  }, pointsLabel), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(DragIndicatorStyled, null), /*#__PURE__*/_react["default"].createElement(EditorDiv, null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+    error: error,
+    pluginProps: pluginOpts,
     markup: content,
     onChange: props.onChange,
     mathMlOptions: mathMlOptions
-  }), /*#__PURE__*/_react["default"].createElement(_pointMenu["default"], {
-    classes: {
-      icon: classes.pointMenu
-    },
+  })), /*#__PURE__*/_react["default"].createElement(PointMenuWrapper, null, /*#__PURE__*/_react["default"].createElement(_pointMenu["default"], {
     showSampleAnswer: showSampleAnswer,
     onChange: props.onMenuChange
-  })), !showSampleAnswer && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.sampleAnswersEditor
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    variant: "overline",
-    className: classes.dragIndicator
-  }, "Sample Response"), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editor,
+  }))), error && /*#__PURE__*/_react["default"].createElement(ErrorText, null, error), !showSampleAnswer && /*#__PURE__*/_react["default"].createElement(SampleAnswersEditor, null, /*#__PURE__*/_react["default"].createElement(DragIndicatorStyled, {
+    as: _Typography["default"],
+    variant: "overline"
+  }, "Sample Response"), /*#__PURE__*/_react["default"].createElement(EditorDiv, null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
     markup: sampleAnswer,
+    pluginProps: pluginOpts,
     onChange: props.onSampleChange,
     mathMlOptions: mathMlOptions
-  })));
+  }))));
+};
+var Container = (0, _styles.styled)('div')(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    backgroundColor: _colors.grey[200],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: _colors.grey[300],
+    padding: theme.spacing(2),
+    margin: theme.spacing(1)
+  };
 });
-exports.PointConfig = PointConfig;
-var RawAuthoring = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(RawAuthoring, _React$Component);
-  var _super = _createSuper(RawAuthoring);
+var InputContainerWrapper = (0, _styles.styled)('div')(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    width: '100%',
+    paddingTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    '& MuiFormControl-root': {
+      width: '100%'
+    }
+  };
+});
+var Rubricless = (0, _styles.styled)('div')(function () {
+  return {
+    display: 'none'
+  };
+});
+var ConfigHolder = (0, _styles.styled)('div')(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1)
+  };
+});
+var RubricTitle = (0, _styles.styled)(_Typography["default"])(function (_ref9) {
+  var theme = _ref9.theme;
+  return {
+    paddingLeft: theme.spacing(1),
+    margin: theme.spacing(1)
+  };
+});
+var RawAuthoring = exports.RawAuthoring = /*#__PURE__*/function (_React$Component) {
   function RawAuthoring() {
     var _this;
     (0, _classCallCheck2["default"])(this, RawAuthoring);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragEnd", function (result) {
+    _this = _callSuper(this, RawAuthoring, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "dragEnd", function (result) {
       if (!result.destination) {
         return;
       }
@@ -190,10 +242,19 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
         sampleAnswers: sampleAnswers
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxPoints", function (maxPoints) {
+    (0, _defineProperty2["default"])(_this, "changeRubriclessInstruction", function (input) {
       var _this$props2 = _this.props,
         value = _this$props2.value,
         onChange = _this$props2.onChange;
+      onChange(_objectSpread(_objectSpread({}, value), {}, {
+        rubriclessInstruction: input
+      }));
+    });
+    (0, _defineProperty2["default"])(_this, "changeMaxPoints", function (maxPoints) {
+      var _this$props3 = _this.props,
+        value = _this$props3.value,
+        onChange = _this$props3.onChange,
+        rubricless = _this$props3.rubricless;
       var currentMax = value.points.length - 1;
       log('current', currentMax, 'new: ', maxPoints);
       var points, sampleAnswers;
@@ -210,36 +271,41 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
         points = (0, _takeRight["default"])(value.points, maxPoints + 1);
         sampleAnswers = (0, _takeRight["default"])(value.sampleAnswers, maxPoints + 1);
       }
-      if (points) {
+      if (points && !rubricless) {
         onChange(_objectSpread(_objectSpread({}, value), {}, {
           points: points,
-          sampleAnswers: sampleAnswers
+          sampleAnswers: sampleAnswers,
+          maxPoints: maxPoints
+        }));
+      } else {
+        onChange(_objectSpread(_objectSpread({}, value), {}, {
+          maxPoints: maxPoints
         }));
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeContent", function (index, content, type) {
+    (0, _defineProperty2["default"])(_this, "changeContent", function (index, content, type) {
       // type could be 'points' or 'sampleAnswers'
       log("changeModel[".concat(type, "]:"), index, content);
       if (type !== 'points' && type !== 'sampleAnswers') {
         return;
       }
-      var _this$props3 = _this.props,
-        value = _this$props3.value,
-        onChange = _this$props3.onChange;
+      var _this$props4 = _this.props,
+        value = _this$props4.value,
+        onChange = _this$props4.onChange;
       var items = value[type] && Array.from(value[type]);
       items.splice(index, 1, content);
       log("changeModel[".concat(type, "]:"), items);
       onChange(_objectSpread(_objectSpread({}, value), {}, (0, _defineProperty2["default"])({}, type, items)));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "excludeZeros", function () {
-      var _this$props4 = _this.props,
-        value = _this$props4.value,
-        onChange = _this$props4.onChange;
+    (0, _defineProperty2["default"])(_this, "excludeZeros", function () {
+      var _this$props5 = _this.props,
+        value = _this$props5.value,
+        onChange = _this$props5.onChange;
       onChange(_objectSpread(_objectSpread({}, value), {}, {
         excludeZero: !value.excludeZero
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "shouldRenderPoint", function (index, value) {
+    (0, _defineProperty2["default"])(_this, "shouldRenderPoint", function (index, value) {
       if (!value.excludeZero) {
         return true;
       } else {
@@ -251,7 +317,7 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
         return true;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPointMenuChange", function (index, clickedItem) {
+    (0, _defineProperty2["default"])(_this, "onPointMenuChange", function (index, clickedItem) {
       if (clickedItem === 'sample') {
         var value = _this.props.value;
         var sampleAnswers = Array.from(value.sampleAnswers || []);
@@ -266,63 +332,95 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(RawAuthoring, [{
+  (0, _inherits2["default"])(RawAuthoring, _React$Component);
+  return (0, _createClass2["default"])(RawAuthoring, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props5 = this.props,
-        classes = _this$props5.classes,
-        className = _this$props5.className,
-        value = _this$props5.value,
-        _this$props5$mathMlOp = _this$props5.mathMlOptions,
-        mathMlOptions = _this$props5$mathMlOp === void 0 ? {} : _this$props5$mathMlOp;
-      var _ref = value || {},
-        _ref$excludeZeroEnabl = _ref.excludeZeroEnabled,
-        excludeZeroEnabled = _ref$excludeZeroEnabl === void 0 ? true : _ref$excludeZeroEnabl,
-        _ref$maxPointsEnabled = _ref.maxPointsEnabled,
-        maxPointsEnabled = _ref$maxPointsEnabled === void 0 ? true : _ref$maxPointsEnabled;
+      var _this$props6 = this.props,
+        value = _this$props6.value,
+        _this$props6$mathMlOp = _this$props6.mathMlOptions,
+        mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp,
+        _this$props6$config = _this$props6.config,
+        config = _this$props6$config === void 0 ? {} : _this$props6$config,
+        _this$props6$rubricle = _this$props6.rubricless,
+        rubricless = _this$props6$rubricle === void 0 ? false : _this$props6$rubricle,
+        _this$props6$pluginOp = _this$props6.pluginOpts,
+        pluginOpts = _this$props6$pluginOp === void 0 ? {} : _this$props6$pluginOp;
+      var _ref0 = value || {},
+        _ref0$excludeZeroEnab = _ref0.excludeZeroEnabled,
+        excludeZeroEnabled = _ref0$excludeZeroEnab === void 0 ? true : _ref0$excludeZeroEnab,
+        _ref0$maxPointsEnable = _ref0.maxPointsEnabled,
+        maxPointsEnabled = _ref0$maxPointsEnable === void 0 ? true : _ref0$maxPointsEnable,
+        _ref0$errors = _ref0.errors,
+        errors = _ref0$errors === void 0 ? {} : _ref0$errors,
+        _ref0$rubriclessInstr = _ref0.rubriclessInstructionEnabled,
+        rubriclessInstructionEnabled = _ref0$rubriclessInstr === void 0 ? false : _ref0$rubriclessInstr,
+        _ref0$maxPoints = _ref0.maxPoints,
+        maxPoints = _ref0$maxPoints === void 0 ? 10 : _ref0$maxPoints;
+      // rubric will contain a max value for maxPoints
+      var _ref1 = config || {},
+        _ref1$rubriclessInstr = _ref1.rubriclessInstruction,
+        rubriclessInstruction = _ref1$rubriclessInstr === void 0 ? {} : _ref1$rubriclessInstr,
+        _ref1$maxMaxPoints = _ref1.maxMaxPoints,
+        maxMaxPoints = _ref1$maxMaxPoints === void 0 ? 10 : _ref1$maxMaxPoints;
+      var _ref10 = errors || {},
+        pointsDescriptorsErrors = _ref10.pointsDescriptorsErrors;
       if (value && Number.isFinite(value.maxPoints)) {
         // eslint-disable-next-line no-console
         console.warn('maxPoints is deprecated - remove from model');
       }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes["class"], className)
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        variant: "h5",
-        className: classes.rubricTitle
+
+      // for rubric value is computed based on points
+      var maxPointsValue = !rubricless ? value.points.length - 1 : maxPoints;
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(RubricTitle, {
+        variant: "h5"
       }, "Rubric"), /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
         row: true
       }, maxPointsEnabled && /*#__PURE__*/_react["default"].createElement(MaxPoints, {
-        max: 10,
-        value: value.points.length - 1,
-        onChange: this.changeMaxPoints
+        max: maxMaxPoints < 100 ? maxMaxPoints : 100,
+        value: maxPointsValue,
+        onChange: this.changeMaxPoints,
+        pluginOpts: pluginOpts
       }), excludeZeroEnabled && /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
         label: "Exclude zeros",
         control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
           checked: value.excludeZero,
           onChange: this.excludeZeros
         })
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.container
-      }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
+      })), rubriclessInstructionEnabled && rubricless && /*#__PURE__*/_react["default"].createElement(InputContainerWrapper, null, /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rubriclessInstruction.label
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        markup: value.rubriclessInstruction || '',
+        onChange: this.changeRubriclessInstruction,
+        pluginProps: pluginOpts,
+        nonEmpty: false,
+        disableUnderline: true,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      }))), /*#__PURE__*/_react["default"].createElement("div", null, rubricless ? /*#__PURE__*/_react["default"].createElement(Rubricless, null) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_dnd.DragDropContext, {
         onDragEnd: this.dragEnd
-      }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
+      }, /*#__PURE__*/_react["default"].createElement(_dnd.Droppable, {
         droppableId: "droppable"
       }, function (provided) {
         return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, provided.droppableProps, {
           ref: provided.innerRef
         }), value.points.map(function (p, index) {
-          return _this2.shouldRenderPoint(index, value) && /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
+          return _this2.shouldRenderPoint(index, value) && /*#__PURE__*/_react["default"].createElement(_dnd.Draggable, {
             key: "".concat(p.points, "-").concat(index),
             index: index,
             draggableId: index.toString()
           }, function (provided) {
-            return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-              className: classes.configHolder,
+            return /*#__PURE__*/_react["default"].createElement(ConfigHolder, (0, _extends2["default"])({
               ref: provided.innerRef
             }, provided.draggableProps, provided.dragHandleProps), /*#__PURE__*/_react["default"].createElement(PointConfig, {
               points: value.points.length - 1 - index,
               content: p,
+              error: pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index],
               sampleAnswer: value.sampleAnswers && value.sampleAnswers[index],
               onChange: function onChange(content) {
                 return _this2.changeContent(index, content, 'points');
@@ -333,45 +431,31 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
               onMenuChange: function onMenuChange(clickedItem) {
                 return _this2.onPointMenuChange(index, clickedItem);
               },
-              mathMlOptions: mathMlOptions
+              mathMlOptions: mathMlOptions,
+              pluginOpts: pluginOpts
             }));
           });
         }), provided.placeholder);
-      }))));
+      })))));
     }
   }]);
-  return RawAuthoring;
-}(_react["default"].Component);
-exports.RawAuthoring = RawAuthoring;
+}(_react["default"].Component); // styles migrated to styled-components above
 (0, _defineProperty2["default"])(RawAuthoring, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
   value: RubricType,
+  config: _propTypes["default"].object,
+  pluginOpts: _propTypes["default"].object,
+  rubricless: _propTypes["default"].bool,
   onChange: _propTypes["default"].func
 });
 (0, _defineProperty2["default"])(RawAuthoring, "defaultProps", {});
-var styles = function styles(theme) {
-  return {
-    container: {
-      backgroundColor: _grey["default"][200],
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: _grey["default"][300],
-      padding: theme.spacing.unit * 2,
-      margin: theme.spacing.unit
-    },
-    configHolder: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit
-    },
-    rubricTitle: {
-      paddingLeft: theme.spacing.unit,
-      margin: theme.spacing.unit
-    }
-  };
-};
-var StyledRawAuthoring = (0, _styles.withStyles)(styles)(RawAuthoring);
 var Reverse = function Reverse(props) {
+  var _ref11 = props || {},
+    _ref11$rubricless = _ref11.rubricless,
+    rubricless = _ref11$rubricless === void 0 ? false : _ref11$rubricless,
+    _ref11$config = _ref11.config,
+    config = _ref11$config === void 0 ? {} : _ref11$config,
+    _ref11$pluginOpts = _ref11.pluginOpts,
+    pluginOpts = _ref11$pluginOpts === void 0 ? {} : _ref11$pluginOpts;
   var points = Array.from(props.value.points || []).reverse();
   var sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
   if (points.length > sampleAnswers.length) {
@@ -389,16 +473,21 @@ var Reverse = function Reverse(props) {
       sampleAnswers: Array.from(value.sampleAnswers || []).reverse()
     }));
   };
-  return /*#__PURE__*/_react["default"].createElement(StyledRawAuthoring, {
+  return /*#__PURE__*/_react["default"].createElement(RawAuthoring, {
     value: value,
-    onChange: onChange
+    config: config,
+    onChange: onChange,
+    rubricless: rubricless,
+    pluginOpts: pluginOpts
   });
 };
 Reverse.propTypes = {
   value: RubricType,
+  config: _propTypes["default"].object,
+  pluginOpts: _propTypes["default"].object,
+  rubricless: _propTypes["default"].bool,
   getIndex: _propTypes["default"].func,
   onChange: _propTypes["default"].func
 };
-var _default = Reverse;
-exports["default"] = _default;
+var _default = exports["default"] = Reverse;
 //# sourceMappingURL=authoring.js.map