How to stop nested elements getting split into individual elements?

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">&nbsp;</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",
      });
    }