@jupyterlab/notebook 4.6.0 → 4.7.0-alpha.0

package/src/actions.tsx

@@ -603,15 +603,77 @@ export namespace NotebookActions {
       lastIndex = notebook.model.cells.length;
     }
 
-    if (shift > 0) {
-      notebook.moveCell(firstIndex, lastIndex, lastIndex - firstIndex);
-    } else {
-      notebook.moveCell(firstIndex, firstIndex + shift, lastIndex - firstIndex);
-    }
+    const toIndex = shift > 0 ? lastIndex : firstIndex + shift;
+    moveCells(notebook, firstIndex, toIndex, lastIndex - firstIndex);
 
     void Private.handleState(notebook, state, true);
   }
 
+  /**
+   * Move cells while preserving in-flight kernel futures.
+   *
+   * The underlying `jupyter-ydoc` `moveCells` implementation currently
+   * serializes cells to JSON and recreates them via a delete + insert
+   * transaction, which disposes any active kernel futures attached to the
+   * old widgets. This wrapper detaches futures before the move and
+   * reattaches them to the new widgets afterwards, and stores them in the
+   * undo stack so that undoing the move also restores execution state.
+   *
+   * @param notebook - The target notebook.
+   * @param from - Index of the first cell to move.
+   * @param to - Target index (as passed to `notebook.moveCell`).
+   * @param n - Number of cells to move.
+   */
+  export function moveCells(
+    notebook: Notebook,
+    from: number,
+    to: number,
+    n = 1
+  ): void {
+    if (!notebook.model) {
+      return;
+    }
+
+    // Mirror `Notebook.moveCell`'s bounding/no-op logic so that we do not
+    // capture futures or touch the undo stack when the move won't happen.
+    // Otherwise we could attach execution metadata to an unrelated previous
+    // undo item, corrupting subsequent undo behavior.
+    const boundedTo = Math.min(
+      notebook.model.cells.length - 1,
+      Math.max(0, to)
+    );
+    if (boundedTo === from) {
+      return;
+    }
+
+    // moveCells serializes cells to JSON and recreates widgets (delete+insert),
+    // which would dispose any in-flight futures. Capture them first.
+    const storedExecutions: Private.IStoredCellExecution[] = [];
+    notebook.widgets.slice(from, from + n).forEach(child => {
+      if (!(child instanceof CodeCell)) {
+        return;
+      }
+      const stored = Private.captureExecution(child);
+      if (stored) {
+        storedExecutions.push(stored);
+      }
+    });
+
+    notebook.moveCell(from, to, n);
+
+    // Immediately reconnect futures to the newly created widgets.
+    for (const stored of storedExecutions) {
+      Private.restoreExecution(notebook, stored);
+    }
+
+    // Store in the undo stack so that undoing the move can also restore state.
+    if (storedExecutions.length > 0) {
+      const undoManager = (notebook.model.sharedModel as YNotebook).undoManager;
+      const lastItem = undoManager.undoStack[undoManager.undoStack.length - 1];
+      lastItem?.meta.set(Private.CELL_EXECUTION_META_KEY, storedExecutions);
+    }
+  }
+
   /**
    * Move the selected cell(s) down.
    *
@@ -1530,6 +1592,19 @@ export namespace NotebookActions {
       switch (mode) {
         case 'below':
           index = notebook.activeCellIndex + 1;
+          // If the active cell is a collapsed markdown heading with children,
+          // insert after all the children, not just after the heading.
+          {
+            const activeCell = notebook.activeCell;
+            if (
+              activeCell instanceof MarkdownCell &&
+              activeCell.headingCollapsed &&
+              activeCell.numberChildNodes > 0
+            ) {
+              index =
+                notebook.activeCellIndex + activeCell.numberChildNodes + 1;
+            }
+          }
           break;
         case 'belowSelected':
           notebook.widgets.forEach((child, childIndex) => {
@@ -1537,7 +1612,24 @@ export namespace NotebookActions {
               index = childIndex + 1;
             }
           });
-
+          // If the last selected cell is a collapsed markdown heading with children,
+          // insert after all the children, not just after the heading.
+          {
+            const lastSelectedIndex = index - 1;
+            if (
+              lastSelectedIndex >= 0 &&
+              lastSelectedIndex < notebook.widgets.length
+            ) {
+              const widget = notebook.widgets[lastSelectedIndex];
+              if (
+                widget instanceof MarkdownCell &&
+                widget.headingCollapsed &&
+                widget.numberChildNodes > 0
+              ) {
+                index = lastSelectedIndex + widget.numberChildNodes + 1;
+              }
+            }
+          }
           break;
         case 'above':
           index = notebook.activeCellIndex;
@@ -1609,9 +1701,37 @@ export namespace NotebookActions {
     const state = Private.getState(notebook);
     notebook.mode = 'command';
 
+    const undoManager = (notebook.model.sharedModel as YNotebook).undoManager;
+
+    // For cells that will be MOVED by the undo (i.e. they still exist in the
+    // notebook at their current position), pre-capture their futures now before
+    // sharedModel.undo() destroys those widgets. This prevents OutputArea.dispose()
+    // from cancelling the future during the Y.js delete+insert that implements the move.
+    const topItem = undoManager.undoStack[undoManager.undoStack.length - 1];
+    const pendingExecutions = topItem?.meta.get(
+      Private.CELL_EXECUTION_META_KEY
+    ) as Private.IStoredCellExecution[] | undefined;
+    const preCaptured = new Map<string, Private.IStoredCellExecution>();
+    pendingExecutions?.forEach(stored => {
+      const cell = notebook.widgets.find(w => w.model.id === stored.cellId);
+      if (!(cell instanceof CodeCell)) {
+        return; // cell was deleted (not moved) — handled via stored future below
+      }
+      // Cell still present → move undo. Fresh capture protects the future.
+      const fresh = Private.captureExecution(cell) ?? {
+        ...stored,
+        isDone: () => true,
+        buffered: []
+      };
+      // The undo will roll the outputs back to their state at the time of
+      // the move; snapshot the current outputs so anything received since
+      // then can be re-applied after the undo.
+      fresh.outputs = cell.model.outputs.toJSON();
+      preCaptured.set(stored.cellId, fresh);
+    });
+
     // Capture execution context from the stack item being popped.
     let storedExecutions: Private.IStoredCellExecution[] | undefined;
-    const undoManager = (notebook.model.sharedModel as YNotebook).undoManager;
     const onStackItemPopped = ({
       stackItem
     }: {
@@ -1625,40 +1745,13 @@ export namespace NotebookActions {
     notebook.model.sharedModel.undo();
     undoManager.off('stack-item-popped', onStackItemPopped);
 
-    // Restore execution state on resurrected cell widgets.
-    storedExecutions?.forEach(({ cellId, future, isDone, buffered }) => {
-      const cell = notebook.widgets.find(w => w.model.id === cellId);
-      if (!(cell instanceof CodeCell)) {
-        return;
-      }
-      if (isDone()) {
-        // Execution finished or was interrupted before undo - ensure state is idle.
-        cell.model.executionState = 'idle';
-        return;
-      }
-      // Still running - reconnect the future so the cell receives remaining
-      // output and stdin requests (e.g. input()), and tracks the idle transition.
-      cell.outputArea.reattachFuture(future);
-      // Replay any IOPub messages that arrived while the future was detached.
-      // After reattachFuture, future.onIOPub routes to the new output area.
-      for (const msg of buffered) {
-        void future.onIOPub(msg);
-      }
-      // The original execute() call targeted the old cell widget, so it will
-      // not update executionCount/executionState on this resurrected cell.
-      // Drive the idle transition here instead.
-      const cellRef = cell;
-      void future.done.then(
-        reply => {
-          if (!cellRef.isDisposed) {
-            cellRef.model.executionCount = reply.content.execution_count;
-          }
-        },
-        () => {
-          if (!cellRef.isDisposed) {
-            cellRef.model.executionState = 'idle';
-          }
-        }
+    // Restore execution state on resurrected/moved cell widgets.
+    // For move-undo: use freshly pre-captured data (stored data is stale).
+    // For delete-undo: stored data has the futures captured at deletion time.
+    storedExecutions?.forEach(stored => {
+      Private.restoreExecution(
+        notebook,
+        preCaptured.get(stored.cellId) ?? stored
       );
     });
 
@@ -2568,6 +2661,15 @@ namespace Private {
   /** Key used to store cell execution state in Y.js undo stack item metadata. */
   export const CELL_EXECUTION_META_KEY = Symbol('cellExecutionState');
 
