Adding a text box inside a for-loop

[SuchiraD]

Hi,

I have tried to put a text-box inside a loop. But after the conversion, I am receiving following "corrupted file" error.

Once clicked yes, the document recovered as expected.

Following is a simple reproducible example.
DOCX-Template - ISSUE - TextBox in for loop.docx

JS code snippet

const createReport = require('docx-templates').default;
const fs = require('fs')

const template = fs.readFileSync('ISSUE - TextBox in for loop.docx');

const data = {
    items: [
        {
            name: 'Item 1'
        },
        {
            name: 'Item 2'
        },
        {
            name: 'Item 3'
        },
    ]
}

createReport({
    template,
    data,
    // cmdDelimiter: ['{{', '}}'],
}).then(
    rendered => fs.writeFileSync(
        'ISSUE-converted.docx',
        rendered
    ))
    .catch(console.log);

Following is the expected result.
ISSUE-converted-expected-result.docx

Runtime environment - Node v16.19.0

[jjhbw]

Sorry for the late reply.

Hmm that's weird, but not totally unexpected as there is a lot going on in the XML when you add a text box.

Can you try with https://github.com/guigrpa/docx-templates/releases/tag/v4.9.3-beta.2 ?

It contains an experimental change to the way the XML is structured when using FOR loops. This release is not on NPM, but you can add it to your package.json by referring to the commit or tag.

[SuchiraD]

@jjhbw Thanks for looking into this and the given suggestion. I have tried this beta version and the latest version 4.11. Still the issue is not fixed in both.
BTW i have extracted the docx file and saw the following differences in document.xml
this is a part of shape related xml in template docx.

<v:shape id="Text Box 1" o:spid="_x0000_s1026" type="#_x0000_t202" style="position:absolute;margin-left:.6pt;margin-top:2.6pt;width:171.7pt;height:36.3pt;z-index:251659264;visibility:visible;mso-wrap-style:square;mso-wrap-distance-left:9pt;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;mso-position-horizontal-relative:text;mso-position-vertical:absolute;mso-position-vertical-relative:text;v-text-anchor:top" 
							o:gfxdata="UEsDBBQABgAIAAAAIQC2gziS/gAAAOEBAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbJSRQU7DMBBF&#xD;&#xA;90jcwfIWJU67QAgl6YK0S0CoHGBkTxKLZGx5TGhvj5O2G0SRWNoz/78nu9wcxkFMGNg6quQqL6RA&#xD;&#xA;0s5Y6ir5vt9lD1JwBDIwOMJKHpHlpr69KfdHjyxSmriSfYz+USnWPY7AufNIadK6MEJMx9ApD/oD&#xD;&#xA;OlTrorhX2lFEilmcO2RdNtjC5xDF9pCuTyYBB5bi6bQ4syoJ3g9WQ0ymaiLzg5KdCXlKLjvcW893&#xD;&#xA;SUOqXwnz5DrgnHtJTxOsQfEKIT7DmDSUCaxw7Rqn8787ZsmRM9e2VmPeBN4uqYvTtW7jvijg9N/y&#xD;&#xA;JsXecLq0q+WD6m8AAAD//wMAUEsDBBQABgAIAAAAIQA4/SH/1gAAAJQBAAALAAAAX3JlbHMvLnJl&#xD;&#xA;bHOkkMFqwzAMhu+DvYPRfXGawxijTi+j0GvpHsDYimMaW0Yy2fr2M4PBMnrbUb/Q94l/f/hMi1qR&#xD;&#xA;JVI2sOt6UJgd+ZiDgffL8ekFlFSbvV0oo4EbChzGx4f9GRdb25HMsYhqlCwG5lrLq9biZkxWOiqY&#xD;&#xA;22YiTra2kYMu1l1tQD30/bPm3wwYN0x18gb45AdQl1tp5j/sFB2T0FQ7R0nTNEV3j6o9feQzro1i&#xD;&#xA;OWA14Fm+Q8a1a8+Bvu/d/dMb2JY5uiPbhG/ktn4cqGU/er3pcvwCAAD//wMAUEsDBBQABgAIAAAA&#xD;&#xA;IQBmnp8nOAIAAHwEAAAOAAAAZHJzL2Uyb0RvYy54bWysVE1v2zAMvQ/YfxB0X2ynadoGcYosRYYB&#xD;&#xA;QVsgLXpWZCk2JouapMTOfv0o2flot9Owi0yJ1BP5+OjpfVsrshfWVaBzmg1SSoTmUFR6m9PXl+WX&#xD;&#xA;W0qcZ7pgCrTI6UE4ej/7/GnamIkYQgmqEJYgiHaTxuS09N5MksTxUtTMDcAIjU4JtmYet3abFJY1&#xD;&#xA;iF6rZJim46QBWxgLXDiHpw+dk84ivpSC+ycpnfBE5RRz83G1cd2ENZlN2WRrmSkr3qfB/iGLmlUa&#xD;&#xA;Hz1BPTDPyM5Wf0DVFbfgQPoBhzoBKSsuYg1YTZZ+qGZdMiNiLUiOMyea3P+D5Y/7tXm2xLdfocUG&#xD;&#xA;BkIa4yYOD0M9rbR1+GKmBP1I4eFEm2g94Xg4zG7T0d0VJRx9o3GWpTcBJjnfNtb5bwJqEoycWmxL&#xD;&#xA;ZIvtV853oceQ8JgDVRXLSqm4CVIQC2XJnmETlY85Ivi7KKVJk9Px1XUagd/5AvTp/kYx/qNP7yIK&#xD;&#xA;8ZTGnM+1B8u3m7YnZAPFAXmy0EnIGb6sEHfFnH9mFjWD1OAc+CdcpAJMBnqLkhLsr7+dh3hsJXop&#xD;&#xA;aVCDOXU/d8wKStR3jU2+y0ajINq4GV3fDHFjLz2bS4/e1QtAhjKcOMOjGeK9OprSQv2G4zIPr6KL&#xD;&#xA;aY5v59QfzYXvJgPHjYv5PAahTA3zK702PECHjgQ+X9o3Zk3fT49KeISjWtnkQ1u72HBTw3znQVax&#xD;&#xA;54HgjtWed5R4VE0/jmGGLvcx6vzTmP0GAAD//wMAUEsDBBQABgAIAAAAIQBngL1v3QAAAAsBAAAP&#xD;&#xA;AAAAZHJzL2Rvd25yZXYueG1sTE9NT8MwDL0j8R8iI3FjKWNspWs68TG4cGIgzlnjpRGNUyVZV/49&#xD;&#xA;5gQXW0/Pfh/1ZvK9GDEmF0jB9awAgdQG48gq+Hh/vipBpKzJ6D4QKvjGBJvm/KzWlQknesNxl61g&#xD;&#xA;EUqVVtDlPFRSprZDr9MsDEjMHUL0OjOMVpqoTyzuezkviqX02hE7dHrAxw7br93RK9g+2Dvbljp2&#xD;&#xA;29I4N06fh1f7otTlxfS05nG/BpFxyn8f8NuB80PDwfbhSCaJnvGcDxXc8mL2ZrFYgtgrWK1KkE0t&#xD;&#xA;/3dofgAAAP//AwBQSwECLQAUAAYACAAAACEAtoM4kv4AAADhAQAAEwAAAAAAAAAAAAAAAAAAAAAA&#xD;&#xA;W0NvbnRlbnRfVHlwZXNdLnhtbFBLAQItABQABgAIAAAAIQA4/SH/1gAAAJQBAAALAAAAAAAAAAAA&#xD;&#xA;AAAAAC8BAABfcmVscy8ucmVsc1BLAQItABQABgAIAAAAIQBmnp8nOAIAAHwEAAAOAAAAAAAAAAAA&#xD;&#xA;AAAAAC4CAABkcnMvZTJvRG9jLnhtbFBLAQItABQABgAIAAAAIQBngL1v3QAAAAsBAAAPAAAAAAAA&#xD;&#xA;AAAAAAAAAJIEAABkcnMvZG93bnJldi54bWxQSwUGAAAAAAQABADzAAAAnAUAAAAA&#xD;&#xA;" fillcolor="white [3201]" strokeweight=".5pt">

