ink-prompt 0.2.2 → 0.2.4

package/dist/components/MultilineInput/useTextInput.js

@@ -1,10 +1,9 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { createBuffer, insertText as bufferInsertText, deleteChar as bufferDeleteChar, deleteCharForward as bufferDeleteCharForward, insertNewLine as bufferInsertNewLine, moveCursor as bufferMoveCursor, getTextContent, } from './TextBuffer.js';
-import { createPlaceholderState, addPlaceholder, removePlaceholder, getValue, getValueCursorOffset, getCursorFromValueOffset, } from './Placeholder.js';
-import { createSentinel, parseSentinels } from './ImageSentinel.js';
+import { createBuffer, insertText as bufferInsertText, deleteChar as bufferDeleteChar, deleteCharForward as bufferDeleteCharForward, insertNewLine as bufferInsertNewLine, moveCursor as bufferMoveCursor, } from './TextBuffer.js';
+import { createBlockState, createPasteBlockEntry, createImageBlockEntry, removeBlock, getValue, getValueCursorOffset, getCursorFromValueOffset, } from './BlockRegistry.js';
 import { findAtomicBlockBefore, findAtomicBlockAfter } from './AtomicBlocks.js';
 import { log } from '../../utils/logger.js';
-const defaultFormatPlaceholder = (id) => `[Paste text #${id}]`;
+const defaultFormatPlaceholder = (displayNumber) => `[Paste text #${displayNumber}]`;
 export function useTextInput({ initialValue = '', width, historyLimit = 100, undoDebounceMs = 200, pasteThreshold, formatPastePlaceholder = defaultFormatPlaceholder, } = {}) {
     const [buffer, setBuffer] = useState(() => createBuffer(initialValue));
     const [cursor, setCursor] = useState(() => {
@@ -14,9 +13,7 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             column: lines[lines.length - 1].length,
         };
     });
-    const [placeholderState, setPlaceholderState] = useState(() => createPlaceholderState());
-    const [images, setImages] = useState({});
-    const nextDisplayNumberRef = useRef(1);
+    const [blockState, setBlockState] = useState(() => createBlockState());
     const [undoStack, setUndoStack] = useState([]);
     const [redoStack, setRedoStack] = useState([]);
     const pendingInsertBatchRef = useRef({});
@@ -56,13 +53,12 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             pendingInsertBatchRef.current.startState = {
                 buffer: currentBuffer,
                 cursor: currentCursor,
-                placeholderState,
-                images,
+                blockState,
             };
             setRedoStack([]);
         }
         schedulePendingInsertCommit();
-    }, [schedulePendingInsertCommit, placeholderState, images]);
+    }, [schedulePendingInsertCommit, blockState]);
     const flushPendingInsertBatch = useCallback(() => {
         commitPendingInsertBatch();
     }, [commitPendingInsertBatch]);
@@ -70,11 +66,10 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         appendUndoState({
             buffer: currentBuffer,
             cursor: currentCursor,
-            placeholderState,
-            images,
+            blockState,
         });
         setRedoStack([]);
