[html] Leading space character is removed when range formatting

[simonschuh]

Version

Version: 1.27.2 (user setup)
Commit: f46c4c4
Datum: 2018-09-12T16:17:45.060Z
Electron: 2.0.7
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architektur: x64

Steps to Reproduce

Example: <a class="btn"></a>

When i paste some text from clipboard with leading space e.g. " btn-link" the space is immediately removed.

Result: <a class="btnbtn-link"></a>
Expected: <a class="btn btn-link"></a>

When I undo, the space is back there.

[AHKol]

I'm new to VSCode development. If this is a good first bug I will pick it up and give it a shot.

[aeschli]

@AHKol Thanks for asking. It's a good issue as it's easy to set up and run the test cases. And maybe it's also easy to fix using the right approach. The challenge is to be sure that this will not break other formatting cases.

The code is here: https://github.com/Microsoft/vscode-html-languageservice/blob/master/src/services/htmlFormatter.ts
The tests are here:
https://github.com/Microsoft/vscode-html-languageservice/blob/master/src/test/formatter.test.ts

Check out the repo, run npm install, run the tests with npm test, debug in VSCode win the tests debug configuration

The problem is that the html formatterthat we use (jsbeautify) can format a full html documents, but we also need the capability to format a range. Right now we just use format on the content of the range, which of course only works if the substring is something meaningful. Otherwise if the range is in the middle of some attribute that causes issues like above.

Some ideas are:

• detect that out range is inside a element and don't format then
• format the full document and try to figure out what has changed in the range. The good thing about formatters is that they only add/remove whitespace. We can find things again with a scanner (which we have, see htmlScanner) as all symbols appear in the same order.

[aeschli]

fixed by microsoft/vscode-html-languageservice#38