@pie-lib/mask-markup 1.10.20 → 1.10.21-next.185

package/lib/with-mask.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,23 +19,25 @@ var _serialization = require("./serialization");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -48,17 +52,17 @@ var buildLayoutFromMarkup = function buildLayoutFromMarkup(markup, type) {
 exports.buildLayoutFromMarkup = buildLayoutFromMarkup;
 
 var withMask = function withMask(type, renderChildren) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_React$Component) {
+  return _class = /*#__PURE__*/function (_React$Component) {
     _inherits(WithMask, _React$Component);
 
+    var _super = _createSuper(WithMask);
+
     function WithMask() {
       _classCallCheck(this, WithMask);
 
-      return _possibleConstructorReturn(this, _getPrototypeOf(WithMask).apply(this, arguments));
+      return _super.apply(this, arguments);
     }
 
     _createClass(WithMask, [{
@@ -70,7 +74,7 @@ var withMask = function withMask(type, renderChildren) {
             value = _this$props.value,
             onChange = _this$props.onChange;
         var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
-        return _react["default"].createElement(_mask["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
           layout: maskLayout,
           value: value,
           onChange: onChange,
@@ -92,7 +96,7 @@ var withMask = function withMask(type, renderChildren) {
     layout: _propTypes["default"].object,
     value: _propTypes["default"].object,
     onChange: _propTypes["default"].func
-  }), _temp;
+  }), _class;
 };
 
 exports.withMask = withMask;

package/lib/with-mask.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/with-mask.jsx"],"names":["buildLayoutFromMarkup","markup","type","processed","value","document","withMask","renderChildren","props","layout","onChange","maskLayout","React","Component","PropTypes","string","object","func"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,MAAD,EAASC,IAAT,EAAkB;AAAA,sBACvB,+BAAaD,MAAb,EAAqBC,IAArB,CADuB;AAAA,MACrCC,SADqC,iBAC7CF,MAD6C;;AAErD,MAAMG,KAAK,GAAG,gCAAYD,SAAZ,CAAd;AACA,SAAOC,KAAK,CAACC,QAAb;AACD,CAJM;;;;AAMA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACJ,IAAD,EAAOK,cAAP,EAA0B;AAAA;;AAChD;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,+BAcW;AAAA,0BACqC,KAAKC,KAD1C;AAAA,YACCP,MADD,eACCA,MADD;AAAA,YACSQ,MADT,eACSA,MADT;AAAA,YACiBL,KADjB,eACiBA,KADjB;AAAA,YACwBM,QADxB,eACwBA,QADxB;AAGP,YAAMC,UAAU,GAAGF,MAAM,GAAGA,MAAH,GAAYT,qBAAqB,CAACC,MAAD,EAASC,IAAT,CAA1D;AACA,eACE,gCAAC,gBAAD;AACE,UAAA,MAAM,EAAES,UADV;AAEE,UAAA,KAAK,EAAEP,KAFT;AAGE,UAAA,QAAQ,EAAEM,QAHZ;AAIE,UAAA,cAAc,EAAEH,cAAc,CAAC,KAAKC,KAAN;AAJhC,UADF;AAQD;AA1BH;;AAAA;AAAA,IAA8BI,kBAAMC,SAApC,wCACqB;AACjB;;;AAGAZ,IAAAA,MAAM,EAAEa,sBAAUC,MAJD;;AAKjB;;;AAGAN,IAAAA,MAAM,EAAEK,sBAAUE,MARD;AASjBZ,IAAAA,KAAK,EAAEU,sBAAUE,MATA;AAUjBN,IAAAA,QAAQ,EAAEI,sBAAUG;AAVH,GADrB;AA4BD,CA7BM","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func\n    };\n\n    render() {\n      const { markup, layout, value, onChange } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"file":"with-mask.js"}
+{"version":3,"sources":["../src/with-mask.jsx"],"names":["buildLayoutFromMarkup","markup","type","processed","value","document","withMask","renderChildren","props","layout","onChange","maskLayout","React","Component","PropTypes","string","object","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,MAAD,EAASC,IAAT,EAAkB;AACrD,sBAA8B,+BAAaD,MAAb,EAAqBC,IAArB,CAA9B;AAAA,MAAgBC,SAAhB,iBAAQF,MAAR;;AACA,MAAMG,KAAK,GAAG,gCAAYD,SAAZ,CAAd;AACA,SAAOC,KAAK,CAACC,QAAb;AACD,CAJM;;;;AAMA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACJ,IAAD,EAAOK,cAAP,EAA0B;AAAA;;AAChD;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,aAcE,kBAAS;AACP,0BAA4C,KAAKC,KAAjD;AAAA,YAAQP,MAAR,eAAQA,MAAR;AAAA,YAAgBQ,MAAhB,eAAgBA,MAAhB;AAAA,YAAwBL,KAAxB,eAAwBA,KAAxB;AAAA,YAA+BM,QAA/B,eAA+BA,QAA/B;AAEA,YAAMC,UAAU,GAAGF,MAAM,GAAGA,MAAH,GAAYT,qBAAqB,CAACC,MAAD,EAASC,IAAT,CAA1D;AACA,4BACE,gCAAC,gBAAD;AACE,UAAA,MAAM,EAAES,UADV;AAEE,UAAA,KAAK,EAAEP,KAFT;AAGE,UAAA,QAAQ,EAAEM,QAHZ;AAIE,UAAA,cAAc,EAAEH,cAAc,CAAC,KAAKC,KAAN;AAJhC,UADF;AAQD;AA1BH;;AAAA;AAAA,IAA8BI,kBAAMC,SAApC,wCACqB;AACjB;AACN;AACA;AACMZ,IAAAA,MAAM,EAAEa,sBAAUC,MAJD;;AAKjB;AACN;AACA;AACMN,IAAAA,MAAM,EAAEK,sBAAUE,MARD;AASjBZ,IAAAA,KAAK,EAAEU,sBAAUE,MATA;AAUjBN,IAAAA,QAAQ,EAAEI,sBAAUG;AAVH,GADrB;AA4BD,CA7BM","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func\n    };\n\n    render() {\n      const { markup, layout, value, onChange } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"file":"with-mask.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.10.20",
+  "version": "1.10.21-next.185+25ac3bb1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -27,5 +27,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "de37d3ba44d3e7934e2f804381fe50d2da16a29a"
+  "gitHead": "25ac3bb1b07de51cd0c05c23963b85ac0f716f1b"
 }

package/src/choices/choice.jsx

@@ -67,7 +67,11 @@ export const BlankContent = withStyles(theme => ({
     margin: '4px'
   },
   chipLabel: {
-    whiteSpace: 'pre-wrap'
+    whiteSpace: 'pre-wrap',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    }
   },
   disabled: {}
 }))(BlankContentComp);

package/src/components/blank.jsx

@@ -20,11 +20,16 @@ const useStyles = withStyles(() => ({
     minWidth: '90px',
     fontSize: 'inherit',
     minHeight: '32px',
+    height: 'auto',
     maxWidth: '374px',
     position: 'relative'
   },
   chipLabel: {
-    whiteSpace: 'pre-wrap'
+    whiteSpace: 'pre-wrap',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    }
   },
   hidden: {
     color: 'transparent',

package/src/components/correct-input.jsx

@@ -12,6 +12,7 @@ export default withStyles(() => ({
   input: {
     color: color.text(),
     backgroundColor: color.background(),
+    borderRadius: '4px !important',
     borderWidth: '1px',
     borderStyle: 'solid',
     padding: '10px 20px 10px 10px',
@@ -29,12 +30,17 @@ export default withStyles(() => ({
       borderColor: color.primaryDark()
     }
   },
+  crInput: {
+    padding: '8px !important'
+  },
   correct: correctStyle(color.correct()),
   incorrect: correctStyle(color.incorrect()),
   box: {
     fontSize: 'inherit'
   },
   outlinedInput: {
+    padding: '2px',
+    borderRadius: '4px',
     '& fieldset': {
       border: 0
     }
@@ -43,8 +49,24 @@ export default withStyles(() => ({
     borderColor: color.correct()
   }
 }))(props => {
-  const { correct, isBox, classes, disabled, ...rest } = props;
+  const {
+    correct,
+    charactersLimit,
+    classes,
+    disabled,
+    isBox,
+    isConstructedResponse,
+    width,
+    ...rest
+  } = props;
   const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
+  const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};
+
+  if (width) {
+    inputProps.style = {
+      width: `${width + Math.round(width / 10) + 1}ch` // added some extra space for capital letters
+    };
+  }
 
   return (
     <OutlinedInput
@@ -54,8 +76,13 @@ export default withStyles(() => ({
         [classes.outlinedInput]: true
       })}
       classes={{
-        input: classnames({ [classes.input]: true, [classes[label]]: label })
+        input: classnames({
+          [classes.input]: true,
+          [classes[label]]: label,
+          [classes.crInput]: isConstructedResponse
+        })
       }}
+      inputProps={inputProps}
       labelWidth={0}
       disabled={disabled}
       {...rest}

package/src/components/dropdown.jsx

@@ -59,7 +59,12 @@ class Dropdown extends React.Component {
 
     return (
       <Select
-        classes={{ root: classes.root, icon: classes.icon, selectMenu: classes.selectMenu }}
+        classes={{
+          root: classes.root,
+          icon: classes.icon,
+          selectMenu: classes.selectMenu,
+          select: classes.select
+        }}
         disabled={disabled}
         value={value || ''}
         onOpen={this.showCheckmarkAndOpen}
@@ -113,6 +118,11 @@ const styles = () => ({
       backgroundColor: color.background()
     }
   },
+  select: {
+    '&:focus': {
+      borderRadius: '4px'
+    }
+  },
   selectMenu: {
     backgroundColor: color.background(),
     '&:hover': {

package/src/components/input.jsx

@@ -2,20 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CorrectInput from './correct-input';
 
-const Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer }) => {
+const Input = ({
+  disabled,
+  correct,
+  charactersLimit,
+  id,
+  isConstructedResponse,
+  value,
+  onChange,
+  showCorrectAnswer,
+  width
+}) => {
   return (
     <CorrectInput
       disabled={disabled}
       correct={showCorrectAnswer || correct}
+      charactersLimit={charactersLimit}
       variant="outlined"
       value={value}
+      isConstructedResponse={isConstructedResponse}
       isBox={true}
+      width={width}
       onChange={e => {
         onChange(id, e.target.value);
       }}
     />
   );
 };
+
 Input.propTypes = {
   id: PropTypes.string,
   value: PropTypes.string,

package/src/constructed-response.jsx

@@ -5,12 +5,13 @@ import { withMask } from './with-mask';
 export default withMask('input', props => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'input') {
-    const { disabled, feedback, showCorrectAnswer } = props;
+    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength } = props;
     // the first answer is the correct one
     const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
     const finalValue = showCorrectAnswer
       ? correctAnswer && correctAnswer.label
       : data[dataset.id] || '';
+    const width = maxLength && maxLength[dataset.id];
 
     return (
       <Input
@@ -21,6 +22,9 @@ export default withMask('input', props => (node, data, onChange) => {
         id={dataset.id}
         onChange={onChange}
         showCorrectAnswer={showCorrectAnswer}
+        width={width}
+        charactersLimit={adjustedLimit ? width : 25}
+        isConstructedResponse={true}
       />
     );
   }

package/src/mask.jsx

@@ -44,6 +44,13 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   (layout.nodes || []).forEach((n, index) => {
     const key = `${n.type}-${index}`;
 
+    if (n.isMath) {
+      children.push(
+        <span dangerouslySetInnerHTML={{ __html: `<math>${n.nodes[0].innerHTML}</math>` }} />
+      );
+      return children;
+    }
+
     if (rootRenderChildren) {
       const c = rootRenderChildren(n, value, onChange);
       if (c) {
@@ -95,6 +102,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   return children;
 };
 
+const MaskContainer = withStyles(() => ({
+  main: {
+    display: 'inherit'
+  }
+}))(props => <div className={props.classes.main}>{props.children}</div>);
+
 /**
  * Renders a layout that uses the slate.js Value model structure.
  */
@@ -115,6 +128,6 @@ export default class Mask extends React.Component {
     const { value, layout } = this.props;
     const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
 
-    return <div>{children}</div>;
+    return <MaskContainer>{children}</MaskContainer>;
   }
 }

package/src/serialization.js

@@ -46,7 +46,7 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true });
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const handleStyles = (el, attribute) => {
   const styleString = el.getAttribute(attribute);
@@ -140,6 +140,13 @@ const rules = [
       const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });
       const object = getObject(type);
 
+      if (el.tagName.toLowerCase() === 'math') {
+        return {
+          isMath: true,
+          nodes: [el]
+        };
+      }
+
       return {
         object,
         type,