Adds linked editing for JSX tags

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

@@ -23,6 +23,7 @@ import {
 
 export const enum CommandTypes {
     JsxClosingTag = "jsxClosingTag",
+    JsxLinkedEdit = "jsxLinkedEdit",
     Brace = "brace",
     /** @internal */
     BraceFull = "brace-full",
@@ -1101,6 +1102,15 @@ export interface JsxClosingTagResponse extends Response {
     readonly body: TextInsertion;
 }
 
+export interface JsxLinkedEditRequest extends FileLocationRequest {
+    readonly command: CommandTypes.JsxLinkedEdit;
+    // ISABEL?
+}
+
+export interface JsxLinkedEditResponse extends Response {
+    // ISABEL?
+}
+
 
 /**
  * Get document highlights request; value of command field is

src/server/session.ts

@@ -3389,6 +3389,10 @@ 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));
+            // ISABEL what ;
+        },
         [protocol.CommandTypes.GetCodeFixes]: (request: protocol.CodeFixRequest) => {
             return this.requiredResponse(this.getCodeFixes(request.arguments, /*simplifiedResult*/ true));
         },

src/services/services.ts

@@ -71,6 +71,7 @@ import {
     filter,
     find,
     FindAllReferences,
+    findAncestor,
     findChildOfKind,
     findPrecedingToken,
     first,
@@ -153,10 +154,13 @@ import {
     isJSDocCommentContainingNode,
     isJsxAttributes,
     isJsxClosingElement,
+    isJsxClosingFragment,
     isJsxElement,
     isJsxFragment,
     isJsxOpeningElement,
     isJsxOpeningFragment,
+    isJsxSelfClosingElement,
+    isJSXTagName,
     isJsxText,
     isLabelName,
     isLiteralComputedPropertyDeclarationName,
@@ -185,10 +189,13 @@ import {
     JSDocTagInfo,
     JsonSourceFile,
     JsxAttributes,
+    JsxClosingElement,
     JsxClosingTagInfo,
     JsxElement,
     JsxEmit,
     JsxFragment,
+    JsxLinkedEditInfo,
+    JsxOpeningElement,
     LanguageService,
     LanguageServiceHost,
     LanguageServiceMode,
@@ -2478,6 +2485,57 @@ 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}[] = [];
+
+        // check edge cases <| and >|
+        if (token.kind===SyntaxKind.GreaterThanToken && isJsxOpeningElement(token.parent)) return undefined;
+        if (token.kind===SyntaxKind.LessThanToken && isJsxClosingElement(token.parent)) return undefined;
+
+        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;
+
+            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 || n.kind===SyntaxKind.SlashToken) {
+                            return true };
+                        return "quit";
+                    }
+                    else return false;
+                }
+                )?.parent as JsxOpeningElement | JsxClosingElement | undefined;
+            if (!tag) return undefined;
+
+            ranges = ranges.concat({start : tag.parent.openingElement.tagName.pos, end : tag.parent.openingElement.tagName.end});
+            ranges = ranges.concat({start : tag.parent.closingElement.tagName.pos, end : tag.parent.closingElement.tagName.end});
+
+            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 +3067,7 @@ export function createLanguageService(
         getDocCommentTemplateAtPosition,
         isValidBraceCompletionAtPosition,
         getJsxClosingTagAtPosition,
+        getJsxLinkedEditAtPosition: 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",
+                JsxMirrorCursor = "jsxMirrorCursor",
                 Brace = "brace",
                 BraceCompletion = "braceCompletion",
                 GetSpanOfEnclosingComment = "getSpanOfEnclosingComment",
@@ -877,6 +878,8 @@ declare namespace ts {
             interface JsxClosingTagResponse extends Response {
                 readonly body: TextInsertion;
             }
+            interface mirrror {}
+            // ISABEL
             /**
              * Get document highlights request; value of command field is
              * "documentHighlights". Return response giving spans that are relevant
@@ -3847,6 +3850,7 @@ declare namespace ts {
             private getSemanticDiagnosticsSync;
             private getSuggestionDiagnosticsSync;
             private getJsxClosingTag;
+            private getJsxMirrorCursor;
             private getDocumentHighlights;
             private provideInlayHints;
             private setCompilerOptionsForInferredProjects;

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

@@ -6111,6 +6111,8 @@ declare namespace ts {
         toLineColumnOffset?(fileName: string, position: number): LineAndCharacter;
         getCodeFixesAtPosition(fileName: string, start: number, end: number, errorCodes: readonly number[], formatOptions: FormatCodeSettings, preferences: UserPreferences): readonly CodeFixAction[];
         getCombinedCodeFix(scope: CombinedCodeFixScope, fixId: {}, formatOptions: FormatCodeSettings, preferences: UserPreferences): CombinedCodeActions;
+        // ISABEL change name?
+        getMirrorCursorPosition(fileName: string, position: number): JsxMirrorCursorInfo | undefined;
         applyCodeActionCommand(action: CodeActionCommand, formatSettings?: FormatCodeSettings): Promise<ApplyCodeActionCommandResult>;
         applyCodeActionCommand(action: CodeActionCommand[], formatSettings?: FormatCodeSettings): Promise<ApplyCodeActionCommandResult[]>;
         applyCodeActionCommand(action: CodeActionCommand | CodeActionCommand[], formatSettings?: FormatCodeSettings): Promise<ApplyCodeActionCommandResult | ApplyCodeActionCommandResult[]>;
@@ -6136,6 +6138,12 @@ declare namespace ts {
     interface JsxClosingTagInfo {
         readonly newText: string;
     }
+    interface JsxMirrorCursorInfo {
+        readonly startLine : number;
+        readonly startCharacter : number;
+        readonly endLine : number;
+        readonly endCharacter : number;
+    } 
     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,42 @@
+/// <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*/>/*9*/
+////);
+////const jsx2 = (
+////   <div>
+////   < /*8*/ /div>
+////);
+////const jsx3 = (
+////   </*10*/ div>
+////   </div>
+////);
+
+
+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,
+    // "10":undefined, // if still a comment, case doesnt yet work !!!!
+    });
+

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, // if still a comment, case doesnt yet work !!!!
+    "6": undefined,
+});

