Update html-language-features to use doQuoteComplete

[jzyrobert]

This PR fixes #18071

Adds the html.autoCreateQuotes function, using the existing html.completion.attributeDefaultValue setting for quote choice.
The corresponding extension PR is found at microsoft/vscode-html-languageservice#116

Setting disabled:

Setting enabled:

Changed to single quotes:

Valid completion examples from the tests:

<a foo=|
<a baz=| foo="bar">

Invalid completion examples from the tests:

<a foo=|=
<a foo=|"bar"
<a foo="bar=|"
<a></ foo=| a>

The logic works something like:
Is there a valid AttributeName token before the =?
Is the token followed by a valid DelimiterAssign (=)?
Is the next token NOT AttributeValue (value already exists) OR Unknown (invalid syntax)?

If yes, insert a quote pair and move the cursor one forward.

Additional things to consider:

• Should this be made part of the core editor so other languages can opt in? (e.g. React/Vue/etc where parts of the code are HTML)? I don't know if this is already a thing where a partial document can be set to a different language.

[aeschli]

Great stuff, thanks for taking the time!

As you have seen, it's very similar to autoClose. Based on some typing that matches a pattern, the language server is asked for a smart completion. The server comes back with text edits (or in our case just a snippet)

It would make sense to generalize the feature and merge what you added with autoClose.

We've come across the same need for other languages, C# or C++ have it too, if I'm, not mistaken
We called the feature autoInsert

Would you be interested in making that change?

[jzyrobert]

Hi @aeschli ,
I would be happy to make that change. I will study the autoInsert code and see what can be done to make this similar.

[jzyrobert]

Hi @aeschli, could you link me to the example you mentioned? I could find no mention of autoInsert in vscode, or the official c#/c++ extensions.

I had a think of the changes in the meantime, my proposed change would be:

• Each setting becomes an enum
• Modify the htmlClient code to something like:

let insertRequestor = (document: TextDocument, position: Position, requestType: RequestType<TextDocumentPositionParams, string, any>) => {
			let param = client.code2ProtocolConverter.asTextDocumentPositionParams(document, position);
			return client.sendRequest(requestType, param);
		};
		let disposable = activateAutoInsertion(insertRequestor, { html: true, handlebars: true }, runtime);

• In autoInsertion.ts, carry out if check/switch on each request enum and perform the request/modifications.
  • Or should each request have an interface and be a separate class that handles the checking/editing logic? That would prevent autoInsertion.ts from becoming too large.

[aeschli]

@dbaeumer reached out to the other team that we discussed autoInsert about. That's just to make sure we choose a similar solution that we can eventually merge.

I was thinking to do it with a single request AutoInsertRequest with { kind: 'autoQuote' | 'autoClose', textDocument, position}
To keep it simple, we can assume the client knows which auto insertion kind the server supports and what triggers them.
Later we can look into how the server announces what kinds it supports.

[jzyrobert]

@aeschli I have tried implementing the change as you wanted it.

[aeschli]

@jzyrobert Looks good, thanks!
I the functionsdoAutoClose and doAutoQuote are very similar. What's special about the selection in doAutoQuote?

[jzyrobert]

@aeschli you're right, I have refactored it further

[jzyrobert]

@aeschli I have resolved merge conflicts it with the recent changes you have done

[aeschli]

Thanks @jzyrobert. I wanted to push it all for November but time ran out. It will be in the December/January release.

[nichitaa]

please merge it : )

[aeschli]

Thanks a lot @jzyrobert for the nice work.
I made some polishes:

• for LSP I replace the autoQuote & autoClose requests with a generalized autoInsert request
• replaced the 'cursor move forward' special treatment by using a snippet position ("$1"). That also allows you to press tab to go after the quotes.