cliedit 0.2.0 → 0.3.0

package/dist/editor.d.ts

@@ -52,6 +52,10 @@ export declare class CliEditor {
         y: number;
         x: number;
     }[];
+    searchResultMap: Map<number, Array<{
+        start: number;
+        end: number;
+    }>>;
     searchResultIndex: number;
     history: HistoryManager;
     swapManager: SwapManager;

package/dist/editor.js

@@ -41,6 +41,8 @@ export class CliEditor {
         this.replaceQuery = null; // null = Find mode, string = Replace mode
         this.goToLineQuery = ''; // For Go to Line prompt
         this.searchResults = [];
+        // Map<lineNumber, Array<{ start, end }>> for fast rendering lookup
+        this.searchResultMap = new Map();
         this.searchResultIndex = -1;
         this.isCleanedUp = false;
         this.resolvePromise = null;
@@ -78,7 +80,8 @@ export class CliEditor {
                 process.stdout.removeAllListeners('resize');
                 // 2. (FIX GHOST TUI) Write exit sequence and use callback to ensure it's written 
                 // before Node.js fully releases the TTY.
-                process.stdout.write(ANSI.CLEAR_SCREEN + ANSI.MOVE_CURSOR_TOP_LEFT + ANSI.SHOW_CURSOR + ANSI.EXIT_ALTERNATE_SCREEN, () => {
+                // Disable mouse tracking (1000 and 1006)
+                process.stdout.write(ANSI.CLEAR_SCREEN + ANSI.MOVE_CURSOR_TOP_LEFT + ANSI.SHOW_CURSOR + ANSI.EXIT_ALTERNATE_SCREEN + '\x1b[?1000l' + '\x1b[?1006l', () => {
                     // 3. Disable TTY raw mode and pause stdin after screen is cleared
                     if (this.inputStream.setRawMode) {
                         this.inputStream.setRawMode(false);
@@ -109,8 +112,8 @@ export class CliEditor {
         }
         this.updateScreenSize();
         this.recalculateVisualRows();
-        // Enter alternate screen and hide cursor
-        process.stdout.write(ANSI.ENTER_ALTERNATE_SCREEN + ANSI.HIDE_CURSOR + ANSI.CLEAR_SCREEN);
+        // 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) {
             this.inputStream.setRawMode(true);
         }

package/dist/editor.keys.js

@@ -85,6 +85,11 @@ function handleKeypressEvent(ch, key) {
             keyName = 'ALT_LEFT';
         else if (key.meta && key.name === 'right')
             keyName = 'ALT_RIGHT';
+        // Handle Mouse Scroll events explicitly
+        else if (key.name === 'scrollup')
+            keyName = 'SCROLL_UP';
+        else if (key.name === 'scrolldown')
+            keyName = 'SCROLL_DOWN';
         else
             keyName = key.sequence;
     }
@@ -118,7 +123,55 @@ function handleKeypressEvent(ch, key) {
                 return;
         }
         // 5. Xử lý tất cả các phím lệnh/chỉnh sửa khác
-        edited = this.handleEditKeys(keyName || ch);
+        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.
+            // 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;
+            }
+            else if (currentVisualRow < this.rowOffset) {
+                // Should not happen when scrolling up (moving viewport up), unless cursor was already above?
+                // If we scroll up, rowOffset decreases. Current row stays same. 
+                // So current row > new rowOffset.
+                // It might be > bottomEdge.
+            }
+            // However, to be safe against 'scroll' method resetting it:
+            // The 'scroll' method checks:
+            // if (currentVisualRow < this.rowOffset) -> this.rowOffset = currentVisualRow
+            // 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;
+            }
+        }
+        else if (keyName === 'SCROLL_DOWN') {
+            const scrollAmount = 3;
+            const maxOffset = Math.max(0, this.visualRows.length - 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;
+            }
+        }
+        else {
+            edited = this.handleEditKeys(keyName || ch);
+        }
     }
     // 6. Cập nhật Trạng thái và Render
     if (edited) {
@@ -130,6 +183,7 @@ function handleKeypressEvent(ch, key) {
     }
 }
 function handleAltArrows(keyName) {
+    this.clearSearchResults(); // Clear highlights on smart navigation
     if (keyName === 'ALT_LEFT')
         this.moveCursorByWord('left');
     else if (keyName === 'ALT_RIGHT')
@@ -147,6 +201,7 @@ function handleEditKeys(key) {
     ].includes(key);
     if (isNavigation) {
         this.cancelSelection();
+        this.clearSearchResults(); // Clear highlights on navigation
         if (this.isMessageCustom) {
             this.setStatusMessage(this.DEFAULT_STATUS, 0);
         }
@@ -189,9 +244,11 @@ function handleEditKeys(key) {
             return false;
         // --- Editing ---
         case KEYS.ENTER:
+            this.clearSearchResults();
             this.insertNewLine();
             return true;
         case KEYS.BACKSPACE:
+            this.clearSearchResults();
             // Handle auto-pair deletion
             const line = this.lines[this.cursorY] || '';
             const charBefore = line[this.cursorX - 1];
@@ -212,12 +269,14 @@ function handleEditKeys(key) {
             }
             return true;
         case KEYS.DELETE:
+            this.clearSearchResults();
             if (this.selectionAnchor)
                 this.deleteSelectedText();
             else
                 this.deleteForward();
             return true;
         case KEYS.TAB:
+            this.clearSearchResults();
             this.insertSoftTab();
             return true;
         // --- Search & History ---
@@ -273,6 +332,7 @@ function handleEditKeys(key) {
         // Xử lý Ký tự in được
         default:
             if (key.length === 1 && key >= ' ' && key <= '~') {
+                this.clearSearchResults();
                 this.handleCharacterKey(key);
                 return true;
             }

package/dist/editor.rendering.js

@@ -41,6 +41,11 @@ function render() {
     const displayX = cursorVisualX + this.gutterWidth;
     const displayY = this.screenStartRow + (currentVisualRowIndex - this.rowOffset);
     const selectionRange = this.getNormalizedSelection();
+    // Scrollbar calculations
+    const totalLines = this.visualRows.length;
+    const showScrollbar = totalLines > this.screenRows;
+    const thumbHeight = showScrollbar ? Math.max(1, Math.floor((this.screenRows / totalLines) * this.screenRows)) : 0;
+    const thumbStart = showScrollbar ? Math.floor((this.rowOffset / totalLines) * this.screenRows) : 0;
     // Draw visual rows
     for (let y = 0; y < this.screenRows; y++) {
         const visualRowIndex = y + this.rowOffset;
@@ -66,7 +71,19 @@ function render() {
                 const isCursorPosition = (visualRowIndex === currentVisualRowIndex && i === cursorVisualX);
                 const isSelected = selectionRange && this.isPositionInSelection(logicalY, logicalX, selectionRange);
                 // Highlight search result under cursor
-                const isSearchResult = (this.searchResultIndex !== -1 &&
+                // Check if this character is part of ANY search result
+                let isGlobalSearchResult = false;
+                if (this.searchResultMap.has(logicalY)) {
+                    const matches = this.searchResultMap.get(logicalY);
+                    for (const match of matches) {
+                        if (logicalX >= match.start && logicalX < match.end) {
+                            isGlobalSearchResult = true;
+                            break;
+                        }
+                    }
+                }
+                // Check if this character is part of the CURRENTLY SELECTED search result
+                const isCurrentSearchResult = (this.searchResultIndex !== -1 &&
                     this.searchResults[this.searchResultIndex]?.y === logicalY &&
                     logicalX >= this.searchResults[this.searchResultIndex]?.x &&
                     logicalX < (this.searchResults[this.searchResultIndex]?.x + this.searchQuery.length));
@@ -77,8 +94,12 @@ function render() {
                     // Cursor is a single inverted character if not already covered by selection
                     buffer += ANSI.INVERT_COLORS + char + ANSI.RESET_COLORS;
                 }
-                else if (isSearchResult) {
-                    // Highlight search result
+                else if (isCurrentSearchResult) {
+                    // Selected Match: Invert + Underline (if supported) or just Invert
+                    buffer += ANSI.INVERT_COLORS + '\x1b[4m' + char + ANSI.RESET_COLORS;
+                }
+                else if (isGlobalSearchResult) {
+                    // Global Match: Invert only
                     buffer += ANSI.INVERT_COLORS + char + ANSI.RESET_COLORS;
                 }
                 else {
@@ -93,6 +114,13 @@ function render() {
             }
             buffer += `${ANSI.CLEAR_LINE}`;
         }
+        // Draw Scrollbar (Phase 2)
+        if (showScrollbar) {
+            const isThumb = y >= thumbStart && y < thumbStart + thumbHeight;
+            const scrollChar = isThumb ? '┃' : '│';
+            // Move to last column and draw
+            buffer += `\x1b[${this.screenStartRow + y};${this.screenCols}H${ANSI.RESET_COLORS}${scrollChar}`;
+        }
     }
     // Draw status bar
     buffer += `\x1b[${this.screenRows + this.screenStartRow};1H`;

package/dist/editor.search.d.ts

@@ -33,6 +33,10 @@ declare function jumpToResult(this: CliEditor, result: {
     y: number;
     x: number;
 }): void;
+/**
+ * Clears the current search results and highlights.
+ */
+declare function clearSearchResults(this: CliEditor): void;
 export declare const searchMethods: {
     enterFindMode: typeof enterFindMode;
     enterReplaceMode: typeof enterReplaceMode;
@@ -41,5 +45,6 @@ export declare const searchMethods: {
     replaceCurrentAndFindNext: typeof replaceCurrentAndFindNext;
     replaceAll: typeof replaceAll;
     jumpToResult: typeof jumpToResult;
+    clearSearchResults: typeof clearSearchResults;
 };
 export {};

package/dist/editor.search.js

@@ -29,13 +29,20 @@ function enterReplaceMode() {
  */
 function executeSearch() {
     this.searchResults = [];
+    this.searchResultMap.clear();
     if (this.searchQuery === '')
         return;
+    const queryLen = this.searchQuery.length;
     for (let y = 0; y < this.lines.length; y++) {
         const line = this.lines[y];
         let index = -1;
+        const lineMatches = [];
         while ((index = line.indexOf(this.searchQuery, index + 1)) !== -1) {
             this.searchResults.push({ y, x: index });
+            lineMatches.push({ start: index, end: index + queryLen });
+        }
+        if (lineMatches.length > 0) {
+            this.searchResultMap.set(y, lineMatches);
         }
     }
     this.searchResultIndex = -1;
@@ -158,6 +165,14 @@ function jumpToResult(result) {
     // Calculate new scroll offset to center the result visually
     this.rowOffset = Math.max(0, visualRowIndex - Math.floor(this.screenRows / 2));
 }
+/**
+ * Clears the current search results and highlights.
+ */
+function clearSearchResults() {
+    this.searchResults = [];
+    this.searchResultMap.clear();
+    this.searchResultIndex = -1;
+}
 export const searchMethods = {
     enterFindMode,
     enterReplaceMode,
@@ -166,4 +181,5 @@ export const searchMethods = {
     replaceCurrentAndFindNext,
     replaceAll,
     jumpToResult,
+    clearSearchResults,
 };

package/dist/vendor/keypress.js

@@ -18,6 +18,7 @@ if (!listenerCount) {
  */
 const metaKeyCodeRe = /^(?:\x1b)([a-zA-Z0-9])$/;
 const functionKeyCodeRe = /^(?:\x1b+)(O|N|\[|\[\[)(?:(\d+)(?:;(\d+))?([~^$])|(?:1;)?(\d+)?([a-zA-Z]))/;
+const mouseSgrRe = /^\x1b\[<(\d+);(\d+);(\d+)([mM])/;
 /**
  * Hàm chính, chấp nhận một Readable Stream và làm cho nó
  * phát ra sự kiện "keypress".
@@ -421,7 +422,32 @@ function emitKey(stream, s) {
         }
         return;
     }
-    // XXX: code phân tích "mouse" đã bị XÓA theo yêu cầu.
+    // Mouse handling (SGR 1006)
+    if ((parts = mouseSgrRe.exec(s))) {
+        // SGR Mode: \x1b[< b; x; y M/m
+        // b: button code
+        // x, y: coordinates (1-based)
+        // M/m: Press/Release
+        const b = parseInt(parts[1], 10);
+        const x = parseInt(parts[2], 10);
+        const y = parseInt(parts[3], 10);
+        const type = parts[4]; // M=press, m=release
+        key.name = 'mouse';
+        key.ctrl = false;
+        key.meta = false;
+        key.shift = false;
+        // Check for Scroll (Button 64 = Up, 65 = Down)
+        if (b === 64) {
+            key.name = 'scrollup';
+            key.code = 'scrollup';
+        }
+        else if (b === 65) {
+            key.name = 'scrolldown';
+            key.code = 'scrolldown';
+        }
+        // We can handle click here if needed (b=0 left, b=1 middle, b=2 right)
+        // but for now only scroll is requested.
+    }
     // Không phát ra key nếu không tìm thấy tên
     if (key.name === undefined) {
         return; // key = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cliedit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A lightweight, raw-mode terminal editor utility for Node.js CLI applications, with line wrapping and undo/redo support.",
   "repository": "https://github.com/CodeTease/cliedit",
   "type": "module",
@@ -21,7 +21,7 @@
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build",
-    "demo": "npm run build && cross-env NODE_ENV=development node dist/demo.js",
+    "demo": "npm run build && cross-env NODE_ENV=development tsx src/demo.ts",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -35,10 +35,9 @@
   "author": "CodeTease",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^20.12.12",
-    "cross-env": "^7.0.3",
-    "typescript": "^5.4.5"
-  },
-  "dependencies": {
+    "@types/node": "^22",
+    "cross-env": "^7",
+    "tsx": "^4",
+    "typescript": "^5"
   }
-}
+}