fix(completions): fix completions for inputs / outputs

The `TextEdit` is not meant to replace text to the right of the
position. Instead, `InsesrtReplaceEdit` should be used.

Reference discussion in LSP issue for examples on replacement vs
insertion range for `InsertReplaceEdit`:
microsoft/language-server-protocol#846

Fixes angular#1399

Note that the issue did not appear in the VE version of the extension
because it was only providing completions as inserts (they had
no `replacementSpan`).

integration/lsp/ivy_spec.ts

@@ -247,6 +247,11 @@ 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)
+          .toEqual({start: {line: 0, character: 8}, end: {line: 0, character: 10}});
     });
   });
 

server/src/completion.ts

@@ -9,7 +9,7 @@
 import * as ts from 'typescript/lib/tsserverlibrary';
 import * as lsp from 'vscode-languageserver';
 
-import {tsTextSpanToLspRange} from './utils';
+import {lspPositionToTsPosition, tsTextSpanToLspRange} from './utils';
 
 // TODO: Move this to `@angular/language-service`.
 enum CompletionKind {
@@ -118,9 +118,16 @@ 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;
-  item.textEdit = entry.replacementSpan ?
-      lsp.TextEdit.replace(tsTextSpanToLspRange(scriptInfo, entry.replacementSpan), insertText) :
-      lsp.TextEdit.insert(position, insertText);
+  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.data = {
     kind: 'ngCompletionOriginData',
     filePath: scriptInfo.fileName,