-    }, [appendUndoState, placeholderState, images]);
+    }, [appendUndoState, blockState]);
     useEffect(() => {
         return () => {
             clearPendingInsertTimer();
@@ -92,16 +87,16 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         }
     }, [buffer, cursor, flushPendingInsertBatch, pushToHistory]);
     const insert = useCallback((char) => {
-        log(`[INSERT] char="${char.replace(/[\x00-\x1F\x7F-￿]/g, c => `\\x${c.charCodeAt(0).toString(16)}`)}" len=${char.length} cursor={line:${cursor.line},col:${cursor.column}} linesBefore=${buffer.lines.length}`);
+        log(`[INSERT] char="${char.replace(/[\x00-\x1F\x7F-\uFFFF]/g, c => `\\x${c.charCodeAt(0).toString(16)}`)}" len=${char.length} cursor={line:${cursor.line},col:${cursor.column}} linesBefore=${buffer.lines.length}`);
         const normalized = char.replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\x00/g, '');
         if (normalized.length === 0)
             return;
-        // Check if this is a paste exceeding the threshold
         if (pasteThreshold !== undefined && pasteThreshold > 0 && normalized.length > pasteThreshold) {
             flushPendingInsertBatch();
             pushToHistory(buffer, cursor);
-            const { id, marker, state: newPlaceholderState } = addPlaceholder(placeholderState, normalized, formatPastePlaceholder(placeholderState.nextId));
-            setPlaceholderState(newPlaceholderState);
+            const displayText = formatPastePlaceholder(blockState.nextPasteNumber);
+            const { marker, state: newBlockState } = createPasteBlockEntry(blockState, normalized, displayText);
+            setBlockState(newBlockState);
             const result = bufferInsertText(buffer, cursor, marker);
             setBuffer(result.buffer);
             setCursor(result.cursor);
@@ -120,70 +115,61 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         const result = bufferInsertText(buffer, cursor, normalized);
         setBuffer(result.buffer);
         setCursor(result.cursor);
-    }, [beginOrRefreshInsertBatch, buffer, cursor, flushPendingInsertBatch, pushToHistory, undoDebounceMs, pasteThreshold, placeholderState, formatPastePlaceholder]);
+    }, [beginOrRefreshInsertBatch, buffer, cursor, flushPendingInsertBatch, pushToHistory, undoDebounceMs, pasteThreshold, blockState, formatPastePlaceholder]);
     const cleanupBlockRegistry = useCallback((block) => {
         if (!block)
             return;
-        if (block.kind === 'placeholder') {
-            setPlaceholderState((prev) => removePlaceholder(prev, block.id));
-        }
-        else if (block.kind === 'sentinel' && images[block.id]) {
-            const next = { ...images };
-            delete next[block.id];
-            setImages(next);
-        }
-    }, [images]);
+        setBlockState((prev) => removeBlock(prev, block.id));
+    }, []);
     const deleteChar = useCallback(() => {
         applyEdit(() => {
             const line = buffer.lines[cursor.line];
-            cleanupBlockRegistry(findAtomicBlockBefore(line, cursor.column, placeholderState.placeholders));
-            return bufferDeleteChar(buffer, cursor, placeholderState.placeholders);
+            cleanupBlockRegistry(findAtomicBlockBefore(line, cursor.column, blockState.entries));
+            return bufferDeleteChar(buffer, cursor, blockState.entries);
         });
-    }, [applyEdit, buffer, cursor, placeholderState, cleanupBlockRegistry]);
+    }, [applyEdit, buffer, cursor, blockState, cleanupBlockRegistry]);
     const deleteCharForward = useCallback(() => {
         applyEdit(() => {
             const line = buffer.lines[cursor.line];
-            cleanupBlockRegistry(findAtomicBlockAfter(line, cursor.column, placeholderState.placeholders));
-            return bufferDeleteCharForward(buffer, cursor, placeholderState.placeholders);
+            cleanupBlockRegistry(findAtomicBlockAfter(line, cursor.column, blockState.entries));
+            return bufferDeleteCharForward(buffer, cursor, blockState.entries);
         });
-    }, [applyEdit, buffer, cursor, placeholderState, cleanupBlockRegistry]);
+    }, [applyEdit, buffer, cursor, blockState, cleanupBlockRegistry]);
     const newLine = useCallback(() => {
         applyEdit(() => bufferInsertNewLine(buffer, cursor));
     }, [applyEdit, buffer, cursor]);
     const deleteAndNewLine = useCallback(() => {
         applyEdit(() => {
-            const afterDelete = bufferDeleteChar(buffer, cursor, placeholderState.placeholders);
+            const afterDelete = bufferDeleteChar(buffer, cursor, blockState.entries);
             return bufferInsertNewLine(afterDelete.buffer, afterDelete.cursor);
         });
-    }, [applyEdit, buffer, cursor, placeholderState]);
+    }, [applyEdit, buffer, cursor, blockState]);
     const moveCursor = useCallback((direction) => {
         flushPendingInsertBatch();
-        const newCursor = bufferMoveCursor(buffer, cursor, direction, width, placeholderState.placeholders);
+        const newCursor = bufferMoveCursor(buffer, cursor, direction, width, blockState.entries);
         setCursor(newCursor);
-    }, [buffer, cursor, flushPendingInsertBatch, width, placeholderState]);
+    }, [buffer, cursor, flushPendingInsertBatch, width, blockState]);
     const undo = useCallback(() => {
         const pendingStartState = pendingInsertBatchRef.current.startState;
         if (pendingStartState) {
             clearPendingInsertTimer();
             pendingInsertBatchRef.current.startState = undefined;
-            setRedoStack((prev) => [...prev, { buffer, cursor, placeholderState, images }]);
+            setRedoStack((prev) => [...prev, { buffer, cursor, blockState }]);
             setBuffer(pendingStartState.buffer);
             setCursor(pendingStartState.cursor);
-            setPlaceholderState(pendingStartState.placeholderState);
-            setImages(pendingStartState.images);
+            setBlockState(pendingStartState.blockState);
             return;
         }
         if (undoStack.length === 0)
             return;
         const previousState = undoStack[undoStack.length - 1];
         const newUndoStack = undoStack.slice(0, -1);
-        setRedoStack((prev) => [...prev, { buffer, cursor, placeholderState, images }]);
+        setRedoStack((prev) => [...prev, { buffer, cursor, blockState }]);
         setBuffer(previousState.buffer);
         setCursor(previousState.cursor);
-        setPlaceholderState(previousState.placeholderState);
-        setImages(previousState.images);
+        setBlockState(previousState.blockState);
         setUndoStack(newUndoStack);
-    }, [buffer, clearPendingInsertTimer, cursor, undoStack, placeholderState, images]);
+    }, [buffer, clearPendingInsertTimer, cursor, undoStack, blockState]);
     const redo = useCallback(() => {
         if (pendingInsertBatchRef.current.startState) {
             return;
@@ -192,53 +178,70 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             return;
         const nextState = redoStack[redoStack.length - 1];
         const newRedoStack = redoStack.slice(0, -1);
-        setUndoStack((prev) => [...prev, { buffer, cursor, placeholderState, images }]);
+        setUndoStack((prev) => [...prev, { buffer, cursor, blockState }]);
         setBuffer(nextState.buffer);
         setCursor(nextState.cursor);
-        setPlaceholderState(nextState.placeholderState);
-        setImages(nextState.images);
+        setBlockState(nextState.blockState);
         setRedoStack(newRedoStack);
-    }, [buffer, cursor, redoStack, placeholderState, images]);
+    }, [buffer, cursor, redoStack, blockState]);
     const setText = useCallback((text) => {
         applyEdit(() => {
-            setPlaceholderState(createPlaceholderState());
+            setBlockState(createBlockState());
             const newBuffer = createBuffer(text);
             const lines = text.split('\n');
             const newCursor = { line: lines.length - 1, column: lines[lines.length - 1].length };
-            // Clean up orphaned images
-            const usedIds = new Set(parseSentinels(getTextContent(newBuffer)).map((s) => s.id));
-            setImages((prev) => {
-                const next = {};
-                for (const [id, ref] of Object.entries(prev)) {
-                    if (usedIds.has(id))
-                        next[id] = ref;
-                }
-                return next;
-            });
             return { buffer: newBuffer, cursor: newCursor };
         });
     }, [applyEdit]);
     const insertImage = useCallback((imageRef) => {
         applyEdit(() => {
-            setImages((prev) => ({ ...prev, [imageRef.id]: imageRef }));
-            if (imageRef.displayNumber >= nextDisplayNumberRef.current) {
-                nextDisplayNumberRef.current = imageRef.displayNumber + 1;
-            }
-            return bufferInsertText(buffer, cursor, createSentinel(imageRef.id, imageRef.displayNumber));
+            const { marker, state: newBlockState } = createImageBlockEntry(blockState, imageRef, imageRef.id);
+            setBlockState(newBlockState);
+            return bufferInsertText(buffer, cursor, marker);
         });
-    }, [applyEdit, buffer, cursor]);
-    const value = useMemo(() => getValue(buffer.lines, placeholderState.placeholders), [buffer.lines, placeholderState.placeholders]);
-    const cursorOffset = useMemo(() => getValueCursorOffset(buffer.lines, cursor, placeholderState.placeholders), [buffer.lines, cursor, placeholderState.placeholders]);
-    const imagesList = useMemo(() => Object.values(images), [images]);
+    }, [applyEdit, buffer, cursor, blockState]);
+    const value = useMemo(() => getValue(buffer.lines, blockState.entries), [buffer.lines, blockState.entries]);
+    const cursorOffset = useMemo(() => getValueCursorOffset(buffer.lines, cursor, blockState.entries), [buffer.lines, cursor, blockState.entries]);
+    const imagesList = useMemo(() => {
+        const result = [];
+        for (const entry of blockState.entries.values()) {
+            if (entry.kind === 'image') {
+                result.push({
+                    id: entry.id,
+                    data: entry.data,
+                    mimeType: entry.mimeType,
+                    byteSize: entry.byteSize,
+                    displayNumber: entry.displayNumber,
+                });
+            }
+        }
+        return result;
+    }, [blockState.entries]);
     const getImagesCallback = useCallback(() => {
         return imagesList;
     }, [imagesList]);
     const setImagesCallback = useCallback((newImages) => {
-        const map = {};
-        for (const img of newImages) {
-            map[img.id] = img;
-        }
-        setImages(map);
+        setBlockState((prev) => {
+            const newEntries = new Map(prev.entries);
+            for (const [id, entry] of prev.entries) {
+                if (entry.kind === 'image') {
+                    newEntries.delete(id);
+                }
+            }
+            let nextImageNumber = prev.nextImageNumber;
+            for (const img of newImages) {
+                nextImageNumber = Math.max(nextImageNumber, img.displayNumber + 1);
+                newEntries.set(img.id, {
+                    kind: 'image',
+                    id: img.id,
+                    displayNumber: img.displayNumber,
+                    data: img.data,
+                    mimeType: img.mimeType,
+                    byteSize: img.byteSize,
+                });
+            }
+            return { ...prev, entries: newEntries, nextImageNumber };
+        });
     }, []);
     return {
         value,
@@ -256,9 +259,9 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         cursorOffset,
         setCursorOffset: useCallback((offset) => {
             flushPendingInsertBatch();
-            setCursor(getCursorFromValueOffset(buffer.lines, offset, placeholderState.placeholders));
-        }, [buffer.lines, flushPendingInsertBatch, placeholderState.placeholders]),
-        placeholderState,
+            setCursor(getCursorFromValueOffset(buffer.lines, offset, blockState.entries));
+        }, [buffer.lines, flushPendingInsertBatch, blockState.entries]),
+        blockState,
         insertImage,
         images: imagesList,
         getImages: getImagesCallback,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-prompt",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "A React Ink component for prompts",
   "type": "module",
   "main": "./dist/index.js",

