Merge pull request #129 from jonaraphael/codex/word-wrap-toggle

Add native word wrap toggle with cutoff as the default

Author: jonaraphael

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [1.5.1] - Unreleased
+
+- Add an icon-only word-wrap action beside the editor title bar’s table/text switch. Default each file to single-line cutoff at the automatic width cap, with Enable/Disable Word Wrap shown on hover. Preserve selection, viewport visibility, live drafts and manual sizes; copying and saving retain complete values.
+- Keep fractional column borders resizable without widening the grab area.
+
 ## [1.4.2] - 2026-10-17
 
 This release combines the editing, navigation, and table tools developed since the public 1.3 release.

README.md

@@ -39,6 +39,7 @@ Context menus open toward the available space, flip above or left when needed, a
 - **Serial index:** Right-click an index cell or its top-left corner and choose **Hide serial index column**. Restore it with **CSV: Toggle Serial Index Column**. The numbers identify source rows and can have gaps while filtering.
 - **Metadata:** **CSV: Hide First N Rows** hides leading records without deleting them. Blank input inherits `csv.defaultIgnoreRows`; an explicit `0` shows them even if the configured default is nonzero.
 - **Widths:** Automatic column widths account for the longest line in multiline cells. Drag close to a column boundary to resize, including with headers off. Double-click the boundary to restore automatic sizing. Manual widths are remembered per file; narrow columns retain a selectable center. Drag the bottom edge of a serial-index cell to adjust its row height.
+- **Word wrap:** Word wrap starts **off** for each file, showing single-line cutoff with an ellipsis. Use the wrap icon beside the table/text switch in the editor title bar to toggle it; hover for **Enable Word Wrap** or **Disable Word Wrap**. Automatic widths remain capped at 100 characters; manual widths and row heights stay intact. Cutoff lets long rows collapse or be resized shorter. The selected cell/range stays selected and its active cell stays in view. Editing always shows the full value, and copying, searching and saving use the complete text. The display choice is remembered with the table's webview state.
 - **Frozen panes:** Right-click to freeze through a visible row or data column, or use **CSV: Freeze Leading Rows/Columns**. Enter `0` to unfreeze an axis. Counts are remembered per file. By default, the header stays frozen; with headers off, no rows freeze until requested. Hidden metadata and the append row do not count. Frozen rows follow measured multiline/zoomed heights and paint their divider seams; the serial index stays alongside frozen data columns.
 
 Header, serial-index, separator, hidden-row, manual-width, and frozen-pane preferences do not change CSV contents and are stored per file URI in VS Code workspace state. Scroll, selection, row heights, and zoom use webview state. Column colors follow the selected datatype palette (`default`, `cool`, or `warm`) or the theme foreground mode. Light, dark, and high-contrast themes retain that choice. CSV's zoom changes the table's text size independently of global editor zoom.
@@ -113,6 +114,7 @@ Run these from the Command Palette. Commands that change a view preference targe
 | Command | Purpose |
 | --- | --- |
 | **CSV: Switch Between Table and Text** (`csv.toggleEditor`) | Switch the active supported table/text view. |
+| **CSV: Enable/Disable Word Wrap** (`csv.enableWordWrap` / `csv.disableWordWrap`) | Toggle wrapping in the active editable table; also available beside the table/text switch. |
 | **CSV: Save Untitled Document As…** (`csv.saveUntitled`) | Commit and save the active untitled table through the native owner. |
 | **CSV: Toggle Extension On/Off** (`csv.toggleExtension`) | Enable/disable CSV and synchronize native editor routing. |
 | **CSV: Toggle First Row as Header** (`csv.toggleHeader`) | Change the file's header preference. |

images/word-wrap-off.png

@@ -68,6 +68,11 @@ let persistedColumnSizes = {};
 try { persistedColumnSizes = JSON.parse(root?.dataset?.columnsizes || '{}'); } catch {}
 let columnSizeState = {};
 let rowSizeState = {};
