Enable "Search Cell Outputs" in Find/Replace, disable "Replace" button when an output is highlighted

packages/documentsearch/src/searchmodel.ts

@@ -182,6 +182,13 @@ export class SearchDocumentModel
     }
   }
 
+  /**
+   * Whether the replace button is enabled or not.
+   */
+  get replaceEnabled(): boolean {
+    return this._replaceEnabled;
+  }
+
   /**
    * Search expression
    */
@@ -270,7 +277,10 @@ export class SearchDocumentModel
    * Highlight the next match.
    */
   async highlightNext(): Promise<void> {
-    await this.searchProvider.highlightNext();
+    const match = await this.searchProvider.highlightNext();
+    if (match) {
+      this._replaceEnabled = match.node == undefined;
+    }
     // Emit state change as the index needs to be updated
     this.stateChanged.emit();
   }
@@ -279,7 +289,10 @@ export class SearchDocumentModel
    * Highlight the previous match
    */
   async highlightPrevious(): Promise<void> {
-    await this.searchProvider.highlightPrevious();
+    const match = await this.searchProvider.highlightPrevious();
+    if (match) {
+      this._replaceEnabled = match.node == undefined;
+    }
     // Emit state change as the index needs to be updated
     this.stateChanged.emit();
   }
@@ -386,6 +399,7 @@ export class SearchDocumentModel
   private _initialQuery = '';
   private _filters: IFilters = {};
   private _replaceText: string = '';
+  private _replaceEnabled = true;
   private _searchActive = false;
   private _searchDebouncer: Debouncer;
   private _searchExpression = '';

packages/documentsearch/src/searchview.tsx

@@ -218,6 +218,7 @@ interface IReplaceEntryProps {
   preserveCase: boolean;
   replaceOptionsSupport: IReplaceOptionsSupport | undefined;
   replaceText: string;
+  replaceEnabled: boolean;
   translator?: ITranslator;
 }
 
@@ -259,6 +260,7 @@ function ReplaceEntry(props: IReplaceEntryProps): JSX.Element {
         className={REPLACE_BUTTON_WRAPPER_CLASS}
         onClick={() => props.onReplaceCurrent()}
         tabIndex={0}
+        disabled={!props.replaceEnabled}
       >
         <span
           className={`${REPLACE_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`}
@@ -455,7 +457,7 @@ interface ISearchOverlayProps {
    */
   replaceEntryVisible: boolean;
   /**
-   * Whther the filters grid is visible.
+   * Whether the filters grid is visible.
    */
   filtersVisible: boolean;
   /**
@@ -466,6 +468,10 @@ interface ISearchOverlayProps {
    * Replacement expression
    */
   replaceText: string;
+  /**
+   * Whether the replace button is enabled.
+   */
+  replaceEnabled: boolean;
   /**
    * The text in the search entry
    */
@@ -777,6 +783,7 @@ class SearchOverlay extends React.Component<ISearchOverlayProps> {
                 onReplaceAll={() => this.props.onReplaceAll()}
                 replaceOptionsSupport={this.props.replaceOptionsSupport}
                 replaceText={this.props.replaceText}
+                replaceEnabled={this.props.replaceEnabled}
                 preserveCase={this.props.preserveCase}
                 translator={this.translator}
               />
@@ -912,6 +919,7 @@ export class SearchDocumentView extends VDomRenderer<SearchDocumentModel> {
         filtersVisible={this._showFilters}
         replaceOptionsSupport={this.model.replaceOptionsSupport}
         replaceText={this.model.replaceText}
+        replaceEnabled={this.model.replaceEnabled}
         initialSearchText={this.model.initialQuery}
         searchInputRef={
           this._searchInput as React.RefObject<HTMLTextAreaElement>

packages/documentsearch/src/tokens.ts

@@ -174,6 +174,11 @@ export interface ISearchMatch {
    * Start location of the match (in a text, this is the column)
    */
   position: number;
+
+  /**
+   * Node containing the match
+   */
+  node?: Text;
 }
 
 /**

packages/notebook/src/searchprovider.ts

@@ -237,7 +237,7 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
           'Search in the cell outputs (not available when replace options are shown).'
         ),
         default: false,
-        supportReplace: false
+        supportReplace: true
       },
       selection: {
         title: