Merge branch 'main' into fix23

Author: nakul-py

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-## Contributing
+# Contributing
 
-### Development install
+## Development install
 
 Note: You will need NodeJS to build the extension package.
 
@@ -36,7 +36,7 @@ By default, the `jlpm build` command generates the source maps for this extensio
 jupyter lab build --minimize=False
 ```
 
-### Development uninstall
+## Development uninstall
 
 ```bash
 # Server extension must be manually disabled in develop mode

README.md

@@ -38,7 +38,7 @@ The extension provides commands to show diffs in multiple formats:
 - `jupyterlab-diff:unified-cell-diff` - Show cell diff using unified view
 - `jupyterlab-diff:unified-file-diff` - Show file diff using unified view for regular Python files and other text files
 
-https://github.com/user-attachments/assets/0dacd7f0-5963-4ebe-81da-2958f0117071
+<https://github.com/user-attachments/assets/0dacd7f0-5963-4ebe-81da-2958f0117071>
 
 ### Programmatic Usage
 
@@ -82,7 +82,7 @@ The commands can also be run from the browser console (for example during develo
 
 First JupyterLab needs to be started with the `--expose-app-in-browser` flag to expose `window.jupyterapp`:
 
-```
+```bash
 jupyter lab --expose-app-in-browser
 ```
 
@@ -138,6 +138,17 @@ The extension provides two diff viewing strategies:
 
 - **Unified diff** (`unified-cell-diff`/`unified-file-diff`): Uses CodeMirror's `unifiedMergeView`. Displays changes in a single unified view with added/removed lines clearly marked. Can be used for both cell diffs and regular file diffs.
 
+## Contributing
+
+We welcome contributions from the community! To contribute:
+
+- Fork the repository
+- Make a development install of jupyterlab-diff
+- Create a new branch
+- Make your changes
+- Submit a pull request
+  For more details, check out our [CONTRIBUTING.md](https://github.com/jupyter-ai-contrib/jupyterlab-diff?tab=contributing-ov-file#contributing).
+
 ## Uninstall
 
 To remove the extension, execute:

src/diff/base-unified-diff.ts

@@ -90,20 +90,32 @@ export abstract class BaseUnifiedDiffManager {
    */
   protected abstract removeToolbarButtons(): void;
 
+  /**
+   * Hook to hide the cell toolbar — overridden in subclasses
+   */
+  protected hideCellToolbar(): void {}
+
+  /**
+   * Hook to show the cell toolbar — overridden in subclasses
+   */
+  protected showCellToolbar(): void {}
+
   /**
    * Activate the diff view
    */
   protected activate(): void {
     this._applyDiff();
     this.addToolbarButtons();
+    this.hideCellToolbar();
   }
 
   /**
    * Deactivate the diff view
    */
-  private _deactivate(): void {
+  protected _deactivate(): void {
     this.removeToolbarButtons();
     this._cleanupEditor();
+    this.showCellToolbar();
   }
 
   /**

src/diff/unified-cell.ts

@@ -1,4 +1,4 @@
-import { ICellModel } from '@jupyterlab/cells';
+import { Cell } from '@jupyterlab/cells';
 import { checkIcon, ToolbarButton, undoIcon } from '@jupyterlab/ui-components';
 import { ICellFooterTracker } from 'jupyterlab-cell-input-footer';
 import {
@@ -12,9 +12,9 @@ import type { ISharedText } from '@jupyter/ydoc';
  */
 export interface IUnifiedCellDiffOptions extends IBaseUnifiedDiffOptions {
   /**
-   * The cell to show the diff for
+   * The cell widget to show the diff for
    */
-  cell: ICellModel;
+  cell: Cell;
 
   /**
    * The cell footer tracker
@@ -37,6 +37,8 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
     this.activate();
   }
 
+  private static _activeDiffCount = 0;
+
   /**
    * Check if this cell still has pending changes
    */
@@ -48,7 +50,66 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
    * Get the shared model for source manipulation
    */
   protected getSharedModel(): ISharedText {
-    return this._cell.sharedModel;
+    return this._cell.model.sharedModel;
+  }
+
+  /**
+   * Activate the diff view without cell toolbar.
+   */
+  protected activate(): void {
+    super.activate();
+    UnifiedCellDiffManager._activeDiffCount++;
+
+    const observer = new MutationObserver(() => {
+      this.hideCellToolbar();
+    });
+
+    observer.observe(this._cell.node, {
+      childList: true,
+      subtree: true
+    });
+
+    (this as any)._toolbarObserver = observer;
+  }
+
+  /**
+   * Deactivate the diff view with cell toolbar.
+   */
+  protected _deactivate(): void {
+    super['_deactivate']();
+    UnifiedCellDiffManager._activeDiffCount = Math.max(
+      0,
+      UnifiedCellDiffManager._activeDiffCount - 1
+    );
+
+    const observer = (this as any)._toolbarObserver as MutationObserver;
+    if (observer) {
+      observer.disconnect();
+    }
+  }
+  /**
+   * Hide the cell's toolbar while the diff is active
+   */
+  protected hideCellToolbar(): void {
+    const toolbar = this._cell.node.querySelector('jp-toolbar') as HTMLElement;
+    if (toolbar) {
+      toolbar.style.display = 'none';
+    }
+  }
+
+  /**
+   * Show the cell's toolbar when the diff is deactivated
+   */
+  protected showCellToolbar(): void {
+    if (UnifiedCellDiffManager._activeDiffCount > 0) {
+      return;
+    }
+    const toolbar = this._cell.node.querySelector(
+      'jp-toolbar'
+    ) as HTMLElement | null;
+    if (toolbar) {
+      toolbar.style.display = '';
+    }
   }
 
   /**
@@ -92,6 +153,9 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
     }
 
     this._cellFooterTracker.showFooter(cellId);
+
+    // Hide the main cell toolbar to avoid overlap
+    this.hideCellToolbar();
   }
 
   /**
@@ -115,9 +179,12 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
 
     // Hide the footer if no other items remain
     this._cellFooterTracker.hideFooter(cellId);
+
+    // Show the main cell toolbar again
+    this.showCellToolbar();
   }
 
-  private _cell: ICellModel;
+  private _cell: Cell;
   private _cellFooterTracker?: ICellFooterTracker;
 }
 

src/plugin.ts

@@ -297,7 +297,7 @@ const unifiedCellDiffPlugin: JupyterFrontEndPlugin<void> = {
 
         // Create a new manager
         const manager = await createUnifiedCellDiffView({
-          cell,
+          cell: cellWidget,
           editor: cellWidget.editor as CodeMirrorEditor,
           cellFooterTracker,
           originalSource,