@pie-lib/mask-markup 1.13.46 → 1.14.0-beta.1

package/lib/drag-in-the-blank.js

@@ -33,6 +33,10 @@ var _blank = _interopRequireDefault(require("./components/blank"));
 
 var _withMask = require("./with-mask");
 
+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; } }
@@ -48,7 +52,9 @@ var Masked = (0, _withMask.withMask)('blank', function (props) {
           duplicates = props.duplicates,
           correctResponse = props.correctResponse,
           feedback = props.feedback,
-          showCorrectAnswer = props.showCorrectAnswer;
+          showCorrectAnswer = props.showCorrectAnswer,
+          emptyResponseAreaWidth = props.emptyResponseAreaWidth,
+          emptyResponseAreaHeight = props.emptyResponseAreaHeight;
       var choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id]; // eslint-disable-next-line react/prop-types
 
       var choice = choiceId && props.choices.find(function (c) {
@@ -61,6 +67,8 @@ var Masked = (0, _withMask.withMask)('blank', function (props) {
         duplicates: duplicates,
         choice: choice,
         id: dataset.id,
+        emptyResponseAreaWidth: emptyResponseAreaWidth,
+        emptyResponseAreaHeight: emptyResponseAreaHeight,
         onChange: onChange
       });
     }
@@ -84,14 +92,19 @@ var DragInTheBlank = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPositionDirection", function (choicePosition) {
       var flexDirection;
+      var justifyContent;
+      var alignItems;
 
       switch (choicePosition) {
         case 'left':
           flexDirection = 'row';
+          alignItems = 'center';
           break;
 
         case 'right':
           flexDirection = 'row-reverse';
+          justifyContent = 'flex-end';
+          alignItems = 'center';
           break;
 
         case 'below':
@@ -104,7 +117,11 @@ var DragInTheBlank = /*#__PURE__*/function (_React$Component) {
           break;
       }
 
-      return flexDirection;
+      return {
+        flexDirection: flexDirection,
+        justifyContent: justifyContent,
+        alignItems: alignItems
+      };
     });
     return _this;
   }
@@ -137,12 +154,16 @@ var DragInTheBlank = /*#__PURE__*/function (_React$Component) {
           correctResponse = _this$props.correctResponse,
           disabled = _this$props.disabled,
           feedback = _this$props.feedback,
-          showCorrectAnswer = _this$props.showCorrectAnswer;
+          showCorrectAnswer = _this$props.showCorrectAnswer,
+          emptyResponseAreaWidth = _this$props.emptyResponseAreaWidth,
+          emptyResponseAreaHeight = _this$props.emptyResponseAreaHeight;
       var choicePosition = choicesPosition || 'below';
-      var style = {
+
+      var style = _objectSpread({
         display: 'flex',
-        flexDirection: this.getPositionDirection(choicePosition)
-      };
+        minWidth: '100px'
+      }, this.getPositionDirection(choicePosition));
+
       return /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref) {
           return _ref && (_this2.rootRef = _ref);
@@ -155,6 +176,7 @@ var DragInTheBlank = /*#__PURE__*/function (_React$Component) {
         value: value,
         disabled: disabled
       }), /*#__PURE__*/_react["default"].createElement(Masked, {
+        elementType: 'drag-in-the-blank',
         markup: markup,
         layout: layout,
         value: value,
@@ -164,7 +186,9 @@ var DragInTheBlank = /*#__PURE__*/function (_React$Component) {
         duplicates: duplicates,
         feedback: feedback,
         correctResponse: correctResponse,
-        showCorrectAnswer: showCorrectAnswer
+        showCorrectAnswer: showCorrectAnswer,
+        emptyResponseAreaWidth: emptyResponseAreaWidth,
+        emptyResponseAreaHeight: emptyResponseAreaHeight
       }));
     }
   }]);
@@ -186,6 +210,8 @@ exports["default"] = DragInTheBlank;
   disabled: _propTypes["default"].bool,
   feedback: _propTypes["default"].object,
   correctResponse: _propTypes["default"].object,
-  showCorrectAnswer: _propTypes["default"].bool
+  showCorrectAnswer: _propTypes["default"].bool,
+  emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
 });
 //# sourceMappingURL=drag-in-the-blank.js.map

