feat: add Ctrl/Cmd zoom controls (wheel and +/-/0) with invert option

  - add csv.mouseWheelZoom and csv.mouseWheelZoomInvert settings
  - support Ctrl/Cmd + wheel, Ctrl/Cmd + +, Ctrl/Cmd + -, Ctrl/Cmd + 0 in webview
  - persist zoom level and scale row minimum height with zoom
  - update README and add webview zoom tests

Author: jonaraphael

README.md

@@ -38,6 +38,7 @@ Working with CSV files shouldn’t be a chore. With CSV, you get:
 - **Edit Empty CSVs:** Create or open an empty CSV file and start typing immediately.
 - **Column Sorting:** Right-click a header and choose A–Z or Z–A.
 - **Custom Font Controls:** Choose a font family and optional font-size override, or inherit VS Code defaults.
+- **In-View Zoom:** Use `Ctrl/Cmd + Mouse Wheel` or `Ctrl/Cmd + +/-/0` to zoom the CSV view without changing global editor zoom.
 - **Find & Replace Overlay:** Built-in find/replace bar with match options (case, whole-word, regex), keyboard navigation, and single/all replace actions across the full file (including chunked rows).
 - **Multiline Cell Display:** Cells with embedded newlines render as wrapped multi-line content (with preserved line breaks and matching row height).
 - **Clickable Links:** URLs in cells are automatically detected and displayed as clickable links. Ctrl/Cmd+click to open them in your browser.
@@ -99,6 +100,8 @@ Global (Settings UI or `settings.json`):
 - `csv.enabled` (boolean, default `true`): Enable/disable the custom editor.
 - `csv.fontFamily` (string, default empty): Override font family; falls back to `editor.fontFamily`.
 - `csv.fontSize` (number, default `0`): Override font size in px; set to `0` to inherit `editor.fontSize`.
+- `csv.mouseWheelZoom` (boolean, default `true`): Enable `Ctrl/Cmd + Mouse Wheel` zooming in the CSV editor.
+- `csv.mouseWheelZoomInvert` (boolean, default `false`): Invert the `Ctrl/Cmd + Mouse Wheel` zoom direction.
 - `csv.cellPadding` (number, default `4`): Vertical cell padding in pixels.
 - `csv.columnColorMode` (string, default `type`): `type` keeps CSV’s type-based column colors; `theme` uses your theme foreground color for all columns.
 - `csv.columnColorPalette` (string, default `default`): Type-color palette when `csv.columnColorMode` is `type`. `cool` biases colors toward greens/blues; `warm` biases colors toward oranges/reds.
@@ -133,6 +136,7 @@ Per-file (stored by the extension; set via commands):
 - Global:
   - Copy selection: `Ctrl/Cmd + C`
   - Paste selection: `Ctrl/Cmd + V` (selection mode). Pasting a single value into a selected rectangle fills that rectangle.
+  - Zoom in/out/reset: `Ctrl/Cmd + +`, `Ctrl/Cmd + -`, `Ctrl/Cmd + 0` (also `Ctrl/Cmd + Mouse Wheel`)
   - Find: `Ctrl/Cmd + F`
   - Replace: `Ctrl/Cmd + H`
   - Next/Previous match: `F3` / `Shift + F3` (also `Enter` / `Shift + Enter` in the Find box)

media/main.js

@@ -12,10 +12,17 @@ const parsePositiveNumber = value => {
   if (!Number.isFinite(parsed) || parsed <= 0) return undefined;
   return parsed;
 };
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const configuredFontSizePx = parsePositiveNumber(root?.dataset?.fontsize);
 const computedFontSizePx = parsePositiveNumber(window.getComputedStyle(document.body).fontSize);
 const BASE_FONT_SIZE_PX = configuredFontSizePx ?? computedFontSizePx ?? 14;
-const MIN_ROW_HEIGHT = Math.max(22, Math.round(BASE_FONT_SIZE_PX * 1.6));
+const MOUSE_WHEEL_ZOOM_ENABLED = root?.dataset?.wheelzoomenabled !== '0';
+const MOUSE_WHEEL_ZOOM_INVERTED = root?.dataset?.wheelzoominvert === '1';
+const ZOOM_STEP = 0.1;
+const ZOOM_MIN = 0.5;
+const ZOOM_MAX = 3.0;
+let zoomScale = 1;
+const getMinRowHeight = () => Math.max(22, Math.round(BASE_FONT_SIZE_PX * zoomScale * 1.6));
 
 let lastContextIsHeader = false;   // remembers whether we right-clicked a <th>
 let isUpdating = false, isSelecting = false, anchorCell = null, rangeEndCell = null, currentSelection = [];