+  /**
+   * A kernel message that arrived while the future was detached, tagged with
+   * its channel so it can be dispatched to the right handler on replay.
+   */
+  export type IBufferedMessage =
+    | { channel: 'iopub'; msg: KernelMessage.IIOPubMessage }
+    | { channel: 'stdin'; msg: KernelMessage.IStdinMessage }
+    | { channel: 'reply'; msg: KernelMessage.IExecuteReplyMsg };
+
   export interface IStoredCellExecution {
     cellId: string;
     future: Kernel.IShellFuture<
@@ -2575,13 +2677,28 @@ namespace Private {
       KernelMessage.IExecuteReplyMsg
     >;
     isDone: () => boolean;
-    /** IOPub messages that arrived while the future was detached. */
-    buffered: KernelMessage.IIOPubMessage[];
+    /**
+     * Kernel messages (IOPub, stdin and reply) that arrived while the future
+     * was detached, in arrival order, so they can be replayed on reattach.
+     */
+    buffered: IBufferedMessage[];
+    /**
+     * Snapshot of the cell outputs to restore after an undo.
+     *
+     * The Y.js undo of a move (a delete + insert transaction) resurrects the
+     * cell as it was when the move happened, rolling back any output received
+     * since. Re-applying this snapshot after the undo prevents that loss.
+     */
+    outputs?: nbformat.IOutput[];
   }
 
   /**
-   * Detach the kernel future from a code cell, buffering any IOPub messages
-   * that arrive while it is detached so they can be replayed on reattach.
+   * Detach the kernel future from a code cell, buffering any messages that
+   * arrive while it is detached so they can be replayed on reattach.
+   *
+   * `detachFuture` clears the IOPub, stdin and reply handlers, so all three
+   * channels are buffered here; otherwise a message arriving during the
+   * detached window (e.g. an `input()` request on stdin) would be dropped.
    *
    * Returns null if the cell has no active future.
    */
@@ -2596,13 +2713,88 @@ namespace Private {
     void future.done.finally(() => {
       done = true;
     });
-    const buffered: KernelMessage.IIOPubMessage[] = [];
+    const buffered: IBufferedMessage[] = [];
     future.onIOPub = msg => {
-      buffered.push(msg);
+      buffered.push({ channel: 'iopub', msg });
+    };
+    future.onStdin = msg => {
+      buffered.push({ channel: 'stdin', msg });
+    };
+    future.onReply = msg => {
+      buffered.push({ channel: 'reply', msg });
     };
     return { cellId: cell.model.id, future, isDone: () => done, buffered };
   }
 
+  /**
+   * Reconnect a captured execution to the cell widget that now holds the model.
+   *
+   * Handles both the "still running" and "already finished" cases.
+   */
+  export function restoreExecution(
+    notebook: Notebook,
+    { cellId, future, isDone, buffered, outputs }: IStoredCellExecution
+  ): void {
+    const cell = notebook.widgets.find(w => w.model.id === cellId);
+    if (!(cell instanceof CodeCell)) {
+      return;
+    }
+    if (outputs && !JSONExt.deepEqual(outputs, cell.model.outputs.toJSON())) {
+      // Re-apply the output snapshot taken just before the undo: the Y.js
+      // undo rolled the outputs back to their state at the time of the
+      // undone action. Going through the output area model keeps the
+      // in-memory model and the shared model in sync (output changes are
+      // not tracked by the undo manager, so this does not pollute history).
+      cell.model.outputs.fromJSON(outputs);
+    }
+    // Reattach the future (without clearing existing outputs) and replay any
+    // messages buffered while it was detached, in arrival order. This is done
+    // whether or not the execution has already finished, so that final outputs
+    // (or a pending stdin request) that arrived while detached are not lost
+    // (e.g. if the kernel completed in the brief window during the undo).
+    cell.outputArea.reattachFuture(future);
+    for (const buf of buffered) {
+      switch (buf.channel) {
+        case 'iopub':
+          void future.onIOPub(buf.msg);
+          break;
+        case 'stdin':
+          void future.onStdin(buf.msg);
+          break;
+        case 'reply':
+          void future.onReply(buf.msg);
+          break;
+      }
+    }
+    if (isDone()) {
+      // The execution already finished (e.g. it completed or was interrupted
+      // during the undo). The resurrected cell may carry a stale 'running'
+      // state from its restored snapshot, so reset it synchronously rather
+      // than relying solely on the asynchronous `future.done` handler below.
+      cell.model.executionState = 'idle';
+    } else {
+      // Restore the running state on the recreated cell widget.
+      cell.model.executionState = 'running';
+    }
+    const cellRef = cell;
+    void future.done.then(
+      reply => {
+        if (!cellRef.isDisposed) {
+          // The future is authoritative for the prompt number; a snapshot
+          // taken before completion would be stale (still null). Setting a
+          // non-null execution count also flips the state back to 'idle'.
+          cellRef.model.executionCount = reply.content.execution_count;
+          cellRef.model.executionState = 'idle';
+        }
+      },
+      () => {
+        if (!cellRef.isDisposed) {
+          cellRef.model.executionState = 'idle';
+        }
+      }
+    );
+  }
+
   /**
    * Notebook cell executor
    */
@@ -2909,8 +3101,30 @@ namespace Private {
    * @returns A list of 0 or more selected cells
    */
   export function selectedCells(notebook: Notebook): nbformat.ICell[] {
-    return notebook.widgets
-      .filter(cell => notebook.isSelectedOrActive(cell))
+    const cellsToInclude = new Set<Cell>();
+
+    // Collect all selected/active cells and expand collapsed sections
+    for (let i = 0; i < notebook.widgets.length; i++) {
+      const cell = notebook.widgets[i];
+      if (notebook.isSelectedOrActive(cell)) {
+        cellsToInclude.add(cell);
+
+        // If this is a collapsed markdown cell, add all its children
+        if (
+          cell instanceof MarkdownCell &&
+          cell.headingCollapsed &&
+          cell.numberChildNodes > 0
+        ) {
+          for (let j = i + 1; j <= i + cell.numberChildNodes; j++) {
+            if (notebook.widgets[j]) {
+              cellsToInclude.add(notebook.widgets[j]);
+            }
+          }
+        }
+      }
+    }
+
+    return Array.from(cellsToInclude)
       .map(cell => cell.model.toJSON())
       .map(cellJSON => {
         if ((cellJSON.metadata as JSONObject).deletable !== undefined) {
@@ -3117,19 +3331,40 @@ namespace Private {
     const model = notebook.model!;
     const sharedModel = model.sharedModel;
     const toDelete: number[] = [];
+    const cellsToDeleteSet = new Set<number>();
 
     notebook.mode = 'command';
 
-    // Find the cells to delete.
+    // Find the cells to delete, expanding collapsed sections.
     notebook.widgets.forEach((child, index) => {
       const deletable = child.model.getMetadata('deletable') !== false;
 
       if (notebook.isSelectedOrActive(child) && deletable) {
-        toDelete.push(index);
+        cellsToDeleteSet.add(index);
         notebook.model?.deletedCells.push(child.model.id);
+
+        // If this is a collapsed markdown cell, mark all its children for deletion
+        if (
+          child instanceof MarkdownCell &&
+          child.headingCollapsed &&
+          child.numberChildNodes > 0
+        ) {
+          for (let j = index + 1; j <= index + child.numberChildNodes; j++) {
+            if (notebook.widgets[j]) {
+              const childDeletable =
+                notebook.widgets[j].model.getMetadata('deletable') !== false;
+              if (childDeletable) {
+                cellsToDeleteSet.add(j);
+                notebook.model?.deletedCells.push(notebook.widgets[j].model.id);
+              }
+            }
+          }
+        }
       }
     });
 
+    toDelete.push(...Array.from(cellsToDeleteSet).sort((a, b) => a - b));
+
     // If cells are not deletable, we may not have anything to delete.
     if (toDelete.length > 0) {
       // Detach futures before the transaction so dispose() does not cancel them.

package/src/panel.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import type { ISessionContext } from '@jupyterlab/apputils';
 import { Dialog, Printing, showDialog } from '@jupyterlab/apputils';
 import { isMarkdownCellModel } from '@jupyterlab/cells';
@@ -191,7 +189,7 @@ export class NotebookPanel extends DocumentWidget<Notebook, INotebookModel> {
    * Handle a change in the kernel by updating the document metadata.
    */
   private _onKernelChanged(
-    sender: any,
+    sender: ISessionContext,
     args: Session.ISessionConnection.IKernelChangedArgs
   ): void {
     if (!this.model || !args.newValue) {

package/src/searchprovider.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { Dialog, showDialog } from '@jupyterlab/apputils';
 import type {
   CellSearchProvider,
@@ -66,7 +64,7 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
     this._filtersChanged.connect(this._setEnginesSelectionSearchMode, this);
   }
 
-  private _onNotebookStateChanged(_: Notebook, args: IChangedArgs<any>) {
+  private _onNotebookStateChanged(_: Notebook, args: IChangedArgs<unknown>) {
     if (args.name === 'mode') {
       // Delay the update to ensure that `document.activeElement` settled.
       window.setTimeout(() => {

package/src/widget.ts

@@ -15,6 +15,7 @@ import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
 import type { IChangedArgs } from '@jupyterlab/coreutils';
 import type * as nbformat from '@jupyterlab/nbformat';
 import type { IObservableList } from '@jupyterlab/observables';
+import type { IPageHandler } from '@jupyterlab/outputarea';
 import type { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import type { IMapChange } from '@jupyter/ydoc';
 import { TableOfContentsUtils } from '@jupyterlab/toc';
@@ -245,6 +246,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     this.notebookConfig =
       options.notebookConfig || StaticNotebook.defaultNotebookConfig;
     this._updateNotebookConfig();
+    this._pageHandler = options.pageHandler;
     this._mimetypeService = options.mimeTypeService;
     this.renderingLayout = options.notebookConfig?.renderingLayout;
     this.kernelHistory = options.kernelHistory;
@@ -729,6 +731,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       maxNumberOutputs: this.notebookConfig.maxNumberOutputs,
       model,
       placeholder: this._notebookConfig.windowingMode !== 'none',
+      pageHandler: this._pageHandler,
       rendermime,
       translator: this.translator
     };
@@ -1222,6 +1225,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
   private _renderingLayout: RenderingLayout | undefined;
   private _renderingLayoutChanged = new Signal<this, RenderingLayout>(this);
   private _contentVisibilityObserver: IntersectionObserver | null = null;
+  private _pageHandler: IPageHandler | undefined;
 }
 
 /**
@@ -1276,6 +1280,11 @@ export namespace StaticNotebook {
      * The renderer used by the underlying windowed list.
      */
     renderer?: WindowedList.IRenderer;
+
+    /**
+     * Optional handler for pager payloads (`source: page`).
+     */
+    pageHandler?: IPageHandler;
   }
 
   /**
@@ -1991,6 +2000,7 @@ export class Notebook extends StaticNotebook {
     }
 
     this._ensureFocus();
+
     if (newValue === oldValue) {
       return;
     }
@@ -2085,16 +2095,25 @@ export class Notebook extends StaticNotebook {
     if (newActiveCellIndex >= 0) {
       this.activeCellIndex = newActiveCellIndex;
     }
+
+    // Deselect all cells first to clear any stale selection state.
+    this.deselectAll();
     if (from > to) {
       isSelected.forEach((selected, idx) => {
         if (selected) {
-          this.select(this.widgets[to + idx]);
+          const widget = this.widgets[to + idx];
+          if (widget) {
+            this.select(widget);
+          }
         }
       });
     } else {
       isSelected.forEach((selected, idx) => {
         if (selected) {
-          this.select(this.widgets[to - n + 1 + idx]);
+          const widget = this.widgets[to - n + 1 + idx];
+          if (widget) {
+            this.select(widget);
+          }
         }
       });
     }
@@ -2112,6 +2131,7 @@ export class Notebook extends StaticNotebook {
       return;
     }
     Private.selectedProperty.set(widget, true);
+    this._selectCollapsedSection(widget);
     this._selectionChanged.emit(void 0);
     this.update();
   }
@@ -2127,6 +2147,19 @@ export class Notebook extends StaticNotebook {
     if (!Private.selectedProperty.get(widget)) {
       return;
     }
+    // Deselect all children if widget is a collapsed heading
+    if (
+      widget instanceof MarkdownCell &&
+      widget.headingCollapsed &&
+      widget.numberChildNodes > 0
+    ) {
+      const idx = this.widgets.indexOf(widget);
+      for (let i = idx + 1; i <= idx + widget.numberChildNodes; i++) {
+        if (this.widgets[i]) {
+          Private.selectedProperty.set(this.widgets[i], false);
+        }
+      }
+    }
     Private.selectedProperty.set(widget, false);
     this._selectionChanged.emit(void 0);
     this.update();
@@ -2162,11 +2195,8 @@ export class Notebook extends StaticNotebook {
     }
     if (changed) {
       this._selectionChanged.emit(void 0);
+      this.update();
     }
-    // Make sure we have a valid active cell.
-    // eslint-disable-next-line no-self-assign
-    this.activeCellIndex = this.activeCellIndex;
-    this.update();
   }
 
   /**
@@ -2264,6 +2294,25 @@ export class Notebook extends StaticNotebook {
     }
   }
 
+  /**
+   * Select all child cells of a collapsed heading, if applicable.
+   */
+  private _selectCollapsedSection(cell: Cell | null): void {
+    if (
+      cell instanceof MarkdownCell &&
+      cell.headingCollapsed &&
+      cell.numberChildNodes > 0
+    ) {
+      const idx = this.widgets.indexOf(cell);
+      for (let i = idx; i <= idx + cell.numberChildNodes; i++) {
+        if (this.widgets[i]) {
+          Private.selectedProperty.set(this.widgets[i], true);
+        }
+      }
+      this._selectionChanged.emit(void 0);
+    }
+  }
+
   /**
    * Get the head and anchor of a contiguous cell selection.
    *
@@ -2958,9 +3007,9 @@ export class Notebook extends StaticNotebook {
             (this.rendermime.sanitizer.allowNamedProperties ?? false)
               ? 'id'
               : 'data-jupyter-id';
-          const element = this.node.querySelector(
+          const element = this.node.querySelector<HTMLElement>(
             `h${heading.level}[${attribute}="${CSS.escape(id)}"]`
-          ) as HTMLElement;
+          )!;
 
           return {
             cell,
@@ -3374,8 +3423,8 @@ export class Notebook extends StaticNotebook {
         return;
       }
 
-      // Move the cells one by one
-      this.moveCell(fromIndex, toIndex, toMove.length);
+      // Move the selected block of cells, preserving in-flight executions.
+      NotebookActions.moveCells(this, fromIndex, toIndex, toMove.length);
     } else {
       // Handle the case where we are copying cells between
       // notebooks.

package/src/widgetfactory.ts

@@ -5,6 +5,7 @@
 import type { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
 import type { DocumentRegistry } from '@jupyterlab/docregistry';
 import { ABCWidgetFactory } from '@jupyterlab/docregistry';
+import type { IPageHandler } from '@jupyterlab/outputarea';
 import type { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import type { ITranslator } from '@jupyterlab/translation';
 import type { INotebookModel } from './model';
@@ -33,6 +34,7 @@ export class NotebookWidgetFactory extends ABCWidgetFactory<
       options.editorConfig || StaticNotebook.defaultEditorConfig;
     this._notebookConfig =
       options.notebookConfig || StaticNotebook.defaultNotebookConfig;
+    this._pageHandler = options.pageHandler;
   }
 
   /*
@@ -95,6 +97,7 @@ export class NotebookWidgetFactory extends ABCWidgetFactory<
       notebookConfig: source
         ? source.content.notebookConfig
         : this._notebookConfig,
+      pageHandler: this._pageHandler,
       translator,
       kernelHistory
     };
@@ -105,6 +108,7 @@ export class NotebookWidgetFactory extends ABCWidgetFactory<
 
   private _editorConfig: StaticNotebook.IEditorConfig;
   private _notebookConfig: StaticNotebook.INotebookConfig;
+  private _pageHandler: IPageHandler | undefined;
 }
 
 /**
@@ -142,6 +146,11 @@ export namespace NotebookWidgetFactory {
      */
     notebookConfig?: StaticNotebook.INotebookConfig;
 
+    /**
+     * Optional handler for pager payloads (`source: page`).
+     */
+    pageHandler?: IPageHandler;
+
     /**
      * The application language translator.
      */

package/style/index.css

@@ -14,6 +14,7 @@
 @import url('~@jupyterlab/documentsearch/style/index.css');
 @import url('~@jupyterlab/codemirror/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
+@import url('~@jupyterlab/outputarea/style/index.css');
 @import url('~@jupyterlab/toc/style/index.css');
 @import url('~@jupyterlab/cells/style/index.css');
 @import url('~@jupyterlab/lsp/style/index.css');

package/style/index.js

@@ -14,6 +14,7 @@ import '@jupyterlab/codeeditor/style/index.js';
 import '@jupyterlab/documentsearch/style/index.js';
 import '@jupyterlab/codemirror/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';
+import '@jupyterlab/outputarea/style/index.js';
 import '@jupyterlab/toc/style/index.js';
 import '@jupyterlab/cells/style/index.js';
 import '@jupyterlab/lsp/style/index.js';