fixing search and replace with cell outputs

packages/documentsearch/src/providers/genericsearchprovider.ts

@@ -11,7 +11,7 @@ import { SearchProvider } from '../searchprovider';
 import { ITranslator } from '@jupyterlab/translation';
 
 export const FOUND_CLASSES = ['cm-string', 'cm-overlay', 'cm-searching'];
-const SELECTED_CLASSES = ['CodeMirror-selectedtext'];
+const SELECTED_CLASSES = ['CodeMirror-selectedtext', 'jp-current-match'];
 
 /**
  * HTML search engine
@@ -367,12 +367,17 @@ export class GenericSearchProvider extends SearchProvider<Widget> {
     if (this._currentMatchIndex === -1) {
       this._currentMatchIndex = reverse ? this.matches.length - 1 : 0;
     } else {
+      // Update the CSS classes for the current match
       const hit = this._markNodes[this._currentMatchIndex];
       hit.classList.remove(...SELECTED_CLASSES);
+      hit.classList.add(...FOUND_CLASSES);
 
+      // Update the index for the next match
       this._currentMatchIndex = reverse
         ? this._currentMatchIndex - 1
         : this._currentMatchIndex + 1;
+
+      // If we have looping enabled and are out of bounds after the index update
       if (
         loop &&
         (this._currentMatchIndex < 0 ||
@@ -390,6 +395,7 @@ export class GenericSearchProvider extends SearchProvider<Widget> {
       this._currentMatchIndex < this._matches.length
     ) {
       const hit = this._markNodes[this._currentMatchIndex];
+      hit.classList.remove(...FOUND_CLASSES);
       hit.classList.add(...SELECTED_CLASSES);
       // If not in view, scroll just enough to see it
       if (!elementInViewport(hit)) {

packages/documentsearch/src/searchmodel.ts

@@ -182,6 +182,20 @@ export class SearchDocumentModel
     }
   }
 
+  /**
+   * Whether the replace button is enabled or not.
+   */
+  get replaceEnabled(): boolean {
+    return this._replaceEnabled;
+  }
+
+  /**
+   * Whether the replace all button is enabled or not.
+   */
+  get replaceAllEnabled(): boolean {
+    return this._replaceAllEnabled;
+  }
+
   /**
    * Search expression
    */
@@ -270,7 +284,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 +296,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 +406,8 @@ export class SearchDocumentModel
   private _initialQuery = '';
   private _filters: IFilters = {};
   private _replaceText: string = '';
+  private _replaceEnabled = true;
+  private _replaceAllEnabled = true;
   private _searchActive = false;
   private _searchDebouncer: Debouncer;
   private _searchExpression = '';

packages/documentsearch/src/searchview.tsx

@@ -46,6 +46,7 @@ const SEARCH_OPTIONS_CLASS = 'jp-DocumentSearch-search-options';
 const SEARCH_FILTER_DISABLED_CLASS = 'jp-DocumentSearch-search-filter-disabled';
 const SEARCH_FILTER_CLASS = 'jp-DocumentSearch-search-filter';
 const REPLACE_BUTTON_CLASS = 'jp-DocumentSearch-replace-button';
+const REPLACE_BUTTON_DISABLED_CLASS = 'jp-DocumentSearch-replace-button-disabled';
 const REPLACE_BUTTON_WRAPPER_CLASS = 'jp-DocumentSearch-replace-button-wrapper';
 const REPLACE_WRAPPER_CLASS = 'jp-DocumentSearch-replace-wrapper-class';
 const REPLACE_TOGGLE_CLASS = 'jp-DocumentSearch-replace-toggle';
@@ -218,6 +219,7 @@ interface IReplaceEntryProps {
   preserveCase: boolean;
   replaceOptionsSupport: IReplaceOptionsSupport | undefined;
   replaceText: string;
+  replaceEnabled: boolean;
   translator?: ITranslator;
 }
 
@@ -259,9 +261,12 @@ 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}`}
+          className={props.replaceEnabled
+            ? `${REPLACE_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`
+            : `${REPLACE_BUTTON_DISABLED_CLASS} ${BUTTON_CONTENT_CLASS}`}
           tabIndex={0}
         >
           {trans.__('Replace')}
@@ -466,6 +471,10 @@ interface ISearchOverlayProps {
    * Replacement expression
    */
   replaceText: string;
+  /**
+   * Whether the replace button is enabled.
+   */
+  replaceEnabled: boolean;
   /**
    * The text in the search entry
    */
@@ -777,6 +786,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 +922,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/documentsearch/style/base.css

@@ -237,6 +237,19 @@ button:not(:disabled) > .jp-DocumentSearch-up-down-button:active {
   height: 100%;
 }
 
+.jp-DocumentSearch-replace-button-disabled {
+  display: inline-block;
+  text-align: center;
+  cursor: not-allowed;
+  box-sizing: border-box;
+  color: var(--jp-ui-font-color2);
+
+  /* height - 2 * (padding of wrapper) */
+  line-height: calc(var(--jp-private-document-search-button-height) - 2px);
+  width: 100%;
+  height: 100%;
+}
+
 .jp-DocumentSearch-replace-button:focus {
   outline: none;
 }

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: