xml-formatter icon indicating copy to clipboard operation
xml-formatter copied to clipboard

collapseContent option not working if all letter are in <span/>

Open MaxInMoon opened this issue 2 years ago • 2 comments

Hi there! I spotted an annoying bug (at least is what I think).

Bug

When all letters are in nested in span tags, the collapseContent doesn't behave as expected.

Version used

2.6.1

Repro

🔴 Not working example

import xmlFormatter from "xml-formatter";

const content = `<span><span>Hel</span><span>lo</span></span>`;

const res = xmlFormatter(content, {. 
  collapseContent: true,
  lineSeparator: "\n",
});

console.log(res)

Result

<span>
  <span>Hel</span>
  <span>lo</span>
</span>

Nodes logged (via filter fn callback)

{"type":"Element","name":"span","attributes":{},"children":[]}
{"type":"Text","content":"Hel"}
{"type":"Element","name":"span","attributes":{},"children":[]}
{"type":"Text","content":"lo"}

🟢 Working example We introduce a character (here white-space) between the "Hel" and "lo":

import xmlFormatter from "xml-formatter";

const content = `<span><span>Hel</span> <span>lo</span></span>`;

const res = xmlFormatter(content, {. 
  collapseContent: true,
  lineSeparator: "\n",
});

console.log(res)

Result

<span><span>Hel</span> <span>lo</span></span>

Nodes logged (via filter fn callback)

{"type":"Element","name":"span","attributes":{},"children":[]}
{"type":"Text","content":"Hel"}
{"type":"Text","content":" "}
{"type":"Element","name":"span","attributes":{},"children":[]}
{"type":"Text","content":"lo"}

My theory

The content needs to have at least one letter not wrapped in a span tag at the deepest level.

The doc says collapseContent [...] Only works if element contains at least one text node, but from the nodes logs I obtain, it seems that it should be working.

Very curious to see what you think about that @chrisbottin ! 👀

MaxInMoon avatar Sep 02 '22 18:09 MaxInMoon

@chrisbottin ?

MaxInMoon avatar Sep 09 '22 14:09 MaxInMoon

Hey @MaxInMoon

I think the behaviour is correct the root span element contains a text node {"type":"Text","content":" "} therefore the collapseContent=true option behaves correctly, all the content inside the element is collapsed.

What do you expect?

chrisbottin avatar Sep 09 '22 16:09 chrisbottin