Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Additional new lines are being removed when formatted. #75

Open
1 task done
johncarter- opened this issue Aug 18, 2023 · 6 comments
Open
1 task done

Additional new lines are being removed when formatted. #75

johncarter- opened this issue Aug 18, 2023 · 6 comments
Labels
enhancement New feature or request

Comments

@johncarter-
Copy link

Describe the bug
Additional new lines are being removed when formatted.

Impacted Products

  • Antlers Toolbox for VS Code

Versions and Other Plugins/Extensions
Antlers Toolbox for VS Code v2.6.7

To Reproduce

<section class="pb-36">
    <div class="container mt-24">

        {{ partial:_components/select_link }}

        <div>
            <div class="max-w-[40rem]">
                {{ partial:_components/listing_card }}
            </div>
        </div>

    </div>
</section>

Format leads to:

<section class="pb-36">
    <div class="container mt-24">

        {{ partial:_components/select_link }}
        <!-- MISSING LINE BREAK HERE -->
        <div>
            <div class="max-w-[40rem]">
                {{ partial:_components/listing_card }}
            </div>
        </div>

    </div>
</section>

Expected behavior
I would want the original line preserved.

Additional context
I understand that Antlers uses the HTML formatting (https://antlers.dev/docs/formatting#settings) but despite these settings it still removes the extra line:

{
    // ...
    "html.format.wrapAttributesIndentSize": 120,
    "html.format.wrapLineLength": 999999999,
    "html.format.preserveNewLines": true,
    "html.format.maxPreserveNewLines": 3,
    // ...
}
@JohnathonKoster
Copy link
Contributor

This is currently expected behavior.

@JohnathonKoster JohnathonKoster added the enhancement New feature or request label Oct 28, 2023
@Swennet
Copy link

Swennet commented Dec 4, 2023

+1! I hate that it doesn't preserve newlines after Antlers tags and it makes our HTML look messy. An option to turn this off would be great.

@JohnathonKoster
Copy link
Contributor

JohnathonKoster commented Dec 4, 2023 •
edited
Loading

+1! I hate that it doesn't preserve newlines after Antlers tags and it makes our HTML look messy. An option to turn this off would be great.

An option to disable this entirely would make things much worse. I'll take a look at supporting this in some situations, but won't be able to get rid of it entirely due to how things are implemented (no guarantees/promises on timelines, as this will be a tough one) 👍

@Swennet
Copy link

Swennet commented Dec 4, 2023

Great to hear @JohnathonKoster! Just out of curiosity, how would that make things much worse?

@JohnathonKoster
Copy link
Contributor

JohnathonKoster commented Dec 4, 2023 •
edited
Loading

The implementation will convert Antlers tags and tag pairs into a temporary format that is compatible with existing HTML formatters. So something like this:

<div>{{ collection:pages }} <p>some content</p> {{ /collection:pages }}</div>

might get sent to the formatter as

<div><antlers001> <p>some content</p> </antlers001></div>

the process is then reversed after other formatters have done their job, and an Antlers-specific formatter handles the internal Antlers parts. In this example, there would be no weird side effects. However, anything like this:

{{ if something }}
one
{{ elseif something_else }}
two
{{ else }}
three
{{ /if }}

might need temporary "supporting" elements to help get the indentation better for one, two, and three (since there is no structural information inside the conditions).

In addition to those temporary supporting elements, each of the condition's branches becomes their own set of HTML tag-pairs that is tracked by the parser and document transformation steps. The closing tag for each of these needs to be removed (except for the very last {{ /if }} - in this case, we need to remove the temporary opening tag), and both the opening/closing tag of all supporting elements also needs to be removed - it is because of these that the formatter currently aggressively removes newlines, otherwise we'd have an ocean of whitespace around all of these.

@andjsch
Copy link

andjsch commented Feb 20, 2024

I do have the same problem. Sometimes it works though, when it's not all antlers tags - don't have an example ready for when it's working as expected.

{{#
    @name Layout
    @desc The default layout file.
#}}

<!-- /layout.antlers.html -->
<!doctype html>
<html lang="{{ site:short_locale }}" class="antialiased scroll-smooth scroll-pt-4">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <style>
            @font-face {
                font-family: "Croissant One";
                font-weight: 400;
                font-display: swap;
                src: url('/resources/fonts/CroissantOne-Regular.ttf') format('truetype');
            }
        </style>
        {{ vite src="resources/css/site.css|resources/js/site.js" }}
        {{ partial:statamic-peak-seo::snippets/seo }}
        {{ partial:statamic-peak-browser-appearance::snippets/browser_appearance }}
        {{ partial:statamic-peak-tools::snippets/live_preview }}
    </head>
    <body class="flex flex-col min-h-screen bg-oeeins-beige selection:bg-primary selection:text-white">
        {{ stack:seo_body }}
        {{ partial:statamic-peak-tools::snippets/noscript }}
        {{ partial:statamic-peak-tools::navigation/skip_to_content }}
        {{ partial:statamic-peak-tools::components/toolbar }}

        {{ partial:layout/header }}
        {{ template_content }}
        {{ partial:layout/footer }}
    </body>
</html>
<!-- End: /layout.antlers.html -->

will become

{{#
    @name Layout
    @desc The default layout file.
#}}

<!-- /layout.antlers.html -->
<!doctype html>
<html lang="{{ site:short_locale }}" class="antialiased scroll-smooth scroll-pt-4">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <style>
            @font-face {
                font-family: "Croissant One";
                font-weight: 400;
                font-display: swap;
                src: url('/resources/fonts/CroissantOne-Regular.ttf') format('truetype');
            }
        </style>
        {{ vite src="resources/css/site.css|resources/js/site.js" }}
        {{ partial:statamic-peak-seo::snippets/seo }}
        {{ partial:statamic-peak-browser-appearance::snippets/browser_appearance }}
        {{ partial:statamic-peak-tools::snippets/live_preview }}
    </head>
    <body class="flex flex-col min-h-screen bg-oeeins-beige selection:bg-primary selection:text-white">
        {{ stack:seo_body }}
        {{ partial:statamic-peak-tools::snippets/noscript }}
        {{ partial:statamic-peak-tools::navigation/skip_to_content }}
        {{ partial:statamic-peak-tools::components/toolbar }}
        {{ partial:layout/header }}
        {{ template_content }}
        {{ partial:layout/footer }}
    </body>
</html>
<!-- End: /layout.antlers.html -->

It would be cool if we could mark lines that should be kept by adding a space or two if it keeps my empty formatting lines as I intended.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@johncarter- @JohnathonKoster @andjsch @Swennet