Restore auto-resizing of the code console input prompts

galata/test/jupyterlab/console.test.ts

@@ -72,3 +72,163 @@
     await expect(executedCell).toContainText('4194304');
   });
 });
+
+test.describe('Console Input Auto-Resize', () => {
+  test.beforeEach(async ({ page }) => setupConsole(page));
+
+  test('Input prompt auto-resizes with multiple lines of text', async ({
+    page
+  }) => {
+    const codeConsoleInput = page.locator('.jp-CodeConsole-input');
+
+    const initialHeight = await codeConsoleInput.boundingBox();
+    expect(initialHeight).not.toBeNull();
+
+    const multiLineCode = `def hello_world():
+print("Hello")
+print("World")
+return "Done"`;
+
+    await page.keyboard.type(multiLineCode);
+
+    const afterTypingHeight = await codeConsoleInput.boundingBox();
+    expect(afterTypingHeight).not.toBeNull();
+    expect(afterTypingHeight!.height).toBeGreaterThan(initialHeight!.height);
+  });
+
+  test('Input prompt auto-resize works with paste operations', async ({
+    page
+  }) => {
+    const codeConsoleInput = page.locator('.jp-CodeConsole-input');
+
+    const initialHeight = await codeConsoleInput.boundingBox();
+    expect(initialHeight).not.toBeNull();
+
+    const pastedCode = `import numpy as np
+import pandas as pd
+
+data = pd.DataFrame({
+    'x': [1, 2, 3, 4, 5],
+    'y': [2, 4, 6, 8, 10]
+})
+
+print(data.head())`;
+
+    await page.evaluate(async code => {
+      await navigator.clipboard.writeText(code);
+    }, pastedCode);
+
+    await page.keyboard.press('ControlOrMeta+v');
+
+    const afterPasteHeight = await codeConsoleInput.boundingBox();
+    expect(afterPasteHeight).not.toBeNull();
+    expect(afterPasteHeight!.height).toBeGreaterThan(initialHeight!.height);
+  });
+
+  test('Input prompt maintains auto-resize height when moved from bottom to top', async ({
+    page
+  }) => {
+    const codeConsoleInput = page.locator('.jp-CodeConsole-input');
+
+    const pastedCode = `def complex_function():
+    for i in range(10):
+        if i % 2 == 0:
+            print(f"Even: {i}")
+        else:
+            print(f"Odd: {i}")
+    return "Completed"`;
+
+    await page.evaluate(async code => {
+      await navigator.clipboard.writeText(code);
+    }, pastedCode);
+
+    await page.keyboard.press('ControlOrMeta+v');
+
+    const heightAtBottom = await codeConsoleInput.boundingBox();
+    expect(heightAtBottom).not.toBeNull();
+
+    await page.getByLabel('Change Console Prompt Position').first().click();
+    await page.getByText('Prompt to top').click();
+
+    const heightAtTop = await codeConsoleInput.boundingBox();
+    expect(heightAtTop).not.toBeNull();
+    expect(heightAtTop!.height).toBe(heightAtBottom!.height);
+  });
+
+  test('Input prompt continues to auto-resize after code execution', async ({
+    page
+  }) => {
+    const codeConsoleInput = page.locator('.jp-CodeConsole-input');
+
+    const initialHeight = await codeConsoleInput.boundingBox();
+    expect(initialHeight).not.toBeNull();
+
+    const multiLineCode = `def test_function():
+    print("Line 1")
+    print("Line 2")
+    return "Done"`;
+
+    await page.keyboard.type(multiLineCode);
+
+    const heightBeforeExecution = await codeConsoleInput.boundingBox();
+    expect(heightBeforeExecution).not.toBeNull();
+    expect(heightBeforeExecution!.height).toBeGreaterThan(
+      initialHeight!.height
+    );
+
+    // Execute the code
+    await page.keyboard.press('Shift+Enter');
+
+    await page.locator('text=| Idle').waitFor();
+
+    // Check that the new empty input cell has shrunk back to original size
+    const heightAfterExecution = await codeConsoleInput.boundingBox();
+    expect(heightAfterExecution).not.toBeNull();
+    expect(heightAfterExecution!.height).toBe(initialHeight!.height);
+
+    // Type new multi-line code in the new prompt cell
+    const moreCode = `import os
+import sys
+print("Testing auto-resize")
+print("After execution")`;
+
+    await page.keyboard.type(moreCode);
+
+    const heightAfterTyping = await codeConsoleInput.boundingBox();
+    expect(heightAfterTyping).not.toBeNull();
+
+    // The input should have grown again for the new multi-line content
+    expect(heightAfterTyping!.height).toBeGreaterThan(
+      heightAfterExecution!.height
+    );
+  });
+
+  test('Input prompt shrinks when content is cleared', async ({ page }) => {
+    const codeConsoleInput = page.locator('.jp-CodeConsole-input');
+
+    const initialHeight = await codeConsoleInput.boundingBox();
+    expect(initialHeight).not.toBeNull();
+
+    const multiLineCode = `def multi_line_function():
+    print("This is line 1")
+    print("This is line 2")
+    print("This is line 3")
+    for i in range(5):
+        print(f"Loop iteration {i}")
+    return "Finished"`;
+
+    await page.keyboard.type(multiLineCode);
+
+    const expandedHeight = await codeConsoleInput.boundingBox();
+    expect(expandedHeight).not.toBeNull();
+    expect(expandedHeight!.height).toBeGreaterThan(initialHeight!.height);
+
+    // Clear the input using Ctrl+A followed by Delete
+    await page.keyboard.press('ControlOrMeta+a');
+    await page.keyboard.press('Delete');
+
+    const shrunkHeight = await codeConsoleInput.boundingBox();
+    expect(shrunkHeight).not.toBeNull();
+    expect(shrunkHeight!.height).toBe(initialHeight!.height);
+  });
+});