tests/cases/fourslash/jsxTagLinkedEdit3.ts

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

tests/cases/fourslash/jsxTagLinkedEdit4.ts

@@ -0,0 +1,33 @@
+/// <reference path='fourslash.ts' />
+
+// for readability purposes
+//const jsx = (
+//   <div<T>>
+//      <p>
+//         <img />
+//      </p>
+//   </div>
+//);
+
+
+// @Filename: /typeTag.tsx
+////const jsx = (
+////   </*0*/div/*1*/</*2*/T/*3*/>/*4*/>
+////      <p>
+////         <img />
+////      </p>
+////   </di/*5*/v>
+////);
+
+const linkedCursors4 = {ranges: [{start: 18, end: 21}, 
+                            {start: 69, end: 72}],
+                        wordPattern : 'div'};
+
+verify.jsxLinkedEdit( {
+    "0": linkedCursors4,
+    "1": linkedCursors4,
+    // "2": undefined,
+    "3": undefined,
+    "4": undefined,
+    "5": linkedCursors4, // if still a comment, this case doesnt yet work !!!!
+});

tests/cases/fourslash/jsxTagLinkedEdit5.ts

@@ -0,0 +1,18 @@
+/// <reference path='fourslash.ts' />
+
+// @FileName: /invalid1.tsx
+////const jsx = (
+////    <div/*4*/>
+////        <div/*5*/>
+////    </div/*6*/>
+////);
+
+const linkedCursors5 = {ranges: [{start: 33, end: 36}, 
+                            {start: 44, end: 47}],
+                        wordPattern : 'div'};
+
+verify.jsxLinkedEdit( {
+    "4": undefined,
+    "5": linkedCursors5,
+    "6": linkedCursors5,
+});