@pie-lib/mask-markup 1.11.2 → 1.12.0

package/lib/mask.js

@@ -1,9 +1,11 @@
 "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
 });
-exports["default"] = exports.renderChildren = void 0;
+exports.renderChildren = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,27 +19,29 @@ 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 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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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) { _defineProperty(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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+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 _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 _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; }
 
@@ -51,7 +55,7 @@ var Paragraph = (0, _styles.withStyles)(function (theme) {
     }
   };
 })(function (props) {
-  return _react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: props.classes.para
   }, props.children);
 });
@@ -89,6 +93,15 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
   (layout.nodes || []).forEach(function (n, index) {
     var key = "".concat(n.type, "-").concat(index);
 
+    if (n.isMath) {
+      children.push( /*#__PURE__*/_react["default"].createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: "<math>".concat(n.nodes[0].innerHTML, "</math>")
+        }
+      }));
+      return children;
+    }
+
     if (rootRenderChildren) {
       var c = rootRenderChildren(n, value, onChange);
 
@@ -112,7 +125,7 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
         for (markKey in _serialization.MARK_TAGS) {
           if (_serialization.MARK_TAGS[markKey] === mark.type) {
             var Tag = markKey;
-            children.push(_react["default"].createElement(Tag, null, content));
+            children.push( /*#__PURE__*/_react["default"].createElement(Tag, null, content));
             break;
           }
         }
@@ -123,18 +136,18 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
       var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
 
       if (n.type === 'p' || n.type === 'paragraph') {
-        children.push(_react["default"].createElement(Paragraph, {
+        children.push( /*#__PURE__*/_react["default"].createElement(Paragraph, {
           key: key
         }, subNodes));
       } else {
         var _Tag = n.type;
 
         if (n.nodes && n.nodes.length > 0) {
-          children.push(_react["default"].createElement(_Tag, _extends({
+          children.push( /*#__PURE__*/_react["default"].createElement(_Tag, _extends({
             key: key
           }, n.data.attributes), subNodes));
         } else {
-          children.push(_react["default"].createElement(_Tag, _extends({
+          children.push( /*#__PURE__*/_react["default"].createElement(_Tag, _extends({
             key: key
           }, n.data.attributes)));
         }
@@ -143,21 +156,29 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
   });
   return children;
 };
+
+exports.renderChildren = renderChildren;
+var MaskContainer = (0, _styles.withStyles)(function () {
+  return {
+    main: {
+      display: 'inherit'
+    }
+  };
+})(function (props) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: props.classes.main
+  }, props.children);
+});
 /**
  * Renders a layout that uses the slate.js Value model structure.
  */
 
-
-exports.renderChildren = renderChildren;
-
-var Mask =
-/*#__PURE__*/
-function (_React$Component) {
+var Mask = /*#__PURE__*/function (_React$Component) {
   _inherits(Mask, _React$Component);
 
-  function Mask() {
-    var _getPrototypeOf2;
+  var _super = _createSuper(Mask);
 
+  function Mask() {
     var _this;
 
     _classCallCheck(this, Mask);
@@ -166,10 +187,10 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Mask)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (id, value) {
-      var data = _objectSpread({}, _this.props.value, _defineProperty({}, id, value));
+      var data = _objectSpread(_objectSpread({}, _this.props.value), {}, _defineProperty({}, id, value));
 
       _this.props.onChange(data);
     });
@@ -184,7 +205,7 @@ function (_React$Component) {
           value = _this$props.value,
           layout = _this$props.layout;
       var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
-      return _react["default"].createElement("div", null, children);
+      return /*#__PURE__*/_react["default"].createElement(MaskContainer, null, children);
     }
   }]);
 

package/lib/mask.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","c","push","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","Mask","id","handleChange","React","Component","PropTypes","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = withStyles(theme => ({\n  para: {\n    paddingTop: 2 * theme.spacing.unit,\n    paddingBottom: 2 * theme.spacing.unit\n  }\n}))(props => <div className={props.classes.para}>{props.children}</div>);\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = n => {\n  const mark = n.leaves.find(leave => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = `${n.type}-${index}`;\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func\n  };\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);\n\n    return <div>{children}</div>;\n  }\n}\n"],"file":"mask.js"}
+{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","isMath","push","__html","innerHTML","c","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","MaskContainer","main","display","Mask","id","handleChange","React","Component","PropTypes","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = withStyles(theme => ({\n  para: {\n    paddingTop: 2 * theme.spacing.unit,\n    paddingBottom: 2 * theme.spacing.unit\n  }\n}))(props => <div className={props.classes.para}>{props.children}</div>);\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = n => {\n  const mark = n.leaves.find(leave => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = `${n.type}-${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span dangerouslySetInnerHTML={{ __html: `<math>${n.nodes[0].innerHTML}</math>` }} />\n      );\n      return children;\n    }\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\nconst MaskContainer = withStyles(() => ({\n  main: {\n    display: 'inherit'\n  }\n}))(props => <div className={props.classes.main}>{props.children}</div>);\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func\n  };\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);\n\n    return <MaskContainer>{children}</MaskContainer>;\n  }\n}\n"],"file":"mask.js"}

package/lib/serialization.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deserialize = exports.MARK_TAGS = exports.reactAttributes = exports.parseStyleString = void 0;
+exports.reactAttributes = exports.parseStyleString = exports.deserialize = exports.MARK_TAGS = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,9 +15,9 @@ var _debug = _interopRequireDefault(require("debug"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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) { _defineProperty(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 _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; }
 
@@ -69,7 +69,8 @@ exports.parseStyleString = parseStyleString;
 
 var reactAttributes = function reactAttributes(o) {
   return (0, _toStyle.object)(o, {
-    camelize: true
+    camelize: true,
+    addUnits: false
   });
 };
 
@@ -164,6 +165,14 @@ var rules = [marks, {
     var normalAttrs = attr(el) || {};
     var allAttrs = attributes.reduce(attributesToMap(el), _objectSpread({}, normalAttrs));
     var object = getObject(type);
+
+    if (el.tagName.toLowerCase() === 'math') {
+      return {
+        isMath: true,
+        nodes: [el]
+      };
+    }
+
     return {
       object: object,
       type: type,

package/lib/serialization.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/serialization.js"],"names":["log","INLINE","MARK","TEXT_NODE","COMMENT_NODE","attr","el","attributes","length","undefined","out","i","a","name","value","getObject","type","includes","parseStyleString","s","regex","match","result","exec","trim","reactAttributes","o","camelize","handleStyles","attribute","styleString","getAttribute","handleClass","acc","classNames","attributesToMap","style","className","MARK_TAGS","b","em","u","code","strong","marks","deserialize","next","mark","tagName","toLowerCase","object","nodes","childNodes","rules","nodeType","leaves","text","textContent","normalAttrs","allAttrs","reduce","data","dataset","html","Html","defaultBlock","toJSON"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Html from 'slate-html-serializer';\nimport { object as toStyleObject } from 'to-style';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:mask-markup:serialization');\n\nconst INLINE = ['span'];\nconst MARK = ['em', 'strong', 'u'];\nconst TEXT_NODE = 3;\nconst COMMENT_NODE = 8;\n\nconst attr = el => {\n  if (!el.attributes || el.attributes.length <= 0) {\n    return undefined;\n  }\n\n  const out = {};\n  let i;\n\n  for (i = 0; i < el.attributes.length; i++) {\n    const a = el.attributes[i];\n\n    out[a.name] = a.value;\n  }\n\n  return out;\n};\n\nconst getObject = type => {\n  if (INLINE.includes(type)) {\n    return 'inline';\n  } else if (MARK.includes(type)) {\n    return 'mark';\n  }\n  return 'block';\n};\n\nexport const parseStyleString = s => {\n  const regex = /([\\w-]*)\\s*:\\s*([^;]*)/g;\n  let match;\n  const result = {};\n  while ((match = regex.exec(s))) {\n    result[match[1]] = match[2].trim();\n  }\n  return result;\n};\n\nexport const reactAttributes = o => toStyleObject(o, { camelize: true });\n\nconst handleStyles = (el, attribute) => {\n  const styleString = el.getAttribute(attribute);\n\n  return reactAttributes(parseStyleString(styleString));\n};\n\nconst handleClass = (el, acc, attribute) => {\n  const classNames = el.getAttribute(attribute);\n\n  delete acc.class;\n\n  return classNames;\n};\n\nconst attributesToMap = el => (acc, attribute) => {\n  if (!el.getAttribute) {\n    return acc;\n  }\n\n  const value = el.getAttribute(attribute);\n\n  if (value) {\n    switch (attribute) {\n      case 'style':\n        acc.style = handleStyles(el, attribute);\n        break;\n      case 'class':\n        acc.className = handleClass(el, acc, attribute);\n        break;\n      default:\n        acc[attribute] = el.getAttribute(attribute);\n        break;\n    }\n  }\n\n  return acc;\n};\n\nconst attributes = ['border', 'class', 'style'];\n\n/**\n * Tags to marks.\n *\n * @type {Object}\n */\n\nexport const MARK_TAGS = {\n  b: 'bold',\n  em: 'italic',\n  u: 'underline',\n  s: 'strikethrough',\n  code: 'code',\n  strong: 'strong'\n};\n\nconst marks = {\n  deserialize(el, next) {\n    const mark = MARK_TAGS[el.tagName.toLowerCase()];\n    if (!mark) return;\n    log('[deserialize] mark: ', mark);\n    return {\n      object: 'mark',\n      type: mark,\n      nodes: next(el.childNodes)\n    };\n  }\n};\n\nconst rules = [\n  marks,\n  {\n    /**\n     * deserialize everything, we're not fussy about the dom structure for now.\n     */\n    deserialize: (el, next) => {\n      if (el.nodeType === COMMENT_NODE) {\n        return undefined;\n      }\n\n      if (el.nodeType === TEXT_NODE) {\n        return {\n          object: 'text',\n          leaves: [{ text: el.textContent }]\n        };\n      }\n\n      const type = el.tagName.toLowerCase();\n\n      const normalAttrs = attr(el) || {};\n      const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });\n      const object = getObject(type);\n\n      return {\n        object,\n        type,\n        data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },\n        nodes: next(el.childNodes)\n      };\n    }\n  }\n];\n\n/**\n * Create a new serializer instance with our `rules` from above.\n * Having a default div block will just put every div on it's own line, which is not ideal.\n */\nconst html = new Html({ rules, defaultBlock: 'span' });\n\nexport const deserialize = s => html.deserialize(s, { toJSON: true });\n"],"file":"serialization.js"}
+{"version":3,"sources":["../src/serialization.js"],"names":["log","INLINE","MARK","TEXT_NODE","COMMENT_NODE","attr","el","attributes","length","undefined","out","i","a","name","value","getObject","type","includes","parseStyleString","s","regex","match","result","exec","trim","reactAttributes","o","camelize","addUnits","handleStyles","attribute","styleString","getAttribute","handleClass","acc","classNames","attributesToMap","style","className","MARK_TAGS","b","em","u","code","strong","marks","deserialize","next","mark","tagName","toLowerCase","object","nodes","childNodes","rules","nodeType","leaves","text","textContent","normalAttrs","allAttrs","reduce","isMath","data","dataset","html","Html","defaultBlock","toJSON"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Html from 'slate-html-serializer';\nimport { object as toStyleObject } from 'to-style';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:mask-markup:serialization');\n\nconst INLINE = ['span'];\nconst MARK = ['em', 'strong', 'u'];\nconst TEXT_NODE = 3;\nconst COMMENT_NODE = 8;\n\nconst attr = el => {\n  if (!el.attributes || el.attributes.length <= 0) {\n    return undefined;\n  }\n\n  const out = {};\n  let i;\n\n  for (i = 0; i < el.attributes.length; i++) {\n    const a = el.attributes[i];\n\n    out[a.name] = a.value;\n  }\n\n  return out;\n};\n\nconst getObject = type => {\n  if (INLINE.includes(type)) {\n    return 'inline';\n  } else if (MARK.includes(type)) {\n    return 'mark';\n  }\n  return 'block';\n};\n\nexport const parseStyleString = s => {\n  const regex = /([\\w-]*)\\s*:\\s*([^;]*)/g;\n  let match;\n  const result = {};\n  while ((match = regex.exec(s))) {\n    result[match[1]] = match[2].trim();\n  }\n  return result;\n};\n\nexport const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });\n\nconst handleStyles = (el, attribute) => {\n  const styleString = el.getAttribute(attribute);\n\n  return reactAttributes(parseStyleString(styleString));\n};\n\nconst handleClass = (el, acc, attribute) => {\n  const classNames = el.getAttribute(attribute);\n\n  delete acc.class;\n\n  return classNames;\n};\n\nconst attributesToMap = el => (acc, attribute) => {\n  if (!el.getAttribute) {\n    return acc;\n  }\n\n  const value = el.getAttribute(attribute);\n\n  if (value) {\n    switch (attribute) {\n      case 'style':\n        acc.style = handleStyles(el, attribute);\n        break;\n      case 'class':\n        acc.className = handleClass(el, acc, attribute);\n        break;\n      default:\n        acc[attribute] = el.getAttribute(attribute);\n        break;\n    }\n  }\n\n  return acc;\n};\n\nconst attributes = ['border', 'class', 'style'];\n\n/**\n * Tags to marks.\n *\n * @type {Object}\n */\n\nexport const MARK_TAGS = {\n  b: 'bold',\n  em: 'italic',\n  u: 'underline',\n  s: 'strikethrough',\n  code: 'code',\n  strong: 'strong'\n};\n\nconst marks = {\n  deserialize(el, next) {\n    const mark = MARK_TAGS[el.tagName.toLowerCase()];\n    if (!mark) return;\n    log('[deserialize] mark: ', mark);\n    return {\n      object: 'mark',\n      type: mark,\n      nodes: next(el.childNodes)\n    };\n  }\n};\n\nconst rules = [\n  marks,\n  {\n    /**\n     * deserialize everything, we're not fussy about the dom structure for now.\n     */\n    deserialize: (el, next) => {\n      if (el.nodeType === COMMENT_NODE) {\n        return undefined;\n      }\n\n      if (el.nodeType === TEXT_NODE) {\n        return {\n          object: 'text',\n          leaves: [{ text: el.textContent }]\n        };\n      }\n\n      const type = el.tagName.toLowerCase();\n\n      const normalAttrs = attr(el) || {};\n      const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });\n      const object = getObject(type);\n\n      if (el.tagName.toLowerCase() === 'math') {\n        return {\n          isMath: true,\n          nodes: [el]\n        };\n      }\n\n      return {\n        object,\n        type,\n        data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },\n        nodes: next(el.childNodes)\n      };\n    }\n  }\n];\n\n/**\n * Create a new serializer instance with our `rules` from above.\n * Having a default div block will just put every div on it's own line, which is not ideal.\n */\nconst html = new Html({ rules, defaultBlock: 'span' });\n\nexport const deserialize = s => html.deserialize(s, { toJSON: true });\n"],"file":"serialization.js"}

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.11.2",
+  "version": "1.12.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,8 +10,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.3.11",
-    "@pie-lib/render-ui": "^4.12.2",
+    "@pie-lib/math-rendering": "^2.3.12",
+    "@pie-lib/render-ui": "^4.12.4",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": ">=3.8.1",
@@ -27,5 +27,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "181226d32394f0815c320b9f9786df6708a9c364"
+  "gitHead": "94d3f4ebeac61ccfff87705594a1e80f664d4975"
 }

package/src/components/correct-input.jsx

@@ -30,6 +30,9 @@ export default withStyles(() => ({
       borderColor: color.primaryDark()
     }
   },
+  crInput: {
+    padding: '8px !important'
+  },
   correct: correctStyle(color.correct()),
   incorrect: correctStyle(color.incorrect()),
   box: {
@@ -46,17 +49,24 @@ export default withStyles(() => ({
     borderColor: color.correct()
   }
 }))(props => {
-  const { correct, isBox, classes, disabled, maxLength, ...rest } = props;
+  const {
+    correct,
+    charactersLimit,
+    classes,
+    disabled,
+    isBox,
+    isConstructedResponse,
+    width,
+    ...rest
+  } = props;
   const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
-  const extraSpace = maxLength ? maxLength / 10 + 1 : 0; // used for capital letters
-  const inputProps = maxLength
-    ? {
-        maxLength: maxLength,
-        style: {
-          width: `${maxLength + extraSpace}ch`
-        }
-      }
-    : {};
+  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
@@ -66,7 +76,11 @@ 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}

package/src/components/input.jsx

@@ -2,21 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CorrectInput from './correct-input';
 
-const Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer, maxLength }) => {
+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}
-      maxLength={maxLength}
+      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, maxLength } = 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,7 +22,9 @@ export default withMask('input', props => (node, data, onChange) => {
         id={dataset.id}
         onChange={onChange}
         showCorrectAnswer={showCorrectAnswer}
-        maxLength={maxLength && maxLength[dataset.id]}
+        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,