Allow formatting block element tags to be on their own line

[antoinezanardi]

Description:

The library is designed to format HTML and prettify it, ensuring a clean and readable structure. However, there seems to be an issue with the output where the starting tags are not placed on the next line as the closing ones. The current output is as follows:

<div id="__nuxt"><div <!-- <= <div here should be on next line -->
    class="container-fluid d-flex flex-column h-100 page-content"><div
      class="align-items-center container-fluid d-flex flex-column flex-grow-1 justify-content-center"><div
        class="col-12 text-center"><img
          src="/_ipx/w_400/img/logo/square/werewolves-logo.png"
          onerror="this.setAttribute('data-error', 1)" data-nuxt-img
          sizes="200px"
          srcset="/_ipx/w_200/img/logo/square/werewolves-logo.png 200w, /_ipx/w_400/img/logo/square/werewolves-logo.png 400w"
          aria-label="Werewolves Assistant logo"></div>

The expected output should have the starting tags on the next line, like this:

<div id="__nuxt">
    <div
    class="container-fluid d-flex flex-column h-100 page-content">
       <div
      class="align-items-center container-fluid d-flex flex-column flex-grow-1 justify-content-center">
        <div
        class="col-12 text-center">
         <img
          src="/_ipx/w_400/img/logo/square/werewolves-logo.png"
          onerror="this.setAttribute('data-error', 1)" data-nuxt-img
          sizes="200px"
          srcset="/_ipx/w_200/img/logo/square/werewolves-logo.png 200w, /_ipx/w_400/img/logo/square/werewolves-logo.png 400w"
          aria-label="Werewolves Assistant logo"></div>

Steps to Reproduce:

1. Input a single-line HTML string into the function.
2. Observe the output where starting tags are on the same line as closing ones.

Expected Behavior:

The library should produce a well-formatted HTML output where starting tags are on the next line for better readability.

Thanks for your help.

[mohd-akram]

Thank you very much for this detailed report. Currently, this behavior is intentional. The way it works is, we only insert a newline if the line is too long, and we also never add any kind of space between elements if it didn't exist in the original source. The reason for this is because adding a space changes the HTML. This is particularly a problem for inline elements:

<span>$<span>500</span></span>

If we were to add any spaces here, it would cause the price to display incorrectly. This can also be a problem with block elements like div if using the inline-block display, where you get unintentional spaces in the markup. Adding spaces also affects the value of textContent when accessed from JS. Often this is not an issue, but because this library, unlike others, tries to be as noninvasive and generic as possible, we try to avoid making any assumptions on how the HTML will be styled or used.

That said, I'm curious how you are using this library. Is it via the VS Code extension or are you using it programmatically? Is it hand-written HTML or generated?

[antoinezanardi]

Thanks for your detailed response. I'm actually using this library when running my E2E tests with Nuxt + Playwright + Cucumber. When a scenario fails, I print out in the reports of the working Playwright page to have some clues of what's going on.

Maybe we can add option(s) ?

[mohd-akram]

Thanks for the info. I've marked this issue as an enhancement for now. I'll have to think some more about how to go about it. In the meantime, for your case maybe look into using prettier via their API - it does a complete reformatting by first parsing the entire HTML as an AST. That makes it stricter with the syntax and also quite a bit slower, but it might be more useful for eg. diffing such as in your testing scenario.

[limcolin]

@antoinezanardi I needed the same thing as you did and found this that worked out of the box for me: https://www.npmjs.com/package/htmlfy

Maybe it'll suit your needs