@@ -65,7 +72,7 @@ const applySizeStateToRenderedCells = () => {
     });
   }
   for (const [row, height] of Object.entries(rowSizeState)) {
-    const px = Math.max(MIN_ROW_HEIGHT, Math.round(Number(height)));
+    const px = Math.max(getMinRowHeight(), Math.round(Number(height)));
     table.querySelectorAll(`[data-row="${row}"]`).forEach(cell => {
       cell.style.height = `${px}px`;
       cell.style.minHeight = `${px}px`;
@@ -83,6 +90,46 @@ const getFirstDataRow = () => {
   return Number.isFinite(min) ? min : 0;
 };
 
+const setZoomScale = (nextScale, persist = true) => {
+  const normalized = clamp(Math.round(nextScale * 100) / 100, ZOOM_MIN, ZOOM_MAX);
+  if (Math.abs(normalized - zoomScale) < 0.001) {
+    return false;
+  }
+  zoomScale = normalized;
+  document.body.style.fontSize = `${Math.max(1, BASE_FONT_SIZE_PX * zoomScale)}px`;
+  applySizeStateToRenderedCells();
+  if (persist) {
+    persistState();
+  }
+  return true;
+};
+const zoomIn = () => setZoomScale(zoomScale + ZOOM_STEP);
+const zoomOut = () => setZoomScale(zoomScale - ZOOM_STEP);
+const resetZoom = () => setZoomScale(1);
+const isZoomModifier = e => (e.ctrlKey || e.metaKey) && !e.altKey;
+const isZoomInShortcut = e => e.code === 'NumpadAdd' || e.key === '+' || e.key === '=';
+const isZoomOutShortcut = e => e.code === 'NumpadSubtract' || e.key === '-' || e.key === '_';
+const isZoomResetShortcut = e => e.key === '0';
+const maybeHandleZoomShortcut = e => {
+  if (!isZoomModifier(e)) return false;
+  if (isZoomInShortcut(e)) {
+    e.preventDefault();
+    zoomIn();
+    return true;
+  }
+  if (isZoomOutShortcut(e)) {
+    e.preventDefault();
+    zoomOut();
+    return true;
+  }
+  if (isZoomResetShortcut(e)) {
+    e.preventDefault();
+    resetZoom();
+    return true;
+  }
+  return false;
+};
+
 // Persist/restore view state (scroll + selection) across webview reloads
 const persistState = () => {
   try {
@@ -95,7 +142,8 @@ const persistState = () => {
       anchorRow: anchor ? anchor.row : undefined,
       anchorCol: anchor ? anchor.col : undefined,
       columnSizes: { ...columnSizeState },
-      rowSizes: { ...rowSizeState }
+      rowSizes: { ...rowSizeState },
+      zoomScale
     };
     vscode.setState(nextState);
   } catch {}
@@ -104,8 +152,10 @@ const persistState = () => {
 const restoreState = () => {
   try {
     const st = vscode.getState() || {};
+    const restoredZoom = parsePositiveNumber(st.zoomScale);
+    setZoomScale(restoredZoom ?? 1, false);
     columnSizeState = normalizeSizeState(st.columnSizes, 40);
-    rowSizeState = normalizeSizeState(st.rowSizes, MIN_ROW_HEIGHT);
+    rowSizeState = normalizeSizeState(st.rowSizes, getMinRowHeight());
     applySizeStateToRenderedCells();
     if (typeof st.scrollX === 'number' && scrollContainer) {
       scrollContainer.scrollLeft = st.scrollX;
@@ -302,6 +352,21 @@ document.addEventListener('visibilitychange', () => {
   }
 });
 
+const handleZoomWheel = e => {
+  if (!MOUSE_WHEEL_ZOOM_ENABLED) return;
+  if (!isZoomModifier(e)) return;
+  if (Math.abs(e.deltaY) < 0.1) return;
+  e.preventDefault();
+  const naturalDirection = e.deltaY < 0 ? 1 : -1;
+  const direction = MOUSE_WHEEL_ZOOM_INVERTED ? -naturalDirection : naturalDirection;
+  if (direction > 0) {
+    zoomIn();
+  } else {
+    zoomOut();
+  }
+};
+window.addEventListener('wheel', handleZoomWheel, { passive: false });
+
 const hasHeader = document.querySelector('thead') !== null;
 const getCellCoords = cell => ({ row: parseInt(cell.getAttribute('data-row')), col: parseInt(cell.getAttribute('data-col')) });
 const clearSelection = () => { currentSelection.forEach(c => c.classList.remove('selected')); currentSelection = []; };
@@ -533,7 +598,7 @@ const resetColumnWidth = col => {
   });
 };
 const applyRowHeight = (row, heightPx) => {
-  const height = Math.max(MIN_ROW_HEIGHT, Math.round(heightPx));
+  const height = Math.max(getMinRowHeight(), Math.round(heightPx));
   rowSizeState[String(row)] = height;
   table.querySelectorAll(`[data-row="${row}"]`).forEach(cell => {
     cell.style.height = `${height}px`;
@@ -1428,6 +1493,9 @@ document.addEventListener('keydown', e => {
 }, true);
 
 document.addEventListener('keydown', e => {
+  if (maybeHandleZoomShortcut(e)) {
+    return;
+  }
   const key = typeof e.key === 'string' ? e.key.toLowerCase() : '';
   if ((e.ctrlKey || e.metaKey) && key === 'f') {
     e.preventDefault();

package.json

@@ -123,6 +123,18 @@
           "description": "Font size in pixels for the CSV custom editor. Set to 0 to inherit 'editor.fontSize'.",
           "scope": "application"
         },
+        "csv.mouseWheelZoom": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable Ctrl/Cmd + mouse wheel zoom in the CSV editor.",
+          "scope": "application"
+        },
+        "csv.mouseWheelZoomInvert": {
+          "type": "boolean",
+          "default": false,
+          "description": "Invert the Ctrl/Cmd + mouse wheel zoom direction in the CSV editor.",
+          "scope": "application"
+        },
         "csv.cellPadding": {
           "type": "number",
           "default": 4,

src/CsvEditorProvider.ts

@@ -1396,6 +1396,8 @@ class CsvEditorController {
     );
     const columnColorPalette = config.get<string>('columnColorPalette', 'default');
     const showTrailingEmptyRow = config.get<boolean>('showTrailingEmptyRow', true);
+    const mouseWheelZoomEnabled = config.get<boolean>('mouseWheelZoom', true);
+    const mouseWheelZoomInvert = config.get<boolean>('mouseWheelZoomInvert', false);
 
     const { tableHtml, chunksJson, colorCss, nextChunkStart, hasRemoteChunks, chunkState } =
       this.generateTableAndChunks(
@@ -1424,7 +1426,9 @@ class CsvEditorController {
       chunksJson,
       extraColumnColorCss: colorCss,
       nextChunkStart,
-      hasRemoteChunks
+      hasRemoteChunks,
+      mouseWheelZoomEnabled,
+      mouseWheelZoomInvert
     });
   }
 
@@ -1675,8 +1679,10 @@ class CsvEditorController {
     extraColumnColorCss: string;
     nextChunkStart: number;
     hasRemoteChunks: boolean;
+    mouseWheelZoomEnabled: boolean;
+    mouseWheelZoomInvert: boolean;
   }): string {
-    const { webview, nonce, fontFamily, fontSize, cellPadding, separator, tableHtml, chunksJson, extraColumnColorCss, nextChunkStart, hasRemoteChunks } = args;
+    const { webview, nonce, fontFamily, fontSize, cellPadding, separator, tableHtml, chunksJson, extraColumnColorCss, nextChunkStart, hasRemoteChunks, mouseWheelZoomEnabled, mouseWheelZoomInvert } = args;
     const isDark = vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark;
     // Build script URI using file path for compatibility (older APIs may lack Uri.joinPath)
     const scriptUri = webview.asWebviewUri(
@@ -1888,7 +1894,7 @@ class CsvEditorController {
     </style>
   </head>
   <body>
-    <div id="csv-root" class="table-container" data-sepcode="${sepCode}" data-fontsize="${fontSize}" data-nextchunkstart="${nextChunkStart >= 0 ? nextChunkStart : ''}" data-hasmorechunks="${hasRemoteChunks ? '1' : '0'}">
+    <div id="csv-root" class="table-container" data-sepcode="${sepCode}" data-fontsize="${fontSize}" data-wheelzoomenabled="${mouseWheelZoomEnabled ? '1' : '0'}" data-wheelzoominvert="${mouseWheelZoomInvert ? '1' : '0'}" data-nextchunkstart="${nextChunkStart >= 0 ? nextChunkStart : ''}" data-hasmorechunks="${hasRemoteChunks ? '1' : '0'}">
       ${tableHtml}
     </div>
 

src/test/webview-size-persistence.test.ts

@@ -9,23 +9,27 @@ describe('Webview size persistence', () => {
   it('persists column and row sizes in webview state', () => {
     assert.ok(source.includes('columnSizes: { ...columnSizeState }'));
     assert.ok(source.includes('rowSizes: { ...rowSizeState }'));
+    assert.ok(source.includes('zoomScale'));
   });
 
   it('restores and reapplies size state after render/chunk loads', () => {
     assert.ok(source.includes('columnSizeState = normalizeSizeState(st.columnSizes, 40);'));
-    assert.ok(source.includes('rowSizeState = normalizeSizeState(st.rowSizes, MIN_ROW_HEIGHT);'));
+    assert.ok(source.includes('rowSizeState = normalizeSizeState(st.rowSizes, getMinRowHeight());'));
+    assert.ok(source.includes('setZoomScale(restoredZoom ?? 1, false);'));
     assert.ok(source.includes('applySizeStateToRenderedCells();'));
   });
 
   it('updates in-memory size maps when resizing', () => {
     assert.ok(source.includes('columnSizeState[String(col)] = width;'));
     assert.ok(source.includes('rowSizeState[String(row)] = height;'));
-    assert.ok(source.includes('Math.max(MIN_ROW_HEIGHT, Math.round(heightPx))'));
+    assert.ok(source.includes('Math.max(getMinRowHeight(), Math.round(heightPx))'));
   });
 
   it('derives a dynamic minimum row height from configured font size', () => {
     assert.ok(source.includes('const BASE_FONT_SIZE_PX ='));
-    assert.ok(source.includes('const MIN_ROW_HEIGHT = Math.max(22, Math.round(BASE_FONT_SIZE_PX * 1.6));'));
+    assert.ok(source.includes('const ZOOM_MIN = 0.5;'));
+    assert.ok(source.includes('const ZOOM_MAX = 3.0;'));
+    assert.ok(source.includes('const getMinRowHeight = () => Math.max(22, Math.round(BASE_FONT_SIZE_PX * zoomScale * 1.6));'));
   });
 
   it('removes size overrides from state when reset to defaults', () => {

src/test/webview-zoom-shortcuts.test.ts

@@ -0,0 +1,30 @@
+import assert from 'assert';
+import { describe, it } from 'node:test';
+import fs from 'fs';
+import path from 'path';
+
+describe('Webview zoom interactions', () => {
+  const providerSource = fs.readFileSync(path.join(process.cwd(), 'src', 'CsvEditorProvider.ts'), 'utf8');
+  const webviewSource = fs.readFileSync(path.join(process.cwd(), 'media', 'main.js'), 'utf8');
+
+  it('passes zoom settings from provider to webview root dataset', () => {
+    assert.ok(providerSource.includes('data-wheelzoomenabled="${mouseWheelZoomEnabled ? \'1\' : \'0\'}"'));
+    assert.ok(providerSource.includes('data-wheelzoominvert="${mouseWheelZoomInvert ? \'1\' : \'0\'}"'));
+  });
+
+  it('handles Ctrl/Cmd zoom keyboard shortcuts (+, -, 0)', () => {
+    assert.ok(webviewSource.includes('const maybeHandleZoomShortcut = e => {'));
+    assert.ok(webviewSource.includes("const isZoomInShortcut = e => e.code === 'NumpadAdd' || e.key === '+' || e.key === '=';"));
+    assert.ok(webviewSource.includes("const isZoomOutShortcut = e => e.code === 'NumpadSubtract' || e.key === '-' || e.key === '_';"));
+    assert.ok(webviewSource.includes("const isZoomResetShortcut = e => e.key === '0';"));
+    assert.ok(webviewSource.includes('if (maybeHandleZoomShortcut(e)) {'));
+  });
+
+  it('handles Ctrl/Cmd mouse wheel zoom and supports invert direction', () => {
+    assert.ok(webviewSource.includes('const MOUSE_WHEEL_ZOOM_ENABLED = root?.dataset?.wheelzoomenabled !== \'0\';'));
+    assert.ok(webviewSource.includes('const MOUSE_WHEEL_ZOOM_INVERTED = root?.dataset?.wheelzoominvert === \'1\';'));
+    assert.ok(webviewSource.includes('const handleZoomWheel = e => {'));
+    assert.ok(webviewSource.includes('const direction = MOUSE_WHEEL_ZOOM_INVERTED ? -naturalDirection : naturalDirection;'));
+    assert.ok(webviewSource.includes("window.addEventListener('wheel', handleZoomWheel, { passive: false });"));
+  });
+});