feat: add csv.fontSize override with editor fallback and row-height scaling

Author: jonaraphael

README.md

@@ -37,7 +37,7 @@ Working with CSV files shouldn’t be a chore. With CSV, you get:
 - **Add/Delete Rows:** Insert above/below or remove the selected row via context menu.
 - **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 Selection:** Choose a font from a dropdown or inherit VS Code's default.
+- **Custom Font Controls:** Choose a font family and optional font-size override, or inherit VS Code defaults.
 - **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.
@@ -98,6 +98,7 @@ 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.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.

media/main.js

@@ -7,6 +7,15 @@ const vscode = acquireVsCodeApi();
 
 const root = document.getElementById('csv-root');
 const CSV_SEPARATOR = String.fromCodePoint(parseInt(root?.dataset?.sepcode || '44', 10)); // default ','
+const parsePositiveNumber = value => {
+  const parsed = typeof value === 'string' ? Number.parseFloat(value) : Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) return undefined;
+  return parsed;
+};
+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));
 
 let lastContextIsHeader = false;   // remembers whether we right-clicked a <th>
 let isUpdating = false, isSelecting = false, anchorCell = null, rangeEndCell = null, currentSelection = [];
@@ -56,7 +65,7 @@ const applySizeStateToRenderedCells = () => {
     });
   }
   for (const [row, height] of Object.entries(rowSizeState)) {
-    const px = Math.max(22, Math.round(Number(height)));
+    const px = Math.max(MIN_ROW_HEIGHT, Math.round(Number(height)));
     table.querySelectorAll(`[data-row="${row}"]`).forEach(cell => {
       cell.style.height = `${px}px`;
       cell.style.minHeight = `${px}px`;
@@ -96,7 +105,7 @@ const restoreState = () => {
   try {
     const st = vscode.getState() || {};
     columnSizeState = normalizeSizeState(st.columnSizes, 40);
-    rowSizeState = normalizeSizeState(st.rowSizes, 22);
+    rowSizeState = normalizeSizeState(st.rowSizes, MIN_ROW_HEIGHT);
     applySizeStateToRenderedCells();
     if (typeof st.scrollX === 'number' && scrollContainer) {
       scrollContainer.scrollLeft = st.scrollX;
@@ -524,7 +533,7 @@ const resetColumnWidth = col => {
   });
 };
 const applyRowHeight = (row, heightPx) => {
-  const height = Math.max(22, Math.round(heightPx));
+  const height = Math.max(MIN_ROW_HEIGHT, Math.round(heightPx));
   rowSizeState[String(row)] = height;
   table.querySelectorAll(`[data-row="${row}"]`).forEach(cell => {
     cell.style.height = `${height}px`;

package.json

@@ -116,6 +116,13 @@
           "description": "Font family used by the CSV custom editor. Leave empty to inherit ‘editor.fontFamily’.",
           "scope": "application"
         },
+        "csv.fontSize": {
+          "type": "number",
+          "default": 0,
+          "minimum": 0,
+          "description": "Font size in pixels for the CSV custom editor. Set to 0 to inherit 'editor.fontSize'.",
+          "scope": "application"
+        },
         "csv.cellPadding": {
           "type": "number",
           "default": 4,

src/CsvEditorProvider.ts

@@ -370,6 +370,22 @@ class CsvEditorController {
     return normalizedBase;
   }
 
+  private static normalizeFontSize(value: unknown): number | undefined {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+      return undefined;
+    }
+    return Math.round(parsed * 100) / 100;
+  }
+
+  private static resolveEffectiveFontSize(csvFontSize: unknown, editorFontSize: unknown): number {
+    return (
+      CsvEditorController.normalizeFontSize(csvFontSize) ??
+      CsvEditorController.normalizeFontSize(editorFontSize) ??
+      14
+    );
+  }
+
   public getDocumentUri(): vscode.Uri {
     return this.document.uri;
   }
@@ -1362,6 +1378,10 @@ class CsvEditorController {
     const fontFamily =
       config.get<string>('fontFamily') ||
       vscode.workspace.getConfiguration('editor').get<string>('fontFamily', 'Menlo');
+    const fontSize = CsvEditorController.resolveEffectiveFontSize(
+      config.get<number>('fontSize', 0),
+      vscode.workspace.getConfiguration('editor').get<number>('fontSize', 14)
+    );
 
     const cellPadding = config.get<number>('cellPadding', 4);
     const data = this.trimTrailingEmptyRows((parsed.data || []) as string[][]);
@@ -1397,6 +1417,7 @@ class CsvEditorController {
       webview,
       nonce,
       fontFamily,
+      fontSize,
       cellPadding,
       separator,
       tableHtml,
@@ -1646,6 +1667,7 @@ class CsvEditorController {
     webview: vscode.Webview;
     nonce: string;
     fontFamily: string;
+    fontSize: number;
     cellPadding: number;
     separator: string;
     tableHtml: string;
@@ -1654,7 +1676,7 @@ class CsvEditorController {
     nextChunkStart: number;
     hasRemoteChunks: boolean;
   }): string {
-    const { webview, nonce, fontFamily, cellPadding, separator, tableHtml, chunksJson, extraColumnColorCss, nextChunkStart, hasRemoteChunks } = args;
+    const { webview, nonce, fontFamily, fontSize, cellPadding, separator, tableHtml, chunksJson, extraColumnColorCss, nextChunkStart, hasRemoteChunks } = 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(
@@ -1673,10 +1695,10 @@ class CsvEditorController {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSV</title>
     <style nonce="${nonce}">
-      body { font-family: ${this.escapeCss(fontFamily)}; margin: 0; padding: 0; user-select: none; }
+      body { font-family: ${this.escapeCss(fontFamily)}; font-size: ${fontSize}px; margin: 0; padding: 0; user-select: none; }
       .table-container { overflow: auto; height: 100vh; }
       table { border-collapse: collapse; width: max-content; }
-      th, td { padding: ${cellPadding}px 8px; border: 1px solid ${isDark ? '#555' : '#ccc'}; }
+      th, td { padding: ${cellPadding}px 8px; border: 1px solid ${isDark ? '#555' : '#ccc'}; font-size: inherit; }
       th { position: sticky; top: 0; background-color: ${isDark ? '#1e1e1e' : '#ffffff'}; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
       td { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
       td.selected, th.selected { background-color: ${isDark ? '#333333' : '#cce0ff'} !important; }
@@ -1702,6 +1724,7 @@ class CsvEditorController {
         align-items: stretch;
         color: #d4d4d4;
         font-family: ${this.escapeCss(fontFamily)};
+        font-size: inherit;
       }
       #findReplaceWidget.open { display: flex; }
       #findReplaceWidget .fr-gutter {
@@ -1750,7 +1773,7 @@ class CsvEditorController {
         background: #1c1c1c;
         color: #d4d4d4;
         padding-left: 10px;
-        font-size: 14px;
+        font-size: inherit;
         outline: none;
       }
       #findReplaceWidget .fr-input::placeholder { color: #6a6a6a; }
@@ -1778,7 +1801,7 @@ class CsvEditorController {
         border-radius: 4px;
         background: transparent;
         color: rgba(189,189,189,0.8);
-        font-size: 12px;
+        font-size: 0.86em;
         cursor: pointer;
         padding: 0 4px;
       }
@@ -1791,7 +1814,7 @@ class CsvEditorController {
         min-width: 84px;
         text-align: right;
         color: #d0d0d0;
-        font-size: 14px;
+        font-size: inherit;
       }
       #findReplaceWidget .fr-divider {
         width: 1px;
@@ -1853,10 +1876,10 @@ class CsvEditorController {
         text-align: left;
         padding: 6px 8px;
         cursor: pointer;
-        font-size: 13px;
+        font-size: inherit;
       }
       #findReplaceWidget .fr-overflow-item:hover { background: rgba(255,255,255,0.05); }
-      #contextMenu { position: absolute; display: none; background: ${isDark ? '#2d2d2d' : '#ffffff'}; border: 1px solid ${isDark ? '#555' : '#ccc'}; z-index: 10000; font-family: ${this.escapeCss(fontFamily)}; }
+      #contextMenu { position: absolute; display: none; background: ${isDark ? '#2d2d2d' : '#ffffff'}; border: 1px solid ${isDark ? '#555' : '#ccc'}; z-index: 10000; font-family: ${this.escapeCss(fontFamily)}; font-size: inherit; }
       #contextMenu div { padding: 4px 12px; cursor: pointer; }
       #contextMenu div:hover { background: ${isDark ? '#3d3d3d' : '#eeeeee'}; }
 
@@ -1865,7 +1888,7 @@ class CsvEditorController {
     </style>
   </head>
   <body>
-    <div id="csv-root" class="table-container" data-sepcode="${sepCode}" data-nextchunkstart="${nextChunkStart >= 0 ? nextChunkStart : ''}" data-hasmorechunks="${hasRemoteChunks ? '1' : '0'}">
+    <div id="csv-root" class="table-container" data-sepcode="${sepCode}" data-fontsize="${fontSize}" data-nextchunkstart="${nextChunkStart >= 0 ? nextChunkStart : ''}" data-hasmorechunks="${hasRemoteChunks ? '1' : '0'}">
       ${tableHtml}
     </div>
 
@@ -2666,6 +2689,9 @@ export class CsvEditorProvider implements vscode.CustomTextEditorProvider {
     resolveEffectiveColumnColorMode(baseMode: string, isDiffContext: boolean, diffUseThemeForeground: boolean): 'type' | 'theme' {
       return (CsvEditorController as any).resolveEffectiveColumnColorMode(baseMode, isDiffContext, diffUseThemeForeground);
     },
+    resolveEffectiveFontSize(csvFontSize: unknown, editorFontSize: unknown): number {
+      return (CsvEditorController as any).resolveEffectiveFontSize(csvFontSize, editorFontSize);
+    },
     hslToHex(h: number, s: number, l: number): string {
       const c: any = new (CsvEditorController as any)({} as any);
       return c.hslToHex(h, s, l);

src/test/provider-utils.test.ts

@@ -151,6 +151,16 @@ describe('CsvEditorProvider utility methods', () => {
     assert.strictEqual(resolveMode('invalid', false, false), 'type');
   });
 
+  it('resolves effective font size using csv override or editor fallback', () => {
+    const resolveFontSize = CsvEditorProvider.__test.resolveEffectiveFontSize;
+    assert.strictEqual(resolveFontSize(18, 14), 18);
+    assert.strictEqual(resolveFontSize(0, 14), 14);
+    assert.strictEqual(resolveFontSize(undefined, 15), 15);
+    assert.strictEqual(resolveFontSize(-2, 15), 15);
+    assert.strictEqual(resolveFontSize('abc', 15), 15);
+    assert.strictEqual(resolveFontSize(undefined, undefined), 14);
+  });
+
   it('computes paste plan to fill rectangular selection for single-cell clipboard value', () => {
     const plan = CsvEditorProvider.__test.computePastePlan(
       [['X']],

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

@@ -13,13 +13,19 @@ describe('Webview size persistence', () => {
 
   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, 22);'));
+    assert.ok(source.includes('rowSizeState = normalizeSizeState(st.rowSizes, MIN_ROW_HEIGHT);'));
     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))'));
+  });
+
+  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));'));
   });
 
   it('removes size overrides from state when reset to defaults', () => {