@pie-lib/mask-markup 1.13.47-next.1 → 1.13.47-next.1639

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.47-next.1+23991a09",
+  "version": "1.13.47-next.1639+4ac095ca",
   "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.10-next.1+23991a09",
-    "@pie-lib/math-rendering": "2.5.18",
-    "@pie-lib/render-ui": "^4.15.10-next.1+23991a09",
+    "@material-ui/icons": "^3.0.2",
+    "@pie-lib/drag": "^2.2.10-next.1639+4ac095ca",
+    "@pie-lib/editable-html": "^11.1.2-next.1595+4ac095ca",
+    "@pie-lib/math-rendering": "^3.2.2-next.1642+4ac095ca",
+    "@pie-lib/render-ui": "^4.15.10-next.1639+4ac095ca",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
-    "immutable": ">=3.8.1",
+    "immutable": "^4.0.0-rc.12",
+    "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": "23991a09b77492c24dcb5235049667cdcc211d80"
+  "gitHead": "4ac095ca931e5fe8f131f28f41dd61093bd55d98"
 }

package/src/__tests__/__snapshots__/drag-in-the-blank.test.js.snap

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DragInTheBlank render renders correctly with default props 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": undefined,
+      "display": "flex",
+      "flexDirection": "column-reverse",
+      "justifyContent": undefined,
+      "minWidth": "100px",
+    }
+  }
+>
+  <Choices
+    choicePosition="below"
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+  <WithMask
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    elementType="drag-in-the-blank"
+    feedback={Object {}}
+    markup="<div>
+  <img src=\\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\\"></img>
+   <h5>Hey Diddle Diddle <i>by ?</i></h5>
+ <p>1: Hey, diddle, diddle,</p>
+ <p>2: The cat and the fiddle,</p>
+ <p>3: The cow {{0}} over the moon;</p>
+ <p>4: The little dog {{1}},</p>
+ <p>5: To see such sport,</p>
+ <p>6: And the dish ran away with the {{2}}.</p>
+</div>"
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`DragInTheBlank render renders correctly with disabled prop as true 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": undefined,
+      "display": "flex",
+      "flexDirection": "column-reverse",
+      "justifyContent": undefined,
+      "minWidth": "100px",
+    }
+  }
+>
+  <Choices
+    choicePosition="below"
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={true}
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+  <WithMask
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={true}
+    elementType="drag-in-the-blank"
+    feedback={Object {}}
+    markup="<div>
+  <img src=\\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\\"></img>
+   <h5>Hey Diddle Diddle <i>by ?</i></h5>
+ <p>1: Hey, diddle, diddle,</p>
+ <p>2: The cat and the fiddle,</p>
+ <p>3: The cow {{0}} over the moon;</p>
+ <p>4: The little dog {{1}},</p>
+ <p>5: To see such sport,</p>
+ <p>6: And the dish ran away with the {{2}}.</p>
+</div>"
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`DragInTheBlank render renders correctly with feedback 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": undefined,
+      "display": "flex",
+      "flexDirection": "column-reverse",
+      "justifyContent": undefined,
+      "minWidth": "100px",
+    }
+  }
+>
+  <Choices
+    choicePosition="below"
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+  <WithMask
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    elementType="drag-in-the-blank"
+    feedback={
+      Object {
+        "0": Object {
+          "correct": "Jumped",
+          "value": "Jumped",
+        },
+        "1": Object {
+          "correct": "Laughed",
+          "value": "Laughed",
+        },
+        "2": Object {
+          "correct": "Spoon",
+          "value": "Spoon",
+        },
+      }
+    }
+    markup="<div>
+  <img src=\\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\\"></img>
+   <h5>Hey Diddle Diddle <i>by ?</i></h5>
+ <p>1: Hey, diddle, diddle,</p>
+ <p>2: The cat and the fiddle,</p>
+ <p>3: The cow {{0}} over the moon;</p>
+ <p>4: The little dog {{1}},</p>
+ <p>5: To see such sport,</p>
+ <p>6: And the dish ran away with the {{2}}.</p>
+</div>"
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+</div>
+`;

package/src/__tests__/__snapshots__/mask.test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mask render renders correctly a div 1`] = `
+<div>
+  <div
+    key="div-0"
+  >
+    <WithStyles(Component)
+      key="p-0"
+    >
+      Foo
+    </WithStyles(Component)>
+  </div>
+</div>
+`;
+
+exports[`Mask render renders correctly a em 1`] = `
+<WithStyles(Component)>
+  Foo 
+  <em
+    key="1"
+  >
+    x
+  </em>
+   bar
+</WithStyles(Component)>
+`;
+
+exports[`Mask render renders correctly a paragraph 1`] = `
+<div>
+  <WithStyles(Component)
+    key="p-0"
+  >
+    Foo
+  </WithStyles(Component)>
+</div>
+`;
+
+exports[`Mask render renders correctly with default props 1`] = `
+<div>
+  Foo
+</div>
+`;
+
+exports[`Mask render renders without space under tbody 1`] = `
+<div>
+  <tbody
+    key="tbody-0"
+  >
+    <tr
+      key="tr-1"
+    />
+  </tbody>
+</div>
+`;

