@pie-element/drag-in-the-blank 3.9.0 → 3.9.1-beta.587

package/lib/index.js

@@ -27,13 +27,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
+var _mathRendering = require("@pie-lib/math-rendering");
+
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
 
 var _main = _interopRequireDefault(require("./main"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var InlineDropdown = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(InlineDropdown, _HTMLElement);
@@ -53,7 +55,9 @@ var InlineDropdown = /*#__PURE__*/function (_HTMLElement) {
           onChange: _this.changeSession
         });
 
-        _reactDom["default"].render(elem, (0, _assertThisInitialized2["default"])(_this));
+        _reactDom["default"].render(elem, (0, _assertThisInitialized2["default"])(_this), function () {
+          (0, _mathRendering.renderMath)((0, _assertThisInitialized2["default"])(_this));
+        });
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dispatchChangedEvent", function () {

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["InlineDropdown","_model","_session","elem","React","createElement","Main","model","value","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","m","ModelSetEvent","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAIA;;;;;;IAEqBA,c;;;;;AACnB,4BAAc;AAAA;;AAAA;AACZ;AADY,gGA4BJ,YAAM;AACd,UAAI,MAAKC,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIC,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,UAAAA,KAAK,EAAE,MAAKN,MADuB;AAEnCO,UAAAA,KAAK,EAAE,MAAKN,QAAL,CAAcM,KAFc;AAGnCC,UAAAA,QAAQ,EAAE,MAAKC;AAHoB,SAA1B,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,IAAhB;AACD;AACF,KArCa;AAAA,6GAuCS,YAAM;AAC3B,YAAKU,aAAL,CACE,IAAIC,oCAAJ,CACE,MAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,MAAKC,OAAL,IAAgB,CAAC,CAAC,MAAKA,OAAL,CAAaT,KAFjC,CADF;AAMD,KA9Ca;AAAA,sGAgDE,UAAAA,KAAK,EAAI;AACvB,YAAKS,OAAL,CAAaT,KAAb,GAAqBA,KAArB;;AACA,YAAKU,oBAAL;;AACA,YAAKC,OAAL;AACD,KApDa;AAEZ,UAAKlB,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAUkB,CAAV,EAAa;AACX,WAAKnB,MAAL,GAAcmB,CAAd;AACA,WAAKP,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,OAAL,IAAgB,CAAC,CAAC,KAAKA,OAAL,CAAaT,KAFjC,EAGE,CAAC,CAAC,KAAKP,MAHT,CADF;;AAQA,WAAKkB,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKjB,QAAZ;AACD,K;SAPD,aAAYoB,CAAZ,EAAe;AACb,WAAKpB,QAAL,GAAgBoB,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAgCD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;kDAzDyCI,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  ModelSetEvent,\n  SessionChangedEvent\n} from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport default class InlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.session && !!this.session.value,\n        !!this._model\n      )\n    );\n\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        value: this._session.value,\n        onChange: this.changeSession\n      });\n      ReactDOM.render(elem, this);\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(\n      new SessionChangedEvent(\n        this.tagName.toLowerCase(),\n        this.session && !!this.session.value\n      )\n    );\n  };\n\n  changeSession = value => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this._render();\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["InlineDropdown","_model","_session","elem","React","createElement","Main","model","value","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","m","ModelSetEvent","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,c;;;;;AACnB,4BAAc;AAAA;;AAAA;AACZ;AADY,gGAwBJ,YAAM;AACd,UAAI,MAAKC,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIC,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,UAAAA,KAAK,EAAE,MAAKN,MADuB;AAEnCO,UAAAA,KAAK,EAAE,MAAKN,QAAL,CAAcM,KAFc;AAGnCC,UAAAA,QAAQ,EAAE,MAAKC;AAHoB,SAA1B,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,IAAhB,kDAA4B,YAAM;AAChC;AACD,SAFD;AAGD;AACF,KApCa;AAAA,6GAsCS,YAAM;AAC3B,YAAKU,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,OAAL,IAAgB,CAAC,CAAC,MAAKA,OAAL,CAAaT,KAAnF,CAAnB;AACD,KAxCa;AAAA,sGA0CE,UAACA,KAAD,EAAW;AACzB,YAAKS,OAAL,CAAaT,KAAb,GAAqBA,KAArB;;AACA,YAAKU,oBAAL;;AACA,YAAKC,OAAL;AACD,KA9Ca;AAEZ,UAAKlB,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAUkB,CAAV,EAAa;AACX,WAAKnB,MAAL,GAAcmB,CAAd;AACA,WAAKP,aAAL,CACE,IAAIQ,8BAAJ,CAAkB,KAAKN,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,OAAL,IAAgB,CAAC,CAAC,KAAKA,OAAL,CAAaT,KAA7E,EAAoF,CAAC,CAAC,KAAKP,MAA3F,CADF;;AAIA,WAAKkB,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKjB,QAAZ;AACD,K;SAPD,aAAYoB,CAAZ,EAAe;AACb,WAAKpB,QAAL,GAAgBoB,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WA8BD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;kDAnDyCI,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport default class InlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model),\n    );\n\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        value: this._session.value,\n        onChange: this.changeSession,\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this._render();\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -41,13 +41,13 @@ var _mathRendering = require("@pie-lib/math-rendering");
 
 var _styles = require("@material-ui/core/styles");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var DraggableDragInTheBlank = (0, _drag.withDragContext)(_maskMarkup.DragInTheBlank);
 
