Add replacement span for string literal (#37490)

* Add replacement span for string literal

* fix change requests

* fix lint

* Avoid flag

* Fix baseline

* ADd misising baseline

Author: Kingwl

src/services/completions.ts

@@ -245,6 +245,7 @@ namespace ts.Completions {
             const uniqueNames = getCompletionEntriesFromSymbols(
                 symbols,
                 entries,
+                /* contextToken */ undefined,
                 location,
                 sourceFile,
                 typeChecker,
@@ -269,6 +270,7 @@ namespace ts.Completions {
             getCompletionEntriesFromSymbols(
                 symbols,
                 entries,
+                /* contextToken */ undefined,
                 location,
                 sourceFile,
                 typeChecker,
@@ -353,6 +355,7 @@ namespace ts.Completions {
     function createCompletionEntry(
         symbol: Symbol,
         sortText: SortText,
+        contextToken: Node | undefined,
         location: Node | undefined,
         sourceFile: SourceFile,
         typeChecker: TypeChecker,
@@ -365,7 +368,7 @@ namespace ts.Completions {
         preferences: UserPreferences,
     ): CompletionEntry | undefined {
         let insertText: string | undefined;
-        let replacementSpan: TextSpan | undefined;
+        let replacementSpan = getReplacementSpanForContextToken(contextToken);
 
         const insertQuestionDot = origin && originIsNullableMember(origin);
         const useBraces = origin && originIsSymbolMember(origin) || needsConvertPropertyAccess;
@@ -462,6 +465,7 @@ namespace ts.Completions {
     export function getCompletionEntriesFromSymbols(
         symbols: readonly Symbol[],
         entries: Push<CompletionEntry>,
+        contextToken: Node | undefined,
         location: Node | undefined,
         sourceFile: SourceFile,
         typeChecker: TypeChecker,
@@ -496,6 +500,7 @@ namespace ts.Completions {
             const entry = createCompletionEntry(
                 symbol,
                 symbolToSortTextMap && symbolToSortTextMap[getSymbolId(symbol)] || SortText.LocationPriority,
+                contextToken,
                 location,
                 sourceFile,
                 typeChecker,

src/services/stringCompletions.ts

@@ -8,11 +8,11 @@ namespace ts.Completions.StringCompletions {
         if (isInString(sourceFile, position, contextToken)) {
             if (!contextToken || !isStringLiteralLike(contextToken)) return undefined;
             const entries = getStringLiteralCompletionEntries(sourceFile, contextToken, position, checker, options, host);
-            return convertStringLiteralCompletions(entries, sourceFile, checker, log, preferences);
+            return convertStringLiteralCompletions(entries, contextToken, sourceFile, checker, log, preferences);
         }
     }
 
-    function convertStringLiteralCompletions(completion: StringLiteralCompletion | undefined, sourceFile: SourceFile, checker: TypeChecker, log: Log, preferences: UserPreferences): CompletionInfo | undefined {
+    function convertStringLiteralCompletions(completion: StringLiteralCompletion | undefined, contextToken: Node, sourceFile: SourceFile, checker: TypeChecker, log: Log, preferences: UserPreferences): CompletionInfo | undefined {
         if (completion === undefined) {
             return undefined;
         }
@@ -24,6 +24,7 @@ namespace ts.Completions.StringCompletions {
                 getCompletionEntriesFromSymbols(
                     completion.symbols,
                     entries,
+                    contextToken,
                     sourceFile,
                     sourceFile,
                     checker,
@@ -35,7 +36,13 @@ namespace ts.Completions.StringCompletions {
                 return { isGlobalCompletion: false, isMemberCompletion: true, isNewIdentifierLocation: completion.hasIndexSignature, entries };
             }
             case StringLiteralCompletionKind.Types: {
-                const entries = completion.types.map(type => ({ name: type.value, kindModifiers: ScriptElementKindModifier.none, kind: ScriptElementKind.string, sortText: "0" }));
+                const entries = completion.types.map(type => ({
+                    name: type.value,
+                    kindModifiers: ScriptElementKindModifier.none,
+                    kind: ScriptElementKind.string,
+                    sortText: "0",
+                    replacementSpan: getReplacementSpanForContextToken(contextToken)
+                }));
                 return { isGlobalCompletion: false, isMemberCompletion: false, isNewIdentifierLocation: completion.isNewIdentifier, entries };
             }
             default:

src/services/utilities.ts

@@ -1600,10 +1600,27 @@ namespace ts {
         return !!range && shouldBeReference === tripleSlashDirectivePrefixRegex.test(sourceFile.text.substring(range.pos, range.end));
     }
 
+    export function getReplacementSpanForContextToken(contextToken: Node | undefined) {
+        if (!contextToken) return undefined;
+
+        switch (contextToken.kind) {
+            case SyntaxKind.StringLiteral:
+            case SyntaxKind.NoSubstitutionTemplateLiteral:
+                return createTextSpanFromStringLiteralLikeContent(<StringLiteralLike>contextToken);
+            default:
+                return createTextSpanFromNode(contextToken);
+        }
+    }
+
     export function createTextSpanFromNode(node: Node, sourceFile?: SourceFile, endNode?: Node): TextSpan {
         return createTextSpanFromBounds(node.getStart(sourceFile), (endNode || node).getEnd());
     }
 
+    export function createTextSpanFromStringLiteralLikeContent(node: StringLiteralLike) {
+        if (node.isUnterminated) return undefined;
+        return createTextSpanFromBounds(node.getStart() + 1, node.getEnd() - 1);
+    }
+
     export function createTextRangeFromNode(node: Node, sourceFile: SourceFile): TextRange {
         return createRange(node.getStart(sourceFile), node.end);
     }

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment1.ts

@@ -8,10 +8,14 @@
 //// let files: Configfiles;
 //// files = {
 ////    /*0*/: '',
-////    '/*1*/': ''
+////    '[|/*1*/|]': ''
 //// }
 
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] },
 );

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment2.ts

@@ -13,11 +13,15 @@
 //// config = {
 ////    files: {
 ////        /*0*/: '',
-////        '/*1*/': ''
+////        '[|/*1*/|]': ''
 ////    }
 //// }
 
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] },
 );

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment3.ts

@@ -12,10 +12,14 @@
 ////      'jspm:browser': string;
 ////  } = {
 ////         jspm: "",
-////         '/*1*/': ""
+////         '[|/*1*/|]': ""
 ////  }
 
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] }
 );

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment4.ts

@@ -8,11 +8,14 @@
 //// function foo(c: ConfigFiles) {}
 //// foo({
 ////     j/*0*/: "",
-////     "/*1*/": "",
+////     "[|/*1*/|]": "",
 //// })
 
-
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] }
 );

tests/cases/fourslash/completionForStringLiteral.ts

@@ -1,9 +1,20 @@
 /// <reference path='fourslash.ts'/>
 
 ////type Options = "Option 1" | "Option 2" | "Option 3";
-////var x: Options = "/*1*/Option 3";
+////var x: Options = "[|/*1*/Option 3|]";
 ////
 ////function f(a: Options) { };
 ////f("/*2*/
 
-verify.completions({ marker: ["1", "2"], exact: ["Option 1", "Option 2", "Option 3"] });
+verify.completions(
+    { marker: "1", exact: [
+        { name: "Option 1", replacementSpan: test.ranges()[0] },
+        { name: "Option 2", replacementSpan: test.ranges()[0] },
+        { name: "Option 3", replacementSpan: test.ranges()[0] }
+    ] },
+    { marker: "2", exact: [
+        { name: "Option 1", replacementSpan: test.ranges()[1] },
+        { name: "Option 2", replacementSpan: test.ranges()[1] },
+        { name: "Option 3", replacementSpan: test.ranges()[1] }
+    ] }
+);

tests/cases/fourslash/completionForStringLiteral10.ts

@@ -2,6 +2,9 @@
 
 ////type As = 'arf' | 'abacus' | 'abaddon';
 ////let a: As;
-////if ('/**/' != a
+////if ('[|/**/|]' != a
 
-verify.completions({ marker: "", exact: ["arf", "abacus", "abaddon"] });
+verify.completions({ marker: "", exact: ["arf", "abacus", "abaddon"].map(name => ({
+    name,
+    replacementSpan: test.ranges()[0]
+})) });

tests/cases/fourslash/completionForStringLiteral11.ts

@@ -3,7 +3,7 @@
 ////type As = 'arf' | 'abacus' | 'abaddon';
 ////let a: As;
 ////switch (a) {
-////    case '/**/
+////    case '[|/**/|]
 ////}
 
 verify.completions({ marker: "", exact: ["arf", "abacus", "abaddon" ] });