Backport PR jupyterlab#11398: fix jupyterlab#11377 & bump Yjs dependencies & fix modeldb overwriting yjs content (jupyterlab#11408)

Author: dmonad

dev_mode/package.json

@@ -121,7 +121,7 @@
     "@lumino/widgets": "^1.19.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "yjs": "^13.5.6"
+    "yjs": "^13.5.17"
   },
   "dependencies": {
     "@jupyterlab/application": "~3.2.2",

galata/test/jupyterlab/completer.test.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+const fileName = 'notebook.ipynb';
+const COMPLETER_SELECTOR = '.jp-Completer';
+
+test.describe('Completer', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.notebook.createNew(fileName);
+  });
+
+  test('Open completer', async ({ page }) => {
+    await page.notebook.setCell(
+      0,
+      'code',
+      'option_1 = 1\n' + 'option_2 = lambda x: x\n' + 'option_3 = int'
+    );
+    await page.notebook.runCell(0, true);
+    await page.notebook.addCell('code', 'option');
+    await page.notebook.enterCellEditingMode(1);
+
+    // we need to wait until the completer gets bound to the cell after entering it
+    await page.waitForTimeout(50);
+    await page.keyboard.press('Tab');
+
+    const completer = page.locator(COMPLETER_SELECTOR);
+    await completer.waitFor();
+
+    const imageName = 'completer.png';
+    // TODO: on first trigger types are not properly displayed, reference image will need updating
+    expect(await completer.screenshot()).toMatchSnapshot(imageName);
+  });
+
+  test('Filter completer suggestions by typing', async ({ page }) => {
+    // test against https://github.com/jupyterlab/jupyterlab/issues/11377
+
+    // `getopt` did not change much in many years, it should be stable
+    await page.notebook.setCell(0, 'code', 'import getopt');
+    await page.notebook.runCell(0, true);
+    await page.notebook.addCell('code', 'getopt.');
+    await page.notebook.enterCellEditingMode(1);
+
+    // we need to wait until the completer gets bound to the cell after entering it
+    await page.waitForTimeout(50);
+    await page.keyboard.press('Tab');
+
+    const completer = page.locator(COMPLETER_SELECTOR);
+    await completer.waitFor();
+
+    await page.keyboard.type('g', { delay: 10 });
+
+    const imageName = 'completer-filter.png';
+    expect(await completer.screenshot()).toMatchSnapshot(imageName);
+  });
+});

galata/test/jupyterlab/completer.test.ts-snapshots/completer-filter-jupyterlab-linux.png

@@ -121,7 +121,7 @@
     "@lumino/widgets": "^1.19.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "yjs": "^13.5.6"
+    "yjs": "^13.5.17"
   },
   "dependencies": {
     "@jupyterlab/application": "~3.2.2",

galata/test/jupyterlab/completer.test.ts-snapshots/completer-jupyterlab-linux.png

@@ -28,6 +28,7 @@ import {
 } from '@jupyterlab/observables';
 
 import { IOutputAreaModel, OutputAreaModel } from '@jupyterlab/outputarea';
+const globalModelDBMutex = models.createMutex();
 
 /**
  * The definition of a model object for a cell.
@@ -308,7 +309,7 @@ export class CellModel extends CodeEditor.Model implements ICellModel {
     event: IObservableJSON.IChangedArgs
   ): void {
     const metadata = this.sharedModel.getMetadata();
-    this._modelDBMutex(() => {
+    globalModelDBMutex(() => {
       switch (event.type) {
         case 'add':
           this._changeCellMetadata(metadata, event);
@@ -377,7 +378,7 @@ export class CellModel extends CodeEditor.Model implements ICellModel {
     change: models.CellChange<models.ISharedBaseCellMetadata>
   ): void {
     super._onSharedModelChanged(sender, change);
-    this._modelDBMutex(() => {
+    globalModelDBMutex(() => {
       if (change.metadataChange) {
         const newValue = change.metadataChange
           ?.newValue as models.ISharedBaseCellMetadata;
@@ -420,11 +421,6 @@ export class CellModel extends CodeEditor.Model implements ICellModel {
   protected onGenericChange(): void {
     this.contentChanged.emit(void 0);
   }
-
-  /**
-   * A mutex to update the shared model.
-   */
-  protected readonly _modelDBMutex = models.createMutex();
   sharedModel: models.ISharedCell;
 }
 
