cliedit 0.4.0 → 0.5.1

package/README.md

@@ -6,6 +6,8 @@ A lightweight, zero-dependency, raw-mode terminal editor component for Node.js.
 
 It includes line wrapping, visual navigation, smart auto-indentation, undo/redo, text selection, Find/Replace, and cross-platform clipboard support.
 
+A **CodeTease** project.
+
 ## Features
 
 - **Raw Mode TTY:** Takes over the terminal for a full "app-like" feel.
@@ -26,10 +28,19 @@ It includes line wrapping, visual navigation, smart auto-indentation, undo/redo,
 - **Piping Support:** Works with standard Unix pipes (e.g. `cat file.txt | cliedit`).
 - **Crash Recovery:** Automatically saves changes to a hidden swap file (e.g. `.filename.swp`) to prevent data loss.
 
+### Architecture Improvements
+
+`cliedit` employs a optimization strategy to handle large files efficiently while maintaining a responsive UI:
+
+*   **Math-Only Viewport:** Rendering is stateless. The editor calculates visual wrapping on the fly (Virtual Scrolling) rather than storing a massive state array, significantly reducing memory usage for large documents.
+*   **Screen Buffer Diffing:** A double-buffering system compares the current and next frame to send only the changed characters to the terminal, minimizing I/O and eliminating flicker.
+*   **Worker Threads:** Syntax highlighting runs asynchronously in a background Worker Thread, preventing UI freezes during rendering of complex lines.
+*   **Recommended Limits:** Good for files up to 50k lines (perfect for configs, scripts, and logs).
+
 ## Installation
 ```shell
 npm install cliedit
-````
+```
 
 ## Usage
 
