HTML formatter sends comments to a new line when the comment does not include a space as the first character

[avigoldman]

Description

The HTML formatter sends comments to a new line when the comment does not include a space as the first character. It works properly when the HTML comment starts with any white space character. I believe the issue is here: https://github.com/beautify-web/js-beautify/blob/master/js/src/html/beautifier.js#L698

Related issues: #1337 #426

Input

The code looked like this before beautification:

<!--start button--><button>Click here</button><!--end button-->

Expected Output

The code should have looked like this after beautification:

<!--start button--><button>Click here</button><!--end button-->

Actual Output

The code actually looked like this after beautification:

<!--start button--><button>Click here</button>
<!--end button-->

---

To have this function properly add a space at the start of the second comment.

Input

The code looked like this before beautification:

<!--start button--><button>Click here</button><!-- end button-->

Actual Output

The code actually looked like this after beautification:

<!--start button--><button>Click here</button><!-- end button-->

Environment

I tested this on beautifier.io

Settings

{
  "indent_size": "2",
  "indent_char": " ",
  "max_preserve_newlines": "-1",
  "preserve_newlines": false,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "normal",
  "brace_style": "collapse",
  "space_before_conditional": false,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": "0",
  "indent_inner_html": true,
  "comma_first": false,
  "e4x": false,
  "indent_empty_lines": false
}

[bitwiseman]

This looks similar to #1301, but it is not the same.

[bitwiseman]

This problem is even more apparent if for something like:

<span><!--start button--><button>Click here</button><!--end button--></span>

Which turns into:

<span>
    <!--start button--><button>Click here</button>
    <!--end button-->
</span>

This adds space between <span> and <button> and space inside the <button>. 😭

[cfya]

I would like to work on this @avigoldman @aashigupta19

[bitwiseman]

@cfya
Please do!

[carolinekistler]

Hi! I have a project for a software methodology class to contribute to an open source repo and I am very interested in working on this project. Could I be assigned to this issue? Thanks!

[bitwiseman]

@carolinekistler There you go, if you have any questions please join the project gitter.im room .

[bitwiseman]

To clarify, I think the requested behavior is that the following input remains unchanged:

<button>Click here</button><!--end button-->
<button>Click here</button><!-- end button-->
<button>Click here</button>
<!--end button-->
<button>Click here</button>
<!-- end button-->