Adds linked editing for JSX tags

src/harness/client.ts

@@ -726,6 +726,10 @@ export class SessionClient implements LanguageService {
         return notImplemented();
     }
 
+    getLinkedEditingAtPosition(_fileName: string, _position: number): never {
+        return notImplemented();
+    }
+
     getSpanOfEnclosingComment(_fileName: string, _position: number, _onlyMultiLine: boolean): TextSpan {
         return notImplemented();
     }

src/harness/fourslashImpl.ts

@@ -3444,6 +3444,14 @@ export class TestState {
         }
     }
 
+    public verifyLinkedEditing(map: { [markerName: string]: ts.LinkedEditingInfo | undefined }): void {
+        for (const markerName in map) {
+            this.goToMarker(markerName);
+            const actual = this.languageService.getLinkedEditingAtPosition(this.activeFile.fileName, this.currentCaretPosition);
+            assert.deepEqual(actual, map[markerName], markerName);
+        }
+    }
+
     public verifyMatchingBracePosition(bracePosition: number, expectedMatchPosition: number) {
         const actual = this.languageService.getBraceMatchingAtPosition(this.activeFile.fileName, bracePosition);
 

src/harness/fourslashInterfaceImpl.ts

@@ -189,6 +189,10 @@ export class VerifyNegatable {
         this.state.verifyJsxClosingTag(map);
     }
 
+    public linkedEditing(map: { [markerName: string]: ts.LinkedEditingInfo | undefined }): void {
+        this.state.verifyLinkedEditing(map);
+    }
+
     public isInCommentAtPosition(onlyMultiLineDiverges?: boolean) {
         this.state.verifySpanOfEnclosingComment(this.negative, onlyMultiLineDiverges);
     }

src/harness/harnessLanguageService.ts

@@ -593,6 +593,9 @@ class LanguageServiceShimProxy implements ts.LanguageService {
     getJsxClosingTagAtPosition(): never {
         throw new Error("Not supported on the shim.");
     }
+    getLinkedEditingAtPosition(): never {
+        throw new Error("Not supported on the shim.");
+    }
     getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): ts.TextSpan {
         return unwrapJSONCallResult(this.shim.getSpanOfEnclosingComment(fileName, position, onlyMultiLine));
     }

src/server/protocol.ts

@@ -23,6 +23,7 @@ import {
 
 export const enum CommandTypes {
     JsxClosingTag = "jsxClosingTag",
+    LinkedEditing = "LinkedEditing",
     Brace = "brace",
     /** @internal */
     BraceFull = "brace-full",
@@ -1101,6 +1102,18 @@ export interface JsxClosingTagResponse extends Response {
     readonly body: TextInsertion;
 }
 
+export interface LinkedEditingRequest extends FileLocationRequest {
+    readonly command: CommandTypes.LinkedEditing;
+}
+
+export interface LinkedEditingRanges {
+    ranges: TextSpan[];
+    wordPattern?: string;
+}
+
+export interface LinkedEditingResponse extends Response {
+    readonly body: LinkedEditingRanges;
+}
 
 /**
  * Get document highlights request; value of command field is

src/server/session.ts

@@ -83,6 +83,7 @@ import {
     JSDocTagInfo,
     LanguageServiceMode,
     LineAndCharacter,
+    LinkedEditingInfo,
     map,
     mapDefined,
     mapDefinedIterator,
@@ -1802,6 +1803,15 @@ export class Session<TMessage = string> implements EventSender {
         return tag === undefined ? undefined : { newText: tag.newText, caretOffset: 0 };
     }
 
+    private getLinkedEditing(args: protocol.FileLocationRequestArgs): protocol.LinkedEditingRanges | undefined {
+        const { file, languageService } = this.getFileAndLanguageServiceForSyntacticOperation(args);
+        const position = this.getPositionInFile(args, file);
+        const linkedEditInfo = languageService.getLinkedEditingAtPosition(file, position);
+        const scriptInfo = this.projectService.getScriptInfoForNormalizedPath(file);
+        if (scriptInfo === undefined || linkedEditInfo === undefined) return undefined;
+        return convertLinkedEditInfoToRanges(linkedEditInfo, scriptInfo);
+    }
+
     private getDocumentHighlights(args: protocol.DocumentHighlightsRequestArgs, simplifiedResult: boolean): readonly protocol.DocumentHighlightsItem[] | readonly DocumentHighlights[] {
         const { file, project } = this.getFileAndProject(args);
         const position = this.getPositionInFile(args, file);
@@ -3389,6 +3399,9 @@ export class Session<TMessage = string> implements EventSender {
         [protocol.CommandTypes.JsxClosingTag]: (request: protocol.JsxClosingTagRequest) => {
             return this.requiredResponse(this.getJsxClosingTag(request.arguments));
         },
+        [protocol.CommandTypes.LinkedEditing]: (request: protocol.LinkedEditingRequest) => {
+            return this.requiredResponse(this.getLinkedEditing(request.arguments));
+        },
         [protocol.CommandTypes.GetCodeFixes]: (request: protocol.CodeFixRequest) => {
             return this.requiredResponse(this.getCodeFixes(request.arguments, /*simplifiedResult*/ true));
         },
