Add support for replace preserving case (jupyterlab#13778)

* Add support for replace preserving case

* Fix wrong color variable name

* Set `line-height` to center replace buttons, remove unused `border-radius`

* Fix search test after removing `jp-DocumentSearch-replace-entry` class

* Apply suggestions from code review

Co-authored-by: Frédéric Collonval <[email protected]>

* Update Playwright Snapshots

Co-authored-by: Frédéric Collonval <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

galata/test/jupyterlab/notebook-replace.test.ts-snapshots/replace-all-jupyterlab-linux.png

@@ -27,9 +27,9 @@ test('Search with a text', async ({ page }) => {
     });
   }, searchText);
 
-  expect(
-    await page.locator('input.jp-DocumentSearch-input').inputValue()
-  ).toEqual(searchText);
+  expect(await page.locator('[placeholder="Find"]').inputValue()).toEqual(
+    searchText
+  );
 });
 
 test('Search with a text and replacement', async ({ page }) => {
@@ -54,10 +54,10 @@ test('Search with a text and replacement', async ({ page }) => {
     [searchText, replaceText]
   );
 
-  expect(
-    await page.locator('input.jp-DocumentSearch-input').inputValue()
-  ).toEqual(searchText);
-  expect(
-    await page.locator('input.jp-DocumentSearch-replace-entry').inputValue()
-  ).toEqual(replaceText);
+  expect(await page.locator('[placeholder="Find"]').inputValue()).toEqual(
+    searchText
+  );
+  expect(await page.locator('[placeholder="Replace"]').inputValue()).toEqual(
+    replaceText
+  );
 });

galata/test/jupyterlab/notebook-replace.test.ts-snapshots/replace-in-cell-jupyterlab-linux.png

@@ -11,6 +11,7 @@ import {
   GenericSearchProvider,
   IBaseSearchProvider,
   IFilters,
+  IReplaceOptions,
   ISearchMatch,
   TextSearchEngine
 } from '@jupyterlab/documentsearch';
@@ -218,7 +219,11 @@ export class CellSearchProvider implements IBaseSearchProvider {
    * @param newText The replacement text.
    * @returns Whether a replace occurred.
    */
-  replaceCurrentMatch(newText: string): Promise<boolean> {
+  replaceCurrentMatch(
+    newText: string,
+    loop?: boolean,
+    options?: IReplaceOptions
+  ): Promise<boolean> {
     if (!this.isActive) {
       return Promise.resolve(false);
     }
@@ -244,10 +249,13 @@ export class CellSearchProvider implements IBaseSearchProvider {
         this.currentIndex = null;
         // Store the current position to highlight properly the next search hit
         this._lastReplacementPosition = editor.getCursorPosition();
+        const insertText = options?.preserveCase
+          ? GenericSearchProvider.preserveCase(match.text, newText)
+          : newText;
         this.cell.model.sharedModel.updateSource(
           match!.position,
           match!.position + match!.text.length,
-          newText
+          insertText
         );
         occurred = true;
       }
@@ -262,7 +270,10 @@ export class CellSearchProvider implements IBaseSearchProvider {
    * @param newText The replacement text.
    * @returns Whether a replace occurred.
    */
-  replaceAllMatches(newText: string): Promise<boolean> {
+  replaceAllMatches(
+    newText: string,
+    options?: IReplaceOptions
+  ): Promise<boolean> {
     if (!this.isActive) {
       return Promise.resolve(false);
     }
@@ -273,7 +284,10 @@ export class CellSearchProvider implements IBaseSearchProvider {
     const finalSrc = this.cmHandler.matches.reduce((agg, match) => {
       const start = match.position as number;
       const end = start + match.text.length;
-      const newStep = `${agg}${src.slice(lastEnd, start)}${newText}`;
+      const insertText = options?.preserveCase
+        ? GenericSearchProvider.preserveCase(match.text, newText)
+        : newText;
+      const newStep = `${agg}${src.slice(lastEnd, start)}${insertText}`;
       lastEnd = end;
       return newStep;
     }, '');

galata/test/jupyterlab/search.test.ts

@@ -31,7 +31,9 @@
 */
 
 import {
+  GenericSearchProvider,
   IBaseSearchProvider,
+  IReplaceOptions,
   ISearchMatch,
   TextSearchEngine
 } from '@jupyterlab/documentsearch';
@@ -272,7 +274,11 @@ export class CodeMirrorSearchProvider implements IBaseSearchProvider {
    *
    * @returns A promise that resolves with a boolean indicating whether a replace occurred.
    */
-  async replaceCurrentMatch(newText: string, loop?: boolean): Promise<boolean> {
+  async replaceCurrentMatch(
+    newText: string,
+    loop?: boolean,
+    options?: IReplaceOptions
+  ): Promise<boolean> {
     // If the current selection exactly matches the current match,
     // replace it.  Otherwise, just select the next match after the cursor.
     let replaceOccurred = false;
@@ -288,8 +294,14 @@ export class CodeMirrorSearchProvider implements IBaseSearchProvider {
       }
       const value = cursor.value;
       replaceOccurred = true;
+      const insertText = options?.preserveCase
+        ? GenericSearchProvider.preserveCase(
+            this.editor.doc.sliceString(cursor.value.from, cursor.value.to),
+            newText
+          )
+        : newText;
       this.editor.editor.dispatch({
-        changes: { from: value.from, to: value.to, insert: newText }
+        changes: { from: value.from, to: value.to, insert: insertText }
       });
     }
     await this.highlightNext();
@@ -303,7 +315,10 @@ export class CodeMirrorSearchProvider implements IBaseSearchProvider {
    *
    * @returns A promise that resolves with a boolean indicating whether a replace occurred.
    */
-  async replaceAllMatches(newText: string): Promise<boolean> {
+  async replaceAllMatches(
+    newText: string,
+    options?: IReplaceOptions
+  ): Promise<boolean> {
     let replaceOccurred = false;
     return new Promise((resolve, _) => {
       let cursor = new RegExpCursor(this.editor.doc, this._query.source, {
@@ -312,10 +327,16 @@ export class CodeMirrorSearchProvider implements IBaseSearchProvider {
       let changeSpec: ChangeSpec[] = [];
       while (!cursor.done) {
         replaceOccurred = true;
+        const insertText = options?.preserveCase
+          ? GenericSearchProvider.preserveCase(
+              this.editor.doc.sliceString(cursor.value.from, cursor.value.to),
+              newText
+            )
+          : newText;
         changeSpec.push({
           from: cursor.value.from,
           to: cursor.value.to,
-          insert: newText
+          insert: insertText
         });
         cursor = cursor.next();
       }

packages/cells/src/searchprovider.ts

@@ -5,7 +5,12 @@ import { VDomModel } from '@jupyterlab/ui-components';
 import { IObservableDisposable } from '@lumino/disposable';
 import { Debouncer } from '@lumino/polling';
 import { ISignal, Signal } from '@lumino/signaling';
-import { IFilter, IFilters, ISearchProvider } from './tokens';
+import {
+  IFilter,
+  IFilters,
+  IReplaceOptionsSupport,
+  ISearchProvider
+} from './tokens';
 
 /**
  * Search in a document model.
@@ -98,13 +103,34 @@ export class SearchDocumentModel
     return this.searchProvider.isReadOnly;
   }
 
+  /**
+   * Replace options support.
+   */
+  get replaceOptionsSupport(): IReplaceOptionsSupport | undefined {
+    return this.searchProvider.replaceOptionsSupport;
+  }
+
   /**
    * Parsing regular expression error message.
    */
   get parsingError(): string {
     return this._parsingError;
   }
 
+  /**
+   * Whether to preserve case when replacing.
+   */
+  get preserveCase(): boolean {
+    return this._preserveCase;
+  }
+  set preserveCase(v: boolean) {
+    if (this._preserveCase !== v) {
+      this._preserveCase = v;
+      this.stateChanged.emit();
+      this.refresh();
+    }
+  }
+
   /**
    * Replacement expression
    */
@@ -229,7 +255,9 @@ export class SearchDocumentModel
    * Replace all matches.
    */
   async replaceAllMatches(): Promise<void> {
-    await this.searchProvider.replaceAllMatches(this._replaceText);
+    await this.searchProvider.replaceAllMatches(this._replaceText, {
+      preserveCase: this.preserveCase
+    });
     // Emit state change as the index needs to be updated
     this.stateChanged.emit();
   }
@@ -238,7 +266,9 @@ export class SearchDocumentModel
    * Replace the current match.
    */
   async replaceCurrentMatch(): Promise<void> {
-    await this.searchProvider.replaceCurrentMatch(this._replaceText);
+    await this.searchProvider.replaceCurrentMatch(this._replaceText, true, {
+      preserveCase: this.preserveCase
+    });
     // Emit state change as the index needs to be updated
     this.stateChanged.emit();
   }
@@ -298,6 +328,7 @@ export class SearchDocumentModel
   private _caseSensitive = false;
   private _disposed = new Signal<this, void>(this);
   private _parsingError = '';
+  private _preserveCase = false;
   private _filters: IFilters = {};
   private _replaceText: string;
   private _searchDebouncer: Debouncer;

packages/codemirror/src/searchprovider.ts

@@ -3,7 +3,13 @@
 
 import { ISignal, Signal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
-import { IFilter, IFilters, ISearchMatch, ISearchProvider } from './tokens';
+import {
+  IFilter,
+  IFilters,
+  IReplaceOptions,
+  ISearchMatch,
+  ISearchProvider
+} from './tokens';
 
 /**
  * Abstract class implementing the search provider interface.
@@ -137,7 +143,11 @@ export abstract class SearchProvider<T extends Widget = Widget>
    *
    * @returns A promise that resolves with a boolean indicating whether a replace occurred.
    */
-  abstract replaceCurrentMatch(newText: string): Promise<boolean>;
+  abstract replaceCurrentMatch(
+    newText: string,
+    loop?: boolean,
+    options?: IReplaceOptions
+  ): Promise<boolean>;
 
   /**
    * Replace all matches in the widget with the provided text
@@ -146,9 +156,35 @@ export abstract class SearchProvider<T extends Widget = Widget>
    *
    * @returns A promise that resolves with a boolean indicating whether a replace occurred.
    */
-  abstract replaceAllMatches(newText: string): Promise<boolean>;
+  abstract replaceAllMatches(
+    newText: string,
+    options?: IReplaceOptions
+  ): Promise<boolean>;
+
+  /**
+   * Utility for copying the letter case from old to new text.
+   */
+  static preserveCase(oldText: string, newText: string): string {
+    if (oldText.toUpperCase() === oldText) {
+      return newText.toUpperCase();
+    }
+    if (oldText.toLowerCase() === oldText) {
+      return newText.toLowerCase();
+    }
+    if (toSentenceCase(oldText) === oldText) {
+      return toSentenceCase(newText);
+    }
+    return newText;
+  }
 
   // Needs to be protected so subclass can emit the signal too.
   protected _stateChanged: Signal<this, void>;
   private _disposed: boolean;
 }
+
+/**
+ * Capitalise first letter of provided word.
+ */
+function toSentenceCase([first = '', ...suffix]: string): string {
+  return first.toUpperCase() + '' + suffix.join('').toLowerCase();
+}