feat(language-service): add support for text replacement

[ayazhafiz]

Adds a replacementSpan field on a completion that will allow typed
text to be replaced with the suggested completion value if a user
selects the completion. Previously, the completion value would simply be
appended to the text already typed. E.g. if we had

{{ti}}

typed in a template and title was recommended as a completion and
selected, the template would become

{{tititle}}

With replacementSpan, the original text ti will be replaced for
title.

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Feature

Does this PR introduce a breaking change?

• Yes
• No

[ayazhafiz]

This is WIP. I believe #31897 will need to land before this really works, because we are facing issues relating to invalid template AST sourceSpans (similar to what we saw, and still see, with the indexer module). In particular, I've included a test that fails with a BoundEvent template AST:

@Component({
  template: `<a href="https://angular.io" (click)="han"></a>`,
})
export class AngularLinkComponent {
  handleClick() {}
}

Generating completions for han in the bound "click" event will produce an incorrect replacementSpan because the recorded span of the BoundEvent AST is incorrect.

[ayazhafiz]

@andrius-pra this may interest you as well.

[andrius-pra]

Generating completions for han in the bound "click" event will produce an incorrect replacementSpan because the recorded span of the BoundEvent AST is incorrect.

Possible fix: You can add special case when node is ASTWithSource.

let closestAst !: AstPath<AST>;
if (ast instanceof ASTWithSource) {
   closestAst = findAstAt(ast.ast, templatePosition - ast.sourceSpan.start);
} else {
   closestAst = findAstAt(ast, templatePosition - templateAstTail.sourceSpan.start.offset);
}

[ayazhafiz]

Generating completions for han in the bound "click" event will produce an incorrect replacementSpan because the recorded span of the BoundEvent AST is incorrect.

Possible fix: You can add special case when node is ASTWithSource.

let closestAst !: AstPath<AST>;
if (ast instanceof ASTWithSource) {
   closestAst = findAstAt(ast.ast, templatePosition - ast.sourceSpan.start);
} else {
   closestAst = findAstAt(ast, templatePosition - templateAstTail.sourceSpan.start.offset);
}

Good point. I'll try this out, but I think I did something similar in June and it wasn't very reliable. Thank you!

[ayazhafiz]

Okay, so half the problem seems to be solved -- we can now replace spans when performing a completion at the end of the text span! So in a case like {{ti}}, selecting a completion when typing after i will replace the entire span with the completion, like {{title}}.

Unfortunately, we cannot currently replace spans when selecting a completion in the middle of the span. For example, say we had already typed title and then were typing it again, starting from the front:

{{tititle}}
    ^ typing position 

We'd expect that selecting the completion title would replace everything in the span, or at least ti. But it won't, because the way we currently grab the span to replace is by subtracting the size of the current span from the position that we are at.

One way to resolve this is to go work on the Angular AST even more, and have completely atomic ASTs for every semantic word or symbol in an Angular program. This would be a major overhaul and would take a lot of time, as we would have to do it for both expression ASTs and markup (HTML) ASTs. I think this is the most correct solution, but maybe not the most practical.

The other option is to perform some kind of matching algorithm - maybe we can figure out where the span to replace starts but looking at the overlap with the completion, then erasing the entire word in the span starting from the determined start location. I think for now this would work fine, but there is at least the issue that would not work with fuzzy-matched completions.

What do you think, @kyliau and @andrius-pra?

[kyliau]

I think it's a "good-enough" solution with the absolute span. In edge cases like you mentioned, we could just set the replacement span to the nearest word boundary.

[ayazhafiz]

Okay, maybe it's even safer to implement expanding the word until a word boundary rather than relying on a span. Let me see how that does.

[kyliau]

Please also rebase this PR, thank you!

[kyliau]

LGTM, thank you!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}