package/dist/components/MultilineInput/Placeholder.d.ts

@@ -1,30 +0,0 @@
-import type { PlaceholderInfo, PlaceholderState } from './types.js';
-export declare const MARKER_REGEX: RegExp;
-export declare function createMarker(id: number): string;
-export declare function createPlaceholderState(): PlaceholderState;
-export declare function addPlaceholder(state: PlaceholderState, originalText: string, displayText: string): {
-    id: number;
-    marker: string;
-    state: PlaceholderState;
-};
-export declare function removePlaceholder(state: PlaceholderState, id: number): PlaceholderState;
-export declare function getDisplayLine(line: string, placeholders: Map<number, PlaceholderInfo>): string;
-export declare function getValue(lines: string[], placeholders: Map<number, PlaceholderInfo>): string;
-export interface MarkerRange {
-    id: number;
-    start: number;
-    end: number;
-}
-export declare function findPlaceholderAt(line: string, column: number): MarkerRange | null;
-export declare function findPlaceholderAfter(line: string, column: number): MarkerRange | null;
-export declare function findPlaceholderBefore(line: string, column: number): MarkerRange | null;
-export declare function bufferColToDisplayCol(line: string, column: number, placeholders: Map<number, PlaceholderInfo>): number;
-export declare function displayColToBufferCol(line: string, displayColumn: number, placeholders: Map<number, PlaceholderInfo>): number;
-export declare function getValueCursorOffset(lines: string[], cursor: {
-    line: number;
-    column: number;
-}, placeholders: Map<number, PlaceholderInfo>): number;
-export declare function getCursorFromValueOffset(lines: string[], offset: number, placeholders: Map<number, PlaceholderInfo>): {
-    line: number;
-    column: number;
-};

