additionalJsContext always wrapped in text tag breaking styling

[Patrick Donnell]

Hey, I am experiencing various issues when using additionalJsContext to add any additional xml with || delimiter. Looking into it seems like others experiencing similar issues with pagebreak here though seems to apply to most styling.

Note the resulting xml work as expected in Microsoft Word but any other word processor will be without styles.

Example code

const { createReport } = require("docx-templates");
const fs = require("fs");

createReport({
  template: fs.readFileSync("./sampletemplate.docx"),
  data: {},
  cmdDelimiter: ["{{", "}}"],
  additionalJsContext: {
    pagebreak: () => '||<w:br w:type="page" />||',
    customStyledElement: () =>
      `||<w:r><w:rPr><w:color w:val="FF0000" /></w:rPr><w:t>styled text</w:t></w:r>||`,
  },
}).then((buf) => {

  fs.writeFileSync("./demo.docx", buf);
});

With this example template:
sampletemplate.docx

Result

With the above sample code / template ("pages" on left, Word on the right). Have also tested in Google Docs and get the same broken styles.

Viewing the document.xml shows the inputted elements are wrapped in w:t

    <w:p w14:paraId="12F5DD50" w14:textId="77777777" w:rsidR="005135B0" w:rsidRDefault="005135B0" w:rsidP="005135B0">
      <w:pPr>
        <w:rPr>
          <w:lang w:val="en-US"/>
        </w:rPr>
      </w:pPr>
      <w:r>
        <w:rPr>
          <w:lang w:val="en-US"/>
        </w:rPr>
        <w:t xml:space="preserve"><w:r><w:rPr><w:color w:val="FF0000" /></w:rPr><w:t>styled text</w:t></w:r></w:t>
      </w:r>
    </w:p>

But when saving the same document with Microsoft Word the XML is corrected to:

    <w:p w14:paraId="12F5DD50" w14:textId="77777777" w:rsidR="005135B0" w:rsidRDefault="005135B0"
      w:rsidP="005135B0">
      <w:pPr>
        <w:rPr>
          <w:lang w:val="en-US" />
        </w:rPr>
      </w:pPr>
      <w:r>
        <w:rPr>
          <w:color w:val="FF0000" />
          <w:lang w:val="en-US" />
        </w:rPr>
        <w:t>styled text</w:t>
      </w:r>
    </w:p>

• Information about your compiler toolchain version (e.g. Angular, Webpack, etc.).
  Testing directly via ESM/Node.

• Information about your runtime environment (which browser, Electron, or NodeJS version).
  Node 20.x.

Let me know if you need any additional information or if there is an existing approach to ensure additionalJsContext elements are wrapped correctly for styling.