Update adapter to handle undo/redo actions

Author: goanpeca

.lintstagedrc.js

@@ -8,8 +8,21 @@ module.exports = {
   // TypeScript and TSX files
   '*.{ts,tsx}': ['eslint --fix', 'prettier --write'],
 
-  // JavaScript and JSX files
-  '*.{js,jsx}': ['eslint --fix', 'prettier --write'],
+  // JavaScript and JSX files (exclude config files)
+  '*.{js,jsx}': filenames => {
+    const filtered = filenames.filter(
+      file =>
+        !file.endsWith('.config.js') &&
+        !file.includes('gulpfile') &&
+        !file.includes('/scripts/'),
+    );
+    return filtered.length > 0
+      ? [
+          `eslint --fix ${filtered.join(' ')}`,
+          `prettier --write ${filtered.join(' ')}`,
+        ]
+      : [];
+  },
 
   // JSON files
   '*.json': ['prettier --write'],

eslint.config.js

@@ -17,7 +17,16 @@ module.exports = tseslint.config(
     languageOptions: {
       parserOptions: {
         tsconfigRootDir: path.resolve(__dirname),
-        projectService: true,
+        projectService: {
+          allowDefaultProject: [
+            '*.config.js',
+            '*.config.ts',
+            '.commitlintrc.js',
+            '.eslintrc.js',
+            '.lintstagedrc.js',
+            'gulpfile.js',
+          ],
+        },
       },
     },
   },

packages/react/eslint.config.js

@@ -10,6 +10,8 @@
  */
 
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
 import storybook from 'eslint-plugin-storybook';
 import js from '@eslint/js';
 import globals from 'globals';
@@ -19,6 +21,9 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import prettier from 'eslint-plugin-prettier';
 import tseslint from 'typescript-eslint';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 export default tseslint.config(
   {
     ignores: [
@@ -33,6 +38,9 @@ export default tseslint.config(
       '**/storybook-static/**',
       '**/.next/**',
       'tsconfig.tsbuildinfo',
+      '*.config.js',
+      'scripts/**/*.js',
+      'gulpfile.js',
     ],
   },
   {
@@ -56,8 +64,16 @@ export default tseslint.config(
       parserOptions: {
         ecmaFeatures: {
           jsx: true,
-          tsconfigRootDir: __dirname,
         },
+        projectService: {
+          allowDefaultProject: [
+            '*.js',
+            '*.mjs',
+            '*.cjs',
+            'playwright.config.ts',
+          ],
+        },
+        tsconfigRootDir: __dirname,
       },
     },
     settings: {
@@ -170,10 +186,15 @@ export default tseslint.config(
   },
   // Config files (Node.js environment)
   {
-    files: ['*.config.{js,mjs,cjs}', 'gulpfile.{js,mjs,cjs}'],
+    files: ['*.config.{js,mjs,cjs}', 'gulpfile.{js,mjs,cjs}', 'scripts/**/*.js'],
     languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
       globals: globals.node,
     },
+    rules: {
+      'no-console': 'off',
+    },
   },
   storybook.configs['flat/recommended']
 );

packages/react/package.json

@@ -41,7 +41,7 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:lintcache": "rimraf .eslintcache .stylelintcache",
     "dev": "run-p -c 'start:*'",
-    "eslint": "npm eslint:check --fix",
+    "eslint": "eslint . --cache --ext .ts,.tsx --fix",
     "eslint:check": "eslint . --cache --ext .ts,.tsx",
     "example": "run-p -c 'start:*'",
     "install:extension": "npm run build",
@@ -131,9 +131,9 @@
     "@jupyterlab/toc-extension": "^6.0.0",
     "@jupyterlab/translation-extension": "^4.0.0",
     "@jupyterlab/ui-components-extension": "^4.0.0",
+    "@jupyterlite/kernel": "^0.5.1",
     "@jupyterlite/licenses": "^0.5.1",
     "@jupyterlite/localforage": "^0.5.1",
-    "@jupyterlite/kernel": "^0.5.1",
     "@jupyterlite/pyodide-kernel": "^0.5.1",
     "@jupyterlite/pyodide-kernel-extension": "^0.5.1",
     "@jupyterlite/server": "^0.5.1",
@@ -203,6 +203,8 @@
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^9.1.12",
     "gulp": "^4.0.2",
     "gulp-append-prepend": "^1.0.8",
     "gulp-filter": "^6.0.0",

packages/react/scripts/patch-vscode-highlighting.js

@@ -7,8 +7,7 @@
  */
 
 /* eslint-env node */
-/* global require */
-/* eslint-disable @typescript-eslint/no-require-imports, no-console */
+/* eslint-disable no-console */
 
 /**
  * Post-build script to patch NotebookAdapter with VS Code syntax highlighting support

packages/react/src/components/kernel/Kernelndicator.tsx

@@ -57,21 +57,26 @@ export type ExecutionState =
  *
  * Status = 'unknown' | 'starting' | 'idle' | 'busy' | 'terminating' | 'restarting' | 'autorestarting' | 'dead';
  */
-/* eslint-disable react/jsx-key */
+
 export const KERNEL_STATES: Map<ExecutionState, ReactElement> = new Map([
-  ['connecting', <PlusCircleIcon />],
-  ['connected-unknown', <CircleCurrentColorIcon color="lightgray" />],
-  ['connected-starting', <CircleYellowIcon />],
-  ['connected-idle', <CircleGreenIcon />],
-  ['connected-busy', <CircleOrangeIcon />],
-  ['connected-terminating', <CircleWhiteIcon />],
-  ['connected-restarting', <CirclePurpleIcon />],
-  ['connected-autorestarting', <CircleHollowRedIcon />],
-  ['connected-dead', <CircleRedIcon />],
-  ['disconnecting', <CircleBrownIcon />],
-  ['undefined', <CircleBlackIcon />],
+  ['connecting', <PlusCircleIcon key="connecting" />],
+  [
+    'connected-unknown',
+    <CircleCurrentColorIcon key="connected-unknown" color="lightgray" />,
+  ],
+  ['connected-starting', <CircleYellowIcon key="connected-starting" />],
+  ['connected-idle', <CircleGreenIcon key="connected-idle" />],
+  ['connected-busy', <CircleOrangeIcon key="connected-busy" />],
+  ['connected-terminating', <CircleWhiteIcon key="connected-terminating" />],
+  ['connected-restarting', <CirclePurpleIcon key="connected-restarting" />],
+  [
+    'connected-autorestarting',
+    <CircleHollowRedIcon key="connected-autorestarting" />,
+  ],
+  ['connected-dead', <CircleRedIcon key="connected-dead" />],
+  ['disconnecting', <CircleBrownIcon key="disconnecting" />],
+  ['undefined', <CircleBlackIcon key="undefined" />],
 ]);
-/* eslint-enable react/jsx-key */
 
 export const toKernelState = (
   connectionStatus: ConnectionStatus,

packages/react/src/components/lumino/Lumino.tsx

@@ -13,9 +13,12 @@ type LuminoProps = {
   children: Widget;
 };
 
-export const Lumino = (props: LuminoProps) => {
+export const Lumino = ({
+  id = 'lumino-id',
+  height = '100%',
+  children,
+}: LuminoProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const { children, id, height } = props;
   useEffect(() => {
     console.log(
       'Lumino useEffect - ref.current:',
@@ -76,9 +79,4 @@ export const Lumino = (props: LuminoProps) => {
   );
 };
 
-Lumino.defaultProps = {
-  id: 'lumino-id',
-  height: '100%',
-};
-
 export default Lumino;

packages/react/src/components/notebook/Notebook2Adapter.ts

@@ -5,7 +5,11 @@
  */
 
 import { CommandRegistry } from '@lumino/commands';
-import { NotebookPanel, NotebookActions, type Notebook } from '@jupyterlab/notebook';
+import {
+  NotebookPanel,
+  NotebookActions,
+  type Notebook,
+} from '@jupyterlab/notebook';
 import { Context } from '@jupyterlab/docregistry';
 import { NotebookModel } from '@jupyterlab/notebook';
 import * as nbformat from '@jupyterlab/nbformat';
@@ -75,20 +79,20 @@ export class Notebook2Adapter {
    */
   insertAbove(source?: string): void {
     const notebook = this._notebook;
-    
+
     // Insert above using NotebookActions
     NotebookActions.insertAbove(notebook);
-    
+
     // Set the cell type if different from default
     if (this._defaultCellType !== 'code') {
       NotebookActions.changeCellType(notebook, this._defaultCellType);
     }
-    
+
     // Set the source if provided
     if (source && notebook.activeCell) {
       notebook.activeCell.model.sharedModel.setSource(source);
     }
-    
+
     // Enter edit mode
     notebook.mode = 'edit';
   }
@@ -98,20 +102,20 @@ export class Notebook2Adapter {
    */
   insertBelow(source?: string): void {
     const notebook = this._notebook;
-    
+
     // Insert below using NotebookActions
     NotebookActions.insertBelow(notebook);
-    
+
     // Set the cell type if different from default
     if (this._defaultCellType !== 'code') {
       NotebookActions.changeCellType(notebook, this._defaultCellType);
     }
-    
+
     // Set the source if provided
     if (source && notebook.activeCell) {
       notebook.activeCell.model.sharedModel.setSource(source);
     }
-    
+
     // Enter edit mode
     notebook.mode = 'edit';
   }
@@ -121,7 +125,7 @@ export class Notebook2Adapter {
    */
   changeCellType(cellType: nbformat.CellType): void {
     const notebook = this._notebook;
-    
+
     if (notebook.activeCell && notebook.activeCell.model.type !== cellType) {
       NotebookActions.changeCellType(notebook, cellType);
     }
@@ -142,6 +146,20 @@ export class Notebook2Adapter {
     return this._context.model;
   }
 
+  /**
+   * Undo the last change in the notebook.
+   */
+  undo(): void {
+    NotebookActions.undo(this._notebook);
+  }
+
+  /**
+   * Redo the last undone change in the notebook.
+   */
+  redo(): void {
+    NotebookActions.redo(this._notebook);
+  }
+
   /**
    * Dispose of the adapter.
    */

packages/react/src/components/notebook/Notebook2State.ts

@@ -8,7 +8,7 @@ import { createStore } from 'zustand/vanilla';
 import { useStore } from 'zustand';
 import * as nbformat from '@jupyterlab/nbformat';
 import { NotebookCommandIds } from './NotebookCommands';
-import { Notebook2Adapter}  from './Notebook2Adapter';
+import { Notebook2Adapter } from './Notebook2Adapter';
 
 export type INotebook2State = {
   adapter?: Notebook2Adapter;
@@ -35,6 +35,8 @@ export type Notebook2State = INotebooks2State & {
   insertBelow: (mutation: CellMutation) => void;
   delete: (id: string) => void;
   changeCellType: (mutation: CellMutation) => void;
+  undo: (id: string) => void;
+  redo: (id: string) => void;
   reset: () => void;
 };
 
@@ -87,6 +89,16 @@ export const notebookStore2 = createStore<Notebook2State>((set, get) => ({
       .notebooks.get(mutation.id)
       ?.adapter?.changeCellType(mutation.cellType);
   },
+  undo: (id: string): void => {
+    // Directly call adapter's undo method which uses NotebookActions
+    // This works for both local notebooks and collaborative notebooks
+    get().notebooks.get(id)?.adapter?.undo();
+  },
+  redo: (id: string): void => {
+    // Directly call adapter's redo method which uses NotebookActions
+    // This works for both local notebooks and collaborative notebooks
+    get().notebooks.get(id)?.adapter?.redo();
+  },
   reset: () =>
     set((state: Notebook2State) => ({
       notebooks: new Map<string, INotebook2State>(),

packages/react/src/components/output/ipywidgets/IPyWidgetsViewManager.ts

@@ -57,10 +57,8 @@ export class IPyWidgetsViewManager extends ManagerBase {
     });
   }
   async display_view(view: any) {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
     return Promise.resolve(view).then(view => {
-      Widget.attach(view.luminoWidget, that.el);
+      Widget.attach(view.luminoWidget, this.el);
       return view;
     });
   }