Feature: mixed HTML / ampscript formatting

[JoernBerkefeld]

cloned from https://github.com/sfm-cz/beautyAmp/issues/9

---

Have you considered integrating with prettier to allow formatting inside of HTML? prettier tends to break when people start pushing ampscript inside of html nodes (to set attributes).

would be a nice addition!

[FiB3]

This is in progress. I've already added it to the Core library, will add it to the extension in couple of days.

[JoernBerkefeld]

this is good but not perfect yet for 2 reasons:

1. it's not fully integrated into prettier - as soon as I apply standard formatting to my HTML file, prettier kicks in and ignores beautyamp... admittedly, this is asking too much of this ticket but still worth mentioning.
2. at least if combined with script tags, indentation is incorrect. example down below. I would assume this is caused by prettier though

sample string:

const content =
    '<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%" class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><div>my 1st html</div>\n%%[/* my ampscript */\n]%%\n<script runat="server">// my ssjs\n</script><div>my 2nd %%=v( /*my ampscript variable*/)=%% html</div></td></tr></table>';

actual (beautyAmp):

<table
    cellpadding="0"
    cellspacing="0"
    width="100%"
    role="presentation"
    style="min-width: 100%"
    class="stylingblock-content-wrapper"
>
    <tr>
        <td class="stylingblock-content-wrapper camarker-inner">
            <div>my 1st html</div>
%%[
    /* my ampscript */
]%%
<script runat="server">
                // my ssjs
            </script>
            <div>my 2nd %%=v( /*my ampscript variable*/)=%% html</div>
        </td>
    </tr>
</table>

actual (prettier):

<table
    cellpadding="0"
    cellspacing="0"
    width="100%"
    role="presentation"
    style="min-width: 100%"
    class="stylingblock-content-wrapper"
>
    <tr>
        <td class="stylingblock-content-wrapper camarker-inner">
            <div>my 1st html</div>
            %%[ /* my ampscript */ ]%%
            <script runat="server">
                // my ssjs
            </script>
            <div>my 2nd %%=v( /*my ampscript variable*/)=%% html</div>
        </td>
    </tr>
</table>

expected (beautyAmp):

<table
    cellpadding="0"
    cellspacing="0"
    width="100%"
    role="presentation"
    style="min-width: 100%"
    class="stylingblock-content-wrapper"
>
    <tr>
        <td class="stylingblock-content-wrapper camarker-inner">
            <div>my 1st html</div>
%%[
    /* my ampscript */
]%%
            <script runat="server">
                // my ssjs
            </script>
            <div>my 2nd %%=v( /*my ampscript variable*/)=%% html</div>
        </td>
    </tr>
</table>

all in all, I think this solves the issue nicely and I very much appreciate the easily accessible flag for turning off prettier for HTML.