+let wordWrapEnabled = false;
+const applyWordWrapMode = () => {
+  root?.classList.toggle('csv-cutoff', !wordWrapEnabled);
+  vscode.postMessage({ type: 'wordWrapChanged', enabled: wordWrapEnabled });
+};
 
 const normalizeSizeState = (raw, minSize) => {
   const out = {};
@@ -176,6 +181,7 @@ const persistState = () => {
       anchorCol: anchor ? anchor.col : undefined,
       columnSizes: { ...columnSizeState },
       rowSizes: { ...rowSizeState },
+      wordWrapEnabled,
       zoomScale
     };
     vscode.setState(nextState);
@@ -248,10 +254,21 @@ const scheduleCellReveal = (cell, center = false) => {
   });
 };
 
+const setWordWrap = enabled => {
+  const selectedCell = editingCell || rangeEndCell || anchorCell;
+  wordWrapEnabled = enabled;
+  applyWordWrapMode();
+  window.csvFrozenPanes?.layout();
+  if (selectedCell) scheduleCellReveal(selectedCell);
+  persistState();
+};
+
 const restoreState = () => {
   if (document.activeElement?.closest?.('#filterStatus')) return;
   try {
     const st = vscode.getState() || {};
+    wordWrapEnabled = st.wordWrapEnabled === true;
+    applyWordWrapMode();
     const restoredZoom = parsePositiveNumber(st.zoomScale);
     setZoomScale(restoredZoom ?? 1, false);
     columnSizeState = normalizeSizeState(st.columnSizes ?? persistedColumnSizes, 40);
@@ -413,15 +430,20 @@ if (scrollContainer) {
 }
 
 // Persist on blur/visibility change and restore on focus/visibility
+const restoreRecreatedView = () => {
+  // A live DOM already owns its range and caret; a snapshot only has its anchor.
+  if (anchorCell?.isConnected || editingCell) return;
+  try { restoreState(); } catch {}
+};
 window.addEventListener('blur', () => { persistState(); }, { passive: true });
 window.addEventListener('focus', () => {
-  setTimeout(() => { try { restoreState(); } catch {} }, 0);
+  setTimeout(restoreRecreatedView, 0);
 }, { passive: true });
 document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'hidden') {
     persistState();
   } else if (document.visibilityState === 'visible') {
-    setTimeout(() => { try { restoreState(); } catch {} }, 0);
+    setTimeout(restoreRecreatedView, 0);
   }
 });
 
