@jupyterlab/notebook 4.6.2 → 4.6.4

package/src/searchprovider.ts

@@ -26,6 +26,7 @@ import type { IObservableList, IObservableMap } from '@jupyterlab/observables';
 import type { ITranslator } from '@jupyterlab/translation';
 import { nullTranslator } from '@jupyterlab/translation';
 import { ArrayExt } from '@lumino/algorithm';
+import { Debouncer } from '@lumino/polling';
 import type { Widget } from '@lumino/widgets';
 import type { CellList } from './celllist';
 import { NotebookPanel } from './panel';
@@ -68,18 +69,9 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
 
   private _onNotebookStateChanged(_: Notebook, args: IChangedArgs<any>) {
     if (args.name === 'mode') {
-      // Delay the update to ensure that `document.activeElement` settled.
-      window.setTimeout(() => {
-        if (
-          args.newValue === 'command' &&
-          document.activeElement?.closest('.jp-DocumentSearch-overlay')
-        ) {
-          // Do not request updating mode when user switched focus to search overlay.
-          return;
-        }
-        this._updateSelectionMode();
-        this._filtersChanged.emit();
-      }, 0);
+      // Debounce to ensure that `document.activeElement` settled, and to keep
+      // only the most recent mode transition.
+      void this._modeChangeDebouncer.invoke();
     }
   }
 
@@ -208,6 +200,8 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
     );
     this._stopObservingLastCell();
 
+    this._modeChangeDebouncer.dispose();
+
     super.dispose();
 
     const index = this.widget.content.activeCellIndex;
@@ -932,6 +926,19 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
   protected delayedActiveCellChangeHandlerReady: Promise<void>;
   private _currentProviderIndex: number | null = null;
   private _delayedActiveCellChangeHandler: number | null = null;
+  private _modeChangeDebouncer = new Debouncer(() => {
+    // The mode can change again before this handler runs; check the
+    // current mode because this is what `_updateSelectionMode()` acts on.
+    if (
+      this.widget.content.mode === 'command' &&
+      document.activeElement?.closest('.jp-DocumentSearch-overlay')
+    ) {
+      // Do not request updating mode when user switched focus to search overlay.
+      return;
+    }
+    this._updateSelectionMode();
+    this._filtersChanged.emit();
+  }, 0);
   private _filters: IFilters | undefined;
   private _onSelection = false;
   private _selectedCells: number = 1;

package/src/widget.ts

@@ -618,7 +618,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     for (const cell of cells) {
       this._insertCell(++index, cell);
     }
-    this._syncMarkdownCellTrust();
+    this._syncCellTrust();
     newValue.cells.changed.connect(this._onCellsChanged, this);
     newValue.metadataChanged.connect(this.onMetadataChanged, this);
     newValue.contentChanged.connect(this.onModelContentChanged, this);
@@ -680,7 +680,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       this.addHeader();
     }
 
-    this._syncMarkdownCellTrust();
+    this._syncCellTrust();
     this.update();
   }
 
@@ -708,7 +708,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     widget.addClass(NB_CELL_CLASS);
 
     ArrayExt.insert(this.cellsArray, index, widget);
-    this._syncMarkdownCellTrust(widget);
+    this._syncCellTrust(widget);
     this.onCellInserted(index, widget);
 
     this._scheduleCellRenderOnIdle();
@@ -818,8 +818,8 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     widget.dispose();
   }
 
-  private _shouldTrustMarkdown(): boolean {
-    // Note: this returns false in a notebook without trsuted code cells;
+  private _shouldTrustCell(): boolean {
+    // Note: this returns false in a notebook without trusted code cells;
     // This is intended since only Code cells carry trust status on disk.
     if (!this._notebookModel) {
       return false;
@@ -836,13 +836,19 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     return hasCodeCell;
   }
 
-  private _syncMarkdownCellTrust(cell?: Cell): void {
-    const trusted = this._shouldTrustMarkdown();
+  private _syncCellTrust(cell?: Cell): void {
+    const trusted = this._shouldTrustCell();
     const trustHandler = this.rendermime.trustHandler;
     if (!trustHandler) {
       return;
     }
 
+    if (trusted) {
+      trustHandler.markTrusted(this.node);
+    } else {
+      trustHandler.unmarkTrusted(this.node);
+    }
+
     const cells = cell ? [cell] : this.widgets;
     for (const widget of cells) {
       if (!(widget instanceof MarkdownCell)) {
@@ -861,7 +867,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     args: IChangedArgs<any>
   ): void {
     if (args.name === 'trusted') {
-      this._syncMarkdownCellTrust();
+      this._syncCellTrust();
     }
   }
 
@@ -1203,7 +1209,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
           this._contentVisibilityObserver!.observe(cell.node);
         });
       });
-    });
+    }, this);
   }
 
   protected cellsArray: Array<Cell>;
@@ -2873,16 +2879,84 @@ export class Notebook extends StaticNotebook {
     }
   }
 
