fix(server): Only provide InsertReplaceEdit when the client supports it (#1452)

From the spec:

>Most editors support two different operations when accepting a completion
>item. One is to insert a completion text and the other is to replace an
>existing text with a completion text. Since this can usually not be
>predetermined by a server it can report both ranges. Clients need to
>signal support for InsertReplaceEdits via the
>textDocument.completion.completionItem.insertReplaceSupport client
>capability property.

Fixes #1451

Author: atscott

integration/lsp/ivy_spec.ts

@@ -247,10 +247,8 @@ describe('Angular Ivy language server', () => {
       }) as lsp.CompletionItem[];
       const outputCompletion = response.find(i => i.label === '(appOutput)')!;
       expect(outputCompletion.kind).toEqual(lsp.CompletionItemKind.Property);
-      expect((outputCompletion.textEdit as lsp.InsertReplaceEdit).insert)
-          .toEqual({start: {line: 0, character: 8}, end: {line: 0, character: 9}});
-      // replace range includes the closing )
-      expect((outputCompletion.textEdit as lsp.InsertReplaceEdit).replace)
+      // // replace range includes the closing )
+      expect((outputCompletion.textEdit as lsp.TextEdit).range)
           .toEqual({start: {line: 0, character: 8}, end: {line: 0, character: 10}});
     });
   });

server/src/completion.ts

@@ -103,8 +103,8 @@ function ngCompletionKindToLspCompletionItemKind(kind: CompletionKind): lsp.Comp
  * @param scriptInfo
  */
 export function tsCompletionEntryToLspCompletionItem(
-    entry: ts.CompletionEntry, position: lsp.Position,
-    scriptInfo: ts.server.ScriptInfo): lsp.CompletionItem {
+    entry: ts.CompletionEntry, position: lsp.Position, scriptInfo: ts.server.ScriptInfo,
+    insertReplaceSupport: boolean): lsp.CompletionItem {
   const item = lsp.CompletionItem.create(entry.name);
   // Even though `entry.kind` is typed as ts.ScriptElementKind, it's
   // really Angular's CompletionKind. This is because ts.ScriptElementKind does
@@ -118,20 +118,30 @@ export function tsCompletionEntryToLspCompletionItem(
   // from 'entry.name'. For example, a method name could be 'greet', but the
   // insertText is 'greet()'.
   const insertText = entry.insertText || entry.name;
-  if (entry.replacementSpan) {
-    const replacementRange = tsTextSpanToLspRange(scriptInfo, entry.replacementSpan);
-    const tsPosition = lspPositionToTsPosition(scriptInfo, position);
-    const insertLength = tsPosition - entry.replacementSpan.start;
-    const insertionRange =
-        tsTextSpanToLspRange(scriptInfo, {...entry.replacementSpan, length: insertLength});
-    item.textEdit = lsp.InsertReplaceEdit.create(insertText, insertionRange, replacementRange);
-  } else {
-    item.textEdit = lsp.TextEdit.insert(position, insertText);
-  }
+  item.textEdit = createTextEdit(scriptInfo, entry, position, insertText, insertReplaceSupport);
+
   item.data = {
     kind: 'ngCompletionOriginData',
     filePath: scriptInfo.fileName,
     position,
   } as NgCompletionOriginData;
   return item;
 }
+
+function createTextEdit(
+    scriptInfo: ts.server.ScriptInfo, entry: ts.CompletionEntry, position: lsp.Position,
+    insertText: string, insertReplaceSupport: boolean) {
+  if (entry.replacementSpan === undefined) {
+    return lsp.TextEdit.insert(position, insertText);
+  } else if (insertReplaceSupport) {
+    const replacementRange = tsTextSpanToLspRange(scriptInfo, entry.replacementSpan);
+    const tsPosition = lspPositionToTsPosition(scriptInfo, position);
+    const insertLength = tsPosition - entry.replacementSpan.start;
+    const insertionRange =
+        tsTextSpanToLspRange(scriptInfo, {...entry.replacementSpan, length: insertLength});
+    return lsp.InsertReplaceEdit.create(insertText, insertionRange, replacementRange);
+  } else {
+    return lsp.TextEdit.replace(
+        tsTextSpanToLspRange(scriptInfo, entry.replacementSpan), insertText);
+  }
+}

server/src/session.ts

@@ -65,6 +65,7 @@ export class Session {
    * disable renaming because we know that there are many cases where it will not work correctly.
    */
   private renameDisabledProjects: WeakSet<ts.server.Project> = new WeakSet();
+  private clientCapabilities: lsp.ClientCapabilities = {};
 
   constructor(options: SessionOptions) {
     this.logger = options.logger;
@@ -576,6 +577,7 @@ export class Session {
     const serverOptions: ServerOptions = {
       logFile: this.logger.getLogFileName(),
     };
+    this.clientCapabilities = params.capabilities;
     return {
       capabilities: {
         codeLensProvider: this.ivy ? {resolveProvider: true} : undefined,
@@ -969,8 +971,12 @@ export class Session {
     if (!completions) {
       return;
     }
+    const clientSupportsInsertReplaceCompletion =
+        this.clientCapabilities.textDocument?.completion?.completionItem?.insertReplaceSupport ??
+        false;
     return completions.entries.map(
-        (e) => tsCompletionEntryToLspCompletionItem(e, params.position, scriptInfo));
+        (e) => tsCompletionEntryToLspCompletionItem(
+            e, params.position, scriptInfo, clientSupportsInsertReplaceCompletion));
   }
 
   private onCompletionResolve(item: lsp.CompletionItem): lsp.CompletionItem {