@@ -629,7 +625,7 @@ export class CodeCellModel extends CellModel implements ICodeCellModel {
 
     executionCount.changed.connect(this._onExecutionCountChanged, this);
 
-    this._modelDBMutex(() => {
+    globalModelDBMutex(() => {
       const sharedCell = this.sharedModel as models.ISharedCodeCell;
       sharedCell.setOutputs(outputs);
     });
@@ -790,7 +786,7 @@ export class CodeCellModel extends CellModel implements ICodeCellModel {
     event: IOutputAreaModel.ChangedArgs
   ): void {
     const codeCell = this.sharedModel as models.YCodeCell;
-    this._modelDBMutex(() => {
+    globalModelDBMutex(() => {
       switch (event.type) {
         case 'add': {
           const outputs = event.newValues.map(output => output.toJSON());
@@ -842,7 +838,7 @@ export class CodeCellModel extends CellModel implements ICodeCellModel {
     change: models.CellChange<models.ISharedBaseCellMetadata>
   ): void {
     super._onSharedModelChanged(sender, change);
-    this._modelDBMutex(() => {
+    globalModelDBMutex(() => {
       if (change.outputsChange) {
         this.clearExecution();
         sender.getOutputs().forEach(output => this._outputs.add(output));
@@ -864,7 +860,7 @@ export class CodeCellModel extends CellModel implements ICodeCellModel {
     args: ObservableValue.IChangedArgs
   ): void {
     const codeCell = this.sharedModel as models.YCodeCell;
-    this._modelDBMutex(() => {
+    globalModelDBMutex(() => {
       codeCell.execution_count = args.newValue
         ? (args.newValue as number)
         : null;

jupyterlab/staging/package.json

@@ -17,6 +17,8 @@ import { JSONObject } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
 
+const globalModelDBMutex = models.createMutex();
+
 /**
  * A namespace for code editors.
  *
@@ -283,7 +285,7 @@ export namespace CodeEditor {
       sender: models.ISharedBaseCell<any>,
       change: models.CellChange<nbformat.IBaseCellMetadata>
     ): void {
-      this._mutex(() => {
+      globalModelDBMutex(() => {
         if (change.sourceChange) {
           const value = this.modelDB.get('value') as IObservableString;
           let currpos = 0;
@@ -308,7 +310,7 @@ export namespace CodeEditor {
       value: IObservableString,
       event: IObservableString.IChangedArgs
     ): void {
-      this._mutex(() => {
+      globalModelDBMutex(() => {
         this.sharedModel.transact(() => {
           switch (event.type) {
             case 'insert':
@@ -338,11 +340,6 @@ export namespace CodeEditor {
      */
     sharedModel: models.ISharedText;
 
-    /**
-     * A mutex to update the shared model.
-     */
-    protected readonly _mutex = models.createMutex();
-
     /**
      * The underlying `IModelDB` instance in which model
      * data is stored.

packages/cells/src/model.ts

@@ -56,7 +56,7 @@
     "@lumino/widgets": "^1.19.0",
     "codemirror": "~5.61.0",
     "react": "^17.0.1",
-    "y-codemirror": "^2.1.1"
+    "y-codemirror": "^3.0.0"
   },
   "devDependencies": {
     "@jupyterlab/testutils": "^3.2.2",

packages/codeeditor/src/editor.ts

@@ -164,8 +164,13 @@ export class CodeMirrorEditor implements CodeEditor.IEditor {
         this.onKeydown(event);
       }
     });
-    CodeMirror.on(editor, 'cursorActivity', () => this._onCursorActivity());
-    if (!USE_YCODEMIRROR_BINDING) {
+
+    if (USE_YCODEMIRROR_BINDING) {
+      this._yeditorBinding?.on('cursorActivity', () =>
+        this._onCursorActivity()
+      );
+    } else {
+      CodeMirror.on(editor, 'cursorActivity', () => this._onCursorActivity());
       CodeMirror.on(editor.getDoc(), 'beforeChange', (instance, change) => {
         this._beforeDocChanged(instance, change);
       });

packages/codemirror/package.json

@@ -41,7 +41,7 @@
     "@lumino/coreutils": "^1.5.3",
     "lib0": "^0.2.42",
     "y-websocket": "^1.3.15",
-    "yjs": "^13.5.6"
+    "yjs": "^13.5.17"
   },
   "devDependencies": {
     "@jupyterlab/testutils": "^3.2.2",