Adds linked editing for JSX tags

src/harness/client.ts

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

src/harness/fourslashImpl.ts

@@ -3444,6 +3444,14 @@ export class TestState {
         }
     }
 
+    public verifyJsxLinkedEdit(map: {[markerName: string]: ts.JsxLinkedEditInfo | undefined}): void {
+        for (const markerName in map) {
+            this.goToMarker(markerName);
+            const actual = this.languageService.getJsxLinkedEditAtPosition(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,11 @@ export class VerifyNegatable {
         this.state.verifyJsxClosingTag(map);
     }
 
+    public jsxLinkedEdit(map: { [markerName: string]: ts.JsxLinkedEditInfo | undefined }): void {
+        this.state.verifyJsxLinkedEdit(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.");
     }
+    getJsxLinkedEditAtPosition(): 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

@@ -4,6 +4,7 @@ import {
     EndOfLineState,
     FileExtensionInfo,
     HighlightSpanKind,
+    JsxLinkedEditInfo,
     MapLike,
     OutliningSpanKind,
     OutputFile,
@@ -23,6 +24,7 @@ import {
 
 export const enum CommandTypes {
     JsxClosingTag = "jsxClosingTag",
+    JsxLinkedEdit = "jsxLinkedEdit",
     Brace = "brace",
     /** @internal */
     BraceFull = "brace-full",
@@ -1101,6 +1103,14 @@ export interface JsxClosingTagResponse extends Response {
     readonly body: TextInsertion;
 }
 
+export interface JsxLinkedEditRequest extends FileLocationRequest {
+    readonly command: CommandTypes.JsxLinkedEdit;
+}
+
+export interface JsxLinkedEditResponse extends Response {
+    readonly info: JsxLinkedEditInfo;
+}
+
 
 /**
  * Get document highlights request; value of command field is

src/server/session.ts

@@ -3389,6 +3389,9 @@ export class Session<TMessage = string> implements EventSender {
         [protocol.CommandTypes.JsxClosingTag]: (request: protocol.JsxClosingTagRequest) => {
             return this.requiredResponse(this.getJsxClosingTag(request.arguments));
         },
+        [protocol.CommandTypes.JsxLinkedEdit]: (request: protocol.JsxLinkedEditRequest) => {
+            return this.requiredResponse(this.getJsxClosingTag(request.arguments));
+        },
         [protocol.CommandTypes.GetCodeFixes]: (request: protocol.CodeFixRequest) => {
             return this.requiredResponse(this.getCodeFixes(request.arguments, /*simplifiedResult*/ true));
         },

src/services/services.ts

@@ -71,7 +71,9 @@ import {
     filter,
     find,
     FindAllReferences,
+    findAncestor,
     findChildOfKind,
+    findNextToken,
     findPrecedingToken,
     first,
     firstDefined,
@@ -153,10 +155,13 @@ import {
     isJSDocCommentContainingNode,
     isJsxAttributes,
     isJsxClosingElement,
+    isJsxClosingFragment,
     isJsxElement,
     isJsxFragment,
     isJsxOpeningElement,
     isJsxOpeningFragment,
+    isJsxSelfClosingElement,
+    isJSXTagName,
     isJsxText,
     isLabelName,
     isLiteralComputedPropertyDeclarationName,
@@ -185,10 +190,13 @@ import {
     JSDocTagInfo,
     JsonSourceFile,
     JsxAttributes,
+    JsxClosingElement,
     JsxClosingTagInfo,
     JsxElement,
     JsxEmit,
     JsxFragment,
+    JsxLinkedEditInfo,
+    JsxOpeningElement,
     LanguageService,
     LanguageServiceHost,
     LanguageServiceMode,
@@ -2478,6 +2486,58 @@ export function createLanguageService(
         }
     }
 
+    function getJsxLinkedEditAtPosition(fileName: string, position: number): JsxLinkedEditInfo | undefined {
+        const sourceFile = syntaxTreeCache.getCurrentSourceFile(fileName);
+        const token = findPrecedingToken(position, sourceFile);
+        if (!token) return undefined;
+
+        let wordPattern: string | undefined;
+        let ranges: {start: number, end: number}[] = [];
+
+        if ((isJsxOpeningFragment(token.parent) && token.kind===SyntaxKind.LessThanToken)
+            || (isJsxClosingFragment(token.parent) && token.kind===SyntaxKind.SlashToken)){
+
+            const openPos = token.parent.parent.openingFragment.pos + 1;
+            const closePos = token.parent.parent.closingFragment.pos + 2;
+
+            //TODO: fragments with whitespace?
+            ranges = ranges.concat({ start : openPos, end : openPos });
+            ranges = ranges.concat({ start : closePos, end : closePos });
+            wordPattern = undefined;
+        }
+        else if (isJsxFragment(token.parent.parent)) {
+            return undefined;
+        }
+        else {
+            const tag = findAncestor(token,
+                (n) => {
+                    if (!n.parent.parent) return "quit";
+                    else if (isJsxElement(n.parent.parent)) {
+                        if ((isJSXTagName(n) && !isJsxSelfClosingElement(n.parent))
+                            || (n.kind===SyntaxKind.LessThanToken && isJSXTagName(findNextToken(n,n.parent,sourceFile) ?? n))
+                            || n.kind===SyntaxKind.SlashToken) {
+                            return true;
+                        }
+                        return "quit";
+                    }
+                    return false;
+                }
+                )?.parent as JsxOpeningElement | JsxClosingElement | undefined;
+            if (!tag) return undefined;
+
+            ranges = ranges.concat({ start : tag.parent.openingElement.tagName.getStart(), end : tag.parent.openingElement.tagName.end });
+            ranges = ranges.concat({ start : tag.parent.closingElement.tagName.getStart(), end : tag.parent.closingElement.tagName.end });
+
+            if (!(ranges[0].start <= position && position <= ranges[0].end || ranges[1].start <= position && position <= ranges[1].end)) return undefined;
+
+            if (tag.parent.openingElement.tagName.getText() === tag.parent.closingElement.tagName.getText()) {
+                wordPattern = tag.tagName.getText();
+            }
+            else return undefined;
+        }
+        return { ranges, wordPattern };
+    }
+
     function getLinesForRange(sourceFile: SourceFile, textRange: TextRange) {
         return {
             lineStarts: sourceFile.getLineStarts(),
@@ -3009,6 +3069,7 @@ export function createLanguageService(
         getDocCommentTemplateAtPosition,
         isValidBraceCompletionAtPosition,
         getJsxClosingTagAtPosition,
+        getJsxLinkedEditAtPosition,
         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;
+    getJsxLinkedEditAtPosition(fileName: string, currentCaretPosition: number): JsxLinkedEditInfo | unknown;
 
     getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined;
 
@@ -661,6 +662,11 @@ export interface JsxClosingTagInfo {
     readonly newText: string;
 }
 
+export interface JsxLinkedEditInfo {
+    readonly ranges: {start: number, end: number}[];
+    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",
+                JsxLinkedEdit = "jsxLinkedEdit",
                 Brace = "brace",
                 BraceCompletion = "braceCompletion",
                 GetSpanOfEnclosingComment = "getSpanOfEnclosingComment",
@@ -877,6 +878,12 @@ declare namespace ts {
             interface JsxClosingTagResponse extends Response {
                 readonly body: TextInsertion;
             }
+            interface JsxLinkedEditRequest extends FileLocationRequest {
+                readonly command: CommandTypes.JsxLinkedEdit;
+            }
+            interface JsxLinkedEditResponse extends Response {
+                readonly info: JsxLinkedEditInfo;
+            }
             /**
              * Get document highlights request; value of command field is
              * "documentHighlights". Return response giving spans that are relevant
@@ -9977,6 +9984,7 @@ declare namespace ts {
          * Editors should call this after `>` is typed.
          */
         getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined;
+        getJsxLinkedEditAtPosition(fileName: string, currentCaretPosition: number): JsxLinkedEditInfo | unknown;
         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 +10014,13 @@ declare namespace ts {
     interface JsxClosingTagInfo {
         readonly newText: string;
     }
+    interface JsxLinkedEditInfo {
+        readonly ranges: {
+            start: number;
+            end: number;
+        }[];
+        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;
+        getJsxLinkedEditAtPosition(fileName: string, currentCaretPosition: number): JsxLinkedEditInfo | unknown;
         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,13 @@ declare namespace ts {
     interface JsxClosingTagInfo {
         readonly newText: string;
     }
+    interface JsxLinkedEditInfo {
+        readonly ranges: {
+            start: number;
+            end: number;
+        }[];
+        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;
+        jsxLinkedEdit(map: { [markerName: string]: {
+            readonly ranges : {start:number, end:number}[],
+            wordPattern? : string ;} | undefined }): void;
         isInCommentAtPosition(onlyMultiLineDiverges?: boolean): void;
         codeFix(options: {
             description: string | [string, ...(string | number)[]] | DiagnosticIgnoredInterpolations,

tests/cases/fourslash/jsxTagLinkedEdit1.ts

@@ -0,0 +1,55 @@
+/// <reference path='fourslash.ts' />
+
+// the content of basic.tsx
+//const jsx = (
+//   <div>
+//   </div>
+//);
+
+// @Filename: /basic.tsx
+////const jsx = (
+////    </*0*/d/*1*/iv/*2*/>/*7*/
+////    </*6*///*3*/di/*4*/v/*5*/>/*8*/
+////);
+
+// @Filename: /whitespaceInvalidClosing.tsx
+////const jsx = (
+////   <div>
+////   < /*9*/ /div>
+////);
+
+// @Filename: /whitespaceOpening.tsx
+////const jsx3 = (
+////   </*10*/ /*11*/div/*12*/ /*13*/> /*14*/
+////   </di/*A*/v>
+////);
+
+// @Filename: /whitespaceClosing.tsx
+////const jsx = (
+////   <di/*B*/v>
+////   <//*15*/ /*16*/div/*17*/ /*18*/> /*19*/
+////);
+
+
+
+const linkedCursors1 = {ranges: [{start: 19, end: 22}, 
+                                 {start: 30, end: 33}],
+                        wordPattern : 'div'};
+
+verify.jsxLinkedEdit( {
+    "0": linkedCursors1,
+    "1": linkedCursors1,
+    "2": linkedCursors1,
+    "3": linkedCursors1,
+    "4": linkedCursors1,
+    "5": linkedCursors1,
+    "6": undefined,
+    "7": undefined,
+    "8": undefined,
+    "9": undefined, // I believe this should be an invalid tag
+    "10": undefined,
+    "13": undefined,
+    "15": undefined,
+    "18": undefined,
+    });
+

tests/cases/fourslash/jsxTagLinkedEdit2.ts

@@ -0,0 +1,24 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /attrs.tsx
+////const jsx = (
+////   </*0*/div/*1*/ /*5*/styl/*2*/e={{ color: 'red' }}/*6*/>/*4*/
+////      <p>
+////         <img />
+////      </p>
+////   </di/*3*/v>
+////);
+
+const linkedCursors2 = {ranges: [{start: 18, end: 21}, 
+                                 {start: 91, end: 94}],
+                        wordPattern : 'div'};
+
+verify.jsxLinkedEdit( {
+    "0": linkedCursors2,
+    "1": linkedCursors2,
+    "2": undefined,
+    "3": linkedCursors2,
+    "4": undefined,
+    "5": undefined,
+    "6": undefined,
+});

tests/cases/fourslash/jsxTagLinkedEdit3.ts

@@ -0,0 +1,25 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /selfClosing.tsx
+////const jsx = (
+////   <div>/*1*/
+////      <p>/*4*/
+////         /*5*/<img/*2*/ /*3*//>
+////     /*6*/ </p>/*8*/
+////   /*7*/</div>
+////);
+
+// const linkedCursors3 = {ranges: [{start: 18, end: 21}, 
+//                                  {start: 91, end: 94}],
+//                         wordPattern : 'div'};
+
+verify.jsxLinkedEdit( {
+    "1": undefined,
+    "2": undefined,
+    "3": undefined,
+    "4": undefined,
+    "5": undefined,
+    "6": undefined,
+    "7": undefined,
+    "8": undefined,
+});