package/lib/drag-in-the-blank.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drag-in-the-blank.jsx"],"names":["Masked","props","node","data","onChange","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","choiceId","id","choice","choices","find","c","type","DragInTheBlank","choicePosition","flexDirection","rootRef","markup","layout","value","choicesPosition","style","display","getPositionDirection","ref","React","Component","PropTypes","string","object","arrayOf","shape","label","func","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA;AACA,IAAMA,MAAM,GAAG,wBAAS,OAAT,EAAkB,UAACC,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACpE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AACjC;AACA,UAAQC,QAAR,GAA+EN,KAA/E,CAAQM,QAAR;AAAA,UAAkBC,UAAlB,GAA+EP,KAA/E,CAAkBO,UAAlB;AAAA,UAA8BC,eAA9B,GAA+ER,KAA/E,CAA8BQ,eAA9B;AAAA,UAA+CC,QAA/C,GAA+ET,KAA/E,CAA+CS,QAA/C;AAAA,UAAyDC,iBAAzD,GAA+EV,KAA/E,CAAyDU,iBAAzD;AACA,UAAMC,QAAQ,GAAGD,iBAAiB,GAAGF,eAAe,CAACJ,OAAO,CAACQ,EAAT,CAAlB,GAAiCV,IAAI,CAACE,OAAO,CAACQ,EAAT,CAAvE,CAHiC,CAIjC;;AACA,UAAMC,MAAM,GAAGF,QAAQ,IAAIX,KAAK,CAACc,OAAN,CAAcC,IAAd,CAAmB,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACJ,EAAF,KAASD,QAAhB;AAAA,OAAnB,CAA3B;AAEA,0BACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACgB,IAAV,cAAkBb,OAAO,CAACQ,EAA1B,CADL;AAEE,QAAA,OAAO,EAAEF,iBAAiB,IAAKD,QAAQ,IAAIA,QAAQ,CAACL,OAAO,CAACQ,EAAT,CAFrD;AAGE,QAAA,QAAQ,EAAEN,QAHZ;AAIE,QAAA,UAAU,EAAEC,UAJd;AAKE,QAAA,MAAM,EAAEM,MALV;AAME,QAAA,EAAE,EAAET,OAAO,CAACQ,EANd;AAOE,QAAA,QAAQ,EAAET;AAPZ,QADF;AAWD;AACF,GArBgC;AAAA,CAAlB,CAAf;;IAuBqBe,c;;;;;;;;;;;;;;;6GAyBI,UAACC,cAAD,EAAoB;AACzC,UAAIC,aAAJ;;AAEA,cAAQD,cAAR;AACE,aAAK,MAAL;AACEC,UAAAA,aAAa,GAAG,KAAhB;AACA;;AACF,aAAK,OAAL;AACEA,UAAAA,aAAa,GAAG,aAAhB;AACA;;AACF,aAAK,OAAL;AACEA,UAAAA,aAAa,GAAG,gBAAhB;AACA;;AACF;AACE;AACAA,UAAAA,aAAa,GAAG,QAAhB;AACA;AAbJ;;AAgBA,aAAOA,aAAP;AACD,K;;;;;;WA9BD,4CAAmC;AACjC,UAAI,KAAKC,OAAT,EAAkB;AAChB,uCAAW,KAAKA,OAAhB;AACD;AACF;;;WAED,8BAAqB;AACnB,qCAAW,KAAKA,OAAhB;AACD;;;WAwBD,kBAAS;AAAA;;AACP,wBAYI,KAAKrB,KAZT;AAAA,UACEsB,MADF,eACEA,MADF;AAAA,UAEEf,UAFF,eAEEA,UAFF;AAAA,UAGEgB,MAHF,eAGEA,MAHF;AAAA,UAIEC,KAJF,eAIEA,KAJF;AAAA,UAKErB,QALF,eAKEA,QALF;AAAA,UAMEsB,eANF,eAMEA,eANF;AAAA,UAOEX,OAPF,eAOEA,OAPF;AAAA,UAQEN,eARF,eAQEA,eARF;AAAA,UASEF,QATF,eASEA,QATF;AAAA,UAUEG,QAVF,eAUEA,QAVF;AAAA,UAWEC,iBAXF,eAWEA,iBAXF;AAcA,UAAMS,cAAc,GAAGM,eAAe,IAAI,OAA1C;AACA,UAAMC,KAAK,GAAG;AACZC,QAAAA,OAAO,EAAE,MADG;AAEZP,QAAAA,aAAa,EAAE,KAAKQ,oBAAL,CAA0BT,cAA1B;AAFH,OAAd;AAKA,0BACE;AAAK,QAAA,GAAG,EAAE,aAACU,IAAD;AAAA,iBAASA,IAAG,KAAK,MAAI,CAACR,OAAL,GAAeQ,IAApB,CAAZ;AAAA,SAAV;AAAgD,QAAA,KAAK,EAAEH;AAAvD,sBACE,gCAAC,mBAAD;AACE,QAAA,cAAc,EAAEP,cADlB;AAEE,QAAA,UAAU,EAAEZ,UAFd;AAGE,QAAA,OAAO,EAAEO,OAHX;AAIE,QAAA,KAAK,EAAEU,KAJT;AAKE,QAAA,QAAQ,EAAElB;AALZ,QADF,eAQE,gCAAC,MAAD;AACE,QAAA,MAAM,EAAEgB,MADV;AAEE,QAAA,MAAM,EAAEC,MAFV;AAGE,QAAA,KAAK,EAAEC,KAHT;AAIE,QAAA,OAAO,EAAEV,OAJX;AAKE,QAAA,QAAQ,EAAEX,QALZ;AAME,QAAA,QAAQ,EAAEG,QANZ;AAOE,QAAA,UAAU,EAAEC,UAPd;AAQE,QAAA,QAAQ,EAAEE,QARZ;AASE,QAAA,eAAe,EAAED,eATnB;AAUE,QAAA,iBAAiB,EAAEE;AAVrB,QARF,CADF;AAuBD;;;EA3FyCoB,kBAAMC,S;;;iCAA7Bb,c,eACA;AACjBI,EAAAA,MAAM,EAAEU,sBAAUC,MADD;AAEjBV,EAAAA,MAAM,EAAES,sBAAUE,MAFD;AAGjBT,EAAAA,eAAe,EAAEO,sBAAUC,MAHV;AAIjBnB,EAAAA,OAAO,EAAEkB,sBAAUG,OAAV,CAAkBH,sBAAUI,KAAV,CAAgB;AAAEC,IAAAA,KAAK,EAAEL,sBAAUC,MAAnB;AAA2BT,IAAAA,KAAK,EAAEQ,sBAAUC;AAA5C,GAAhB,CAAlB,CAJQ;AAKjBT,EAAAA,KAAK,EAAEQ,sBAAUE,MALA;AAMjB/B,EAAAA,QAAQ,EAAE6B,sBAAUM,IANH;AAOjB/B,EAAAA,UAAU,EAAEyB,sBAAUO,IAPL;AAQjBjC,EAAAA,QAAQ,EAAE0B,sBAAUO,IARH;AASjB9B,EAAAA,QAAQ,EAAEuB,sBAAUE,MATH;AAUjB1B,EAAAA,eAAe,EAAEwB,sBAAUE,MAVV;AAWjBxB,EAAAA,iBAAiB,EAAEsB,sBAAUO;AAXZ,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Choices from './choices';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'blank') {\n    // eslint-disable-next-line react/prop-types\n    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;\n    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n    // eslint-disable-next-line react/prop-types\n    const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n    return (\n      <Blank\n        key={`${node.type}-${dataset.id}`}\n        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        id={dataset.id}\n        onChange={onChange}\n      />\n    );\n  }\n});\n\nexport default class DragInTheBlank extends React.Component {\n  static propTypes = {\n    markup: PropTypes.string,\n    layout: PropTypes.object,\n    choicesPosition: PropTypes.string,\n    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    duplicates: PropTypes.bool,\n    disabled: PropTypes.bool,\n    feedback: PropTypes.object,\n    correctResponse: PropTypes.object,\n    showCorrectAnswer: PropTypes.bool,\n  };\n\n  UNSAFE_componentWillReceiveProps() {\n    if (this.rootRef) {\n      renderMath(this.rootRef);\n    }\n  }\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row';\n        break;\n      case 'right':\n        flexDirection = 'row-reverse';\n        break;\n      case 'below':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // above\n        flexDirection = 'column';\n        break;\n    }\n\n    return flexDirection;\n  };\n\n  render() {\n    const {\n      markup,\n      duplicates,\n      layout,\n      value,\n      onChange,\n      choicesPosition,\n      choices,\n      correctResponse,\n      disabled,\n      feedback,\n      showCorrectAnswer,\n    } = this.props;\n\n    const choicePosition = choicesPosition || 'below';\n    const style = {\n      display: 'flex',\n      flexDirection: this.getPositionDirection(choicePosition),\n    };\n\n    return (\n      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>\n        <Choices\n          choicePosition={choicePosition}\n          duplicates={duplicates}\n          choices={choices}\n          value={value}\n          disabled={disabled}\n        />\n        <Masked\n          markup={markup}\n          layout={layout}\n          value={value}\n          choices={choices}\n          onChange={onChange}\n          disabled={disabled}\n          duplicates={duplicates}\n          feedback={feedback}\n          correctResponse={correctResponse}\n          showCorrectAnswer={showCorrectAnswer}\n        />\n      </div>\n    );\n  }\n}\n"],"file":"drag-in-the-blank.js"}
+{"version":3,"sources":["../src/drag-in-the-blank.jsx"],"names":["Masked","props","node","data","onChange","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","emptyResponseAreaWidth","emptyResponseAreaHeight","choiceId","id","choice","choices","find","c","type","DragInTheBlank","choicePosition","flexDirection","justifyContent","alignItems","rootRef","markup","layout","value","choicesPosition","style","display","minWidth","getPositionDirection","ref","React","Component","PropTypes","string","object","arrayOf","shape","label","func","bool","oneOfType","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Choices from './choices';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'blank') {\n    // eslint-disable-next-line react/prop-types\n    const {\n      disabled,\n      duplicates,\n      correctResponse,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n    } = props;\n    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n    // eslint-disable-next-line react/prop-types\n    const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n    return (\n      <Blank\n        key={`${node.type}-${dataset.id}`}\n        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        id={dataset.id}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        onChange={onChange}\n      />\n    );\n  }\n});\n\nexport default class DragInTheBlank extends React.Component {\n  static propTypes = {\n    markup: PropTypes.string,\n    layout: PropTypes.object,\n    choicesPosition: PropTypes.string,\n    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    duplicates: PropTypes.bool,\n    disabled: PropTypes.bool,\n    feedback: PropTypes.object,\n    correctResponse: PropTypes.object,\n    showCorrectAnswer: PropTypes.bool,\n    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  };\n\n  UNSAFE_componentWillReceiveProps() {\n    if (this.rootRef) {\n      renderMath(this.rootRef);\n    }\n  }\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n    let justifyContent;\n    let alignItems;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row';\n        alignItems = 'center';\n        break;\n      case 'right':\n        flexDirection = 'row-reverse';\n        justifyContent = 'flex-end';\n        alignItems = 'center';\n        break;\n      case 'below':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // above\n        flexDirection = 'column';\n        break;\n    }\n\n    return { flexDirection, justifyContent, alignItems };\n  };\n\n  render() {\n    const {\n      markup,\n      duplicates,\n      layout,\n      value,\n      onChange,\n      choicesPosition,\n      choices,\n      correctResponse,\n      disabled,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n    } = this.props;\n\n    const choicePosition = choicesPosition || 'below';\n    const style = {\n      display: 'flex',\n      minWidth: '100px',\n      ...this.getPositionDirection(choicePosition),\n    };\n\n    return (\n      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>\n        <Choices\n          choicePosition={choicePosition}\n          duplicates={duplicates}\n          choices={choices}\n          value={value}\n          disabled={disabled}\n        />\n        <Masked\n          elementType={'drag-in-the-blank'}\n          markup={markup}\n          layout={layout}\n          value={value}\n          choices={choices}\n          onChange={onChange}\n          disabled={disabled}\n          duplicates={duplicates}\n          feedback={feedback}\n          correctResponse={correctResponse}\n          showCorrectAnswer={showCorrectAnswer}\n          emptyResponseAreaWidth={emptyResponseAreaWidth}\n          emptyResponseAreaHeight={emptyResponseAreaHeight}\n        />\n      </div>\n    );\n  }\n}\n"],"file":"drag-in-the-blank.js"}

package/lib/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "ConstructedResponse", {
     return _constructedResponse["default"];
   }
 });
