That damned extra span. A bug or not ?

[josephgarnier]

Hi,

I currently have a JS function with the following code:

async displayInBox(dv, articlePath, articleTitle) {
  dv.el(
    "div",
    "🔍 Detailed article : " + dv.fileLink(articlePath, false, articleTitle),
    {
      cls: "macro-detailed-article",
    }
  );
}

which produces the following HTML:

<div class="block-language-dataviewjs node-insert-event" style="overflow-x: auto;">
  <div class="macro-detailed-article">
    <span>
      "🔍 Detailed article :" <a data-tooltip-position="top" aria-label="01-Article/Test article.md" data-href="01-Article/Test article.md" href="01-Article/Test article.md" class="internal-link" target="_blank" rel="noopener">Test article</a>
    </span>
  </div>
</div>

I want to remove an unnecessary div level, so I changed the previous function to:

async displayInBox(dv, articlePath, articleTitle) {
  // Add CSS class to global div.
  dv.container.className += " macro-detailed-article";

  // Render the box.
  dv.span("🔍 Detailed article : " + dv.fileLink(articlePath, false, articleTitle));
}

which produces the following HTML:

<div class="block-language-dataviewjs macro-detailed-article node-insert-event" style="overflow-x: auto;">
  <span>
    <span>"🔍
      Detailed article :" <a data-tooltip-position="top" aria-label="01-Article/Test article.md"
        data-href="01-Article/Test article.md" href="01-Article/Test article.md" class="internal-link" target="_blank"
        rel="noopener">Test article</a>
    </span>
  </span>
</div>

But now, I have an extra inner span... I only want one, not two. Usually, I use the trick myContainer.innerText = ""; to remove it but here, I don't see how I can do that.

My expected result is:

<div class="block-language-dataviewjs macro-detailed-article node-insert-event" style="overflow-x: auto;">
  <span>"🔍
    Detailed article :" <a data-tooltip-position="top" aria-label="01-Article/Test article.md"
      data-href="01-Article/Test article.md" href="01-Article/Test article.md" class="internal-link" target="_blank"
      rel="noopener">Test article</a>
  </span>
</div>

The DataView function that do this is renderCompactMarkdown() in render.ts (follow this link). And it's written /** Render simple fields compactly, removing wrapping content like paragraph and span. */. But it doesn't.

So does this extra span is a bug ?.

Thank you for your help