@pie-lib/mask-markup 3.0.13 → 3.1.0-beta.1

package/CHANGELOG.md

@@ -3,61 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.0.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.12...@pie-lib/mask-markup@3.0.13) (2026-07-31)
-
-### Bug Fixes
-
-- made sure the numbers near the fraction have the same font size as the fraction [PIE-755] ([1c6d035](https://github.com/pie-framework/pie-lib/commit/1c6d03581470303e750cb14e5edcd08ba2eaf617))
-- **mask-markup:** handle measurment of choices with text and images PIE-679 ([48d9d69](https://github.com/pie-framework/pie-lib/commit/48d9d693ca2fceed6a6213106dbc541e4f29d01d))
-
-## [3.0.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.11...@pie-lib/mask-markup@3.0.12) (2026-07-08)
-
-### Bug Fixes
-
-- **mask-markup:** update width and height calculations to include padding and border adjustments PIE-679 ([7142a76](https://github.com/pie-framework/pie-lib/commit/7142a7629da6db7fea621809a38d2cb280bc063f))
-
-## [3.0.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.10...@pie-lib/mask-markup@3.0.11) (2026-07-01)
-
-**Note:** Version bump only for package @pie-lib/mask-markup
-
-## [3.0.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.9...@pie-lib/mask-markup@3.0.10) (2026-06-25)
-
-### Bug Fixes
-
-- **blank:** prevent ResizeObserver feedback loops and re-measure dimensions on visibility ([009cf1d](https://github.com/pie-framework/pie-lib/commit/009cf1d56af3f5f436d2f09b33e4d6d0bfad8609))
-
-## [3.0.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.8...@pie-lib/mask-markup@3.0.9) (2026-06-19)
-
-### Bug Fixes
-
-- **mask-markup/choice:** add fallback dimensions for dragging state in Choice component PIE-693 ([87b7782](https://github.com/pie-framework/pie-lib/commit/87b77824785bf7485b1b3e986749fc877224d154))
-
-## [3.0.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.7...@pie-lib/mask-markup@3.0.8) (2026-06-17)
-
-**Note:** Version bump only for package @pie-lib/mask-markup
-
-## [3.0.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.6...@pie-lib/mask-markup@3.0.7) (2026-06-12)
-
-### Bug Fixes
-
-- correct @emotion/style typo to @emotion/styled in package deps PIE-678 ([d529ac7](https://github.com/pie-framework/pie-lib/commit/d529ac7bc3dfa94d8037688452d4c70c66f2590b))
-
-## [3.0.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.5...@pie-lib/mask-markup@3.0.6) (2026-06-03)
-
-### Bug Fixes
-
-- render math when the correct value changes [PIE-600] ([38a0024](https://github.com/pie-framework/pie-lib/commit/38a002426ae495e98c2fd1355f7cb83069a7dcdc))
-
-## [3.0.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.4...@pie-lib/mask-markup@3.0.5) (2026-06-01)
-
-### Bug Fixes
-
-- made sure selected item in dropdown is focused first when the menu is opened [PIE-438] ([a1cdc68](https://github.com/pie-framework/pie-lib/commit/a1cdc686deec2991e543393b17b98181b074d324))
-
-## [3.0.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.3...@pie-lib/mask-markup@3.0.4) (2026-05-21)
-
-**Note:** Version bump only for package @pie-lib/mask-markup
-
 ## [3.0.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.2...@pie-lib/mask-markup@3.0.3) (2026-05-15)
 
 ### Bug Fixes

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _dragInTheBlank = _interopRequireDefault(require("../drag-in-the-blank"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var markup = "<div>\n  <img src=\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\"></img>\n   <h5>Hey Diddle Diddle <i>by ?</i></h5>\n <p>1: Hey, diddle, diddle,</p>\n <p>2: The cat and the fiddle,</p>\n <p>3: The cow {{0}} over the moon;</p>\n <p>4: The little dog {{1}},</p>\n <p>5: To see such sport,</p>\n <p>6: And the dish ran away with the {{2}}.</p>\n</div>";
+var choice = function choice(v, id) {
+  return {
+    value: v,
+    id: id
+  };
+};
+
+// Mock DragProvider and DragDroppablePlaceholder to avoid DndContext requirement
+jest.mock('@pie-lib/drag', function () {
+  return {
+    DragProvider: function DragProvider(_ref) {
+      var children = _ref.children,
+        onDragStart = _ref.onDragStart,
+        onDragEnd = _ref.onDragEnd;
+      // Simple wrapper that doesn't require DndContext
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "drag-provider"
+      }, children);
+    },
+    DragDroppablePlaceholder: function DragDroppablePlaceholder(_ref2) {
+      var children = _ref2.children,
+        disabled = _ref2.disabled,
+        instanceId = _ref2.instanceId;
+      // Simple wrapper that doesn't require useDroppable
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "drag-droppable-placeholder"
+      }, children);
+    }
+  };
+});
+
+// Mock @dnd-kit/core components and hooks used by DragInTheBlank and child components
+jest.mock('@dnd-kit/core', function () {
+  return {
+    DragOverlay: function DragOverlay(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "drag-overlay"
+      }, children);
+    },
+    closestCenter: jest.fn(),
+    useDraggable: jest.fn(function () {
+      return {
+        attributes: {},
+        listeners: {},
+        setNodeRef: jest.fn(),
+        transform: null,
+        isDragging: false
+      };
+    }),
+    useDroppable: jest.fn(function () {
+      return {
+        setNodeRef: jest.fn(),
+        isOver: false,
+        active: null
+      };
+    })
+  };
+});
+jest.mock('@dnd-kit/utilities', function () {
+  return {
+    CSS: {
+      Translate: {
+        toString: jest.fn(function () {
+          return 'translate3d(0, 0, 0)';
+        })
+      }
+    }
+  };
+});
+describe('DragInTheBlank', function () {
+  var defaultProps = {
+    disabled: false,
+    feedback: {},
+    markup: markup,
+    choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2'), choice('Fork', '3'), choice('Bumped', '4'), choice('Smiled', '5')],
+    value: {
+      0: undefined
+    }
+  };
+  describe('render', function () {
+    it('renders correctly with default props', function () {
+      var _render = (0, _react2.render)(/*#__PURE__*/React.createElement(_dragInTheBlank["default"], defaultProps)),
+        container = _render.container;
+      expect(container.firstChild).toBeInTheDocument();
+      // Check that markup content is rendered
+      expect(_react2.screen.getByText(/Hey Diddle Diddle/)).toBeInTheDocument();
+      expect(_react2.screen.getByText(/Hey, diddle, diddle,/)).toBeInTheDocument();
+    });
+    it('renders correctly with disabled prop as true', function () {
+      var _render2 = (0, _react2.render)(/*#__PURE__*/React.createElement(_dragInTheBlank["default"], (0, _extends2["default"])({}, defaultProps, {
+          disabled: true
+        }))),
+        container = _render2.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders correctly with feedback', function () {
+      var _render3 = (0, _react2.render)(/*#__PURE__*/React.createElement(_dragInTheBlank["default"], (0, _extends2["default"])({}, defaultProps, {
+          feedback: {
+            0: {
+              value: 'Jumped',
+              correct: 'Jumped'
+            },
+            1: {
+              value: 'Laughed',
+              correct: 'Laughed'
+            },
+            2: {
+              value: 'Spoon',
+              correct: 'Spoon'
+            }
+          }
+        }))),
+        container = _render3.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=drag-in-the-blank.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drag-in-the-blank.test.js","names":["React","_interopRequireWildcard","require","_react2","_dragInTheBlank","_interopRequireDefault","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","markup","choice","v","id","value","jest","mock","DragProvider","_ref","children","onDragStart","onDragEnd","createElement","DragDroppablePlaceholder","_ref2","disabled","instanceId","DragOverlay","_ref3","closestCenter","fn","useDraggable","attributes","listeners","setNodeRef","transform","isDragging","useDroppable","isOver","active","CSS","Translate","toString","describe","defaultProps","feedback","choices","undefined","it","_render","render","container","expect","firstChild","toBeInTheDocument","screen","getByText","_render2","_extends2","_render3","correct"],"sources":["../../src/__tests__/drag-in-the-blank.test.js"],"sourcesContent":["import * as React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport DragInTheBlank from '../drag-in-the-blank';\n\nconst markup = `<div>\n  <img src=\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\"></img>\n   <h5>Hey Diddle Diddle <i>by ?</i></h5>\n <p>1: Hey, diddle, diddle,</p>\n <p>2: The cat and the fiddle,</p>\n <p>3: The cow {{0}} over the moon;</p>\n <p>4: The little dog {{1}},</p>\n <p>5: To see such sport,</p>\n <p>6: And the dish ran away with the {{2}}.</p>\n</div>`;\nconst choice = (v, id) => ({ value: v, id });\n\n// Mock DragProvider and DragDroppablePlaceholder to avoid DndContext requirement\njest.mock('@pie-lib/drag', () => ({\n  DragProvider: ({ children, onDragStart, onDragEnd }) => {\n    // Simple wrapper that doesn't require DndContext\n    return <div data-testid=\"drag-provider\">{children}</div>;\n  },\n  DragDroppablePlaceholder: ({ children, disabled, instanceId }) => {\n    // Simple wrapper that doesn't require useDroppable\n    return <div data-testid=\"drag-droppable-placeholder\">{children}</div>;\n  },\n}));\n\n// Mock @dnd-kit/core components and hooks used by DragInTheBlank and child components\njest.mock('@dnd-kit/core', () => ({\n  DragOverlay: ({ children }) => <div data-testid=\"drag-overlay\">{children}</div>,\n  closestCenter: jest.fn(),\n  useDraggable: jest.fn(() => ({\n    attributes: {},\n    listeners: {},\n    setNodeRef: jest.fn(),\n    transform: null,\n    isDragging: false,\n  })),\n  useDroppable: jest.fn(() => ({\n    setNodeRef: jest.fn(),\n    isOver: false,\n    active: null,\n  })),\n}));\n\njest.mock('@dnd-kit/utilities', () => ({\n  CSS: {\n    Translate: {\n      toString: jest.fn(() => 'translate3d(0, 0, 0)'),\n    },\n  },\n}));\n\ndescribe('DragInTheBlank', () => {\n  const defaultProps = {\n    disabled: false,\n    feedback: {},\n    markup,\n    choices: [\n      choice('Jumped', '0'),\n      choice('Laughed', '1'),\n      choice('Spoon', '2'),\n      choice('Fork', '3'),\n      choice('Bumped', '4'),\n      choice('Smiled', '5'),\n    ],\n\n    value: {\n      0: undefined,\n    },\n  };\n\n  describe('render', () => {\n    it('renders correctly with default props', () => {\n      const { container } = render(<DragInTheBlank {...defaultProps} />);\n      expect(container.firstChild).toBeInTheDocument();\n      // Check that markup content is rendered\n      expect(screen.getByText(/Hey Diddle Diddle/)).toBeInTheDocument();\n      expect(screen.getByText(/Hey, diddle, diddle,/)).toBeInTheDocument();\n    });\n\n    it('renders correctly with disabled prop as true', () => {\n      const { container } = render(<DragInTheBlank {...defaultProps} disabled={true} />);\n      expect(container.firstChild).toBeInTheDocument();\n    });\n\n    it('renders correctly with feedback', () => {\n      const { container } = render(\n        <DragInTheBlank\n          {...defaultProps}\n          feedback={{\n            0: {\n              value: 'Jumped',\n              correct: 'Jumped',\n            },\n            1: {\n              value: 'Laughed',\n              correct: 'Laughed',\n            },\n            2: {\n              value: 'Spoon',\n              correct: 'Spoon',\n            },\n          }}\n        />,\n      );\n      expect(container.firstChild).toBeInTheDocument();\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/__tests__/index.test.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _componentize = _interopRequireDefault(require("../componentize"));
+var _serialization = require("../serialization");
+describe('index', function () {
+  describe('componentize', function () {
+    it('should return an array with the appropriate markup', function () {
+      var dropDownMarkup = (0, _componentize["default"])('{{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', function () {
+    it('should have default node a span', function () {
+      expect((0, _serialization.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'
+              }]
+            }]
+          }]
+        }
+      }));
+    });
+  });
+});
+//# sourceMappingURL=index.test.js.map

package/lib/__tests__/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","names":["_componentize","_interopRequireDefault","require","_serialization","describe","it","dropDownMarkup","componentize","expect","toEqual","markup","deserialize","objectContaining","object","document","data","nodes","isVoid","type","leaves","text"],"sources":["../../src/__tests__/index.test.js"],"sourcesContent":["import componentize from '../componentize';\nimport { deserialize } from '../serialization';\n\ndescribe('index', () => {\n  describe('componentize', () => {\n    it('should return an array with the appropriate markup', () => {\n      const dropDownMarkup = componentize('{{0}} foo {{1}}', 'dropdown');\n\n      expect(dropDownMarkup).toEqual({\n        markup:\n          '<span data-component=\"dropdown\" data-id=\"0\"></span> foo <span data-component=\"dropdown\" data-id=\"1\"></span>',\n      });\n    });\n  });\n\n  describe('serialization', () => {\n    it('should have default node a span', () => {\n      expect(deserialize('something')).toEqual(\n        expect.objectContaining({\n          object: 'value',\n          document: {\n            object: 'document',\n            data: {},\n            nodes: [\n              {\n                object: 'block',\n                data: {},\n                isVoid: false,\n                type: 'span',\n                nodes: [{ object: 'text', leaves: [{ text: 'something' }] }],\n              },\n            ],\n          },\n        }),\n      );\n    });\n  });\n});\n"],"mappings":";;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAEAE,QAAQ,CAAC,OAAO,EAAE,YAAM;EACtBA,QAAQ,CAAC,cAAc,EAAE,YAAM;IAC7BC,EAAE,CAAC,oDAAoD,EAAE,YAAM;MAC7D,IAAMC,cAAc,GAAG,IAAAC,wBAAY,EAAC,iBAAiB,EAAE,UAAU,CAAC;MAElEC,MAAM,CAACF,cAAc,CAAC,CAACG,OAAO,CAAC;QAC7BC,MAAM,EACJ;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ,CAAC,CAAC;EAEFN,QAAQ,CAAC,eAAe,EAAE,YAAM;IAC9BC,EAAE,CAAC,iCAAiC,EAAE,YAAM;MAC1CG,MAAM,CAAC,IAAAG,0BAAW,EAAC,WAAW,CAAC,CAAC,CAACF,OAAO,CACtCD,MAAM,CAACI,gBAAgB,CAAC;QACtBC,MAAM,EAAE,OAAO;QACfC,QAAQ,EAAE;UACRD,MAAM,EAAE,UAAU;UAClBE,IAAI,EAAE,CAAC,CAAC;UACRC,KAAK,EAAE,CACL;YACEH,MAAM,EAAE,OAAO;YACfE,IAAI,EAAE,CAAC,CAAC;YACRE,MAAM,EAAE,KAAK;YACbC,IAAI,EAAE,MAAM;YACZF,KAAK,EAAE,CAAC;cAAEH,MAAM,EAAE,MAAM;cAAEM,MAAM,EAAE,CAAC;gBAAEC,IAAI,EAAE;cAAY,CAAC;YAAE,CAAC;UAC7D,CAAC;QAEL;MACF,CAAC,CACH,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/__tests__/mask.test.js

@@ -0,0 +1,344 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _mask = _interopRequireDefault(require("../mask"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+describe('Mask', function () {
+  // Don't mock renderChildren - let the component render naturally
+  var onChange = jest.fn();
+  var defaultProps = {
+    onChange: onChange,
+    layout: {
+      nodes: [{
+        object: 'text',
+        leaves: [{
+          text: 'Foo'
+        }]
+      }]
+    },
+    value: {}
+  };
+  beforeEach(function () {
+    onChange.mockClear();
+  });
+  describe('rendering', function () {
+    it('renders with default props', function () {
+      var _render = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], defaultProps)),
+        container = _render.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders text content', function () {
+      (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], defaultProps));
+      expect(_react2.screen.getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders a paragraph element', function () {
+      var _render2 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          layout: {
+            nodes: [{
+              type: 'p',
+              nodes: [{
+                object: 'text',
+                leaves: [{
+                  text: 'Foo'
+                }]
+              }]
+            }]
+          }
+        }))),
+        container = _render2.container;
+
+      // Paragraph is rendered as a styled div, not a <p> tag
+      expect(_react2.screen.getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders nested div and paragraph', function () {
+      var _render3 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          layout: {
+            nodes: [{
+              type: 'div',
+              data: {
+                attributes: {}
+              },
+              nodes: [{
+                type: 'p',
+                data: {
+                  attributes: {}
+                },
+                nodes: [{
+                  object: 'text',
+                  leaves: [{
+                    text: 'Foo'
+                  }]
+                }]
+              }]
+            }]
+          }
+        }))),
+        container = _render3.container;
+      expect(container.querySelector('div')).toBeInTheDocument();
+      // Paragraph is rendered as a styled div, not a <p> tag
+      expect(_react2.screen.getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders text with italic marks', function () {
+      var _render4 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          layout: {
+            nodes: [{
+              leaves: [{
+                text: 'Foo '
+              }],
+              object: 'text'
+            }, {
+              leaves: [{
+                marks: [{
+                  data: undefined,
+                  type: 'italic'
+                }],
+                text: 'x'
+              }],
+              object: 'text'
+            }, {
+              leaves: [{
+                text: ' bar'
+              }],
+              object: 'text'
+            }],
+            object: 'block',
+            type: 'div'
+          }
+        }))),
+        container = _render4.container;
+
+      // Text "Foo " is split with spaces, use regex
+      expect(_react2.screen.getByText(/Foo/)).toBeInTheDocument();
+      expect(_react2.screen.getByText('x')).toBeInTheDocument();
+      expect(_react2.screen.getByText(/bar/)).toBeInTheDocument();
+      // Check for italic/em element
+      var em = container.querySelector('em, i');
+      expect(em).toBeInTheDocument();
+      expect(em.textContent).toBe('x');
+    });
+    it('renders tbody without extra space', function () {
+      var da = function da() {
+        return {
+          data: {
+            attributes: {}
+          }
+        };
+      };
+      var _render5 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          layout: {
+            nodes: [_objectSpread(_objectSpread({
+              type: 'table'
+            }, da()), {}, {
+              nodes: [_objectSpread(_objectSpread({
+                type: 'tbody'
+              }, da()), {}, {
+                nodes: [{
+                  object: 'text',
+                  leaves: [{
+                    text: ' '
+                  }]
+                }, _objectSpread(_objectSpread({
+                  type: 'tr'
+                }, da()), {}, {
+                  nodes: []
+                })]
+              })]
+            })]
+          }
+        }))),
+        container = _render5.container;
+      expect(container.querySelector('table')).toBeInTheDocument();
+      expect(container.querySelector('tbody')).toBeInTheDocument();
+      expect(container.querySelector('tr')).toBeInTheDocument();
+    });
+  });
+  describe('spacer rendering for DnD components', function () {
+    it('adds spacers before and after DnD blank components', function () {
+      var mockRenderChildren = jest.fn(function (n) {
+        var _n$data;
+        if (((_n$data = n.data) === null || _n$data === void 0 || (_n$data = _n$data.dataset) === null || _n$data === void 0 ? void 0 : _n$data.component) === 'blank') {
+          return /*#__PURE__*/React.createElement("span", {
+            "data-testid": "blank-component"
+          }, "Blank");
+        }
+        return null;
+      });
+      var _render6 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          renderChildren: mockRenderChildren,
+          layout: {
+            nodes: [{
+              type: 'div',
+              data: {
+                dataset: {
+                  component: 'blank'
+                },
+                attributes: {}
+              },
+              nodes: []
+            }]
+          }
+        }))),
+        container = _render6.container;
+
+      // Check that renderChildren was called and spacers are present
+      // Count all children in the container - should be: spacer + blank + spacer = 3 elements
+      var maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(3);
+      expect(_react2.screen.getByTestId('blank-component')).toBeInTheDocument();
+    });
+    it('does not add spacers for non-DnD components', function () {
+      var mockRenderChildren = jest.fn(function (n) {
+        return /*#__PURE__*/React.createElement("span", {
+          "data-testid": "regular-component"
+        }, "Regular");
+      });
+      var _render7 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          renderChildren: mockRenderChildren,
+          layout: {
+            nodes: [{
+              type: 'div',
+              data: {
+                attributes: {}
+              },
+              nodes: []
+            }]
+          }
+        }))),
+        container = _render7.container;
+
+      // Should not have spacers - only the regular component
+      var maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(1);
+      expect(_react2.screen.getByTestId('regular-component')).toBeInTheDocument();
+    });
+    it('adds spacers regardless of parent node type', function () {
+      var mockRenderChildren = jest.fn(function (n) {
+        var _n$data2;
+        if (((_n$data2 = n.data) === null || _n$data2 === void 0 || (_n$data2 = _n$data2.dataset) === null || _n$data2 === void 0 ? void 0 : _n$data2.component) === 'blank') {
+          return /*#__PURE__*/React.createElement("span", {
+            "data-testid": "blank-in-td"
+          }, "Blank in TD");
+        }
+        return null;
+      });
+      var _render8 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          renderChildren: mockRenderChildren,
+          elementType: "drag-in-the-blank",
+          layout: {
+            nodes: [{
+              type: 'table',
+              data: {
+                attributes: {}
+              },
+              nodes: [{
+                type: 'tbody',
+                data: {
+                  attributes: {}
+                },
+                nodes: [{
+                  type: 'tr',
+                  data: {
+                    attributes: {}
+                  },
+                  nodes: [{
+                    type: 'td',
+                    data: {
+                      attributes: {}
+                    },
+                    nodes: [{
+                      type: 'div',
+                      data: {
+                        dataset: {
+                          component: 'blank'
+                        },
+                        attributes: {}
+                      },
+                      nodes: []
+                    }]
+                  }]
+                }]
+              }]
+            }]
+          }
+        }))),
+        container = _render8.container;
+
+      // Should have spacers even inside td element
+      var td = container.querySelector('td');
+      expect(td.childNodes.length).toBe(3); // spacer + blank + spacer
+      expect(_react2.screen.getByTestId('blank-in-td')).toBeInTheDocument();
+    });
+    it('does not add spacers for text content', function () {
+      var _render9 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          elementType: "drag-in-the-blank",
+          layout: {
+            nodes: [{
+              object: 'text',
+              leaves: [{
+                text: 'Some text'
+              }]
+            }]
+          }
+        }))),
+        container = _render9.container;
+
+      // Should not have spacers for plain text - just text node
+      var maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(1);
+      expect(maskContainer.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+      expect(_react2.screen.getByText('Some text')).toBeInTheDocument();
+    });
+    it('handles multiple DnD components with correct spacer placement', function () {
+      var mockRenderChildren = jest.fn(function (n) {
+        var _n$data3;
+        if (((_n$data3 = n.data) === null || _n$data3 === void 0 || (_n$data3 = _n$data3.dataset) === null || _n$data3 === void 0 ? void 0 : _n$data3.component) === 'blank') {
+          return /*#__PURE__*/React.createElement("span", {
+            "data-testid": "blank-".concat(n.data.testId)
+          }, "Blank");
+        }
+        return null;
+      });
+      var _render0 = (0, _react2.render)(/*#__PURE__*/React.createElement(_mask["default"], (0, _extends2["default"])({}, defaultProps, {
+          renderChildren: mockRenderChildren,
+          layout: {
+            nodes: [{
+              type: 'div',
+              data: {
+                dataset: {
+                  component: 'blank'
+                },
+                attributes: {},
+                testId: '1'
+              },
+              nodes: []
+            }, {
+              type: 'div',
+              data: {
+                dataset: {
+                  component: 'blank'
+                },
+                attributes: {},
+                testId: '2'
+              },
+              nodes: []
+            }]
+          }
+        }))),
+        container = _render0.container;
+
+      // Should have 2 spacers per component = 4 spacers + 2 blanks = 6 total children
+      var maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(6);
+      expect(_react2.screen.getByTestId('blank-1')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('blank-2')).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=mask.test.js.map