@@ -116,7 +127,6 @@ Key types are also exported for convenience:
 ```typescript
 import type {
   DocumentState,
-  VisualRow,
   EditorMode,
   NormalizedRange,
 } from 'cliedit';

package/dist/constants.d.ts

@@ -9,6 +9,7 @@ export declare const ANSI: {
     SHOW_CURSOR: string;
     INVERT_COLORS: string;
     RESET_COLORS: string;
+    DIM: string;
     ENTER_ALTERNATE_SCREEN: string;
     EXIT_ALTERNATE_SCREEN: string;
     YELLOW: string;

package/dist/constants.js

@@ -10,6 +10,7 @@ export const ANSI = {
     SHOW_CURSOR: '\x1b[?25h', // Show cursor
     INVERT_COLORS: '\x1b[7m', // Invert background/foreground colors
     RESET_COLORS: '\x1b[0m', // Reset colors
+    DIM: '\x1b[2m', // Dim mode (faint)
     ENTER_ALTERNATE_SCREEN: '\x1b[?1049h', // Enter alternate screen
     EXIT_ALTERNATE_SCREEN: '\x1b[?1049l', // Exit alternate screen
     // Syntax Highlighting Colors

package/dist/editor.clipboard.js

@@ -15,7 +15,7 @@ function setClipboard(text) {
             case 'win32':
                 command = 'clip';
                 break;
-            case 'linux': // <--- THÊM HỖ TRỢ LINUX
+            case 'linux':
                 command = 'xclip -selection clipboard';
                 break;
             default:
@@ -46,8 +46,8 @@ function getClipboard() {
             case 'win32':
                 command = 'powershell -command "Get-Clipboard"';
                 break;
-            case 'linux': // <--- THÊM HỖ TRỢ LINUX
-                command = 'xclip -selection clipboard -o'; // -o (hoặc -out) để đọc
+            case 'linux':
+                command = 'xclip -selection clipboard -o';
                 break;
             default:
                 this.setStatusMessage('Clipboard not supported on this platform');
@@ -99,6 +99,7 @@ async function pasteLine() {
         this.insertContentAtCursor(pasteLines);
     }
     catch (error) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.setStatusMessage(`Paste failed: ${error.message}`);
     }
 }

package/dist/editor.d.ts

@@ -1,6 +1,8 @@
 import { HistoryManager } from './history.js';
-import { VisualRow, EditorMode, EditorOptions } from './types.js';
+import { EditorMode, EditorOptions } from './types.js';
 import { SwapManager } from './editor.swap.js';
+import { ScreenBuffer } from './screen_buffer.js';
+import { Worker } from 'worker_threads';
 import { editingMethods } from './editor.editing.js';
 import { clipboardMethods } from './editor.clipboard.js';
 import { navigationMethods } from './editor.navigation.js';
@@ -40,7 +42,6 @@ export declare class CliEditor {
     gutterWidth: number;
     tabSize: number;
     screenStartRow: number;
-    visualRows: VisualRow[];
     mode: EditorMode;
     statusMessage: string;
     statusTimeout: NodeJS.Timeout | null;
@@ -60,17 +61,20 @@ export declare class CliEditor {
     }>>;
     searchResultIndex: number;
     syntaxCache: Map<number, Map<number, string>>;
+    syntaxWorker: Worker | null;
     history: HistoryManager;
     swapManager: SwapManager;
+    screenBuffer: ScreenBuffer;
     isCleanedUp: boolean;
     resolvePromise: ((value: {
         saved: boolean;
         content: string;
     }) => void) | null;
-    rejectPromise: ((reason?: any) => void) | null;
-    inputStream: any;
+    rejectPromise: ((reason?: unknown) => void) | null;
+    inputStream: NodeJS.ReadStream;
     isExiting: boolean;
     constructor(initialContent: string, filepath: string, options?: EditorOptions);
+    private handleWorkerMessage;
     run(): Promise<{
         saved: boolean;
         content: string;

package/dist/editor.editing.js

@@ -34,7 +34,6 @@ function insertContentAtCursor(contentLines) {
     }
     this.setDirty();
     this.invalidateSyntaxCache();
-    this.recalculateVisualRows();
 }
 /**
  * Inserts a single character at the cursor position.
@@ -166,7 +165,6 @@ function indentSelection() {
     }
     this.setDirty();
     this.invalidateSyntaxCache();
-    this.recalculateVisualRows();
 }
 /**
  * Outdents the selected lines (Block Outdent).
@@ -206,7 +204,6 @@ function outdentSelection() {
         }
         this.setDirty();
         this.invalidateSyntaxCache();
-        this.recalculateVisualRows();
     }
 }
 /**
@@ -241,7 +238,6 @@ function moveLines(direction) {
         this.selectionAnchor.y += direction;
     }
     this.setDirty();
-    this.recalculateVisualRows();
 }
 /**
  * Duplicates the current line or selection.
@@ -268,7 +264,6 @@ function duplicateLineOrSelection() {
         // CursorX stays same? Usually yes.
     }
     this.setDirty();
-    this.recalculateVisualRows();
 }
 export const editingMethods = {
     insertContentAtCursor,

package/dist/editor.history.d.ts

@@ -10,7 +10,7 @@ declare function getCurrentState(this: CliEditor): DocumentState;
 /**
  * Saves the current state to the history manager.
  */
-declare function saveState(this: CliEditor, initial?: boolean): void;
+declare function saveState(this: CliEditor, _initial?: boolean): void;
 /**
  * Loads a document state from the history manager.
  */

package/dist/editor.history.js

@@ -16,7 +16,7 @@ function getCurrentState() {
 /**
  * Saves the current state to the history manager.
  */
-function saveState(initial = false) {
+function saveState(_initial = false) {
     // Only save if content is different from the last state, 
     // but ALWAYS save the initial state.
     this.history.saveState(this.getCurrentState());

package/dist/editor.io.js

@@ -22,6 +22,7 @@ async function saveFile() {
         this.setStatusMessage(`Saved: ${this.filepath}`, 2000);
     }
     catch (err) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.setStatusMessage(`Save Error: ${err.message}`);
     }
 }

package/dist/editor.js

@@ -1,9 +1,13 @@
-// Cập nhật 1: Import từ ./vendor/keypress.js
+// src/editor.ts
+/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
 import keypress from './vendor/keypress.js';
 import { ANSI } from './constants.js';
 import { HistoryManager } from './history.js';
 import { SwapManager } from './editor.swap.js';
-// Block `declare module 'keypress'` đã bị xóa
+import { ScreenBuffer } from './screen_buffer.js';
+import { Worker } from 'worker_threads';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
 // Import all functional modules
 import { editingMethods } from './editor.editing.js';
 import { clipboardMethods } from './editor.clipboard.js';
@@ -31,7 +35,6 @@ export class CliEditor {
         this.gutterWidth = 5;
         this.tabSize = 4;
         this.screenStartRow = 1;
-        this.visualRows = [];
         this.mode = 'edit';
         this.statusMessage = DEFAULT_STATUS;
         this.statusTimeout = null;
@@ -46,6 +49,7 @@ export class CliEditor {
         this.searchResultMap = new Map();
         this.searchResultIndex = -1;
         this.syntaxCache = new Map();
+        this.syntaxWorker = null;
         this.isCleanedUp = false;
         this.resolvePromise = null;
         this.rejectPromise = null;
@@ -60,9 +64,35 @@ export class CliEditor {
         this.tabSize = options.tabSize ?? 4;
         this.inputStream = options.inputStream || process.stdin;
         this.history = new HistoryManager();
+        this.screenBuffer = new ScreenBuffer();
         this.saveState(true);
         // Initialize SwapManager
         this.swapManager = new SwapManager(this.filepath, () => this.lines.join('\n'));
+        // Initialize Worker
+        try {
+            const __filename = fileURLToPath(import.meta.url);
+            const __dirname = dirname(__filename);
+            // Assuming compiled code is in dist/ and syntax.worker.js is there.
+            const workerPath = join(__dirname, 'syntax.worker.js');
+            this.syntaxWorker = new Worker(workerPath);
+            this.syntaxWorker.on('message', this.handleWorkerMessage.bind(this));
+        }
+        catch {
+            // Fallback or log error
+            // console.error("Failed to load worker", e);
+        }
+    }
+    handleWorkerMessage(msg) {
+        const { lineIndex, colorMap } = msg;
+        this.syntaxCache.set(lineIndex, colorMap);
+        // Trigger Partial Render?
+        // For simplicity, just render. The screen buffer diffing handles optimization.
+        // But we only need to render IF the line is currently visible?
+        // Checking visibility is optimization.
+        // Let's just render.
+        if (!this.isCleanedUp) {
+            this.render();
+        }
     }
     // --- Lifecycle Methods ---
     run() {
@@ -72,6 +102,7 @@ export class CliEditor {
         return new Promise((resolve, reject) => {
             const performCleanup = (callback) => {
                 this.swapManager.stop(); // Stop swap interval
+                this.syntaxWorker?.terminate();
                 if (this.isCleanedUp) {
                     if (callback)
                         callback();
@@ -113,7 +144,11 @@ export class CliEditor {
             throw new Error('Editor requires a TTY environment (stdout).');
         }
         this.updateScreenSize();
-        this.recalculateVisualRows();
+        this.screenBuffer.resize(this.screenRows + 2, this.screenCols); // +2 for Status Bar space if needed? 
+        // screenRows = stdout.rows - 2. 
+        // ScreenBuffer should cover the FULL terminal size (rows, cols) to handle status bar rendering too.
+        // So pass process.stdout.rows.
+        this.screenBuffer.resize(process.stdout.rows, process.stdout.columns);
         // Enter alternate screen and hide cursor + Enable SGR Mouse (1006) and Button Event (1000)
         process.stdout.write(ANSI.ENTER_ALTERNATE_SCREEN + ANSI.HIDE_CURSOR + ANSI.CLEAR_SCREEN + '\x1b[?1000h' + '\x1b[?1006h');
         if (this.inputStream.setRawMode) {
@@ -128,7 +163,7 @@ export class CliEditor {
     }
     handleResize() {
         this.updateScreenSize();
-        this.recalculateVisualRows();
+        this.screenBuffer.resize(process.stdout.rows, process.stdout.columns);
         this.render();
     }
     updateScreenSize() {

package/dist/editor.keys.js

@@ -11,13 +11,12 @@ const PAIR_MAP = {
  * Main router for standardized keypress events from the 'keypress' library.
  */
 function handleKeypressEvent(ch, key) {
-    // CRASH FIX: If the editor is already closing, ignore all input.
     if (this.isExiting) {
         return;
     }
     let keyName = undefined;
     let edited = false;
-    // --- 1. Xử lý trường hợp key là null/undefined (Ký tự in được) ---
+    // --- 1. Handle the case where key is null/undefined (Printable characters) ---
     if (!key) {
         if (ch && ch.length === 1 && ch >= ' ' && ch <= '~') {
             if (this.mode === 'search_find' || this.mode === 'search_replace') {
@@ -30,7 +29,6 @@ function handleKeypressEvent(ch, key) {
                 edited = this.handleEditKeys(ch);
                 if (edited) {
                     this.saveState();
-                    this.recalculateVisualRows(); // Phải tính toán lại sau khi gõ
                 }
             }
             else if (this.mode === 'search_confirm') {
@@ -41,8 +39,8 @@ function handleKeypressEvent(ch, key) {
         }
         return;
     }
-    // --- 2. Từ đây, 'key' object là đảm bảo có (phím đặc biệt hoặc Ctrl/Meta) ---
-    // 2.1. Ánh xạ Control sequences (Ctrl+Arrow cho selection)
+    // --- 2. From here, the 'key' object is guaranteed to exist (special keys or Ctrl/Meta) ---
+    // 2.1. Map Control sequences (Ctrl+Arrow for selection)
     if (key.ctrl) {
         if (key.name === 'up')
             keyName = KEYS.CTRL_ARROW_UP;
@@ -56,8 +54,17 @@ function handleKeypressEvent(ch, key) {
             keyName = key.sequence;
     }
     else {
-        // 2.2. Ánh xạ phím tiêu chuẩn (Arrow, Home, End, Enter, Tab)
-        if (key.name === 'up')
+        // 2.2. Map standard keys (Arrow, Home, End, Enter, Tab)
+        // Check Meta keys first!
+        if (key.meta && key.name === 'left')
+            keyName = 'ALT_LEFT';
+        else if (key.meta && key.name === 'right')
+            keyName = 'ALT_RIGHT';
+        else if (key.meta && key.name === 'up')
+            keyName = KEYS.ALT_UP;
+        else if (key.meta && key.name === 'down')
+            keyName = KEYS.ALT_DOWN;
+        else if (key.name === 'up')
             keyName = KEYS.ARROW_UP;
         else if (key.name === 'down')
             keyName = KEYS.ARROW_DOWN;
@@ -81,14 +88,6 @@ function handleKeypressEvent(ch, key) {
             keyName = KEYS.ENTER;
         else if (key.name === 'tab')
             keyName = key.shift ? KEYS.SHIFT_TAB : KEYS.TAB;
-        else if (key.meta && key.name === 'left')
-            keyName = 'ALT_LEFT';
-        else if (key.meta && key.name === 'right')
-            keyName = 'ALT_RIGHT';
-        else if (key.meta && key.name === 'up')
-            keyName = KEYS.ALT_UP;
-        else if (key.meta && key.name === 'down')
-            keyName = KEYS.ALT_DOWN;
         // Handle Mouse Scroll events explicitly
         else if (key.name === 'scrollup')
             keyName = 'SCROLL_UP';
@@ -97,7 +96,7 @@ function handleKeypressEvent(ch, key) {
         else
             keyName = key.sequence;
     }
-    // --- 3. Định tuyến theo Mode ---
+    // --- 3. Route according to Mode ---
     if (this.mode === 'search_find' || this.mode === 'search_replace') {
         this.handleSearchKeys(keyName || ch);
     }
@@ -108,7 +107,7 @@ function handleKeypressEvent(ch, key) {
         this.handleGoToLineKeys(keyName || ch);
     }
     else {
-        // 4. Xử lý phím lựa chọn (Ctrl+Arrow) - Navigation
+        // 4. Handle selection keys (Ctrl+Arrow) - Navigation
         switch (keyName) {
             case KEYS.CTRL_ARROW_UP:
             case KEYS.CTRL_ARROW_DOWN:
@@ -126,22 +125,27 @@ function handleKeypressEvent(ch, key) {
                 this.render();
                 return;
         }
-        // 5. Xử lý tất cả các phím lệnh/chỉnh sửa khác
+        // 5. Handle all other command/edit keys
         if (keyName === 'SCROLL_UP') {
             const scrollAmount = 3;
             this.rowOffset = Math.max(0, this.rowOffset - scrollAmount);
             // Adjust cursor if it falls out of view (below the viewport)
             // Actually if we scroll UP, the viewport moves UP. The cursor might be BELOW the viewport.
-            // Wait, scroll UP means viewing lines ABOVE. Viewport index decreases.
+            // scroll UP means viewing lines ABOVE. Viewport index decreases.
             // Cursor (if previously in view) might now be >= rowOffset + screenRows.
             // We need to ensure cursor is within [rowOffset, rowOffset + screenRows - 1]
             // But verify after setting rowOffset.
             const currentVisualRow = this.findCurrentVisualRowIndex();
             const bottomEdge = this.rowOffset + this.screenRows - 1;
             if (currentVisualRow > bottomEdge) {
-                const targetRow = this.visualRows[bottomEdge];
-                this.cursorY = targetRow.logicalY;
-                this.cursorX = targetRow.logicalXStart;
+                // Move cursor to bottom edge
+                // Need logic to move cursor to visual row 'bottomEdge'
+                // Use getLogicalFromVisual
+                const targetPos = this.getLogicalFromVisual(bottomEdge);
+                this.cursorY = targetPos.logicalY;
+                // Set to start of that chunk
+                const contentWidth = Math.max(1, this.screenCols - this.gutterWidth);
+                this.cursorX = targetPos.visualYOffset * contentWidth;
             }
             else if (currentVisualRow < this.rowOffset) {
                 // Should not happen when scrolling up (moving viewport up), unless cursor was already above?
@@ -155,35 +159,44 @@ function handleKeypressEvent(ch, key) {
             // if (currentVisualRow >= this.rowOffset + this.screenRows) -> this.rowOffset = ...
             // So we MUST move cursor inside the new viewport.
             if (currentVisualRow > bottomEdge) {
-                const targetRow = this.visualRows[bottomEdge];
-                this.cursorY = targetRow.logicalY;
-                this.cursorX = targetRow.logicalXStart;
+                const targetPos = this.getLogicalFromVisual(bottomEdge);
+                this.cursorY = targetPos.logicalY;
+                const contentWidth = Math.max(1, this.screenCols - this.gutterWidth);
+                this.cursorX = targetPos.visualYOffset * contentWidth;
             }
         }
         else if (keyName === 'SCROLL_DOWN') {
             const scrollAmount = 3;
-            const maxOffset = Math.max(0, this.visualRows.length - this.screenRows);
+            // Need total visual rows to clamp maxOffset.
+            // Calculating total visual rows is O(N).
+            // Let's do a safe scroll? 
+            // Or just allow scrolling until end?
+            // Let's calculate total visual rows for now (performance cost accepted for correct scrolling).
+            let totalVisualRows = 0;
+            for (let i = 0; i < this.lines.length; i++)
+                totalVisualRows += this.getLineVisualHeight(i);
+            const maxOffset = Math.max(0, totalVisualRows - this.screenRows);
             this.rowOffset = Math.min(maxOffset, this.rowOffset + scrollAmount);
             // Scroll DOWN means viewport index increases.
             // Cursor might be ABOVE the new viewport (currentVisualRow < rowOffset).
             const currentVisualRow = this.findCurrentVisualRowIndex();
             if (currentVisualRow < this.rowOffset) {
-                const targetRow = this.visualRows[this.rowOffset];
-                this.cursorY = targetRow.logicalY;
-                this.cursorX = targetRow.logicalXStart;
+                const targetPos = this.getLogicalFromVisual(this.rowOffset);
+                this.cursorY = targetPos.logicalY;
+                const contentWidth = Math.max(1, this.screenCols - this.gutterWidth);
+                this.cursorX = targetPos.visualYOffset * contentWidth;
             }
         }
         else {
             edited = this.handleEditKeys(keyName || ch);
         }
     }
-    // 6. Cập nhật Trạng thái và Render
+    // 6. Update State and Render
     if (edited) {
-        this.saveState(); // <-- Chỉ gọi khi gõ phím, xóa, v.v.
-        this.recalculateVisualRows(); // Tính toán lại layout
+        this.saveState(); // <-- Called only when typing, deleting, etc.
     }
     if (!this.isExiting) {
-        this.render(); // Render cuối cùng (với visual rows đã được cập nhật nếu cần)
+        this.render(); // Final render (with visual rows updated if necessary)
     }
 }
 function handleAltArrows(keyName) {
@@ -251,7 +264,7 @@ function handleEditKeys(key) {
             this.clearSearchResults();
             this.insertNewLine();
             return true;
-        case KEYS.BACKSPACE:
+        case KEYS.BACKSPACE: {
             this.clearSearchResults();
             // Handle auto-pair deletion
             const line = this.lines[this.cursorY] || '';
@@ -272,6 +285,7 @@ function handleEditKeys(key) {
                     this.deleteBackward();
             }
             return true;
+        }
         case KEYS.DELETE:
             this.clearSearchResults();
             if (this.selectionAnchor)
@@ -332,15 +346,12 @@ function handleEditKeys(key) {
             // For now, let's use Ctrl+B?
             this.matchBracket();
             return false;
-        // ***** SỬA LỖI VISUAL *****
-        // Sau khi undo/redo, chúng ta PHẢI tính toán lại visual rows
+        // After undo/redo, we MUST recalculate visual rows
         case KEYS.CTRL_Z:
             this.undo();
-            this.recalculateVisualRows(); // <-- THÊM DÒNG NÀY
             return false;
         case KEYS.CTRL_Y:
             this.redo();
-            this.recalculateVisualRows(); // <-- THÊM DÒNG NÀY
             return false;
         // --- Clipboard ---
         case KEYS.CTRL_K: // Cut Line (Traditional)
@@ -355,7 +366,7 @@ function handleEditKeys(key) {
         case KEYS.CTRL_V: // Paste Selection
             this.pasteSelection();
             return true;
-        // Xử lý Ký tự in được
+        // Handle Printable Characters
         default:
             if (key.length === 1 && key >= ' ' && key <= '~') {
                 this.clearSearchResults();
@@ -536,7 +547,7 @@ function handleGoToLineKeys(key) {
         this.setStatusMessage('Cancelled');
     };
     switch (key) {
-        case KEYS.ENTER:
+        case KEYS.ENTER: {
             const lineNumber = parseInt(this.goToLineQuery, 10);
             if (!isNaN(lineNumber) && lineNumber > 0) {
                 this.jumpToLine(lineNumber);
@@ -547,6 +558,7 @@ function handleGoToLineKeys(key) {
             }
             this.goToLineQuery = '';
             break;
+        }
         case KEYS.ESCAPE:
         case KEYS.CTRL_C:
         case KEYS.CTRL_Q:

package/dist/editor.navigation.d.ts

@@ -4,6 +4,7 @@ import { CliEditor } from './editor.js';
  */
 /**
  * Finds the index of the visual row that currently contains the cursor.
+ * Uses math to calculate position based on line lengths and screen width.
  */
 declare function findCurrentVisualRowIndex(this: CliEditor): number;
 /**
@@ -38,6 +39,8 @@ declare function jumpToLine(this: CliEditor, lineNumber: number): void;
  * Enters Go To Line mode.
  */
 declare function enterGoToLineMode(this: CliEditor): void;
+declare function moveCursorByWord(this: CliEditor, direction: 'left' | 'right'): void;
+declare function matchBracket(this: CliEditor): void;
 export declare const navigationMethods: {
     findCurrentVisualRowIndex: typeof findCurrentVisualRowIndex;
     moveCursorLogically: typeof moveCursorLogically;
@@ -51,6 +54,4 @@ export declare const navigationMethods: {
     moveCursorByWord: typeof moveCursorByWord;
     matchBracket: typeof matchBracket;
 };
-declare function moveCursorByWord(this: CliEditor, direction: 'left' | 'right'): void;
-declare function matchBracket(this: CliEditor): void;
 export {};