ls(fix): improve text insertion for attributes

Author: chuckjaz

server/src/documents.ts

@@ -129,6 +129,12 @@ export interface TextDocumentEvent {
   document: TextDocumentIdentifier;
 }
 
+export interface TextDocumentLine {
+  text: string;
+  line: number;
+  start: number;
+}
+
 export class TextDocuments {
   private projectService: ProjectService;
   private logger: ProjectLoggerImpl;
@@ -214,6 +220,16 @@ export class TextDocuments {
     return [];
   }
 
+  public getDocumentLine(document: TextDocumentIdentifier, offset: number): TextDocumentLine {
+    const info = this.getServiceInfo(document);
+    if (info) {
+      const lineInfo = this.projectService.positionToLineOffset(info.fileName, offset);
+      if (lineInfo) {
+        return { line: lineInfo.line, start: offset - lineInfo.offset, text: lineInfo.text };
+      }
+    }
+  }
+
   public getNgService(document: TextDocumentIdentifier): LanguageService | undefined {
     return this.getServiceInfo(document).service;
   }

server/src/editorServices.ts

@@ -781,7 +781,7 @@ export class LSHost implements ts.LanguageServiceHost {
   positionToLineOffset(filename: string, position: number, lineIndex?:  LineIndex): ILineInfo {
       lineIndex = lineIndex || this.getLineIndex(filename);
       const lineOffset = lineIndex.charOffsetToLineNumberAndPos(position);
-      return { line: lineOffset.line, offset: lineOffset.offset + 1 };
+      return { line: lineOffset.line, offset: lineOffset.offset + 1, text: lineOffset.text };
   }
 
   getLineIndex(filename: string): LineIndex {
@@ -1699,6 +1699,15 @@ export class ProjectService {
       }
   }
 
+  positionToLineOffset(fileName: string, offset: number) {
+      const file = normalizePath(fileName);
+      const project = this.getProjectForFile(file);
+      if (project && !project.languageServiceDiabled) {
+          const compilerService = project.compilerService;
+          return compilerService.host.positionToLineOffset(fileName, offset);
+      }
+  }
+
     private requestUpdateProjectStructure(changeSeq: number, matchSeq: (changeSeq: number) => boolean) {
         this.host.setTimeout(() => {
             if (matchSeq(changeSeq)) {
@@ -3041,7 +3050,7 @@ function logServiceTimes(logger: Logger, service: ng.LanguageService): ng.Langua
       return time("getCompletions", () => service.getCompletionsAt(fileName, position));
     },
     getDiagnostics(fileName) {
-      return time("getDiagnnostics", () => service.getDiagnostics(fileName));
+      return time("getDiagnostics", () => service.getDiagnostics(fileName));
     },
     getTemplateReferences() {
       return time("getTemplateRefrences", () => service.getTemplateReferences());

server/src/server.ts

@@ -13,12 +13,15 @@ import {
   createConnection, IConnection, TextDocumentSyncKind,
   TextDocument, Diagnostic, DiagnosticSeverity,
   InitializeParams, InitializeResult, TextDocumentPositionParams,
-  CompletionItem, CompletionItemKind, TextDocumentIdentifier, Range
+  CompletionItem, CompletionItemKind, Definition, TextDocumentIdentifier,
+  Position, Range, TextEdit
 } from 'vscode-languageserver';
 
 import {TextDocuments, TextDocumentEvent} from './documents';
 import {ErrorCollector} from './errors';
 
+import {Completion, Span} from '@angular/language-service';
+
 // Create a connection for the server. The connection uses Node's IPC as a transport
 let connection: IConnection = createConnection();
 
@@ -80,6 +83,45 @@ function compiletionKindToCompletionItemKind(kind: string): number {
   return CompletionItemKind.Text;
 }
 
+const wordRe = /(\w|\(|\)|\[|\]|\*|\-|\_|\.)+/g;
+const special = /\(|\)|\[|\]|\*|\-|\_|\./;
+
+// Convert attribute names with non-\w chracters into a text edit.
+function insertionToEdit(range: Range, insertText: string): TextEdit {
+  if (insertText.match(special) && range) {
+    return TextEdit.replace(range, insertText);
+  }
+}
+
+
+function getReplaceRange(document: TextDocumentIdentifier, offset: number): Range {
+  const line = documents.getDocumentLine(document, offset);
+  if (line && line.text && line.start <= offset && line.start + line.text.length >= offset) {
+    const lineOffset = offset - line.start - 1;
+
+    // Find the word that contains the offset
+    let found: number, len: number;
+    line.text.replace(wordRe, <any>((word: string, _: string, wordOffset: number) => {
+      if (wordOffset <= lineOffset && wordOffset + word.length >= lineOffset && word.match(special)) {
+        found = wordOffset;
+        len = word.length;
+      }
+    }));
+    if (found != null) {
+      return Range.create(Position.create(line.line - 1, found), Position.create(line.line - 1, found + len));
+    }
+  }
+}
+
+function insertTextOf(completion: Completion): string {
+  switch (completion.kind) {
+    case 'attribute':
+    case 'html attribute':
+      return `${completion.name}="{{}}"`
+  }
+  return completion.name;
+}
+
 // This handler provides the initial list of the completion items.
 connection.onCompletion((textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
   const {fileName, service, offset, languageId} = documents.getServiceInfo(textDocumentPosition.textDocument,
@@ -91,16 +133,18 @@ connection.onCompletion((textDocumentPosition: TextDocumentPositionParams): Comp
       result = result.filter(completion => completion.kind != 'element');
     }
     if (result) {
+      const replaceRange = getReplaceRange(textDocumentPosition.textDocument, offset);
       return result.map(completion => ({
         label: completion.name,
         kind: compiletionKindToCompletionItemKind(completion.kind),
         detail: completion.kind,
-        sortText: completion.sort
+        sortText: completion.sort,
+        textEdit: insertionToEdit(replaceRange, insertTextOf(completion)),
+        insertText: insertTextOf(completion)
       }));
     }
   }
 });
 
-
 // Listen on the connection
 connection.listen();