@@ -3644,6 +3657,20 @@ function positionToLineOffset(info: ScriptInfoOrConfig, position: number): proto
     return isConfigFile(info) ? locationFromLineAndCharacter(info.getLineAndCharacterOfPosition(position)) : info.positionToLineOffset(position);
 }
 
+function convertLinkedEditInfoToRanges(linkedEdit: LinkedEditingInfo, scriptInfo: ScriptInfo): protocol.LinkedEditingRanges {
+    return {
+        ranges: linkedEdit.ranges.map(
+            s => {
+                return {
+                start: scriptInfo.positionToLineOffset(s.start),
+                end: scriptInfo.positionToLineOffset(s.start + s.length)
+                };
+            }
+        ),
+        wordPattern: linkedEdit.wordPattern,
+    };
+}
+
 function locationFromLineAndCharacter(lc: LineAndCharacter): protocol.Location {
     return { line: lc.line + 1, offset: lc.character + 1 };
 }

src/services/services.ts

@@ -71,6 +71,7 @@ import {
     filter,
     find,
     FindAllReferences,
+    findAncestor,
     findChildOfKind,
     findPrecedingToken,
     first,
@@ -185,10 +186,12 @@ import {
     JSDocTagInfo,
     JsonSourceFile,
     JsxAttributes,
+    JsxClosingElement,
     JsxClosingTagInfo,
     JsxElement,
     JsxEmit,
     JsxFragment,
+    JsxOpeningElement,
     LanguageService,
     LanguageServiceHost,
     LanguageServiceMode,
@@ -197,6 +200,7 @@ import {
     length,
     LineAndCharacter,
     lineBreakPart,
+    LinkedEditingInfo,
     LiteralType,
     map,
     mapDefined,
@@ -2478,6 +2482,51 @@ export function createLanguageService(
         }
     }
 
+    function getLinkedEditingAtPosition(fileName: string, position: number): LinkedEditingInfo | undefined {
+        const sourceFile = syntaxTreeCache.getCurrentSourceFile(fileName);
+        const token = findPrecedingToken(position, sourceFile);
+        if (!token) return undefined;
+
+        if (isJsxFragment(token.parent.parent)) {
+            const openPos = token.parent.parent.openingFragment.getStart(sourceFile) + 1; // "<".length
+            const closePos = token.parent.parent.closingFragment.getStart(sourceFile) + 2; // "</".length
+
+            // only allows mirroring right after opening bracket: <| ></| >
+            if ((position !== openPos) && (position !== closePos)) return undefined;
+
+            const ranges = [{ start: openPos, length: 0 }, { start: closePos, length: 0 }];
+            const wordPattern = undefined;
+            return { ranges, wordPattern };
+        }
+        else {
+            // looks for mirroring in element tag names
+            const tag = findAncestor(token,
+                n => {
+                    if (!n.parent.parent) return "quit";
+                    else if (isJsxElement(n.parent.parent)) {
+                        if (isJsxOpeningElement(n.parent) || isJsxClosingElement(n.parent)) {
+                            return true;
+                        }
+                        return "quit";
+                    }
+                    return false;
+                });
+            if (!tag) return undefined;
+
+            const element = tag.parent as JsxOpeningElement | JsxClosingElement;
+            const openTag = { start: element.parent.openingElement.tagName.getStart(sourceFile), end: element.parent.openingElement.tagName.end };
+            const endTag = { start: element.parent.closingElement.tagName.getStart(sourceFile), end: element.parent.closingElement.tagName.end };
+
+            // only return a mirror if the cursor is within a tag name
+            if (!(openTag.start <= position && position <= openTag.end || endTag.start <= position && position <= endTag.end)) return undefined;
+            if (element.parent.openingElement.tagName.getText(sourceFile) !== element.parent.closingElement.tagName.getText(sourceFile)) return undefined;
+
+            const ranges = [{ start: openTag.start, length: openTag.end - openTag.start }, { start: endTag.start, length: endTag.end - endTag.start }];
+            const wordPattern = element.tagName.getText(sourceFile);
+            return { ranges, wordPattern };
+        }
+    }
+
     function getLinesForRange(sourceFile: SourceFile, textRange: TextRange) {
         return {
             lineStarts: sourceFile.getLineStarts(),
@@ -3009,6 +3058,7 @@ export function createLanguageService(
         getDocCommentTemplateAtPosition,
         isValidBraceCompletionAtPosition,
         getJsxClosingTagAtPosition,
+        getLinkedEditingAtPosition,
         getSpanOfEnclosingComment,
         getCodeFixesAtPosition,
         getCombinedCodeFix,

src/services/types.ts

@@ -607,6 +607,7 @@ export interface LanguageService {
      * Editors should call this after `>` is typed.
      */
     getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined;
+    getLinkedEditingAtPosition(fileName: string, position: number): LinkedEditingInfo | undefined;
 
     getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined;
 
@@ -661,6 +662,11 @@ export interface JsxClosingTagInfo {
     readonly newText: string;
 }
 
+export interface LinkedEditingInfo {
+    readonly ranges: TextSpan[];
+    wordPattern?: string;
+}
+
 export interface CombinedCodeFixScope { type: "file"; fileName: string; }
 
 export const enum OrganizeImportsMode {

tests/baselines/reference/api/tsserverlibrary.d.ts

@@ -89,6 +89,7 @@ declare namespace ts {
         namespace protocol {
             enum CommandTypes {
                 JsxClosingTag = "jsxClosingTag",
+                LinkedEditing = "LinkedEditing",
                 Brace = "brace",
                 BraceCompletion = "braceCompletion",
                 GetSpanOfEnclosingComment = "getSpanOfEnclosingComment",
@@ -877,6 +878,16 @@ declare namespace ts {
             interface JsxClosingTagResponse extends Response {
                 readonly body: TextInsertion;
             }
+            interface LinkedEditingRequest extends FileLocationRequest {
+                readonly command: CommandTypes.LinkedEditing;
+            }
+            interface LinkedEditingRanges {
+                ranges: TextSpan[];
+                wordPattern?: string;
+            }
+            interface LinkedEditingResponse extends Response {
+                readonly body: LinkedEditingRanges;
+            }
             /**
              * Get document highlights request; value of command field is
              * "documentHighlights". Return response giving spans that are relevant
@@ -3847,6 +3858,7 @@ declare namespace ts {
             private getSemanticDiagnosticsSync;
             private getSuggestionDiagnosticsSync;
             private getJsxClosingTag;
+            private getLinkedEditing;
             private getDocumentHighlights;
             private provideInlayHints;
             private setCompilerOptionsForInferredProjects;
@@ -9977,6 +9989,7 @@ declare namespace ts {
          * Editors should call this after `>` is typed.
          */
         getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined;
+        getLinkedEditingAtPosition(fileName: string, position: number): LinkedEditingInfo | undefined;
         getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined;
         toLineColumnOffset?(fileName: string, position: number): LineAndCharacter;
         getCodeFixesAtPosition(fileName: string, start: number, end: number, errorCodes: readonly number[], formatOptions: FormatCodeSettings, preferences: UserPreferences): readonly CodeFixAction[];
@@ -10006,6 +10019,10 @@ declare namespace ts {
     interface JsxClosingTagInfo {
         readonly newText: string;
     }
+    interface LinkedEditingInfo {
+        readonly ranges: TextSpan[];
+        wordPattern?: string;
+    }
     interface CombinedCodeFixScope {
         type: "file";
         fileName: string;

tests/baselines/reference/api/typescript.d.ts

@@ -6107,6 +6107,7 @@ declare namespace ts {
          * Editors should call this after `>` is typed.
          */
         getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined;
+        getLinkedEditingAtPosition(fileName: string, position: number): LinkedEditingInfo | undefined;
         getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined;
         toLineColumnOffset?(fileName: string, position: number): LineAndCharacter;
         getCodeFixesAtPosition(fileName: string, start: number, end: number, errorCodes: readonly number[], formatOptions: FormatCodeSettings, preferences: UserPreferences): readonly CodeFixAction[];
@@ -6136,6 +6137,10 @@ declare namespace ts {
     interface JsxClosingTagInfo {
         readonly newText: string;
     }
+    interface LinkedEditingInfo {
+        readonly ranges: TextSpan[];
+        wordPattern?: string;
+    }
     interface CombinedCodeFixScope {
         type: "file";
         fileName: string;

tests/cases/fourslash/fourslash.ts

@@ -260,6 +260,9 @@ declare namespace FourSlashInterface {
         implementationListIsEmpty(): void;
         isValidBraceCompletionAtPosition(openingBrace?: string): void;
         jsxClosingTag(map: { [markerName: string]: { readonly newText: string } | undefined }): void;
+        linkedEditing(map: { [markerName: string]: {
+            readonly ranges : { start: number, length: number }[],
+            wordPattern? : string ;} | undefined }): void;
         isInCommentAtPosition(onlyMultiLineDiverges?: boolean): void;
         codeFix(options: {
             description: string | [string, ...(string | number)[]] | DiagnosticIgnoredInterpolations,

tests/cases/fourslash/linkedEditingJsxTag1.ts

@@ -0,0 +1,71 @@
+/// <reference path='fourslash.ts' />
+
+// the content of basic.tsx
+//const jsx = (
+//   <div>
+//   </div>
+//);
+
+// @Filename: /basic.tsx
+////const jsx = (
+////    </*0*/d/*1*/iv/*2*/>/*3*/
+////    </*4*///*5*/di/*6*/v/*7*/>/*8*/
+////);
+
+// @Filename: /whitespaceInvalidClosing.tsx
+////const jsx = (
+////   <div>
+////   < /*9*/ /div>
+////);
+
+// @Filename: /whitespace.tsx
+////const whitespaceOpening = (
+////   </*10*/ /*11*/div/*12*/ /*13*/> /*14*/
+////   <//*15*/di/*16*/v>
+////);
+////const whitespaceClosing = (
+////   </*17*/di/*18*/v>
+////   <//*19*/ /*20*/div/*21*/ /*22*/> /*23*/
+////);
+
+const markers = test.markers();
+const linkedCursors1 = {
+    ranges: [{ start: markers[0].position, length: 3 }, { start: markers[5].position, length: 3 }],
+    wordPattern: 'div'
+};
+const linkedCursors2 = {
+    ranges: [{ start: markers[11].position, length: 3 }, { start: markers[15].position, length: 3 }],
+    wordPattern: 'div'
+};
+const linkedCursors3 = {
+    ranges: [{ start: markers[17].position, length: 3 }, { start: markers[20].position, length: 3 }],
+    wordPattern: 'div'
+};
+
+verify.linkedEditing( {
+    "0": linkedCursors1,
+    "1": linkedCursors1,
+    "2": linkedCursors1,
+    "3": undefined,
+    "4": undefined,
+    "5": linkedCursors1,
+    "6": linkedCursors1,
+    "7": linkedCursors1,
+    "8": undefined,
+    "9": undefined, // I believe this should be an invalid tag
+    "10": undefined,
+    "11": linkedCursors2,
+    "12": linkedCursors2,
+    "13": undefined,
+    "14": undefined,
+    "15": linkedCursors2,
+    "16": linkedCursors2,
+    "17": linkedCursors3,
+    "18": linkedCursors3,
+    "19": undefined,
+    "20": linkedCursors3,
+    "21": linkedCursors3,
+    "22": undefined,
+    "23": undefined,
+    });
+