@pie-lib/mask-markup 3.0.2-next.1 → 3.0.2-next.3

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.2-next.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.2-next.2...@pie-lib/mask-markup@3.0.2-next.3) (2026-05-07)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+## [3.0.2-next.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.2-next.1...@pie-lib/mask-markup@3.0.2-next.2) (2026-05-06)
+
+### Bug Fixes
+
+- made sure extra spacing is added only when needed [PIE-436] ([1eb4b4c](https://github.com/pie-framework/pie-lib/commit/1eb4b4cfa26612ff32f68bc849da59dc0c5c521b))
+
 ## [3.0.2-next.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.2-next.0...@pie-lib/mask-markup@3.0.2-next.1) (2026-05-06)
 
 **Note:** Version bump only for package @pie-lib/mask-markup

package/lib/mask.js

@@ -72,8 +72,15 @@ var _renderChildren = exports.renderChildren = function renderChildren(layout, v
     if (rootRenderChildren) {
       var c = rootRenderChildren(n, value, onChange);
       if (c) {
+        var _n$data;
+        var isDndComponent = ((_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';
+        if (isDndComponent) {
+          children.push(/*#__PURE__*/_react["default"].createElement(Spacer, {
+            key: "spacer-".concat(index)
+          }));
+        }
         children.push(c);
-        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+        if (isDndComponent) {
           children.push(/*#__PURE__*/_react["default"].createElement(Spacer, {
             key: "spacer-".concat(index)
           }));
@@ -101,11 +108,6 @@ var _renderChildren = exports.renderChildren = function renderChildren(layout, v
         }
       } else if (content.length > 0) {
         children.push(content);
-        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
-          children.push(/*#__PURE__*/_react["default"].createElement(Spacer, {
-            key: "spacer-".concat(index)
-          }));
-        }
       }
     } else {
       var subNodes = _renderChildren(n, value, onChange, rootRenderChildren, n, elementType);

package/lib/mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_lodashEs","_styles","_mathRendering","_serialization","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","Paragraph","styled","_ref","theme","paddingTop","spacing","paddingBottom","Spacer","display","width","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","get","marks","renderChildren","exports","layout","value","onChange","rootRenderChildren","elementType","children","nodes","index","key","concat","isMath","createElement","dangerouslySetInnerHTML","__html","innerHTML","c","object","content","reduce","acc","l","extraText","markKey","MARK_TAGS","Tag","subNodes","_Tag","_extends2","data","attributes","MaskContainer","borderCollapse","padding","textAlign","Mask","_React$Component","props","_this","_classCallCheck2","id","internalContainerRef","React","createRef","_inherits2","_createClass2","componentDidMount","containerRef","current","renderMath","render","_this$props","handleChange","ref","Component","PropTypes","func","string","oneOfType","shape","instanceOf","Element"],"sources":["../src/mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash-es';\nimport { styled } from '@mui/material/styles';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = styled('div')(({ theme }) => ({\n  paddingTop: theme.spacing(0.5),\n  paddingBottom: theme.spacing(0.5),\n}));\n\nconst Spacer = styled('span')(() => ({\n  display: 'inline-block',\n  width: '.75em',\n}));\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = (n) => {\n  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span\n          dangerouslySetInnerHTML={{\n            __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n          }}\n        />,\n      );\n      return children;\n    }\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag key={key}>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>,\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\nconst MaskContainer = styled('div')(() => ({\n  display: 'initial',\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  // align table content to left as per STAR requirement PD-3687\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '8px 12px',\n    textAlign: 'left',\n  },\n}));\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  constructor(props) {\n    super(props);\n    this.internalContainerRef = React.createRef();\n  }\n\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    elementType: PropTypes.string,\n    containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),\n  };\n\n  componentDidMount() {\n    const containerRef = this.props.containerRef || this.internalContainerRef;\n    if (containerRef.current && typeof renderMath === 'function') {\n      renderMath(containerRef.current);\n    }\n  }\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout, elementType, containerRef } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);\n    const ref = containerRef || this.internalContainerRef;\n\n    return <MaskContainer ref={ref}>{children}</MaskContainer>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_lodashEs","_styles","_mathRendering","_serialization","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","Paragraph","styled","_ref","theme","paddingTop","spacing","paddingBottom","Spacer","display","width","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","get","marks","renderChildren","exports","layout","value","onChange","rootRenderChildren","elementType","children","nodes","index","key","concat","isMath","createElement","dangerouslySetInnerHTML","__html","innerHTML","c","_n$data","isDndComponent","data","dataset","component","object","content","reduce","acc","l","extraText","markKey","MARK_TAGS","Tag","subNodes","_Tag","_extends2","attributes","MaskContainer","borderCollapse","padding","textAlign","Mask","_React$Component","props","_this","_classCallCheck2","id","internalContainerRef","React","createRef","_inherits2","_createClass2","componentDidMount","containerRef","current","renderMath","render","_this$props","handleChange","ref","Component","PropTypes","func","string","oneOfType","shape","instanceOf","Element"],"sources":["../src/mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash-es';\nimport { styled } from '@mui/material/styles';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = styled('div')(({ theme }) => ({\n  paddingTop: theme.spacing(0.5),\n  paddingBottom: theme.spacing(0.5),\n}));\n\nconst Spacer = styled('span')(() => ({\n  display: 'inline-block',\n  width: '.75em',\n}));\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = (n) => {\n  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span\n          dangerouslySetInnerHTML={{\n            __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n          }}\n        />,\n      );\n      return children;\n    }\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        const isDndComponent = n.data?.dataset?.component === 'blank';\n\n        if (isDndComponent) {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n\n        children.push(c);\n\n        if (isDndComponent) {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag key={key}>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>,\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\nconst MaskContainer = styled('div')(() => ({\n  display: 'initial',\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  // align table content to left as per STAR requirement PD-3687\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '8px 12px',\n    textAlign: 'left',\n  },\n}));\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  constructor(props) {\n    super(props);\n    this.internalContainerRef = React.createRef();\n  }\n\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    elementType: PropTypes.string,\n    containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),\n  };\n\n  componentDidMount() {\n    const containerRef = this.props.containerRef || this.internalContainerRef;\n    if (containerRef.current && typeof renderMath === 'function') {\n      renderMath(containerRef.current);\n    }\n  }\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout, elementType, containerRef } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);\n    const ref = containerRef || this.internalContainerRef;\n\n    return <MaskContainer ref={ref}>{children}</MaskContainer>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AAA4C,SAAAM,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,aAAAhB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAAlB,CAAA,EAAAG,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAnB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAAA,SAAAoB,WAAAlB,CAAA,EAAAI,CAAA,EAAAN,CAAA,WAAAM,CAAA,OAAAe,gBAAA,aAAAf,CAAA,OAAAgB,2BAAA,aAAApB,CAAA,EAAAqB,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAnB,CAAA,EAAAN,CAAA,YAAAqB,gBAAA,aAAAnB,CAAA,EAAAwB,WAAA,IAAApB,CAAA,CAAAK,KAAA,CAAAT,CAAA,EAAAF,CAAA;AAAA,SAAAuB,0BAAA,cAAArB,CAAA,IAAAyB,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAN,OAAA,CAAAC,SAAA,CAAAE,OAAA,iCAAAzB,CAAA,aAAAqB,yBAAA,YAAAA,0BAAA,aAAArB,CAAA;AAE5C,IAAM6B,SAAS,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQ;IAC9CC,UAAU,EAAED,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC;IAC9BC,aAAa,EAAEH,KAAK,CAACE,OAAO,CAAC,GAAG;EAClC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAME,MAAM,GAAG,IAAAN,cAAM,EAAC,MAAM,CAAC,CAAC;EAAA,OAAO;IACnCO,OAAO,EAAE,cAAc;IACvBC,KAAK,EAAE;EACT,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,uBAAuB,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC;AAE/C,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAIC,UAAU,EAAEC,IAAI,EAAK;EACpC,IAAMC,YAAY,GAAGD,IAAI,CAACE,IAAI,CAAC,CAAC,KAAK,EAAE;EACvC,IAAMC,UAAU,GAAGJ,UAAU,IAAIA,UAAU,CAACK,IAAI;EAEhD,IAAIH,YAAY,IAAIJ,uBAAuB,CAACQ,QAAQ,CAACF,UAAU,CAAC,EAAE;IAChE,OAAOG,SAAS;EAClB,CAAC,MAAM;IACL,OAAON,IAAI;EACb;AACF,CAAC;AAED,IAAMO,OAAO,GAAG,SAAVA,OAAOA,CAAIC,CAAC,EAAK;EACrB,IAAMC,IAAI,GAAGD,CAAC,CAACE,MAAM,CAACC,IAAI,CAAC,UAACC,KAAK;IAAA,OAAK,IAAAC,aAAG,EAACD,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC1C,MAAM;EAAA,EAAC;EAErE,IAAIuC,IAAI,EAAE;IACR,OAAOA,IAAI,CAACK,KAAK,CAAC,CAAC,CAAC;EACtB;EAEA,OAAO,IAAI;AACb,CAAC;AAEM,IAAMC,eAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAAIE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,kBAAkB,EAAErB,UAAU,EAAEsB,WAAW,EAAK;EACtG,IAAI,CAACH,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,IAAMI,QAAQ,GAAG,EAAE;EAEnB,CAACL,MAAM,CAACM,KAAK,IAAI,EAAE,EAAEpD,OAAO,CAAC,UAACqC,CAAC,EAAEgB,KAAK,EAAK;IACzC,IAAMC,GAAG,GAAGjB,CAAC,CAACJ,IAAI,MAAAsB,MAAA,CAAMlB,CAAC,CAACJ,IAAI,OAAAsB,MAAA,CAAIF,KAAK,OAAAE,MAAA,CAAQF,KAAK,CAAE;IAEtD,IAAIhB,CAAC,CAACmB,MAAM,EAAE;MACZL,QAAQ,CAACxD,IAAI,cACXnB,MAAA,YAAAiF,aAAA;QACEC,uBAAuB,EAAE;UACvBC,MAAM,iCAAAJ,MAAA,CAA+BlB,CAAC,CAACe,KAAK,CAAC,CAAC,CAAC,CAACQ,SAAS;QAC3D;MAAE,CACH,CACH,CAAC;MACD,OAAOT,QAAQ;IACjB;IAEA,IAAIF,kBAAkB,EAAE;MACtB,IAAMY,CAAC,GAAGZ,kBAAkB,CAACZ,CAAC,EAAEU,KAAK,EAAEC,QAAQ,CAAC;MAChD,IAAIa,CAAC,EAAE;QAAA,IAAAC,OAAA;QACL,IAAMC,cAAc,GAAG,EAAAD,OAAA,GAAAzB,CAAC,CAAC2B,IAAI,cAAAF,OAAA,gBAAAA,OAAA,GAANA,OAAA,CAAQG,OAAO,cAAAH,OAAA,uBAAfA,OAAA,CAAiBI,SAAS,MAAK,OAAO;QAE7D,IAAIH,cAAc,EAAE;UAClBZ,QAAQ,CAACxD,IAAI,cAACnB,MAAA,YAAAiF,aAAA,CAAClC,MAAM;YAAC+B,GAAG,YAAAC,MAAA,CAAYF,KAAK;UAAG,CAAE,CAAC,CAAC;QACnD;QAEAF,QAAQ,CAACxD,IAAI,CAACkE,CAAC,CAAC;QAEhB,IAAIE,cAAc,EAAE;UAClBZ,QAAQ,CAACxD,IAAI,cAACnB,MAAA,YAAAiF,aAAA,CAAClC,MAAM;YAAC+B,GAAG,YAAAC,MAAA,CAAYF,KAAK;UAAG,CAAE,CAAC,CAAC;QACnD;QACA;MACF;IACF;IAEA,IAAIhB,CAAC,CAAC8B,MAAM,KAAK,MAAM,EAAE;MACvB,IAAMC,OAAO,GAAG/B,CAAC,CAACE,MAAM,CAAC8B,MAAM,CAAC,UAACC,GAAG,EAAEC,CAAC,EAAK;QAC1C,IAAMpF,CAAC,GAAGoF,CAAC,CAAC1C,IAAI;QAChB,IAAM2C,SAAS,GAAG7C,OAAO,CAACC,UAAU,EAAEzC,CAAC,CAAC;QACxC,OAAOqF,SAAS,GAAGF,GAAG,GAAGE,SAAS,GAAGF,GAAG;MAC1C,CAAC,EAAE,EAAE,CAAC;MACN,IAAMhC,IAAI,GAAGF,OAAO,CAACC,CAAC,CAAC;MAEvB,IAAIC,IAAI,EAAE;QACR,IAAImC,OAAO;QAEX,KAAKA,OAAO,IAAIC,wBAAS,EAAE;UACzB,IAAIA,wBAAS,CAACD,OAAO,CAAC,KAAKnC,IAAI,CAACL,IAAI,EAAE;YACpC,IAAM0C,GAAG,GAAGF,OAAO;YAEnBtB,QAAQ,CAACxD,IAAI,cAACnB,MAAA,YAAAiF,aAAA,CAACkB,GAAG;cAACrB,GAAG,EAAEA;YAAI,GAAEc,OAAa,CAAC,CAAC;YAC7C;UACF;QACF;MACF,CAAC,MAAM,IAAIA,OAAO,CAACrE,MAAM,GAAG,CAAC,EAAE;QAC7BoD,QAAQ,CAACxD,IAAI,CAACyE,OAAO,CAAC;MACxB;IACF,CAAC,MAAM;MACL,IAAMQ,QAAQ,GAAGhC,eAAc,CAACP,CAAC,EAAEU,KAAK,EAAEC,QAAQ,EAAEC,kBAAkB,EAAEZ,CAAC,EAAEa,WAAW,CAAC;MACvF,IAAIb,CAAC,CAACJ,IAAI,KAAK,GAAG,IAAII,CAAC,CAACJ,IAAI,KAAK,WAAW,EAAE;QAC5CkB,QAAQ,CAACxD,IAAI,cAACnB,MAAA,YAAAiF,aAAA,CAACzC,SAAS;UAACsC,GAAG,EAAEA;QAAI,GAAEsB,QAAoB,CAAC,CAAC;MAC5D,CAAC,MAAM;QACL,IAAMD,IAAG,GAAGtC,CAAC,CAACJ,IAAI;QAClB,IAAII,CAAC,CAACe,KAAK,IAAIf,CAAC,CAACe,KAAK,CAACrD,MAAM,GAAG,CAAC,EAAE;UACjCoD,QAAQ,CAACxD,IAAI,cACXnB,MAAA,YAAAiF,aAAA,CAACoB,IAAG,MAAAC,SAAA;YAACxB,GAAG,EAAEA;UAAI,GAAKjB,CAAC,CAAC2B,IAAI,CAACe,UAAU,GACjCH,QACE,CACP,CAAC;QACH,CAAC,MAAM;UACLzB,QAAQ,CAACxD,IAAI,cAACnB,MAAA,YAAAiF,aAAA,CAACoB,IAAG,MAAAC,SAAA;YAACxB,GAAG,EAAEA;UAAI,GAAKjB,CAAC,CAAC2B,IAAI,CAACe,UAAU,CAAG,CAAC,CAAC;QACzD;MACF;IACF;EACF,CAAC,CAAC;EACF,OAAO5B,QAAQ;AACjB,CAAC;AAED,IAAM6B,aAAa,GAAG,IAAA/D,cAAM,EAAC,KAAK,CAAC,CAAC;EAAA,OAAO;IACzCO,OAAO,EAAE,SAAS;IAClB,uBAAuB,EAAE;MACvByD,cAAc,EAAE;IAClB,CAAC;IACD;IACA,oDAAoD,EAAE;MACpDC,OAAO,EAAE,UAAU;MACnBC,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC,CAAC;;AAEH;AACA;AACA;AAFA,IAGqBC,IAAI,GAAAvC,OAAA,qCAAAwC,gBAAA;EACvB,SAAAD,KAAYE,KAAK,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,mBAAAJ,IAAA;IACjBG,KAAA,GAAAlF,UAAA,OAAA+E,IAAA,GAAME,KAAK;IAAE,IAAArF,gBAAA,aAAAsF,KAAA,kBAoBA,UAACE,EAAE,EAAE1C,KAAK,EAAK;MAC5B,IAAMiB,IAAI,GAAAnE,aAAA,CAAAA,aAAA,KAAQ0F,KAAA,CAAKD,KAAK,CAACvC,KAAK,WAAA9C,gBAAA,iBAAGwF,EAAE,EAAG1C,KAAK,EAAE;MACjDwC,KAAA,CAAKD,KAAK,CAACtC,QAAQ,CAACgB,IAAI,CAAC;IAC3B,CAAC;IAtBCuB,KAAA,CAAKG,oBAAoB,gBAAGC,iBAAK,CAACC,SAAS,CAAC,CAAC;IAAC,OAAAL,KAAA;EAChD;EAAC,IAAAM,UAAA,aAAAT,IAAA,EAAAC,gBAAA;EAAA,WAAAS,aAAA,aAAAV,IAAA;IAAA9B,GAAA;IAAAP,KAAA,EAWD,SAAAgD,iBAAiBA,CAAA,EAAG;MAClB,IAAMC,YAAY,GAAG,IAAI,CAACV,KAAK,CAACU,YAAY,IAAI,IAAI,CAACN,oBAAoB;MACzE,IAAIM,YAAY,CAACC,OAAO,IAAI,OAAOC,yBAAU,KAAK,UAAU,EAAE;QAC5D,IAAAA,yBAAU,EAACF,YAAY,CAACC,OAAO,CAAC;MAClC;IACF;EAAC;IAAA3C,GAAA;IAAAP,KAAA,EAOD,SAAAoD,MAAMA,CAAA,EAAG;MACP,IAAAC,WAAA,GAAqD,IAAI,CAACd,KAAK;QAAvDvC,KAAK,GAAAqD,WAAA,CAALrD,KAAK;QAAED,MAAM,GAAAsD,WAAA,CAANtD,MAAM;QAAEI,WAAW,GAAAkD,WAAA,CAAXlD,WAAW;QAAE8C,YAAY,GAAAI,WAAA,CAAZJ,YAAY;MAChD,IAAM7C,QAAQ,GAAGP,eAAc,CAACE,MAAM,EAAEC,KAAK,EAAE,IAAI,CAACsD,YAAY,EAAE,IAAI,CAACf,KAAK,CAAC1C,cAAc,EAAE,IAAI,EAAEM,WAAW,CAAC;MAC/G,IAAMoD,GAAG,GAAGN,YAAY,IAAI,IAAI,CAACN,oBAAoB;MAErD,oBAAOlH,MAAA,YAAAiF,aAAA,CAACuB,aAAa;QAACsB,GAAG,EAAEA;MAAI,GAAEnD,QAAwB,CAAC;IAC5D;EAAC;AAAA,EAjC+BwC,iBAAK,CAACY,SAAS;AAAA,IAAAtG,gBAAA,aAA5BmF,IAAI,eAMJ;EACjBxC,cAAc,EAAE4D,qBAAS,CAACC,IAAI;EAC9B3D,MAAM,EAAE0D,qBAAS,CAACrC,MAAM;EACxBpB,KAAK,EAAEyD,qBAAS,CAACrC,MAAM;EACvBnB,QAAQ,EAAEwD,qBAAS,CAACC,IAAI;EACxBvD,WAAW,EAAEsD,qBAAS,CAACE,MAAM;EAC7BV,YAAY,EAAEQ,qBAAS,CAACG,SAAS,CAAC,CAACH,qBAAS,CAACC,IAAI,EAAED,qBAAS,CAACI,KAAK,CAAC;IAAEX,OAAO,EAAEO,qBAAS,CAACK,UAAU,CAACC,OAAO;EAAE,CAAC,CAAC,CAAC;AACjH,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "3.0.2-next.1",
+  "version": "3.0.2-next.3",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -13,10 +13,10 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.0.2-next.0",
-    "@pie-lib/editable-html-tip-tap": "^2.1.0-next.1",
-    "@pie-lib/math-rendering": "^5.0.2-next.0",
-    "@pie-lib/render-ui": "^6.1.0-next.0",
+    "@pie-lib/drag": "^4.0.2-next.2",
+    "@pie-lib/editable-html-tip-tap": "^2.1.0-next.3",
+    "@pie-lib/math-rendering": "^5.0.2-next.1",
+    "@pie-lib/render-ui": "^6.1.0-next.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
@@ -28,5 +28,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "0fe379542dcd58d46726302fb2fbd99e408688ce"
+  "gitHead": "abac0350cad300ce7a38fd54141b281b48a1461a"
 }

package/src/__tests__/mask.test.js

@@ -184,4 +184,198 @@ describe('Mask', () => {
       expect(container.querySelector('tr')).toBeInTheDocument();
     });
   });
+
+  describe('spacer rendering for DnD components', () => {
+    it('adds spacers before and after DnD blank components', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        if (n.data?.dataset?.component === 'blank') {
+          return <span data-testid="blank-component">Blank</span>;
+        }
+        return null;
+      });
+
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          renderChildren={mockRenderChildren}
+          layout={{
+            nodes: [
+              {
+                type: 'div',
+                data: {
+                  dataset: { component: 'blank' },
+                  attributes: {},
+                },
+                nodes: [],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Check that renderChildren was called and spacers are present
+      // Count all children in the container - should be: spacer + blank + spacer = 3 elements
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(3);
+      expect(screen.getByTestId('blank-component')).toBeInTheDocument();
+    });
+
+    it('does not add spacers for non-DnD components', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        return <span data-testid="regular-component">Regular</span>;
+      });
+
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          renderChildren={mockRenderChildren}
+          layout={{
+            nodes: [
+              {
+                type: 'div',
+                data: {
+                  attributes: {},
+                },
+                nodes: [],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should not have spacers - only the regular component
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(1);
+      expect(screen.getByTestId('regular-component')).toBeInTheDocument();
+    });
+
+    it('adds spacers regardless of parent node type', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        if (n.data?.dataset?.component === 'blank') {
+          return <span data-testid="blank-in-td">Blank in TD</span>;
+        }
+        return null;
+      });
+
+      const { container } = render(
+        <Mask
+          {...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: [],
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should have spacers even inside td element
+      const td = container.querySelector('td');
+      expect(td.childNodes.length).toBe(3); // spacer + blank + spacer
+      expect(screen.getByTestId('blank-in-td')).toBeInTheDocument();
+    });
+
+    it('does not add spacers for text content', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          elementType="drag-in-the-blank"
+          layout={{
+            nodes: [
+              {
+                object: 'text',
+                leaves: [
+                  {
+                    text: 'Some text',
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should not have spacers for plain text - just text node
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(1);
+      expect(maskContainer.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+      expect(screen.getByText('Some text')).toBeInTheDocument();
+    });
+
+    it('handles multiple DnD components with correct spacer placement', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        if (n.data?.dataset?.component === 'blank') {
+          return <span data-testid={`blank-${n.data.testId}`}>Blank</span>;
+        }
+        return null;
+      });
+
+      const { container } = render(
+        <Mask
+          {...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: [],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should have 2 spacers per component = 4 spacers + 2 blanks = 6 total children
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(6);
+      expect(screen.getByTestId('blank-1')).toBeInTheDocument();
+      expect(screen.getByTestId('blank-2')).toBeInTheDocument();
+    });
+  });
 });

package/src/mask.jsx

@@ -62,8 +62,15 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
     if (rootRenderChildren) {
       const c = rootRenderChildren(n, value, onChange);
       if (c) {
+        const isDndComponent = n.data?.dataset?.component === 'blank';
+
+        if (isDndComponent) {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
+
         children.push(c);
-        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+
+        if (isDndComponent) {
           children.push(<Spacer key={`spacer-${index}`} />);
         }
         return;
@@ -91,9 +98,6 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         }
       } else if (content.length > 0) {
         children.push(content);
-        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
-          children.push(<Spacer key={`spacer-${index}`} />);
-        }
       }
     } else {
       const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);