This is the shape related XML in converted docx.

<v:shape id="Text Box 1" o:spid="_x0000_s1026" type="#_x0000_t202"
                style="position:absolute;margin-left:.6pt;margin-top:2.6pt;width:171.7pt;height:36.3pt;z-index:251659264;visibility:visible;mso-wrap-style:square;mso-wrap-distance-left:9pt;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;mso-position-horizontal-relative:text;mso-position-vertical:absolute;mso-position-vertical-relative:text;v-text-anchor:top"
                o:gfxdata="UEsDBBQABgAIAAAAIQC2gziS/gAAAOEBAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbJSRQU7DMBBF
90jcwfIWJU67QAgl6YK0S0CoHGBkTxKLZGx5TGhvj5O2G0SRWNoz/78nu9wcxkFMGNg6quQqL6RA
0s5Y6ir5vt9lD1JwBDIwOMJKHpHlpr69KfdHjyxSmriSfYz+USnWPY7AufNIadK6MEJMx9ApD/oD
OlTrorhX2lFEilmcO2RdNtjC5xDF9pCuTyYBB5bi6bQ4syoJ3g9WQ0ymaiLzg5KdCXlKLjvcW893
SUOqXwnz5DrgnHtJTxOsQfEKIT7DmDSUCaxw7Rqn8787ZsmRM9e2VmPeBN4uqYvTtW7jvijg9N/y
JsXecLq0q+WD6m8AAAD//wMAUEsDBBQABgAIAAAAIQA4/SH/1gAAAJQBAAALAAAAX3JlbHMvLnJl
bHOkkMFqwzAMhu+DvYPRfXGawxijTi+j0GvpHsDYimMaW0Yy2fr2M4PBMnrbUb/Q94l/f/hMi1qR
JVI2sOt6UJgd+ZiDgffL8ekFlFSbvV0oo4EbChzGx4f9GRdb25HMsYhqlCwG5lrLq9biZkxWOiqY
22YiTra2kYMu1l1tQD30/bPm3wwYN0x18gb45AdQl1tp5j/sFB2T0FQ7R0nTNEV3j6o9feQzro1i
OWA14Fm+Q8a1a8+Bvu/d/dMb2JY5uiPbhG/ktn4cqGU/er3pcvwCAAD//wMAUEsDBBQABgAIAAAA
IQBmnp8nOAIAAHwEAAAOAAAAZHJzL2Uyb0RvYy54bWysVE1v2zAMvQ/YfxB0X2ynadoGcYosRYYB
QVsgLXpWZCk2JouapMTOfv0o2flot9Owi0yJ1BP5+OjpfVsrshfWVaBzmg1SSoTmUFR6m9PXl+WX
W0qcZ7pgCrTI6UE4ej/7/GnamIkYQgmqEJYgiHaTxuS09N5MksTxUtTMDcAIjU4JtmYet3abFJY1
iF6rZJim46QBWxgLXDiHpw+dk84ivpSC+ycpnfBE5RRz83G1cd2ENZlN2WRrmSkr3qfB/iGLmlUa
Hz1BPTDPyM5Wf0DVFbfgQPoBhzoBKSsuYg1YTZZ+qGZdMiNiLUiOMyea3P+D5Y/7tXm2xLdfocUG
BkIa4yYOD0M9rbR1+GKmBP1I4eFEm2g94Xg4zG7T0d0VJRx9o3GWpTcBJjnfNtb5bwJqEoycWmxL
ZIvtV853oceQ8JgDVRXLSqm4CVIQC2XJnmETlY85Ivi7KKVJk9Px1XUagd/5AvTp/kYx/qNP7yIK
8ZTGnM+1B8u3m7YnZAPFAXmy0EnIGb6sEHfFnH9mFjWD1OAc+CdcpAJMBnqLkhLsr7+dh3hsJXop
aVCDOXU/d8wKStR3jU2+y0ajINq4GV3fDHFjLz2bS4/e1QtAhjKcOMOjGeK9OprSQv2G4zIPr6KL
aY5v59QfzYXvJgPHjYv5PAahTA3zK702PECHjgQ+X9o3Zk3fT49KeISjWtnkQ1u72HBTw3znQVax
54HgjtWed5R4VE0/jmGGLvcx6vzTmP0GAAD//wMAUEsDBBQABgAIAAAAIQBngL1v3QAAAAsBAAAP
AAAAZHJzL2Rvd25yZXYueG1sTE9NT8MwDL0j8R8iI3FjKWNspWs68TG4cGIgzlnjpRGNUyVZV/49
5gQXW0/Pfh/1ZvK9GDEmF0jB9awAgdQG48gq+Hh/vipBpKzJ6D4QKvjGBJvm/KzWlQknesNxl61g
EUqVVtDlPFRSprZDr9MsDEjMHUL0OjOMVpqoTyzuezkviqX02hE7dHrAxw7br93RK9g+2Dvbljp2
29I4N06fh1f7otTlxfS05nG/BpFxyn8f8NuB80PDwfbhSCaJnvGcDxXc8mL2ZrFYgtgrWK1KkE0t
/3dofgAAAP//AwBQSwECLQAUAAYACAAAACEAtoM4kv4AAADhAQAAEwAAAAAAAAAAAAAAAAAAAAAA
W0NvbnRlbnRfVHlwZXNdLnhtbFBLAQItABQABgAIAAAAIQA4/SH/1gAAAJQBAAALAAAAAAAAAAAA
AAAAAC8BAABfcmVscy8ucmVsc1BLAQItABQABgAIAAAAIQBmnp8nOAIAAHwEAAAOAAAAAAAAAAAA
AAAAAC4CAABkcnMvZTJvRG9jLnhtbFBLAQItABQABgAIAAAAIQBngL1v3QAAAAsBAAAPAAAAAAAA
AAAAAAAAAJIEAABkcnMvZG93bnJldi54bWxQSwUGAAAAAAQABADzAAAAnAUAAAAA
"
                fillcolor="white [3201]" strokeweight=".5pt">

With this, I think the issue arises from the new-line syntax conversion on 


Do you have any idea on this?

[SuchiraD]

ohh silly me.. No. Its not due to new line syntax change. The reason is an ID duplication on shape related XML

Inside <w:drawing> there is a <wp:docPr id="1" name="Text Box 1"/> tag and also, shape starts with <v:shape id="Text Box 1" .......>. In a loop, these two IDs should be changed according to the iteration. But on conversion, these were duplicated as it is. This was the cause for the error.

[jjhbw]

Nice find!

This is not an easy fix, though, as it would probably require scanning the entire XML tree that has been generated for ID conflicts like this... Or do you think there is another solution?

[SuchiraD]

Rather scanning the whole XML, isn't it possible to make the change while processing the for loop syntax?
I am not sure how the looping process happen in the library. But assuming while scanning the initial template's xml, if the scanner found a looping condition, then later it will repeat the content inside the loop. At this moment, while duplicating xml, can't we change the ID in each iteration?

[jjhbw]

Fixed by #315