+Object.defineProperty(exports, "Customizable", {
+  enumerable: true,
+  get: function get() {
+    return _customizable["default"];
+  }
+});
 Object.defineProperty(exports, "DragInTheBlank", {
   enumerable: true,
   get: function get() {
@@ -48,6 +54,8 @@ var _dragInTheBlank = _interopRequireDefault(require("./drag-in-the-blank"));
 
 var _constructedResponse = _interopRequireDefault(require("./constructed-response"));
 
+var _customizable = _interopRequireDefault(require("./customizable"));
+
 var _inlineDropdown = _interopRequireDefault(require("./inline-dropdown"));
 
 var _componentize = _interopRequireDefault(require("./componentize"));

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import { withMask, buildLayoutFromMarkup } from './with-mask';\nimport DragInTheBlank from './drag-in-the-blank';\nimport ConstructedResponse from './constructed-response';\nimport InlineDropdown from './inline-dropdown';\nimport componentize from './componentize';\n\nexport { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import { withMask, buildLayoutFromMarkup } from './with-mask';\nimport DragInTheBlank from './drag-in-the-blank';\nimport ConstructedResponse from './constructed-response';\nimport Customizable from './customizable';\nimport InlineDropdown from './inline-dropdown';\nimport componentize from './componentize';\n\nexport {\n  withMask,\n  buildLayoutFromMarkup,\n  DragInTheBlank,\n  ConstructedResponse,\n  InlineDropdown,\n  componentize,\n  Customizable,\n};\n"],"file":"index.js"}

package/lib/inline-dropdown.js

@@ -33,10 +33,12 @@ var _default = (0, _withMask.withMask)('dropdown', function (props) {
         correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
         disabled: disabled || showCorrectAnswer,
         value: finalChoice,
+        correctValue: showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined,
         id: dataset.id,
         onChange: onChange,
         choices: choices[dataset.id],
-        showCorrectAnswer: showCorrectAnswer
+        showCorrectAnswer: showCorrectAnswer,
+        singleQuery: Object.keys(choices).length == 1
       });
     }
   };

package/lib/inline-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["props","node","data","onChange","dataset","component","choices","disabled","feedback","showCorrectAnswer","correctAnswer","id","find","c","correct","finalChoice","value","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;eACe,wBAAS,UAAT,EAAqB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACvE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,UAA1B,EAAsC;AACpC;AACA,UAAQC,OAAR,GAA2DN,KAA3D,CAAQM,OAAR;AAAA,UAAiBC,QAAjB,GAA2DP,KAA3D,CAAiBO,QAAjB;AAAA,UAA2BC,QAA3B,GAA2DR,KAA3D,CAA2BQ,QAA3B;AAAA,UAAqCC,iBAArC,GAA2DT,KAA3D,CAAqCS,iBAArC;AACA,UAAMC,aAAa,GAAGJ,OAAO,IAAIA,OAAO,CAACF,OAAO,CAACO,EAAT,CAAlB,IAAkCL,OAAO,CAACF,OAAO,CAACO,EAAT,CAAP,CAAoBC,IAApB,CAAyB,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACC,OAAT;AAAA,OAAzB,CAAxD;AACA,UAAMC,WAAW,GAAGN,iBAAiB,GAAGC,aAAa,IAAIA,aAAa,CAACM,KAAlC,GAA0Cd,IAAI,CAACE,OAAO,CAACO,EAAT,CAAnF;AAEA,0BACE,gCAAC,oBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACgB,IAAV,uBAA2Bb,OAAO,CAACO,EAAnC,CADL;AAEE,QAAA,OAAO,EAAEH,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAApB,IAAoCH,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,QAAQ,IAAIE,iBAHxB;AAIE,QAAA,KAAK,EAAEM,WAJT;AAKE,QAAA,EAAE,EAAEX,OAAO,CAACO,EALd;AAME,QAAA,QAAQ,EAAER,QANZ;AAOE,QAAA,OAAO,EAAEG,OAAO,CAACF,OAAO,CAACO,EAAT,CAPlB;AAQE,QAAA,iBAAiB,EAAEF;AARrB,QADF;AAYD;AACF,GArBmC;AAAA,CAArB,C","sourcesContent":["import React from 'react';\nimport Dropdown from './components/dropdown';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('dropdown', (props) => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'dropdown') {\n    // eslint-disable-next-line react/prop-types\n    const { choices, disabled, feedback, showCorrectAnswer } = props;\n    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);\n    const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];\n\n    return (\n      <Dropdown\n        key={`${node.type}-dropdown-${dataset.id}`}\n        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n        disabled={disabled || showCorrectAnswer}\n        value={finalChoice}\n        id={dataset.id}\n        onChange={onChange}\n        choices={choices[dataset.id]}\n        showCorrectAnswer={showCorrectAnswer}\n      />\n    );\n  }\n});\n"],"file":"inline-dropdown.js"}
+{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["props","node","data","onChange","dataset","component","choices","disabled","feedback","showCorrectAnswer","correctAnswer","id","find","c","correct","finalChoice","value","type","label","undefined","Object","keys","length"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;eACe,wBAAS,UAAT,EAAqB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACvE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,UAA1B,EAAsC;AACpC;AACA,UAAQC,OAAR,GAA2DN,KAA3D,CAAQM,OAAR;AAAA,UAAiBC,QAAjB,GAA2DP,KAA3D,CAAiBO,QAAjB;AAAA,UAA2BC,QAA3B,GAA2DR,KAA3D,CAA2BQ,QAA3B;AAAA,UAAqCC,iBAArC,GAA2DT,KAA3D,CAAqCS,iBAArC;AACA,UAAMC,aAAa,GAAGJ,OAAO,IAAIA,OAAO,CAACF,OAAO,CAACO,EAAT,CAAlB,IAAkCL,OAAO,CAACF,OAAO,CAACO,EAAT,CAAP,CAAoBC,IAApB,CAAyB,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACC,OAAT;AAAA,OAAzB,CAAxD;AACA,UAAMC,WAAW,GAAGN,iBAAiB,GAAGC,aAAa,IAAIA,aAAa,CAACM,KAAlC,GAA0Cd,IAAI,CAACE,OAAO,CAACO,EAAT,CAAnF;AAEA,0BACE,gCAAC,oBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACgB,IAAV,uBAA2Bb,OAAO,CAACO,EAAnC,CADL;AAEE,QAAA,OAAO,EAAEH,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAApB,IAAoCH,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,QAAQ,IAAIE,iBAHxB;AAIE,QAAA,KAAK,EAAEM,WAJT;AAKE,QAAA,YAAY,EAAEN,iBAAiB,GAAGC,aAAa,IAAIA,aAAa,CAACQ,KAAlC,GAA0CC,SAL3E;AAME,QAAA,EAAE,EAAEf,OAAO,CAACO,EANd;AAOE,QAAA,QAAQ,EAAER,QAPZ;AAQE,QAAA,OAAO,EAAEG,OAAO,CAACF,OAAO,CAACO,EAAT,CARlB;AASE,QAAA,iBAAiB,EAAEF,iBATrB;AAUE,QAAA,WAAW,EAAEW,MAAM,CAACC,IAAP,CAAYf,OAAZ,EAAqBgB,MAArB,IAA+B;AAV9C,QADF;AAcD;AACF,GAvBmC;AAAA,CAArB,C","sourcesContent":["import React from 'react';\nimport Dropdown from './components/dropdown';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('dropdown', (props) => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'dropdown') {\n    // eslint-disable-next-line react/prop-types\n    const { choices, disabled, feedback, showCorrectAnswer } = props;\n    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);\n    const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];\n\n    return (\n      <Dropdown\n        key={`${node.type}-dropdown-${dataset.id}`}\n        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n        disabled={disabled || showCorrectAnswer}\n        value={finalChoice}\n        correctValue={showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined}\n        id={dataset.id}\n        onChange={onChange}\n        choices={choices[dataset.id]}\n        showCorrectAnswer={showCorrectAnswer}\n        singleQuery={Object.keys(choices).length == 1}\n      />\n    );\n  }\n});\n"],"file":"inline-dropdown.js"}

package/lib/mask.js

@@ -33,6 +33,8 @@ var _styles = require("@material-ui/core/styles");
 
 var _serialization = require("./serialization");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 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; }
@@ -53,6 +55,18 @@ var Paragraph = (0, _styles.withStyles)(function (theme) {
     className: props.classes.para
   }, props.children);
 });
+var Spacer = (0, _styles.withStyles)(function () {
+  return {
+    spacer: {
+      display: 'inline-block',
+      width: '.75em'
+    }
+  };
+})(function (props) {
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: props.classes.spacer
+  });
+});
 var restrictWhitespaceTypes = ['tbody', 'tr'];
 
 var addText = function addText(parentNode, text) {
@@ -78,7 +92,7 @@ var getMark = function getMark(n) {
   return null;
 };
 
-var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode) {
+var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode, elementType) {
   if (!value) {
     return null;
   }
@@ -101,6 +115,13 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
 
       if (c) {
         children.push(c);
+
+        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push( /*#__PURE__*/_react["default"].createElement(Spacer, {
+            key: "spacer-".concat(index)
+          }));
+        }
+
         return;
       }
     }