+  /**
+   * Find the cell containing a node, traversing open shadow roots.
+   *
+   * Returned cell is `null` if the node is not in a cell of this notebook.
+   */
+  private _cellContaining(node: Node | null): Cell | null {
+    let current = node;
+    while (current) {
+      const element =
+        current instanceof Element ? current : current.parentElement;
+      if (element) {
+        const index = this._findCell(element);
+        if (index !== -1) {
+          return this.widgets[index];
+        }
+      }
+      const root = (element ?? current).getRootNode();
+      current = root instanceof ShadowRoot ? root.host : null;
+    }
+    return null;
+  }
+
+  /**
+   * Whether a shift-click on `target` should be left to the browser to handle
+   * as an extension of the current text selection, rather than be turned into
+   * a cell range selection.
+   *
+   * This is the case when the click lands in a region of a cell whose text the
+   * browser selects - the output area of a code cell, or the rendered input of
+   * a rendered markdown cell - and the current selection starts in such a
+   * region too; see https://github.com/jupyterlab/jupyterlab/issues/4800. A
+   * click on a cell prompt, on cell chrome, or on a cell without such a region
+   * (an unrendered markdown cell, a code cell without outputs) always selects
+   * cells.
+   *
+   * #### Notes
+   * Only the anchor of the selection is considered, because a shift-click
+   * moves the focus and leaves the anchor in place. The anchor may sit in a
+   * different cell than the one clicked, which is what allows a selection to
+   * be extended across the outputs of several cells; and disregarding the
+   * focus keeps this working when a drag overshot the edge of an output and
+   * left the focus outside of it.
+   *
+   * This trade-off between extending the text selection and extending the cell
+   * selection can be adjusted in the future. For now the text selection wins to
+   * preserve the behaviour from before refactor that users may be accustomed to.
+   */
+  private _isExtendingTextSelection(
+    selection: Selection | null,
+    targetCell: Cell,
+    target: Node
+  ): boolean {
+    if (!selection || selection.isCollapsed) {
+      return false;
+    }
+    if (!Private.isInTextRegion(targetCell, target)) {
+      return false;
+    }
+    const { anchorNode } = selection;
+    // The selection usually starts in the very cell which was clicked, which
+    // can be checked without having to locate the cell of the anchor.
+    if (Private.isInTextRegion(targetCell, anchorNode)) {
+      return true;
+    }
+    const anchorCell = this._cellContaining(anchorNode);
+    return !!anchorCell && Private.isInTextRegion(anchorCell, anchorNode);
+  }
+
   /**
    * Find the cell index containing the target html element.
    *
    * #### Notes
    * Returns -1 if the cell is not found.
    */
-  private _findCell(node: HTMLElement): number {
+  private _findCell(node: Element): number {
     // Trace up the DOM hierarchy to find the root cell node.
     // Then find the corresponding child and select it.
-    let n: HTMLElement | null = node;
+    let n: Element | null = node;
     while (n && n !== this.node) {
       if (n.classList.contains(NB_CELL_CLASS)) {
         const i = ArrayExt.findFirstIndex(
@@ -3116,18 +3190,22 @@ export class Notebook extends StaticNotebook {
     if (targetArea === 'notebook') {
       this.deselectAll();
     } else if (targetArea === 'prompt' || targetArea === 'cell') {
-      // We don't want to prevent the default selection behavior
-      // if there is currently text selected in an output.
-      const hasSelection = (window.getSelection() ?? '').toString() !== '';
       if (
         button === 0 &&
         shiftKey &&
-        !hasSelection &&
-        !['INPUT', 'OPTION'].includes(target.tagName)
+        !['INPUT', 'OPTION'].includes(target.tagName) &&
+        // We don't want to prevent the default selection behavior when the
+        // user is extending a text selection into the clicked region.
+        !this._isExtendingTextSelection(window.getSelection(), widget, target)
       ) {
         // Prevent browser selecting text in prompt or output
         event.preventDefault();
 
+        // Preventing the default also stops the browser from collapsing any
+        // text selection which is already there; drop it explicitly so that
+        // stale highlighted text is not left over the new cell selection.
+        window.getSelection()?.removeAllRanges();
+
         // Shift-click - extend selection
         try {
           this.extendContiguousSelectionTo(index);
@@ -3780,6 +3858,62 @@ namespace Private {
     }
   }
 
+  /**
+   * Check whether `node` is `parent` or a descendant of it.
+   *
+   * Unlike `Node.contains()` this traverses out of open shadow roots, so a
+   * node rendered by a widget library which attaches a shadow root (such as
+   * Panel or Bokeh) is still recognised as belonging to its host subtree.
+   */
+  function containsDeep(parent: Node, node: Node | null): boolean {
+    let current = node;
+    while (current) {
+      if (parent.contains(current)) {
+        return true;
+      }
+      const root = current.getRootNode();
+      current = root instanceof ShadowRoot ? root.host : null;
+    }
+    return false;
+  }
+
+  /**
+   * Whether a cell exposes an output area.
+   *
+   * #### Notes
+   * This is a structural check rather than `instanceof CodeCell` so that it
+   * still holds when a federated extension loads its own copy of
+   * `@jupyterlab/cells`.
+   */
+  function hasOutputArea(cell: Cell): cell is CodeCell {
+    return 'outputArea' in cell;
+  }
+
+  /**
+   * The regions of a cell whose text the browser, rather than the notebook,
+   * is responsible for selecting: the output area of a code cell and the
+   * rendered input of a cell which renders it, such as a rendered markdown
+   * cell.
+   */
+  function textRegionsOf(cell: Cell): Node[] {
+    const regions: Node[] = [];
+    if (hasOutputArea(cell)) {
+      regions.push(cell.outputArea.node);
+    }
+    const rendered = cell.inputArea?.renderedInput;
+    if (rendered) {
+      regions.push(rendered.node);
+    }
+    return regions;
+  }
+
+  /**
+   * Whether a node is in a region of a cell whose text the browser selects.
+   */
+  export function isInTextRegion(cell: Cell, node: Node | null): boolean {
+    return textRegionsOf(cell).some(region => containsDeep(region, node));
+  }
+
   /**
    * Create a cell drag image.
    */