Custom tags with dash character are considered inline and not formatted properly

[dominik3131]

Description

Beautification ignores custom tags that contain a dash. For example, in our project, we have used js-beautify to format code that contains MJML. MJML is using its own tags that start with the prefix mj-. Because of that, they are considered inline elements and are not formatted properly. I managed to locate the place where this behavior is coming from, and it started around version 1.14.8 with changes from below.

parser_token.is_inline_element = in_array(parser_token.tag_name, this._options.inline) || parser_token.tag_name.includes("-") || parser_token.tag_start_char === '{';

Some configuration option to ignore dash characters during inline element recognition would be appreciated. This option would allow you to decide if such tags should be considered inline.

Input

The code looked like this before beautification:

<mjml> <mj-body> <mj-section> <mj-column> <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image><mj-divider border-color="#F45E43"></mj-divider>          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text></mj-column></mj-section></mj-body></mjml>

Expected Output

The code should have looked like this after beautification:

<mjml>
    <mj-body>
        <mj-section>
            <mj-column>
                <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
                <mj-divider border-color="#F45E43"></mj-divider>
                <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

Actual Output

The code actually looked like this after beautification:

<mjml> <mj-body> <mj-section> <mj-column> <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image><mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text></mj-column></mj-section></mj-body></mjml>