@@ -127,9 +148,15 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
         }
       } else if (content.length > 0) {
         children.push(content);
+
+        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push( /*#__PURE__*/_react["default"].createElement(Spacer, {
+            key: "spacer-".concat(index)
+          }));
+        }
       }
     } else {
-      var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+      var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
 
       if (n.type === 'p' || n.type === 'paragraph') {
         children.push( /*#__PURE__*/_react["default"].createElement(Paragraph, {
@@ -158,11 +185,21 @@ var MaskContainer = (0, _styles.withStyles)(function () {
   return {
     main: {
       display: 'initial'
+    },
+    tableStyle: {
+      '&:not(.MathJax) table': {
+        borderCollapse: 'collapse'
+      },
+      // align table content to left as per STAR requirement PD-3687
+      '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+        padding: '8px 12px',
+        textAlign: 'left'
+      }
     }
   };
 })(function (props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: props.classes.main
+    className: (0, _classnames["default"])(props.classes.main, props.classes.tableStyle)
   }, props.children);
 });
 /**
@@ -197,8 +234,9 @@ var Mask = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
           value = _this$props.value,
-          layout = _this$props.layout;
-      var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+          layout = _this$props.layout,
+          elementType = _this$props.elementType;
+      var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
       return /*#__PURE__*/_react["default"].createElement(MaskContainer, null, children);
     }
   }]);