package/src/__tests__/__snapshots__/with-mask.test.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WithMask render renders correctly with default props 1`] = `
+<Mask
+  layout={
+    Object {
+      "data": Object {},
+      "nodes": Array [
+        Object {
+          "data": Object {
+            "attributes": Object {},
+            "dataset": Object {},
+          },
+          "nodes": Array [
+            Object {
+              "leaves": Array [
+                Object {
+                  "text": "Foo bar ",
+                },
+              ],
+              "object": "text",
+            },
+            Object {
+              "data": Object {
+                "attributes": Object {
+                  "data-component": "foo",
+                  "data-id": "0",
+                },
+                "dataset": Object {
+                  "component": "foo",
+                  "id": "0",
+                },
+              },
+              "nodes": Array [],
+              "object": "inline",
+              "type": "span",
+            },
+            Object {
+              "leaves": Array [
+                Object {
+                  "text": " over the moon;",
+                },
+              ],
+              "object": "text",
+            },
+          ],
+          "object": "block",
+          "type": "p",
+        },
+      ],
+      "object": "document",
+    }
+  }
+  onChange={[MockFunction]}
+  renderChildren={[Function]}
+  value={
+    Object {
+      "0": "blank",
+    }
+  }
+/>
+`;

package/src/__tests__/drag-in-the-blank.test.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import DragInTheBlank from '../drag-in-the-blank';
+
+const markup = `<div>
+  <img src="https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg"></img>
+   <h5>Hey Diddle Diddle <i>by ?</i></h5>
+ <p>1: Hey, diddle, diddle,</p>
+ <p>2: The cat and the fiddle,</p>
+ <p>3: The cow {{0}} over the moon;</p>
+ <p>4: The little dog {{1}},</p>
+ <p>5: To see such sport,</p>
+ <p>6: And the dish ran away with the {{2}}.</p>
+</div>`;
+const choice = (v, id) => ({ value: v, id });
+
+describe('DragInTheBlank', () => {
+  const defaultProps = {
+    disabled: false,
+    feedback: {},
+    markup,
+    choices: [
+      choice('Jumped', '0'),
+      choice('Laughed', '1'),
+      choice('Spoon', '2'),
+      choice('Fork', '3'),
+      choice('Bumped', '4'),
+      choice('Smiled', '5'),
+    ],
+
+    value: {
+      0: undefined,
+    },
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<DragInTheBlank {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with feedback', () => {
+      wrapper.setProps({
+        feedback: {
+          0: {
+            value: 'Jumped',
+            correct: 'Jumped',
+          },
+          1: {
+            value: 'Laughed',
+            correct: 'Laughed',
+          },
+          2: {
+            value: 'Spoon',
+            correct: 'Spoon',
+          },
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/index.test.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import componentize from '../componentize';
+import { deserialize } from '../serialization';
+
+describe('index', () => {
+  describe('componentize', () => {
+    it('should return an array with the appropriate markup', () => {
+      const dropDownMarkup = componentize('{{0}} foo {{1}}', 'dropdown');
+
+      expect(dropDownMarkup).toEqual({
+        markup:
+          '<span data-component="dropdown" data-id="0"></span> foo <span data-component="dropdown" data-id="1"></span>',
+      });
+    });
+  });
+
+  describe('serialization', () => {
+    it('should have default node a span', () => {
+      expect(deserialize('something')).toEqual(
+        expect.objectContaining({
+          object: 'value',
+          document: {
+            object: 'document',
+            data: {},
+            nodes: [
+              {
+                object: 'block',
+                data: {},
+                isVoid: false,
+                type: 'span',
+                nodes: [{ object: 'text', leaves: [{ text: 'something' }] }],
+              },
+            ],
+          },
+        }),
+      );
+    });
+  });
+});