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,
+});