@pie-lib/mask-markup 3.0.16 → 3.0.17

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.16...@pie-lib/mask-markup@3.0.17) (2026-08-22)
+
+### Bug Fixes
+
+- made sure template field renders all marks [PIE-518] ([ad97d4f](https://github.com/pie-framework/pie-lib/commit/ad97d4ff98821544ca944741643601eeaefbffc5))
+
 ## [3.0.16](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.15...@pie-lib/mask-markup@3.0.16) (2026-08-21)
 
 **Note:** Version bump only for package @pie-lib/mask-markup

package/lib/mask.js

@@ -50,7 +50,7 @@ var getMark = function getMark(n) {
     return (0, _lodashEs.get)(leave, 'marks', []).length;
   });
   if (mark) {
-    return mark.marks[0];
+    return mark.marks;
   }
   return null;
 };
@@ -94,17 +94,22 @@ var _renderChildren = exports.renderChildren = function renderChildren(layout, v
         var extraText = addText(parentNode, t);
         return extraText ? acc + extraText : acc;
       }, '');
-      var mark = getMark(n);
-      if (mark) {
-        var markKey;
-        for (markKey in _serialization.MARK_TAGS) {
-          if (_serialization.MARK_TAGS[markKey] === mark.type) {
-            var Tag = markKey;
-            children.push(/*#__PURE__*/_react["default"].createElement(Tag, {
-              key: key
-            }, content));
-            break;
-          }
+      var marks = getMark(n);
+      if ((marks === null || marks === void 0 ? void 0 : marks.length) > 0) {
+        var tagsToWrap = marks.map(function (mark) {
+          return Object.keys(_serialization.MARK_TAGS).find(function (markKey) {
+            return _serialization.MARK_TAGS[markKey] === mark.type;
+          });
+        }).filter(Boolean);
+        if (tagsToWrap.length > 0) {
+          // nest from the inside out so the first mark ends up as the outermost tag: <b><em>content</em></b>
+          children.push(tagsToWrap.reduceRight(function (acc, Tag, tagIndex) {
+            return /*#__PURE__*/_react["default"].createElement(Tag, {
+              key: "".concat(key, "-").concat(Tag, "-").concat(tagIndex)
+            }, acc);
+          }, content));
+        } else {
+          children.push(content);
         }
       } else if (content.length > 0) {
         children.push(content);
@@ -116,13 +121,13 @@ var _renderChildren = exports.renderChildren = function renderChildren(layout, v
           key: key
         }, subNodes));
       } else {
-        var _Tag = n.type;
+        var Tag = n.type;
         if (n.nodes && n.nodes.length > 0) {
-          children.push(/*#__PURE__*/_react["default"].createElement(_Tag, (0, _extends2["default"])({
+          children.push(/*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
             key: key
           }, n.data.attributes), subNodes));
         } else {
-          children.push(/*#__PURE__*/_react["default"].createElement(_Tag, (0, _extends2["default"])({
+          children.push(/*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
             key: key
           }, n.data.attributes)));
         }

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","_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":"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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","tagsToWrap","map","MARK_TAGS","markKey","reduceRight","Tag","tagIndex","subNodes","_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;\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 marks = getMark(n);\n\n      if (marks?.length > 0) {\n        const tagsToWrap = marks\n          .map((mark) => Object.keys(MARK_TAGS).find((markKey) => MARK_TAGS[markKey] === mark.type))\n          .filter(Boolean);\n\n        if (tagsToWrap.length > 0) {\n          // nest from the inside out so the first mark ends up as the outermost tag: <b><em>content</em></b>\n          children.push(\n            tagsToWrap.reduceRight((acc, Tag, tagIndex) => <Tag key={`${key}-${Tag}-${tagIndex}`}>{acc}</Tag>, content),\n          );\n        } else {\n          children.push(content);\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":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "3.0.16",
+  "version": "3.0.17",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -28,5 +28,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "e6b46157ab321f4488117149f21783511f30970c"
+  "gitHead": "748a5c413f84555835fa0728fb4867499a839a9a"
 }

package/src/__tests__/mask.test.js

@@ -185,6 +185,104 @@ describe('Mask', () => {
     });
   });
 
+  describe('mark rendering', () => {
+    const markedLayout = (marks, text = 'x') => ({
+      nodes: [
+        {
+          object: 'text',
+          leaves: [{ marks, text }],
+        },
+      ],
+    });
+
+    it('renders a mark as an element, not as escaped html text', () => {
+      const { container } = render(<Mask {...defaultProps} layout={markedLayout([{ type: 'bold' }])} />);
+
+      const b = container.querySelector('b');
+      expect(b).toBeInTheDocument();
+      expect(b.textContent).toBe('x');
+      // the tag must not leak into the text content
+      expect(container.textContent).toBe('x');
+    });
+
+    it.each([
+      ['bold', 'b'],
+      ['italic', 'em'],
+      ['underline', 'u'],
+      ['strikethrough', 's'],
+      ['code', 'code'],
+      ['strong', 'strong'],
+    ])('maps the %s mark to a <%s> element', (markType, tag) => {
+      const { container } = render(<Mask {...defaultProps} layout={markedLayout([{ type: markType }])} />);
+
+      const el = container.querySelector(tag);
+      expect(el).toBeInTheDocument();
+      expect(el.textContent).toBe('x');
+    });
+
+    it('nests multiple marks, keeping the first mark as the outermost tag', () => {
+      const { container } = render(
+        <Mask {...defaultProps} layout={markedLayout([{ type: 'bold' }, { type: 'italic' }])} />,
+      );
+
+      const nested = container.querySelector('b > em');
+      expect(nested).toBeInTheDocument();
+      expect(nested.textContent).toBe('x');
+      expect(container.textContent).toBe('x');
+    });
+
+    it('nests three marks in mark order', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={markedLayout([{ type: 'underline' }, { type: 'strikethrough' }, { type: 'italic' }])}
+        />,
+      );
+
+      const nested = container.querySelector('u > s > em');
+      expect(nested).toBeInTheDocument();
+      expect(nested.textContent).toBe('x');
+    });
+
+    it('renders plain text when no mark maps to a tag', () => {
+      const { container } = render(<Mask {...defaultProps} layout={markedLayout([{ type: 'unknown-mark' }])} />);
+
+      expect(container.textContent).toBe('x');
+      expect(container.firstChild.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+    });
+
+    it('wraps only the marks that map to a tag', () => {
+      const { container } = render(
+        <Mask {...defaultProps} layout={markedLayout([{ type: 'unknown-mark' }, { type: 'bold' }])} />,
+      );
+
+      const b = container.querySelector('b');
+      expect(b).toBeInTheDocument();
+      expect(b.textContent).toBe('x');
+      expect(container.textContent).toBe('x');
+    });
+
+    it('renders marked text inline alongside unmarked text', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={{
+            nodes: [
+              { object: 'text', leaves: [{ text: 'Foo ' }] },
+              { object: 'text', leaves: [{ marks: [{ type: 'bold' }, { type: 'italic' }], text: 'x' }] },
+              { object: 'text', leaves: [{ text: ' bar' }] },
+            ],
+            object: 'block',
+            type: 'div',
+          }}
+        />,
+      );
+
+      expect(container.querySelector('b > em').textContent).toBe('x');
+      expect(container.textContent).toBe('Foo x bar');
+    });
+  });
+
   describe('spacer rendering for DnD components', () => {
     it('adds spacers before and after DnD blank components', () => {
       const mockRenderChildren = jest.fn((n) => {

package/src/mask.jsx

@@ -32,7 +32,7 @@ const getMark = (n) => {
   const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
 
   if (mark) {
-    return mark.marks[0];
+    return mark.marks;
   }
 
   return null;
@@ -83,18 +83,20 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         const extraText = addText(parentNode, t);
         return extraText ? acc + extraText : acc;
       }, '');
-      const mark = getMark(n);
+      const marks = getMark(n);
 
-      if (mark) {
-        let markKey;
+      if (marks?.length > 0) {
+        const tagsToWrap = marks
+          .map((mark) => Object.keys(MARK_TAGS).find((markKey) => MARK_TAGS[markKey] === mark.type))
+          .filter(Boolean);
 
-        for (markKey in MARK_TAGS) {
-          if (MARK_TAGS[markKey] === mark.type) {
-            const Tag = markKey;
-
-            children.push(<Tag key={key}>{content}</Tag>);
-            break;
-          }
+        if (tagsToWrap.length > 0) {
+          // nest from the inside out so the first mark ends up as the outermost tag: <b><em>content</em></b>
+          children.push(
+            tagsToWrap.reduceRight((acc, Tag, tagIndex) => <Tag key={`${key}-${Tag}-${tagIndex}`}>{acc}</Tag>, content),
+          );
+        } else {
+          children.push(content);
         }
       } else if (content.length > 0) {
         children.push(content);