package/dist/components/MultilineInput/Placeholder.js

@@ -1,200 +0,0 @@
-export const MARKER_REGEX = /\x00P(\d+)\x00/g;
-export function createMarker(id) {
-    return `\x00P${id}\x00`;
-}
-export function createPlaceholderState() {
-    return { placeholders: new Map(), nextId: 0 };
-}
-export function addPlaceholder(state, originalText, displayText) {
-    const id = state.nextId;
-    const marker = createMarker(id);
-    const newPlaceholders = new Map(state.placeholders);
-    newPlaceholders.set(id, { id, originalText, displayText });
-    return { id, marker, state: { placeholders: newPlaceholders, nextId: id + 1 } };
-}
-export function removePlaceholder(state, id) {
-    const newPlaceholders = new Map(state.placeholders);
-    newPlaceholders.delete(id);
-    return { ...state, placeholders: newPlaceholders };
-}
-export function getDisplayLine(line, placeholders) {
-    return line.replace(MARKER_REGEX, (_, idStr) => {
-        const info = placeholders.get(Number(idStr));
-        return info ? info.displayText : '';
-    });
-}
-export function getValue(lines, placeholders) {
-    const text = lines.join('\n');
-    return text.replace(MARKER_REGEX, (_, idStr) => {
-        const info = placeholders.get(Number(idStr));
-        return info ? info.originalText : '';
-    });
-}
-export function findPlaceholderAt(line, column) {
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        const start = match.index;
-        const end = start + match[0].length;
-        if (column > start && column < end) {
-            return { id: Number(match[1]), start, end };
-        }
-    }
-    return null;
-}
-export function findPlaceholderAfter(line, column) {
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        if (match.index === column) {
-            return { id: Number(match[1]), start: match.index, end: match.index + match[0].length };
-        }
-    }
-    return null;
-}
-export function findPlaceholderBefore(line, column) {
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        const end = match.index + match[0].length;
-        if (end === column) {
-            return { id: Number(match[1]), start: match.index, end };
-        }
-    }
-    return null;
-}
-export function bufferColToDisplayCol(line, column, placeholders) {
-    if (!placeholders || placeholders.size === 0)
-        return column;
-    let displayCol = 0;
-    let lastEnd = 0;
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        const markerStart = match.index;
-        const markerEnd = markerStart + match[0].length;
-        if (column <= markerStart) {
-            return displayCol + (column - lastEnd);
-        }
-        displayCol += markerStart - lastEnd;
-        const info = placeholders.get(Number(match[1]));
-        const displayLen = info ? info.displayText.length : 0;
-        if (column <= markerEnd) {
-            return displayCol + displayLen;
-        }
-        displayCol += displayLen;
-        lastEnd = markerEnd;
-    }
-    return displayCol + (column - lastEnd);
-}
-export function displayColToBufferCol(line, displayColumn, placeholders) {
-    if (!placeholders || placeholders.size === 0)
-        return displayColumn;
-    let bufPos = 0;
-    let dispPos = 0;
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        const markerStart = match.index;
-        const markerEnd = markerStart + match[0].length;
-        const textLen = markerStart - bufPos;
-        if (displayColumn <= dispPos + textLen) {
-            return bufPos + (displayColumn - dispPos);
-        }
-        dispPos += textLen;
-        bufPos = markerStart;
-        const info = placeholders.get(Number(match[1]));
-        const displayLen = info ? info.displayText.length : 0;
-        if (displayColumn <= dispPos + displayLen) {
-            return markerEnd;
-        }
-        dispPos += displayLen;
-        bufPos = markerEnd;
-    }
-    return bufPos + (displayColumn - dispPos);
-}
-export function getValueCursorOffset(lines, cursor, placeholders) {
-    let offset = 0;
-    for (let i = 0; i < cursor.line; i++) {
-        offset += getExpandedLineLength(lines[i], placeholders) + 1;
-    }
-    const line = lines[cursor.line];
-    let bufPos = 0;
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        const markerStart = match.index;
-        const markerEnd = markerStart + match[0].length;
-        if (cursor.column <= markerStart) {
-            offset += cursor.column - bufPos;
-            return offset;
-        }
-        offset += markerStart - bufPos;
-        const info = placeholders.get(Number(match[1]));
-        offset += info ? info.originalText.length : 0;
-        bufPos = markerEnd;
-        if (cursor.column <= markerEnd) {
-            return offset;
-        }
-    }
-    offset += cursor.column - bufPos;
-    return offset;
-}
-export function getCursorFromValueOffset(lines, offset, placeholders) {
-    let currentOffset = 0;
-    const lineCount = lines.length;
-    for (let i = 0; i < lineCount; i++) {
-        const lineLen = getExpandedLineLength(lines[i], placeholders);
-        if (i === lineCount - 1) {
-            if (offset <= currentOffset + lineLen) {
-                const colInExpanded = offset - currentOffset;
-                return { line: i, column: valueOffsetToBufferColumn(lines[i], colInExpanded, placeholders) };
-            }
-            return { line: i, column: lines[i].length };
-        }
-        if (offset <= currentOffset + lineLen) {
-            const colInExpanded = offset - currentOffset;
-            return { line: i, column: valueOffsetToBufferColumn(lines[i], colInExpanded, placeholders) };
-        }
-        currentOffset += lineLen + 1;
-    }
-    const lastIdx = lines.length - 1;
-    return { line: lastIdx, column: lines[lastIdx].length };
-}
-function getExpandedLineLength(line, placeholders) {
-    let len = 0;
-    let lastEnd = 0;
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        len += match.index - lastEnd;
-        const info = placeholders.get(Number(match[1]));
-        len += info ? info.originalText.length : 0;
-        lastEnd = match.index + match[0].length;
-    }
-    len += line.length - lastEnd;
-    return len;
-}
-function valueOffsetToBufferColumn(line, offsetInExpanded, placeholders) {
-    let bufPos = 0;
-    let expandedPos = 0;
-    MARKER_REGEX.lastIndex = 0;
-    let match;
-    while ((match = MARKER_REGEX.exec(line)) !== null) {
-        const markerStart = match.index;
-        const textLen = markerStart - bufPos;
-        if (offsetInExpanded <= expandedPos + textLen) {
-            return bufPos + (offsetInExpanded - expandedPos);
-        }
-        expandedPos += textLen;
-        bufPos = markerStart;
-        const info = placeholders.get(Number(match[1]));
-        const originalLen = info ? info.originalText.length : 0;
-        if (offsetInExpanded <= expandedPos + originalLen) {
-            return markerStart + match[0].length;
-        }
-        expandedPos += originalLen;
-        bufPos = markerStart + match[0].length;
-    }
-    return bufPos + (offsetInExpanded - expandedPos);
-}