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

package/src/cellcounterstatus.tsx

@@ -0,0 +1,523 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { DOMUtils } from '@jupyterlab/apputils';
+import type { Popup } from '@jupyterlab/statusbar';
+import { showPopup, TextItem } from '@jupyterlab/statusbar';
+import type { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import { nullTranslator } from '@jupyterlab/translation';
+import {
+  classes,
+  lineFormIcon,
+  ReactWidget,
+  VDomModel,
+  VDomRenderer
+} from '@jupyterlab/ui-components';
+import React from 'react';
+import type { Notebook } from '.';
+
+/**
+ * A namespace for CellNumberFormComponent statics.
+ */
+namespace CellNumberFormComponent {
+  /**
+   * Props for the form component.
+   */
+  export interface IProps {
+    /**
+     * A callback for when the form is submitted.
+     */
+    handleSubmit: (value: number) => void;
+
+    /**
+     * The maximum cell number the form can take.
+     */
+    maxCell: number;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
+  }
+
+  /**
+   * State for the form component.
+   */
+  export interface IState {
+    /**
+     * The current value of the form.
+     */
+    value: string;
+
+    /**
+     * Whether the form has focus.
+     */
+    hasFocus: boolean;
+
+    /**
+     * A generated ID for the input field.
+     */
+    textInputId: string;
+  }
+}
+
+/**
+ * A component for rendering a "go-to-cell" form.
+ */
+class CellNumberFormComponent extends React.Component<
+  CellNumberFormComponent.IProps,
+  CellNumberFormComponent.IState
+> {
+  /**
+   * Construct a new CellNumberFormComponent.
+   */
+  constructor(props: CellNumberFormComponent.IProps) {
+    super(props);
+    const translator = props.translator || nullTranslator;
+    this._trans = translator.load('jupyterlab');
+    this.state = {
+      value: '',
+      hasFocus: false,
+      textInputId: DOMUtils.createDomID() + '-cell-number-input'
+    };
+  }
+
+  /**
+   * Focus the element on mount.
+   */
+  componentDidMount() {
+    this._textInput?.focus();
+  }
+
+  /**
+   * Render the CellNumberFormComponent.
+   */
+  render() {
+    return (
+      <div className="jp-lineFormSearch">
+        <form name="cellNumberForm" onSubmit={this._handleSubmit} noValidate>
+          <div
+            className={classes(
+              'jp-lineFormWrapper',
+              'lm-lineForm-wrapper',
+              this.state.hasFocus ? 'jp-lineFormWrapperFocusWithin' : undefined
+            )}
+          >
+            <input
+              type="number"
+              id={this.state.textInputId}
+              className="jp-lineFormInput"
+              min={1}
+              max={this.props.maxCell}
+              onChange={this._handleChange}
+              onFocus={this._handleFocus}
+              onBlur={this._handleBlur}
+              value={this.state.value}
+              ref={input => {
+                this._textInput = input;
+              }}
+            />
+            <div className="jp-baseLineForm jp-lineFormButtonContainer">
+              <lineFormIcon.react
+                className="jp-baseLineForm jp-lineFormButtonIcon"
+                elementPosition="center"
+              />
+              <input
+                type="submit"
+                className="jp-baseLineForm jp-lineFormButton"
+                value=""
+              />
+            </div>
+          </div>
+          <label
+            className="jp-lineFormCaption"
+            htmlFor={this.state.textInputId}
+          >
+            {this._trans.__(
+              'Go to cell number between 1 and %1',
+              this.props.maxCell
+            )}
+          </label>
+        </form>
+      </div>
+    );
+  }
+
+  /**
+   * Handle a change to the value in the input field.
+   */
+  private _handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ value: event.currentTarget.value });
+  };
+
+  /**
+   * Handle submission of the input field.
+   */
+  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const value = parseInt(this._textInput?.value ?? '', 10);
+    if (
+      !isNaN(value) &&
+      isFinite(value) &&
+      1 <= value &&
+      value <= this.props.maxCell
+    ) {
+      this.props.handleSubmit(value);
+    }
+
+    return false;
+  };
+
+  /**
+   * Handle focusing of the input field.
+   */
+  private _handleFocus = () => {
+    this.setState({ hasFocus: true });
+  };
+
+  /**
+   * Handle blurring of the input field.
+   */
+  private _handleBlur = () => {
+    this.setState({ hasFocus: false });
+  };
+
+  private _trans: TranslationBundle;
+  private _textInput: HTMLInputElement | null = null;
+}
+
+/**
+ * Props for CellCounterComponent.
+ */
+namespace CellCounterComponent {
+  export interface IProps {
+    /**
+     * Current active cell number (1-based).
+     */
+    activeCell: number;
+
+    /**
+     * First selected cell number (1-based).
+     */
+    selectionStart: number;
+
+    /**
+     * Last selected cell number (1-based).
+     */
+    selectionEnd: number;
+
+    /**
+     * Total number of notebook cells.
+     */
+    totalCells: number;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
+
+    /**
+     * Click handler used to launch the go-to-cell form.
+     */
+    handleClick: () => void;
+  }
+}
+
+/**
+ * A pure functional component for rendering a notebook cell counter.
+ */
+function CellCounterComponent(
+  props: CellCounterComponent.IProps
+): React.ReactElement<CellCounterComponent.IProps> {
+  const translator = props.translator || nullTranslator;
+  const trans = translator.load('jupyterlab');
+  const source =
+    props.selectionStart > 0 && props.selectionStart !== props.selectionEnd
+      ? trans.__(
+          '%1:%2/%3',
+          props.selectionStart,
+          props.selectionEnd,
+          props.totalCells
+        )
+      : trans.__('Cell %1/%2', props.activeCell, props.totalCells);
+  const keydownHandler = (event: React.KeyboardEvent<HTMLImageElement>) => {
+    if (
+      event.key === 'Enter' ||
+      event.key === 'Spacebar' ||
+      event.key === ' '
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      props.handleClick();
+    }
+  };
+
+  return (
+    <TextItem
+      role="button"
+      aria-haspopup
+      onClick={props.handleClick}
+      source={source}
+      title={trans.__('Go to cell…')}
+      tabIndex={0}
+      onKeyDown={keydownHandler}
+    />
+  );
+}
+
+/**
+ * A widget implementing a notebook cell counter status item.
+ */
+export class CellCounterStatus extends VDomRenderer<CellCounterStatus.Model> {
+  /**
+   * Construct a new CellCounterStatus status item.
+   */
+  constructor(options: CellCounterStatus.IOptions = {}) {
+    super(new CellCounterStatus.Model());
+    this.addClass('jp-mod-highlighted');
+    this._translator = options.translator || nullTranslator;
+  }
+
+  /**
+   * Render the status item.
+   */
+  render(): JSX.Element | null {
+    if (this.model === null) {
+      return null;
+    }
+
+    return (
+      <CellCounterComponent
+        activeCell={this.model.activeCell}
+        selectionStart={this.model.selectionStart}
+        selectionEnd={this.model.selectionEnd}
+        totalCells={this.model.totalCells}
+        translator={this._translator}
+        handleClick={() => this._handleClick()}
+      />
+    );
+  }
+
+  /**
+   * A click handler for the widget.
+   */
+  private _handleClick(): void {
+    if (this.model!.totalCells < 1) {
+      return;
+    }
+
+    if (this._popup) {
+      this._popup.dispose();
+    }
+
+    const body = ReactWidget.create(
+      <CellNumberFormComponent
+        handleSubmit={value => this._handleSubmit(value)}
+        maxCell={this.model!.totalCells}
+        translator={this._translator}
+      />
+    );
+
+    this._popup = showPopup({
+      body,
+      anchor: this,
+      align: 'right'
+    });
+  }
+
+  /**
+   * Handle submission for the widget.
+   */
+  private _handleSubmit(value: number): void {
+    const notebook = this.model!.notebook;
+    if (!notebook) {
+      return;
+    }
+
+    const cellIndex = value - 1;
+    notebook.activeCellIndex = cellIndex;
+    notebook.deselectAll();
+    void notebook.scrollToItem(cellIndex).catch(reason => {
+      console.error('Go to cell', reason);
+    });
+
+    this._popup?.dispose();
+    notebook.activate();
+  }
+
+  private _translator: ITranslator;
+  private _popup: Popup | null = null;
+}
+
+/**
+ * A namespace for CellCounterStatus statics.
+ */
+export namespace CellCounterStatus {
+  /**
+   * Options for creating a CellCounterStatus item.
+   */
+  export interface IOptions {
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
+  }
+
+  /**
+   * Snapshot of the model state used for change detection.
+   */
+  interface IState {
+    /**
+     * Current active cell number (1-based).
+     */
+    activeCell: number;
+
+    /**
+     * First selected cell number (1-based).
+     */
+    selectionStart: number;
+
+    /**
+     * Last selected cell number (1-based).
+     */
+    selectionEnd: number;
+
+    /**
+     * Total number of cells.
+     */
+    totalCells: number;
+  }
+
+  /**
+   * A VDom model for a status item tracking active and total notebook cells.
+   */
+  export class Model extends VDomModel {
+    /**
+     * The notebook tracked by this model.
+     */
+    get notebook(): Notebook | null {
+      return this._notebook;
+    }
+
+    set notebook(notebook: Notebook | null) {
+      const oldNotebook = this._notebook;
+      if (oldNotebook) {
+        oldNotebook.activeCellChanged.disconnect(this._onChanged, this);
+        oldNotebook.modelContentChanged.disconnect(this._onChanged, this);
+        oldNotebook.selectionChanged.disconnect(this._onChanged, this);
+      }
+
+      const oldState = this._getAllState();
+      this._notebook = notebook;
+
+      if (!this._notebook) {
+        this._activeCell = 0;
+        this._selectionStart = 0;
+        this._selectionEnd = 0;
+        this._totalCells = 0;
+      } else {
+        this._notebook.activeCellChanged.connect(this._onChanged, this);
+        this._notebook.modelContentChanged.connect(this._onChanged, this);
+        this._notebook.selectionChanged.connect(this._onChanged, this);
+        this._updateStateFromNotebook(this._notebook);
+      }
+
+      this._triggerChange(oldState, this._getAllState());
+    }
+
+    /**
+     * The current active cell index shown to users (1-based).
+     */
+    get activeCell(): number {
+      return this._activeCell;
+    }
+
+    /**
+     * The first selected cell index shown to users (1-based).
+     */
+    get selectionStart(): number {
+      return this._selectionStart;
+    }
+
+    /**
+     * The last selected cell index shown to users (1-based).
+     */
+    get selectionEnd(): number {
+      return this._selectionEnd;
+    }
+
+    /**
+     * The total number of cells.
+     */
+    get totalCells(): number {
+      return this._totalCells;
+    }
+
+    /**
+     * React to notebook changes by refreshing the tracked state.
+     */
+    private _onChanged(notebook: Notebook): void {
+      const oldState = this._getAllState();
+      this._updateStateFromNotebook(notebook);
+      this._triggerChange(oldState, this._getAllState());
+    }
+
+    private _updateStateFromNotebook(notebook: Notebook): void {
+      const activeCellIndex = notebook.activeCellIndex;
+      this._activeCell = activeCellIndex >= 0 ? activeCellIndex + 1 : 0;
+      this._totalCells = notebook.widgets.length;
+
+      let selectionStart = this._activeCell;
+      let selectionEnd = this._activeCell;
+      let seenSelection = false;
+
+      notebook.widgets.forEach((cell, index) => {
+        if (!notebook.isSelectedOrActive(cell)) {
+          return;
+        }
+
+        const oneBasedIndex = index + 1;
+        if (!seenSelection) {
+          selectionStart = oneBasedIndex;
+          selectionEnd = oneBasedIndex;
+          seenSelection = true;
+          return;
+        }
+
+        selectionEnd = oneBasedIndex;
+      });
+
+      this._selectionStart = seenSelection ? selectionStart : 0;
+      this._selectionEnd = seenSelection ? selectionEnd : 0;
+    }
+
+    private _getAllState(): IState {
+      return {
+        activeCell: this._activeCell,
+        selectionStart: this._selectionStart,
+        selectionEnd: this._selectionEnd,
+        totalCells: this._totalCells
+      };
+    }
+
+    private _triggerChange(oldState: IState, newState: IState) {
+      if (
+        oldState.activeCell !== newState.activeCell ||
+        oldState.selectionStart !== newState.selectionStart ||
+        oldState.selectionEnd !== newState.selectionEnd ||
+        oldState.totalCells !== newState.totalCells
+      ) {
+        this.stateChanged.emit(void 0);
+      }
+    }
+
+    private _activeCell = 0;
+    private _selectionStart = 0;
+    private _selectionEnd = 0;
+    private _totalCells = 0;
+    private _notebook: Notebook | null = null;
+  }
+}

package/src/default-toolbar.tsx

@@ -363,7 +363,7 @@ export class CellTypeSwitcher extends ReactWidget {
    * Handle `keydown` events for the HTMLSelect component.
    */
   handleKeyDown = (event: React.KeyboardEvent): void => {
-    if (event.keyCode === 13) {
+    if (event.key === 'Enter') {
       this._notebook.activate();
     }
   };

package/src/index.ts

@@ -6,6 +6,7 @@
  */
 
 export * from './actions';
+export * from './cellcounterstatus';
 export * from './cellexecutor';
 export * from './celllist';
 export * from './default-toolbar';

package/src/widget.ts

@@ -614,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);
@@ -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;
         },
 
@@ -2824,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();
+      }
     }
   }