@@ -78,14 +78,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2["default"])(Main, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      // eslint-disable-next-line
-      var domNode = _reactDom["default"].findDOMNode(this);
-
-      (0, _mathRendering.renderMath)(domNode);
-    }
-  }, {
     key: "render",
     value: function render() {
       var showCorrectAnswer = this.state.showCorrectAnswer;
@@ -101,38 +93,33 @@ var Main = /*#__PURE__*/function (_React$Component) {
         value: value
       });
 
+      var showCorrectAnswerToggle = mode === 'evaluate';
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.mainContainer
-      }, model.teacherInstructions && (0, _renderUi.hasText)(model.teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      }, model.teacherInstructions && (0, _renderUi.hasText)(model.teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: model.teacherInstructions
-        }
-      })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: mode === 'evaluate',
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: model.teacherInstructions
+      })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        show: showCorrectAnswerToggle,
         toggled: showCorrectAnswer,
         onToggle: this.toggleShowCorrect
-      }), prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
-      }), /*#__PURE__*/_react["default"].createElement("br", null), model.rationale && (0, _renderUi.hasText)(model.rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
+      }), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(DraggableDragInTheBlank, (0, _extends2["default"])({}, modelWithValue, {
+        onChange: onChange,
+        showCorrectAnswer: showCorrectAnswer
+      })), model.rationale && (0, _renderUi.hasText)(model.rationale) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: model.rationale
-        }
-      })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(DraggableDragInTheBlank, (0, _extends2["default"])({}, modelWithValue, {
-        onChange: onChange,
-        showCorrectAnswer: showCorrectAnswer
-      })));
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: model.rationale
+      })), /*#__PURE__*/_react["default"].createElement("br", null)));
     }
   }]);
   return Main;

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.js"],"names":["DraggableDragInTheBlank","DragInTheBlank","Main","showCorrectAnswer","setState","state","domNode","ReactDOM","findDOMNode","props","model","onChange","value","classes","prompt","mode","modelWithValue","mainContainer","teacherInstructions","hidden","visible","__html","toggleShowCorrect","rationale","React","Component","PropTypes","object","feedback","func","styles","theme","padding","spacing","unit","color","text","backgroundColor","background"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragInTheBlank } from '@pie-lib/mask-markup';\nimport { withDragContext } from '@pie-lib/drag';\nimport { color, Collapsible, hasText } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DraggableDragInTheBlank = withDragContext(DragInTheBlank);\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    model: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func\n  };\n\n  static defaultProps = {\n    value: {}\n  };\n\n  state = {\n    showCorrectAnswer: false\n  };\n\n  componentDidUpdate() {\n    // eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, onChange, value, classes } = this.props;\n    const { prompt, mode } = model;\n    const modelWithValue = {\n      ...model,\n      value\n    };\n\n    return (\n      <div className={classes.mainContainer}>\n        {\n          model.teacherInstructions && hasText(model.teacherInstructions) && (\n            <Collapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n              <div dangerouslySetInnerHTML={{ __html: model.teacherInstructions }}/>\n            </Collapsible>\n          )\n        }\n        <br />\n        <CorrectAnswerToggle\n          show={mode === 'evaluate'}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />\n        {prompt && <div dangerouslySetInnerHTML={{ __html: prompt }}/>}\n        <br />\n        {\n          model.rationale && hasText(model.rationale) && (\n            <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n              <div dangerouslySetInnerHTML={{ __html: model.rationale }}/>\n            </Collapsible>\n          )\n        }\n        <br />\n        <DraggableDragInTheBlank\n          {...modelWithValue}\n          onChange={onChange}\n          showCorrectAnswer={showCorrectAnswer}\n        />\n      </div>\n    );\n  }\n}\n\n\nconst styles = (theme) => ({\n  mainContainer: {\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& tr > td': {\n      color: color.text()\n    }\n  },\n});\n\nexport default withStyles(styles)(Main);\n\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.js"],"names":["DraggableDragInTheBlank","DragInTheBlank","Main","showCorrectAnswer","setState","state","props","model","onChange","value","classes","prompt","mode","modelWithValue","showCorrectAnswerToggle","mainContainer","teacherInstructions","hidden","visible","toggleShowCorrect","rationale","React","Component","PropTypes","object","feedback","func","styles","theme","padding","spacing","unit","color","text","backgroundColor","background"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragInTheBlank } from '@pie-lib/mask-markup';\nimport { withDragContext } from '@pie-lib/drag';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DraggableDragInTheBlank = withDragContext(DragInTheBlank);\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    model: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  state = {\n    showCorrectAnswer: false,\n  };\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, onChange, value, classes } = this.props;\n    const { prompt, mode } = model;\n    const modelWithValue = {\n      ...model,\n      value,\n    };\n    const showCorrectAnswerToggle = mode === 'evaluate';\n\n    return (\n      <div className={classes.mainContainer}>\n        {model.teacherInstructions && hasText(model.teacherInstructions) && (\n          <React.Fragment>\n            <Collapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n              <PreviewPrompt prompt={model.teacherInstructions} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />\n        {showCorrectAnswerToggle && <br />}\n        {prompt && (\n          <React.Fragment>\n            <PreviewPrompt prompt={prompt} />\n            <br />\n          </React.Fragment>\n        )}\n        <DraggableDragInTheBlank {...modelWithValue} onChange={onChange} showCorrectAnswer={showCorrectAnswer} />\n        {model.rationale && hasText(model.rationale) && (\n          <React.Fragment>\n            <br />\n            <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n              <PreviewPrompt prompt={model.rationale} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& tr > td': {\n      color: color.text(),\n    },\n  },\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "3.9.0",
+  "version": "3.9.1-beta.587+40df32c2f",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -13,19 +13,21 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.3.23",
-    "@pie-lib/mask-markup": "^1.10.14",
-    "@pie-lib/math-rendering": "^2.3.6",
-    "@pie-lib/render-ui": "^4.11.5",
+    "@pie-lib/correct-answer-toggle": "^2.3.62",
+    "@pie-lib/mask-markup": "2.0.0-beta.1",
+    "@pie-lib/math-rendering": "^2.5.12",
+    "@pie-lib/render-ui": "^4.14.12",
     "classnames": "^2.2.5",
+    "is-plain-object": "^5.0.0",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react-dom": "^16.8.1",
+    "slate-react": "0.92.0"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "8f4eaa4018dffb68e135ec9e274688a8ae05d865",
+  "gitHead": "40df32c2f78966706cb168843567c9df174f1d88",
   "main": "lib/index.js",
   "module": "src/index.js"
 }