@@ -210,6 +248,7 @@ exports["default"] = Mask;
   renderChildren: _propTypes["default"].func,
   layout: _propTypes["default"].object,
   value: _propTypes["default"].object,
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  elementType: _propTypes["default"].string
 });
 //# sourceMappingURL=mask.js.map

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","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 ? `${n.type}-${index}` : `${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span\n          dangerouslySetInnerHTML={{\n            __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n          }}\n        />,\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 key={key}>{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: 'initial',\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"}
+{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","Spacer","spacer","display","width","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","elementType","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","tableStyle","borderCollapse","padding","textAlign","Mask","id","handleChange","React","Component","PropTypes","func","string"],"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';\nimport cx from 'classnames';\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 Spacer = withStyles(() => ({\n  spacer: {\n    display: 'inline-block',\n    width: '.75em',\n  },\n}))((props) => <span className={props.classes.spacer} />);\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, elementType) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span\n          dangerouslySetInnerHTML={{\n            __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n          }}\n        />,\n      );\n      return children;\n    }\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\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 key={key}>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);\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: 'initial',\n  },\n  tableStyle: {\n    '&:not(.MathJax) table': {\n      borderCollapse: 'collapse',\n    },\n    // align table content to left as per STAR requirement PD-3687\n    '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n      padding: '8px 12px',\n      textAlign: 'left',\n    },\n  },\n}))((props) => <div className={cx(props.classes.main, props.classes.tableStyle)}>{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    elementType: PropTypes.string,\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, elementType } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);\n\n    return <MaskContainer>{children}</MaskContainer>;\n  }\n}\n"],"file":"mask.js"}

package/lib/with-mask.js

@@ -21,6 +21,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _mask = _interopRequireDefault(require("./mask"));
@@ -57,15 +59,43 @@ var withMask = function withMask(type, renderChildren) {
     }
 
     (0, _createClass2["default"])(WithMask, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (this.props.markup !== prevProps.markup) {
+          // eslint-disable-next-line
+          var domNode = _reactDom["default"].findDOMNode(this); // Query all elements that may contain outdated MathJax renderings
+
+
+          var mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]'); // Clean up for fresh MathJax processing
+
+          (mathElements || []).forEach(function (el) {
+            // Remove the MathJax container to allow for clean updates
+            var mjxContainer = el.querySelector('mjx-container');
+
+            if (mjxContainer) {
+              el.removeChild(mjxContainer);
+            } // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
+
+
+            var latexCode = el.getAttribute('data-raw');
+            el.innerHTML = latexCode; // Remove the attribute to signal that MathJax should reprocess this element
+
+            el.removeAttribute('data-math-handled');
+          });
+        }
+      }
+    }, {
       key: "render",
       value: function render() {
         var _this$props = this.props,
             markup = _this$props.markup,
             layout = _this$props.layout,
             value = _this$props.value,
-            onChange = _this$props.onChange;
+            onChange = _this$props.onChange,
+            elementType = _this$props.elementType;
         var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
         return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
+          elementType: elementType,
           layout: maskLayout,
           value: value,
           onChange: onChange,
@@ -85,7 +115,9 @@ var withMask = function withMask(type, renderChildren) {
      */
     layout: _propTypes["default"].object,
     value: _propTypes["default"].object,
-    onChange: _propTypes["default"].func
+    onChange: _propTypes["default"].func,
+    customMarkMarkupComponent: _propTypes["default"].func,
+    elementType: _propTypes["default"].string
   }), _class;
 };
 

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;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,4BAAO,gCAAC,gBAAD;AAAM,UAAA,MAAM,EAAES,UAAd;AAA0B,UAAA,KAAK,EAAEP,KAAjC;AAAwC,UAAA,QAAQ,EAAEM,QAAlD;AAA4D,UAAA,cAAc,EAAEH,cAAc,CAAC,KAAKC,KAAN;AAA1F,UAAP;AACD;AAnBH;AAAA;AAAA,IAA8BI,kBAAMC,SAApC,yDACqB;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;AAqBD,CAtBM","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 <Mask layout={maskLayout} value={value} onChange={onChange} renderChildren={renderChildren(this.props)} />;\n    }\n  };\n};\n"],"file":"with-mask.js"}
+{"version":3,"sources":["../src/with-mask.jsx"],"names":["buildLayoutFromMarkup","markup","type","processed","value","document","withMask","renderChildren","prevProps","props","domNode","ReactDOM","findDOMNode","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","layout","onChange","elementType","maskLayout","React","Component","PropTypes","string","object","func","customMarkMarkupComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;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,aAgBE,4BAAmBC,SAAnB,EAA8B;AAC5B,YAAI,KAAKC,KAAL,CAAWR,MAAX,KAAsBO,SAAS,CAACP,MAApC,EAA4C;AAC1C;AACA,cAAMS,OAAO,GAAGC,qBAASC,WAAT,CAAqB,IAArB,CAAhB,CAF0C,CAG1C;;;AACA,cAAMC,YAAY,GAAGH,OAAO,IAAIA,OAAO,CAACI,gBAAR,CAAyB,wCAAzB,CAAhC,CAJ0C,CAM1C;;AACA,WAACD,YAAY,IAAI,EAAjB,EAAqBE,OAArB,CAA6B,UAACC,EAAD,EAAQ;AACnC;AACA,gBAAMC,YAAY,GAAGD,EAAE,CAACE,aAAH,CAAiB,eAAjB,CAArB;;AAEA,gBAAID,YAAJ,EAAkB;AAChBD,cAAAA,EAAE,CAACG,WAAH,CAAeF,YAAf;AACD,aANkC,CAQnC;;;AACA,gBAAMG,SAAS,GAAGJ,EAAE,CAACK,YAAH,CAAgB,UAAhB,CAAlB;AACAL,YAAAA,EAAE,CAACM,SAAH,GAAeF,SAAf,CAVmC,CAYnC;;AACAJ,YAAAA,EAAE,CAACO,eAAH,CAAmB,mBAAnB;AACD,WAdD;AAeD;AACF;AAxCH;AAAA;AAAA,aA0CE,kBAAS;AACP,0BAAyD,KAAKd,KAA9D;AAAA,YAAQR,MAAR,eAAQA,MAAR;AAAA,YAAgBuB,MAAhB,eAAgBA,MAAhB;AAAA,YAAwBpB,KAAxB,eAAwBA,KAAxB;AAAA,YAA+BqB,QAA/B,eAA+BA,QAA/B;AAAA,YAAyCC,WAAzC,eAAyCA,WAAzC;AAEA,YAAMC,UAAU,GAAGH,MAAM,GAAGA,MAAH,GAAYxB,qBAAqB,CAACC,MAAD,EAASC,IAAT,CAA1D;AACA,4BACE,gCAAC,gBAAD;AACE,UAAA,WAAW,EAAEwB,WADf;AAEE,UAAA,MAAM,EAAEC,UAFV;AAGE,UAAA,KAAK,EAAEvB,KAHT;AAIE,UAAA,QAAQ,EAAEqB,QAJZ;AAKE,UAAA,cAAc,EAAElB,cAAc,CAAC,KAAKE,KAAN;AALhC,UADF;AASD;AAvDH;AAAA;AAAA,IAA8BmB,kBAAMC,SAApC,yDACqB;AACjB;AACN;AACA;AACM5B,IAAAA,MAAM,EAAE6B,sBAAUC,MAJD;;AAKjB;AACN;AACA;AACMP,IAAAA,MAAM,EAAEM,sBAAUE,MARD;AASjB5B,IAAAA,KAAK,EAAE0B,sBAAUE,MATA;AAUjBP,IAAAA,QAAQ,EAAEK,sBAAUG,IAVH;AAWjBC,IAAAA,yBAAyB,EAAEJ,sBAAUG,IAXpB;AAYjBP,IAAAA,WAAW,EAAEI,sBAAUC;AAZN,GADrB;AAyDD,CA1DM","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\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      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        // eslint-disable-next-line\n        const domNode = ReactDOM.findDOMNode(this);\n        // Query all elements that may contain outdated MathJax renderings\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          elementType={elementType}\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.13.46",
+  "version": "1.14.0-beta.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,15 +9,19 @@
   },
   "dependencies": {
     "@material-ui/core": "^3.9.3",
-    "@pie-lib/drag": "^2.2.9",
-    "@pie-lib/math-rendering": "2.5.18",
-    "@pie-lib/render-ui": "^4.15.9",
+    "@material-ui/icons": "^3.0.2",
+    "@pie-lib/drag": "latest",
+    "@pie-lib/editable-html": "latest",
+    "@pie-lib/math-rendering": "latest",
+    "@pie-lib/render-ui": "latest",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": ">=3.8.1",
+    "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react": "^16.8.1",
     "react-dnd-html5-backend": "^14.0.2",
+    "react-dom": "^16.9.0",
     "slate": "^0.36.2",
     "slate-html-serializer": "^0.6.12",
     "slate-prop-types": "^0.4.38",
@@ -27,5 +31,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "9c15e6c0aa4c83e1018b9b1070c8dec4294e6ffe"
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
 }