I have a custom conversion for text to convert it into span
elements, but this conversion is not able to handle the nested span
elements inside the p
tag.
This is the given HTML data, the span
‘s are nested in this
<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f" class="">
<span xvid="d224e02f7a225aa9bdc51ec18daded3d" data-fact="619959c0062c677faebd7b57" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="">
<span xvid="2b80c95cd4b851345ba4c3fe6937d30b" class="wrapped manual-map" data-fact="619959c0062c677faebd7b55">November 1, 2021</span>
</span>
</p>
Output i get from the editor,here the span
‘s are split instead of being nested.
<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f">
<span xvid="2b80c95cd4b851345ba4c3fe6937d30b" data-fact="619959c0062c677faebd7b55" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate">November 1, 2021</span>
<span xvid="d224e02f7a225aa9bdc51ec18daded3d" data-fact="619959c0062c677faebd7b57" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate"> </span>
</p>
'
This the conversion i have written for the text,here the
const allowedAttrModelView = {
'xvid': 'xvid',
....etc
}
for (const [modelAttr, viewAttr] of Object.entries(allowedAttrModelView)) {
conversion.for("downcast").attributeToElement({
model: {
key: modelAttr,
name: "$text",
},
view: (value, {writer}) => {
const attrs = {};
attrs[viewAttr] = value;
console.log(attrs);
return writer.createAttributeElement("span", attrs, {
priority: 7,
});
},
converterPriority: "highest",
});
}