@@ -733,7 +755,9 @@ const getResizeEdgeInfo = (target, e) => {
     if (rect.width <= 0 || rect.height <= 0 || e.clientY < rect.top - 0.5 || e.clientY > rect.bottom + 0.5 || Math.abs(e.clientX - rect.right) > COLUMN_RESIZE_HANDLE_PX + 0.75) continue;
     const sampleY = clamp(e.clientY, rect.top + Math.min(0.5, rect.height / 4), rect.bottom - Math.min(0.5, rect.height / 4));
     // A scrolled cell can share the frozen column's x coordinate while covered.
-    if (paintedCellAt(rect.right - Math.min(0.5, rect.width / 4), sampleY) !== cell) continue;
+    // Collapsed borders can paint almost one CSS pixel into the next cell
+    // after fractional width rounding. Probe inside the content edge.
+    if (paintedCellAt(rect.right - Math.min(1.5, rect.width / 4), sampleY) !== cell) continue;
     const neighbor = paintedCellAt(rect.right + 0.5, sampleY);
     const next = neighbor && neighbor !== cell && neighbor.parentElement === cell.parentElement ? neighbor : cell.nextElementSibling;
     const nextRect = next && getDataCellCoords(next) ? next.getBoundingClientRect() : null;
@@ -2238,7 +2262,9 @@ const copySelectionToClipboard = (cut = false) => {
 
 window.addEventListener('message', event => {
   const message = event.data;
-  if (message.type === 'prepareViewRefresh') {
+  if (message.type === 'setWordWrap') {
+    if (typeof message.enabled === 'boolean') setWordWrap(message.enabled);
+  } else if (message.type === 'prepareViewRefresh') {
     if (editingCell) { editingCell.blur(); }
     persistState();
     vscode.postMessage({ type: 'viewRefreshReady', requestId: message.requestId, session: filterSession, filterDraft: window.csvColumnFilters?.captureDraft() });

images/word-wrap-on.png

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/jonaraphael/csv.git"
   },
-  "version": "1.4.2",
+  "version": "1.5.1",
   "engines": {
     "vscode": "^1.70.0",
     "node": ">=14"
@@ -37,7 +37,9 @@
     "onCommand:csv.changeEncoding",
     "onCommand:csv.toggleClickableLinks",
     "onCommand:csv.changeFrozenRows",
-    "onCommand:csv.changeFrozenColumns"
+    "onCommand:csv.changeFrozenColumns",
+    "onCommand:csv.enableWordWrap",
+    "onCommand:csv.disableWordWrap"
   ],
   "main": "./out/extension.js",
   "contributes": {
@@ -81,6 +83,16 @@
         "title": "CSV: Switch Between Table and Text",
         "icon": "$(arrow-swap)"
       },
+      {
+        "command": "csv.enableWordWrap",
+        "title": "CSV: Enable Word Wrap",
+        "icon": "$(word-wrap)"
+      },
+      {
+        "command": "csv.disableWordWrap",
+        "title": "CSV: Disable Word Wrap",
+        "icon": "$(word-wrap)"
+      },
       {
         "command": "csv.compareFilesAsTable",
         "title": "CSV: Compare Files as Table"
@@ -141,18 +153,36 @@
         {
           "command": "csv.toggleEditor",
           "when": "!isInDiffEditor && (activeCustomEditorId == csv.editor || activeWebviewPanelId == csv.untitledEditor || (activeEditor == workbench.editors.files.textFileEditor && resourceScheme != untitled && resourceExtname =~ /\\.(csv|tsv|tab|psv)$/i) || (activeEditor == workbench.editors.textResourceEditor && resourceScheme == untitled && editorLangId =~ /^(csv|tsv)$/))",
-          "group": "navigation"
+          "group": "navigation@1"
+        },
+        {
+          "command": "csv.enableWordWrap",
+          "when": "!isInDiffEditor && (activeCustomEditorId == csv.editor || activeWebviewPanelId == csv.untitledEditor) && !csv.wordWrapEnabled",
+          "group": "navigation@2"
+        },
+        {
+          "command": "csv.disableWordWrap",
+          "when": "!isInDiffEditor && (activeCustomEditorId == csv.editor || activeWebviewPanelId == csv.untitledEditor) && csv.wordWrapEnabled",
+          "group": "navigation@2"
         },
         {
           "command": "csv.saveUntitled",
           "when": "activeWebviewPanelId == csv.untitledEditor",
-          "group": "navigation@1"
+          "group": "navigation@3"
         }
       ],
       "commandPalette": [
         {
           "command": "csv.saveUntitled",
           "when": "activeWebviewPanelId == csv.untitledEditor"
+        },
+        {
+          "command": "csv.enableWordWrap",
+          "when": "!isInDiffEditor && (activeCustomEditorId == csv.editor || activeWebviewPanelId == csv.untitledEditor) && !csv.wordWrapEnabled"
+        },
+        {
+          "command": "csv.disableWordWrap",
+          "when": "!isInDiffEditor && (activeCustomEditorId == csv.editor || activeWebviewPanelId == csv.untitledEditor) && csv.wordWrapEnabled"
         }
       ],
       "explorer/context": [

media/main.js

@@ -112,6 +112,7 @@ class CsvEditorController {
   private separatorCache: { version: number; configKey: string; separator: string } | undefined;
   private isDiffContext = false;
   private currentHeader = false;
+  private wordWrapEnabled = false;
   private chunkRenderState: ChunkRenderState | undefined;
   private currentFilterView: FilterRender | undefined;
   private latestFilterRevision = 0;
@@ -148,6 +149,7 @@ class CsvEditorController {
       this.resolveDraftCommitWaiters(false);
       if (CsvEditorProvider.currentActive === this) {
         CsvEditorProvider.currentActive = undefined;
+        void vscode.commands.executeCommand('setContext', 'csv.wordWrapEnabled', false);
       }
     });
     if (_token.isCancellationRequested) { return; }
@@ -180,6 +182,7 @@ class CsvEditorController {
 
     if (webviewPanel.active) {
       CsvEditorProvider.currentActive = this;
+      this.updateWordWrapContext();
     }
     void this.warnAboutPossibleDecoding().catch(error => {
       console.warn('CSV: Encoding warning action failed', error);
@@ -199,12 +202,21 @@ class CsvEditorController {
         }
         e.webviewPanel.webview.postMessage({ type: 'focus' });
         CsvEditorProvider.currentActive = this;
+        this.updateWordWrapContext();
       } else if (CsvEditorProvider.currentActive === this) {
         CsvEditorProvider.currentActive = undefined;
+        void vscode.commands.executeCommand('setContext', 'csv.wordWrapEnabled', false);
       }
     });
 
     webviewPanel.webview.onDidReceiveMessage(e => {
+      if (e.type === 'wordWrapChanged') {
+        if (typeof e.enabled === 'boolean') {
+          this.wordWrapEnabled = e.enabled;
+          this.updateWordWrapContext();
+        }
+        return;
+      }
       if (e.type === 'filterDraftChanged') {
         if (e.session === this.filterSession) { this.draftActivityRevision += 1; }
         return;
@@ -1020,6 +1032,16 @@ class CsvEditorController {
     return CsvEditorProvider.getFrozenPanesForUri(this.context, this.document.uri, this.currentHeader);
   }
 
+  private updateWordWrapContext(): void {
+    if (this.isActive()) {
+      void vscode.commands.executeCommand('setContext', 'csv.wordWrapEnabled', this.wordWrapEnabled);
+    }
+  }
+
+  public setWordWrap(enabled: boolean): void {
+    void this.currentWebviewPanel?.webview.postMessage({ type: 'setWordWrap', enabled });
+  }
+
   public async setFrozenPanes(change: Partial<FrozenPanes>): Promise<void> {
     await CsvEditorProvider.setFrozenPanesForUri(this.context, this.document.uri, change);
     this.currentWebviewPanel?.webview.postMessage({ type: 'frozenPanes', ...this.getCurrentFrozenPanes() });
@@ -2536,6 +2558,7 @@ class CsvEditorController {
       th, td { padding: ${cellPadding}px 8px; border: 1px solid var(--csv-table-border, ${isDark ? '#555' : '#ccc'}); font-size: inherit; }
       th { position: static; background-color: var(--csv-header-background, ${isDark ? '#1e1e1e' : '#ffffff'}); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
       td { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
+      #csv-root.csv-cutoff td:not(.editing) { overflow: hidden !important; white-space: nowrap !important; overflow-wrap: normal !important; text-overflow: ellipsis; }
       td.selected, th.selected { background-color: var(--csv-selection-background, ${isDark ? '#333333' : '#cce0ff'}) !important; }
       td.editing, th.editing { overflow: visible !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; max-width: none !important; }
       .highlight { background-color: var(--csv-find-highlight-background, ${isDark ? '#2a2a2a' : '#fefefe'}) !important; }
@@ -2731,6 +2754,17 @@ class CsvEditorController {
         box-sizing: border-box;
         pointer-events: none;
       }
+      /* An outline paints the divider outside clipped cell contents. Keep its
+         specificity below the high-contrast selection and Find outlines. */
+      .csv-cutoff .csv-frozen-row {
+        outline: 2px solid var(--csv-contrast-border, var(--csv-table-border, ${isDark ? '#555' : '#ccc'}));
+        outline-offset: -1px;
+      }
+      /* Retain state outline colors while covering the outer seam in HC themes. */
+      .csv-cutoff .csv-frozen-row:is(.selected, .highlight, .active-match) {
+        outline-width: 2px;
+        outline-offset: -1px;
+      }
       #csv-root .csv-frozen-row.selected, #csv-root .csv-frozen-column.selected {
         background-image: linear-gradient(var(--vscode-editor-selectionBackground, ${isDark ? '#333333' : '#cce0ff'}), var(--vscode-editor-selectionBackground, ${isDark ? '#333333' : '#cce0ff'}));
       }
@@ -2757,7 +2791,7 @@ class CsvEditorController {
     <link rel="stylesheet" href="${contrastStyleUri}">
   </head>
   <body>
-    <div id="csv-root" data-headerenabled="${headerEnabled ? '1' : '0'}" data-roworder="${this.escapeHtml(JSON.stringify(visibleRowIds))}" data-filtered="${filterMetadata.filters.length ? '1' : '0'}" data-filterepoch="0" data-frozenrows="${frozenPanes.rows}" data-frozencolumns="${frozenPanes.columns}" data-firstrow="${firstVisibleRow}" data-realrowcount="${realRowCount}" data-columnsizes="${this.escapeHtml(JSON.stringify(columnSizes))}" 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'}">
+    <div id="csv-root" data-headerenabled="${headerEnabled ? '1' : '0'}" data-roworder="${this.escapeHtml(JSON.stringify(visibleRowIds))}" data-filtered="${filterMetadata.filters.length ? '1' : '0'}" data-filterepoch="0" data-frozenrows="${frozenPanes.rows}" data-frozencolumns="${frozenPanes.columns}" data-firstrow="${firstVisibleRow}" data-realrowcount="${realRowCount}" data-columnsizes="${this.escapeHtml(JSON.stringify(columnSizes))}" class="table-container csv-cutoff" 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'}">
       <div id="filterStatus" aria-label="Column filters"${filterMetadata.filters.length ? '' : ' hidden'}></div>
       ${tableHtml}
     </div>

package-lock.json

@@ -72,6 +72,8 @@ export function registerCsvCommands(context: vscode.ExtensionContext, synchroniz
     vscode.commands.registerCommand('csv.changeFrozenColumns', () => changeFrozenPaneCount('columns')),
     vscode.commands.registerCommand('csv.openLargeFilePreview', openLargeFilePreview),
     vscode.commands.registerCommand('csv.toggleEditor', () => toggleCsvEditor(prepareEditorRouting)),
+    vscode.commands.registerCommand('csv.enableWordWrap', () => CsvEditorProvider.getActiveProvider()?.setWordWrap(true)),
+    vscode.commands.registerCommand('csv.disableWordWrap', () => CsvEditorProvider.getActiveProvider()?.setWordWrap(false)),
     vscode.commands.registerCommand('csv.compareFilesAsTable', (resource?: vscode.Uri, selected?: vscode.Uri[]) => compareFilesAsTable(context, resource, selected)),
     vscode.commands.registerCommand('csv.saveUntitled', saveActiveUntitledCsvEditor),
     vscode.commands.registerCommand('csv.toggleExtension', () => {

package.json

@@ -65,6 +65,10 @@ const vscodeStub = {
       return { dispose() {} };
     },
     executeCommand: async (name: string, ...args: unknown[]) => {
+      if (name === 'setContext') {
+        activeHarness.contextUpdates.push(args);
+        return;
+      }
       activeHarness.executedCommands.push({ name, args });
       activeHarness.recordedCommands.push([name, ...args]);
       if (activeHarness.commandError) {
@@ -250,6 +254,7 @@ export async function createEditorHarness(options: {
     closeResult: true,
     commands: new Map<string, (...args: any[]) => unknown>(),
     executedCommands: [] as Array<{ name: string; args: unknown[] }>,
+    contextUpdates: [] as unknown[][],
     registerCommands() {
       const { registerCsvCommands } = require('../commands') as typeof import('../commands');
       registerCsvCommands(context as any);
@@ -335,11 +340,11 @@ export async function createEditorHarness(options: {
   return harness;
 }
 
-export function createWebviewDom(html: string) {
+export function createWebviewDom(html: string, initialState: unknown = {}) {
   const dom = new JSDOM(html, { runScripts: 'outside-only', pretendToBeVisual: true });
   const { window } = dom;
   const messages: any[] = [];
-  let state: unknown = {};
+  let state: unknown = initialState;
   window.acquireVsCodeApi = () => ({
     postMessage: (message: unknown) => messages.push(message),
     getState: () => state,