packages/console/src/widget.ts

@@ -134,6 +134,11 @@ export class CodeConsole extends Widget {
 
     layout.addWidget(this._splitPanel);
 
+    // Listen for manual split panel resizing
+    this._splitPanel.handleMoved.connect(() => {
+      this._hasManualResize = true;
+    }, this);
+
     // initialize the console with defaults
     this.setConfig({
       clearCellsOnExecute: false,
@@ -317,6 +322,16 @@ export class CodeConsole extends Widget {
     if (this.isDisposed) {
       return;
     }
+
+    // Clean up ResizeObserver from the current prompt cell
+    const promptCell = this.promptCell;
+    if (promptCell) {
+      if (this._promptResizeObserver) {
+        this._promptResizeObserver.disconnect();
+        this._promptResizeObserver = null;
+      }
+    }
+
     this._msgIdCells = null!;
     this._msgIds = null!;
     this._history.dispose();
@@ -675,9 +690,14 @@ export class CodeConsole extends Widget {
       // the `readOnly` configuration gets updated before editor signals
       // get disconnected (see `Cell.onUpdateRequest`).
       const oldCell = promptCell;
+      const promptResizeObserver = this._promptResizeObserver;
       requestIdleCallback(() => {
         // Clear the signals to avoid memory leaks
         Signal.clearData(oldCell.editor);
+
+        if (promptResizeObserver) {
+          promptResizeObserver.disconnect();
+        }
       });
 
       // Ensure to clear the cursor
@@ -700,8 +720,24 @@ export class CodeConsole extends Widget {
     // Add the prompt cell to the DOM, making `this.promptCell` valid again.
     this._input.addWidget(promptCell);
 
+    // Reset input size to default (unless the split has manually been resized)
+    this._resetInputSize();
+
     this._history.editor = promptCell.editor;
 
+    // Detect height changes
+    if (promptCell.node) {
+      this._promptResizeObserver = new ResizeObserver(() => {
+        if (!this._hasManualResize) {
+          this._resetInputSize();
+        }
+        requestAnimationFrame(() => {
+          this._adjustSplitPanelForInputGrowth();
+        });
+      });
+      this._promptResizeObserver.observe(promptCell.node);
+    }
+
     if (!this._config.clearCodeContentOnExecute) {
       promptCell.model.sharedModel.setSource(previousContent);
       if (previousCursorPosition) {
@@ -943,12 +979,95 @@ export class CodeConsole extends Widget {
     this.node.classList.toggle(READ_WRITE_CLASS, inReadWrite);
   }
 
+  /**
+   * Calculate relative sizes for split panel based on prompt cell position.
+   */
+  private _calculateRelativeSizes(): number[] {
+    const { promptCellPosition = 'bottom' } = this._config;
+
+    let sizes = [1, 1];
+    if (promptCellPosition === 'top') {
+      sizes = [1, 100];
+    } else if (promptCellPosition === 'bottom') {
+      sizes = [100, 1];
+    }
+    return sizes;
+  }
+
+  /**
+   * Reset input area size to default when new prompt is created.
+   */
+  private _resetInputSize(): void {
+    if (this._hasManualResize) {
+      return;
+    }
+
+    const { promptCellPosition = 'bottom' } = this._config;
+
+    // Only reset for vertical layouts (top/bottom positions)
+    if (promptCellPosition === 'left' || promptCellPosition === 'right') {
+      return;
+    }
+
+    this._splitPanel.setRelativeSizes(this._calculateRelativeSizes());
+  }
+
+  /**
+   * Adjust split panel sizes when the input cell grows or shrinks.
+   */
+  private _adjustSplitPanelForInputGrowth(): void {
+    if (!this._input.node || !this._content.node || this._hasManualResize) {
+      return;
+    }
+
+    const { promptCellPosition = 'bottom' } = this._config;
+
+    // Only adjust for vertical layouts (top/bottom positions)
+    if (promptCellPosition === 'left' || promptCellPosition === 'right') {
+      return;
+    }
+
+    const inputHeight = this._input.node.scrollHeight;
+    const totalHeight = this._splitPanel.node.clientHeight;
+
+    if (totalHeight <= 0 || inputHeight <= 0) {
+      this._splitPanel.fit();
+      return;
+    }
+
+    const remainingHeight = totalHeight - inputHeight;
+    let contentRatio: number;
+    let inputRatio: number;
+
+    if (promptCellPosition === 'bottom') {
+      contentRatio = remainingHeight / totalHeight;
+      inputRatio = inputHeight / totalHeight;
+    } else {
+      inputRatio = inputHeight / totalHeight;
+      contentRatio = remainingHeight / totalHeight;
+    }
+
+    // Convert to the format expected by setRelativeSizes
+    const totalRatio = contentRatio + inputRatio;
+    if (totalRatio > 0) {
+      const normalizedSizes =
+        promptCellPosition === 'bottom'
+          ? [contentRatio / totalRatio, inputRatio / totalRatio]
+          : [inputRatio / totalRatio, contentRatio / totalRatio];
+
+      this._splitPanel.setRelativeSizes(normalizedSizes);
+    }
+  }
+
   /**
    * Update the layout of the code console.
    */
   private _updateLayout(): void {
     const { promptCellPosition = 'bottom' } = this._config;
 
+    // Reset manual resize flag when layout changes
+    this._hasManualResize = false;
+
     this._splitPanel.orientation = ['left', 'right'].includes(
       promptCellPosition
     )
@@ -967,14 +1086,12 @@ export class CodeConsole extends Widget {
       this._splitPanel.insertWidget(1, this._content);
     }
 
-    // Default relative sizes
-    let sizes = [1, 1];
-    if (promptCellPosition === 'top') {
-      sizes = [1, 100];
-    } else if (promptCellPosition === 'bottom') {
-      sizes = [100, 1];
-    }
-    this._splitPanel.setRelativeSizes(sizes);
+    this._splitPanel.setRelativeSizes(this._calculateRelativeSizes());
+
+    requestAnimationFrame(() => {
+      // adjust the sizes if the prompt cell is moved with code in it
+      this._adjustSplitPanelForInputGrowth();
+    });
   }
 
   private _banner: RawCell | null = null;
@@ -999,6 +1116,8 @@ export class CodeConsole extends Widget {
   private _focusedCell: Cell | null = null;
   private _translator: ITranslator;
   private _splitPanel: SplitPanel;
+  private _promptResizeObserver: ResizeObserver | null = null;
+  private _hasManualResize = false;
 }
 
 /**