@jupyterlab/notebook 4.6.0-alpha.3 → 4.6.0-alpha.5

package/src/widget.ts

@@ -175,7 +175,6 @@ export type NotebookMode = 'command' | 'edit';
 if ((window as any).requestIdleCallback === undefined) {
   // On Safari, requestIdleCallback is not available, so we use replacement functions for `idleCallbacks`
   // See: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API#falling_back_to_settimeout
-  // eslint-disable-next-line @typescript-eslint/ban-types
   (window as any).requestIdleCallback = function (handler: Function) {
     let startTime = Date.now();
     return setTimeout(function () {
@@ -615,6 +614,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     for (const cell of cells) {
       this._insertCell(++index, cell);
     }
+    this._syncMarkdownCellTrust();
     newValue.cells.changed.connect(this._onCellsChanged, this);
     newValue.metadataChanged.connect(this.onMetadataChanged, this);
     newValue.contentChanged.connect(this.onModelContentChanged, this);
@@ -628,6 +628,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     args: IObservableList.IChangedArgs<ICellModel>
   ): void {
     this.removeHeader();
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (args.type) {
       case 'add': {
         let index = 0;
@@ -675,6 +676,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       this.addHeader();
     }
 
+    this._syncMarkdownCellTrust();
     this.update();
   }
 
@@ -697,10 +699,12 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       default:
         widget = this._createRawCell(cell as IRawCellModel);
     }
+    cell.stateChanged.connect(this._onCellStateChanged, this);
     widget.inViewportChanged.connect(this._onCellInViewportChanged, this);
     widget.addClass(NB_CELL_CLASS);
 
     ArrayExt.insert(this.cellsArray, index, widget);
+    this._syncMarkdownCellTrust(widget);
     this.onCellInserted(index, widget);
 
     this._scheduleCellRenderOnIdle();
@@ -725,9 +729,15 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       translator: this.translator
     };
     const cell = this.contentFactory.createCodeCell(options);
-    cell.syncCollapse = true;
-    cell.syncEditable = true;
-    cell.syncScrolled = true;
+    if (cell.syncCollapse === undefined) {
+      cell.syncCollapse = true;
+    }
+    if (cell.syncEditable === undefined) {
+      cell.syncEditable = true;
+    }
+    if (cell.syncScrolled === undefined) {
+      cell.syncScrolled = true;
+    }
     cell.outputArea.inputRequested.connect((_, stdin) => {
       this._onInputRequested(cell).catch(reason => {
         console.error('Failed to scroll to cell requesting input.', reason);
@@ -759,8 +769,12 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
         this._notebookConfig.showEditorForReadOnlyMarkdown
     };
     const cell = this.contentFactory.createMarkdownCell(options);
-    cell.syncCollapse = true;
-    cell.syncEditable = true;
+    if (cell.syncCollapse === undefined) {
+      cell.syncCollapse = true;
+    }
+    if (cell.syncEditable === undefined) {
+      cell.syncEditable = true;
+    }
     // Connect collapsed signal for each markdown cell widget
     cell.headingCollapsedChanged.connect(this._onCellCollapsed, this);
     return cell;
@@ -779,8 +793,12 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       placeholder: this._notebookConfig.windowingMode !== 'none'
     };
     const cell = this.contentFactory.createRawCell(options);
-    cell.syncCollapse = true;
-    cell.syncEditable = true;
+    if (cell.syncCollapse === undefined) {
+      cell.syncCollapse = true;
+    }
+    if (cell.syncEditable === undefined) {
+      cell.syncEditable = true;
+    }
     return cell;
   }
 
@@ -789,12 +807,60 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
    */
   private _removeCell(index: number): void {
     const widget = this.cellsArray[index];
+    widget.model.stateChanged.disconnect(this._onCellStateChanged, this);
     widget.parent = null;
     ArrayExt.removeAt(this.cellsArray, index);
     this.onCellRemoved(index, widget);
     widget.dispose();
   }
 
+  private _shouldTrustMarkdown(): boolean {
+    // Note: this returns false in a notebook without trsuted code cells;
+    // This is intended since only Code cells carry trust status on disk.
+    if (!this._notebookModel) {
+      return false;
+    }
+    let hasCodeCell = false;
+    for (const cell of this._notebookModel.cells) {
+      if (cell.type === 'code') {
+        hasCodeCell = true;
+        if (!cell.trusted) {
+          return false;
+        }
+      }
+    }
+    return hasCodeCell;
+  }
+
+  private _syncMarkdownCellTrust(cell?: Cell): void {
+    const trusted = this._shouldTrustMarkdown();
+    const trustHandler = this.rendermime.trustHandler;
+    if (!trustHandler) {
+      return;
+    }
+
+    const cells = cell ? [cell] : this.widgets;
+    for (const widget of cells) {
+      if (!(widget instanceof MarkdownCell)) {
+        continue;
+      }
+      if (trusted) {
+        trustHandler.markTrusted(widget.node);
+      } else {
+        trustHandler.unmarkTrusted(widget.node);
+      }
+    }
+  }
+
+  private _onCellStateChanged(
+    model: ICellModel,
+    args: IChangedArgs<any>
+  ): void {
+    if (args.name === 'trusted') {
+      this._syncMarkdownCellTrust();
+    }
+  }
+
   /**
    * Update the mimetype of the notebook.
    */
@@ -821,6 +887,14 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     cell
       .getHeadings()
       .then(() => {
+        // Heading parsing is async; ignore stale callbacks that no longer match
+        // the current collapsed state.
+        if (
+          cell.isDisposed ||
+          (cell instanceof MarkdownCell && cell.headingCollapsed !== collapsed)
+        ) {
+          return;
+        }
         NotebookActions.setHeadingCollapse(cell, collapsed, this);
         this._cellCollapsed.emit(cell);
       })
@@ -1635,6 +1709,7 @@ export class Notebook extends StaticNotebook {
    * Construct a notebook widget.
    */
   constructor(options: Notebook.IOptions) {
+    const trans = (options.translator || nullTranslator).load('jupyterlab');
     super({
       renderer: {
         createOuter(): HTMLElement {
@@ -1644,7 +1719,7 @@ export class Notebook extends StaticNotebook {
         createViewport(): HTMLElement {
           const el = document.createElement('div');
           el.setAttribute('role', 'feed');
-          el.setAttribute('aria-label', 'Cells');
+          el.setAttribute('aria-label', trans.__('Cells'));
           return el;
         },
 
@@ -2034,7 +2109,8 @@ export class Notebook extends StaticNotebook {
       this._selectionChanged.emit(void 0);
     }
     // Make sure we have a valid active cell.
-    this.activeCellIndex = this.activeCellIndex; // eslint-disable-line
+    // eslint-disable-next-line no-self-assign
+    this.activeCellIndex = this.activeCellIndex;
     this.update();
   }
 
@@ -2823,7 +2899,9 @@ export class Notebook extends StaticNotebook {
     if (widget && widget.editorWidget?.node.contains(target)) {
       // Prevent CodeMirror from focusing the editor.
       // TODO: find an editor-agnostic solution.
-      event.preventDefault();
+      if (!target.closest('[data-jp-suppress-context-menu]')) {
+        event.preventDefault();
+      }
     }
   }
 
@@ -3011,6 +3089,7 @@ export class Notebook extends StaticNotebook {
     event.stopPropagation();
 
     // If in select mode, update the selection
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (this._mouseMode) {
       case 'select': {
         const target = event.target as HTMLElement;

package/style/base.css

@@ -62,6 +62,13 @@
 
 .jp-Notebook .jp-Cell {
   overflow: visible;
+
+  /* Prevent scroll anchoring to inactive cells */
+  overflow-anchor: none;
+}
+
+.jp-Notebook .jp-Cell.jp-mod-active {
+  overflow-anchor: auto;
 }
 
 .jp-Notebook .jp-Cell .jp-InputPrompt {
@@ -393,85 +400,6 @@
   display: none;
 }
 
-/*-----------------------------------------------------------------------------
-| Placeholder
-|----------------------------------------------------------------------------*/
-
-.jp-Cell-Placeholder {
-  padding-left: 55px;
-}
-
-.jp-Cell-Placeholder-wrapper {
-  background: #fff;
-  border: 1px solid;
-  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-  border-radius: 4px;
-  -webkit-border-radius: 4px;
-  margin: 10px 15px;
-}
-
-.jp-Cell-Placeholder-wrapper-inner {
-  padding: 15px;
-  position: relative;
-}
-
-.jp-Cell-Placeholder-wrapper-body {
-  background-repeat: repeat;
-  background-size: 50% auto;
-}
-
-.jp-Cell-Placeholder-wrapper-body div {
-  background: #f6f7f8;
-  background-image: -webkit-linear-gradient(
-    left,
-    #f6f7f8 0%,
-    #edeef1 20%,
-    #f6f7f8 40%,
-    #f6f7f8 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 800px 104px;
-  height: 104px;
-  position: absolute;
-  right: 15px;
-  left: 15px;
-  top: 15px;
-}
-
-div.jp-Cell-Placeholder-h1 {
-  top: 20px;
-  height: 20px;
-  left: 15px;
-  width: 150px;
-}
-
-div.jp-Cell-Placeholder-h2 {
-  left: 15px;
-  top: 50px;
-  height: 10px;
-  width: 100px;
-}
-
-div.jp-Cell-Placeholder-content-1,
-div.jp-Cell-Placeholder-content-2,
-div.jp-Cell-Placeholder-content-3 {
-  left: 15px;
-  right: 15px;
-  height: 10px;
-}
-
-div.jp-Cell-Placeholder-content-1 {
-  top: 100px;
-}
-
-div.jp-Cell-Placeholder-content-2 {
-  top: 120px;
-}
-
-div.jp-Cell-Placeholder-content-3 {
-  top: 140px;
-}
-
 /*-----------------------------------------------------------------------------
 | Virtual scrollbar
 |----------------------------------------------------------------------------*/
@@ -517,7 +445,7 @@ div.jp-Cell-Placeholder-content-3 {
 
 .jp-Notebook .jp-scrollbarItem-executionIndicator {
   display: inline-block;
-  font-family: monospace;
+  font-family: var(--jp-cell-prompt-font-family);
   font-size: 80%;
   line-height: 100%;
   margin-left: -1px;
@@ -527,6 +455,7 @@ div.jp-Cell-Placeholder-content-3 {
 
 .jp-Notebook .jp-scrollbarItem-source {
   display: inline-block;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
   font-size: 3px;
   vertical-align: middle;
   max-height: 10em;

package/style/executionindicator.css

@@ -61,12 +61,6 @@
   display: block;
 }
 
-.jp-Notebook-ExecutionIndicator-progress-bar {
-  display: flex;
-  justify-content: center;
-  height: 100%;
-}
-
 .jp-Notebook-ExecutionIndicator-jumpButton {
   margin-top: 4px;
   margin-bottom: 3px;