@pie-lib/mask-markup 1.13.46 → 1.14.1-beta.0

package/CHANGELOG.md

@@ -3,18 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.13.46](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.45...@pie-lib/mask-markup@1.13.46) (2023-10-03)
-
+## [1.14.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.1-beta.0) (2025-07-20)
 
-### Bug Fixes
+**Note:** Version bump only for package @pie-lib/mask-markup
 
-* revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
 
 
 
 
-
-## [1.13.45](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.44...@pie-lib/mask-markup@1.13.45) (2023-10-01)
+# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
@@ -22,118 +19,80 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.13.44](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.43...@pie-lib/mask-markup@1.13.44) (2023-09-27)
+# [1.15.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.15.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
+# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/mask-markup
 
+## [1.13.46](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.45...@pie-lib/mask-markup@1.13.46) (2023-10-03)
 
+### Bug Fixes
 
-## [1.13.43](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.42...@pie-lib/mask-markup@1.13.43) (2023-09-27)
+- revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
+
+## [1.13.45](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.44...@pie-lib/mask-markup@1.13.45) (2023-10-01)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
+## [1.13.44](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.43...@pie-lib/mask-markup@1.13.44) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/mask-markup
 
+## [1.13.43](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.42...@pie-lib/mask-markup@1.13.43) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/mask-markup
 
 ## [1.13.42](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.41...@pie-lib/mask-markup@1.13.42) (2023-09-27)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.41](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.40...@pie-lib/mask-markup@1.13.41) (2023-09-25)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.40](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.39...@pie-lib/mask-markup@1.13.40) (2023-09-20)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.39](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.38...@pie-lib/mask-markup@1.13.39) (2023-09-20)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.38](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.37...@pie-lib/mask-markup@1.13.38) (2023-09-14)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.37](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.36...@pie-lib/mask-markup@1.13.37) (2023-08-21)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.36](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.35...@pie-lib/mask-markup@1.13.36) (2023-08-15)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.35](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.34...@pie-lib/mask-markup@1.13.35) (2023-08-07)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.34](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.33...@pie-lib/mask-markup@1.13.34) (2023-07-31)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.33](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.32...@pie-lib/mask-markup@1.13.33) (2023-07-24)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.32](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.31...@pie-lib/mask-markup@1.13.32) (2023-06-24)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.31](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.30...@pie-lib/mask-markup@1.13.31) (2023-06-13)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 
-
-
-
-
 ## [1.13.30](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.29...@pie-lib/mask-markup@1.13.30) (2023-06-12)
 
 **Note:** Version bump only for package @pie-lib/mask-markup

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.13.46",
+  "version": "1.14.1-beta.0",
   "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": "^2.3.1-beta.0",
+    "@pie-lib/editable-html": "beta",
+    "@pie-lib/math-rendering": "^3.3.1-beta.0",
+    "@pie-lib/render-ui": "^4.16.1-beta.0",
     "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"
 }

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();
+    });
+  });
+});