@teaui/core 1.10.8 → 1.11.9

package/.dist/components/Input.js

@@ -5,6 +5,7 @@ import { Style } from '../Style.js';
 import { Point, Size } from '../geometry.js';
 import { FONTS } from './fonts.js';
 const NL_SIGIL = '⤦';
+const TAB_SIGIL = '⭾ ';
 /**
  * Text input. Supports selection, word movement via alt+←→, single and multiline
  * input, and wrapped lines.
@@ -28,12 +29,21 @@ export class Input extends View {
     #wrap = false;
     #multiline = false;
     #font = 'default';
+    #format;
+    #formatStyles = [];
     #onChange;
     #onSubmit;
     // Printable width
     #maxLineWidth = 0;
     #cursor = { start: 0, end: 0 };
     #visibleWidth = 0;
+    // Undo/redo
+    #undoStack = [];
+    #redoStack = [];
+    #pendingUndoKind;
+    #preEditChars = [];
+    #preEditCursor = { start: 0, end: 0 };
+    #insertCoalesceEnabled = true;
     constructor(props = {}) {
         super(props);
         this.#update(props);
@@ -43,11 +53,12 @@ export class Input extends View {
         this.#update(props);
         super.update(props);
     }
-    #update({ value, wrap, multiline, font, placeholder, onChange, onSubmit, }) {
+    #update({ value, wrap, multiline, font, format, placeholder, onChange, onSubmit, }) {
         this.#onChange = onChange;
         this.#onSubmit = onSubmit;
         this.#wrap = wrap ?? false;
         this.#multiline = multiline ?? false;
+        this.#format = format;
         this.#updatePlaceholderLines(placeholder ?? '');
         this.#updateLines(unicode.printableChars(value ?? ''), font ?? 'default');
     }
@@ -92,10 +103,11 @@ export class Input extends View {
                 return [lines, line];
             }, [[], []]);
             this.#printableLines = charLines.map((printableLine, index, all) => {
+                const displayLine = printableLine;
                 // every line needs a ' ' or NL_SIGIL at the end, for the EOL cursor
                 return [
-                    printableLine.concat(index === all.length - 1 ? ' ' : NL_SIGIL),
-                    printableLine.reduce((width, char) => width + unicode.charWidth(char), 0) + 1,
+                    displayLine.concat(index === all.length - 1 ? ' ' : NL_SIGIL),
+                    displayLine.reduce((width, char) => width + unicode.charWidth(char), 0) + 1,
                 ];
             });
         }
@@ -122,8 +134,48 @@ export class Input extends View {
             // the _printable_ width, not the number of characters
             return Math.max(maxWidth, width);
         }, 0);
+        this.#updateFormatStyles();
         this.invalidateSize();
     }
+    /**
+     * Run the format function on the current value and parse the ANSI output into
+     * a flat Style[] array with one entry per character in #chars.
+     */
+    #updateFormatStyles() {
+        if (!this.#format || !this.#chars.length) {
+            this.#formatStyles = [];
+            return;
+        }
+        let formatted;
+        try {
+            formatted = this.#format(this.#value);
+        }
+        catch {
+            this.#formatStyles = [];
+            return;
+        }
+        // Parse the ANSI output to extract a style per character.
+        // Walk through the formatted string, tracking ANSI state.
+        const styles = [];
+        let currentStyle = Style.NONE;
+        for (const token of unicode.printableChars(formatted)) {
+            const charWidth = unicode.charWidth(token);
+            if (charWidth === 0) {
+                // ANSI escape sequence — update current style.
+                // Full resets (ESC[0m) clear back to no styling.
+                if (RESET_RE.test(token)) {
+                    currentStyle = Style.NONE;
+                }
+                else {
+                    currentStyle = currentStyle.merge(Style.fromSGR(token, Style.NONE));
+                }
+            }
+            else {
+                styles.push(currentStyle);
+            }
+        }
+        this.#formatStyles = styles;
+    }
     get value() {
         return this.#value;
     }
@@ -164,6 +216,15 @@ export class Input extends View {
             this.#updateLines(undefined, undefined);
         }
     }
+    legendItems() {
+        const items = [];
+        items.push({ key: ['C-a', 'home'], label: 'Line Start' }, { key: ['C-e', 'end'], label: 'Line End' }, { key: 'A-,', label: 'Start' }, { key: 'A-.', label: 'End' });
+        if (this.#multiline) {
+            items.push({ key: 'C-]', label: 'Indent' }, { key: 'C-[', label: 'Dedent' });
+        }
+        items.push({ key: 'C-z', label: 'Undo' }, { key: 'C-S-z', label: 'Redo' });
+        return items;
+    }
     naturalSize(available) {
         let lines = this.#printableLines;
         if (!lines.length || !available.width) {
@@ -194,61 +255,111 @@ export class Input extends View {
         const prevChars = this.#chars;
         const prevText = this.#value;
         let removeAccent = true;
-        if (event.name === 'enter' || event.name === 'return') {
+        if (event.full === 'C-z' || event.full === 'C--') {
+            this.#undo();
+        }
+        else if (event.full === 'C-S-z' || event.full === 'C-S--') {
+            this.#redo();
+        }
+        else if (event.name === 'enter' || event.name === 'return') {
             if (this.#multiline) {
-                this.#receiveChar('\n', true);
+                this.#beginEdit('replace');
+                if (event.shift || event.alt) {
+                    // Shift+Enter or Alt+Enter: plain newline without indentation
+                    this.#receiveChar('\n', true);
+                }
+                else {
+                    // Enter: newline + preserve current line's indentation
+                    this.#receiveEnterWithIndent();
+                }
             }
             else {
                 this.#onSubmit?.(this.#value);
                 return;
             }
         }
-        else if (event.full === 'C-a') {
-            this.#receiveGotoStart();
+        else if (event.full === 'C-]') {
+            this.#beginEdit('replace');
+            this.#receiveIndent();
+        }
+        else if (event.full === 'C-[') {
+            this.#beginEdit('replace');
+            this.#receiveDedent();
         }
-        else if (event.full === 'C-e') {
-            this.#receiveGotoEnd();
+        else if (event.name === 'tab' && event.alt) {
+            this.#beginEdit('insert');
+            this.#receiveChar('\t', true);
+        }
+        else if (event.full === 'C-a' || event.name === 'home') {
+            this.#insertCoalesceEnabled = false;
+            this.#receiveHome(event);
+        }
+        else if (event.full === 'C-e' || event.name === 'end') {
+            this.#insertCoalesceEnabled = false;
+            this.#receiveEnd(event);
+        }
+        else if (event.full === 'A-,' ||
+            event.full === 'A-S-,' ||
+            event.full === 'A-S-<') {
+            this.#insertCoalesceEnabled = false;
+            this.#receiveGotoStart(event);
+        }
+        else if (event.full === 'A-.' ||
+            event.full === 'A-S-.' ||
+            event.full === 'A-S->') {
+            this.#insertCoalesceEnabled = false;
+            this.#receiveGotoEnd(event);
         }
         else if (event.name === 'up') {
+            this.#insertCoalesceEnabled = false;
             this.#receiveKeyUpArrow(event);
         }
         else if (event.name === 'down') {
+            this.#insertCoalesceEnabled = false;
             this.#receiveKeyDownArrow(event);
         }
-        else if (event.name === 'home') {
-            this.#receiveHome(event);
-        }
-        else if (event.name === 'end') {
-            this.#receiveEnd(event);
-        }
         else if (event.name === 'left') {
+            this.#insertCoalesceEnabled = false;
             this.#receiveKeyLeftArrow(event);
         }
         else if (event.name === 'right') {
+            this.#insertCoalesceEnabled = false;
             this.#receiveKeyRightArrow(event);
         }
         else if (event.full === 'backspace') {
+            this.#beginEdit('delete');
             this.#receiveKeyBackspace();
         }
         else if (event.name === 'delete') {
+            this.#beginEdit('delete');
             this.#receiveKeyDelete();
         }
         else if (event.full === 'A-backspace' || event.full === 'C-w') {
+            this.#beginEdit('delete');
             this.#receiveKeyDeleteWord();
         }
         else if (isKeyAccent(event)) {
+            this.#beginEdit('insert');
             this.#receiveKeyAccent(event);
             removeAccent = false;
         }
-        else if (isKeyPrintable(event)) {
+        else if (!event.ctrl &&
+            !event.alt &&
+            !event.gui &&
+            isKeyPrintable(event)) {
+            this.#beginEdit('insert');
             this.#receiveKeyPrintable(event);
         }
         if (removeAccent) {
             this.#chars = this.#chars.filter(char => !isAccentChar(char));
         }
         if (prevChars !== this.#chars) {
+            this.#commitEdit();
             this.#updateLines(this.#chars, undefined);
         }
+        else {
+            this.#pendingUndoKind = undefined;
+        }
         if (prevText !== this.#value) {
             this.#onChange?.(this.#value);
         }
@@ -257,6 +368,7 @@ export class Input extends View {
         const pasteChars = unicode.printableChars(this.#multiline ? text : text.replaceAll('\n', ''));
         if (pasteChars.length === 0)
             return;
+        this.#beginEdit('replace');
         const prevText = this.#value;
         if (isEmptySelection(this.#cursor)) {
             this.#chars = this.#chars
@@ -272,6 +384,7 @@ export class Input extends View {
             this.#cursor.start = this.#cursor.end =
                 this.minSelected() + pasteChars.length;
         }
+        this.#commitEdit();
         this.#updateLines(this.#chars, undefined);
         if (prevText !== this.#value) {
             this.#onChange?.(this.#value);
@@ -337,23 +450,34 @@ export class Input extends View {
         }
         let isPlaceholder = !Boolean(this.#chars.length);
         let currentStyle = Style.NONE;
-        const plainStyle = this.theme.text({
+        const plainStyle = this.purpose.text({
             isPlaceholder,
             hasFocus,
         });
-        const selectedStyle = this.theme.text({
+        const selectedStyle = this.purpose.text({
             isSelected: true,
             hasFocus,
         });
         const cursorStyle = plainStyle.merge({ underline: true });
-        const nlStyle = this.theme.text({ isPlaceholder: true });
+        const nlStyle = this.purpose.text({ isPlaceholder: true });
         const fontMap = this.#font && FONTS[this.#font];
+        const hasFormatStyles = this.#formatStyles.length > 0;
         viewport.usingPen(pen => {
             let style = plainStyle;
             const visibleLines = lines.slice(cursorVisible.y);
             if (visibleLines.length === 0) {
                 visibleLines.push([[' '], 0]);
             }
+            // Compute the character offset into the format styles array at the start
+            // of visible lines. Each line's chars (excluding the trailing sigil) map
+            // 1:1 to format style entries. Newlines do NOT have entries in the styles
+            // array (charWidth('\n') === 0, so they're skipped during parsing).
+            let formatOffset = 0;
+            if (hasFormatStyles) {
+                for (let i = 0; i < cursorVisible.y && i < lines.length; i++) {
+                    formatOffset += lines[i][0].length - 1;
+                }
+            }
             // is the viewport tall/wide enough to show ellipses …
             const isTallEnough = viewport.contentSize.height > 4;
             const isWideEnough = viewport.contentSize.width > 9;
@@ -372,41 +496,52 @@ export class Input extends View {
                 // set to true if any character is skipped
                 let drawInitialEllipses = false;
                 scanTextPosition.x = 0;
+                let charIndex = 0;
                 for (let char of line) {
                     char = fontMap?.get(char) ?? char;
                     const charWidth = unicode.charWidth(char);
+                    const isSigil = charIndex === line.length - 1;
                     if (scanTextPosition.x >= cursorVisible.x) {
                         const inSelection = isInSelection(cursorMin, cursorMax, scanTextPosition);
                         const inCursor = scanTextPosition.x === cursorEnd.x &&
                             scanTextPosition.y === cursorEnd.y;
                         const inNewline = char === NL_SIGIL && scanTextPosition.x + charWidth === width;
+                        const inTab = isTabSigil(char);
+                        const isDimSigil = inNewline || inTab;
+                        // Look up the format style for this character.
+                        const formatStyle = hasFormatStyles && !isSigil && !inTab
+                            ? this.#formatStyles[formatOffset + charIndex]
+                            : undefined;
+                        const baseStyle = formatStyle
+                            ? plainStyle.merge(formatStyle)
+                            : plainStyle;
                         if (isEmptySelection(this.#cursor)) {
                             if (isAccentChar(char)) {
-                                style = plainStyle.merge({ underline: true, inverse: true });
+                                style = baseStyle.merge({ underline: true, inverse: true });
                             }
                             else if (hasFocus && inCursor) {
-                                style = inNewline
+                                style = isDimSigil
                                     ? nlStyle.merge({ underline: true })
-                                    : cursorStyle;
+                                    : baseStyle.merge({ underline: true });
                             }
-                            else if (inNewline) {
+                            else if (isDimSigil) {
                                 style = nlStyle;
                             }
                             else {
-                                style = plainStyle;
+                                style = baseStyle;
                             }
                         }
                         else {
                             if (inSelection) {
-                                style = inNewline
-                                    ? nlStyle.merge({ background: selectedStyle.foreground })
+                                style = isDimSigil
+                                    ? selectedStyle.merge({ foreground: nlStyle.foreground })
                                     : selectedStyle.merge({ underline: inCursor });
                             }
-                            else if (inNewline) {
+                            else if (isDimSigil) {
                                 style = nlStyle;
                             }
                             else {
-                                style = plainStyle;
+                                style = baseStyle;
                             }
                         }
                         if (!currentStyle.isEqual(style)) {
@@ -430,18 +565,31 @@ export class Input extends View {
                                 drawEllipses = true;
                             }
                         }
-                        viewport.write(drawEllipses ? '…' : char, scanTextPosition.offset(-cursorVisible.x, -cursorVisible.y));
+                        if (!drawEllipses && char === '\t') {
+                            // Render tab as two-char sigil
+                            const offset = scanTextPosition.offset(-cursorVisible.x, -cursorVisible.y);
+                            viewport.write(TAB_SIGIL[0], offset);
+                            viewport.write(TAB_SIGIL[1], offset.offset(1, 0));
+                        }
+                        else {
+                            viewport.write(drawEllipses ? '…' : char, scanTextPosition.offset(-cursorVisible.x, -cursorVisible.y));
+                        }
                         drawInitialEllipses = false;
                     }
                     else {
                         drawInitialEllipses = true;
                     }
                     scanTextPosition.x += charWidth;
+                    charIndex++;
                     if (scanTextPosition.x - cursorVisible.x >=
                         viewport.contentSize.width) {
                         break;
                     }
                 }
+                // Advance formatOffset past this line's chars (excluding the trailing sigil).
+                if (hasFormatStyles) {
+                    formatOffset += line.length - 1;
+                }
                 scanTextPosition.y += 1;
                 if (scanTextPosition.y - cursorVisible.y >=
                     viewport.contentSize.height) {
@@ -680,11 +828,21 @@ export class Input extends View {
                 this.minSelected() + (advance ? 1 : 0);
         }
     }
-    #receiveGotoStart() {
-        this.#cursor = { start: 0, end: 0 };
+    #receiveGotoStart({ shift }) {
+        if (shift) {
+            this.#cursor.end = 0;
+        }
+        else {
+            this.#cursor = { start: 0, end: 0 };
+        }
     }
-    #receiveGotoEnd() {
-        this.#cursor = { start: this.#chars.length, end: this.#chars.length };
+    #receiveGotoEnd({ shift }) {
+        if (shift) {
+            this.#cursor.end = this.#chars.length;
+        }
+        else {
+            this.#cursor = { start: this.#chars.length, end: this.#chars.length };
+        }
     }
     #receiveHome({ shift }) {
         let dest = 0;
@@ -698,8 +856,8 @@ export class Input extends View {
             const [targetChars, targetWidth] = this.#wrappedLines[cursorPosition.y];
             dest = this.#wrappedLines
                 .slice(0, cursorPosition.y)
-                .reduce((dest, [, width]) => {
-                return dest + width;
+                .reduce((dest, [chars]) => {
+                return dest + chars.length;
             }, 0);
         }
         if (shift) {
@@ -722,8 +880,8 @@ export class Input extends View {
             dest =
                 this.#wrappedLines
                     .slice(0, cursorPosition.y + 1)
-                    .reduce((dest, [, width]) => {
-                    return dest + width;
+                    .reduce((dest, [chars]) => {
+                    return dest + chars.length;
                 }, 0) - 1;
         }
         if (shift) {
@@ -745,19 +903,21 @@ export class Input extends View {
             const [targetChars, targetWidth] = this.#wrappedLines[cursorPosition.y - 1];
             dest = this.#wrappedLines
                 .slice(0, cursorPosition.y - 1)
-                .reduce((dest, [, width]) => {
-                return dest + width;
+                .reduce((dest, [chars]) => {
+                return dest + chars.length;
             }, 0);
             if (targetWidth <= cursorPosition.x) {
-                dest += targetWidth - 1;
+                dest += targetChars.length - 1;
             }
             else {
+                let displayX = 0;
                 let destOffset = 0;
                 for (const char of targetChars) {
                     const charWidth = unicode.charWidth(char);
-                    if (destOffset + charWidth > cursorPosition.x) {
+                    if (displayX + charWidth > cursorPosition.x) {
                         break;
                     }
+                    displayX += charWidth;
                     destOffset += 1;
                 }
                 dest += destOffset;
@@ -783,19 +943,21 @@ export class Input extends View {
             const [targetChars, targetWidth] = this.#wrappedLines[cursorPosition.y + 1];
             dest = this.#wrappedLines
                 .slice(0, cursorPosition.y + 1)
-                .reduce((dest, [, width]) => {
-                return dest + width;
+                .reduce((dest, [chars]) => {
+                return dest + chars.length;
             }, 0);
             if (targetWidth <= cursorPosition.x) {
-                dest += targetWidth - 1;
+                dest += targetChars.length - 1;
             }
             else {
+                let displayX = 0;
                 let destOffset = 0;
                 for (const char of targetChars) {
                     const charWidth = unicode.charWidth(char);
-                    if (destOffset + charWidth > cursorPosition.x) {
+                    if (displayX + charWidth > cursorPosition.x) {
                         break;
                     }
+                    displayX += charWidth;
                     destOffset += 1;
                 }
                 dest += destOffset;
@@ -942,6 +1104,162 @@ export class Input extends View {
         this.#cursor.start = this.#cursor.end = offset;
         this.#updateWidth();
     }
+    /**
+     * Insert a newline followed by the current line's leading whitespace.
+     */
+    #receiveEnterWithIndent() {
+        const indent = this.#currentLineIndent();
+        const chars = ['\n', ...indent];
+        if (isEmptySelection(this.#cursor)) {
+            this.#chars = this.#chars
+                .slice(0, this.#cursor.start)
+                .concat(chars, this.#chars.slice(this.#cursor.start));
+            this.#cursor.start = this.#cursor.end = this.#cursor.start + chars.length;
+        }
+        else {
+            this.#chars = this.#chars
+                .slice(0, this.minSelected())
+                .concat(chars, this.#chars.slice(this.maxSelected()));
+            this.#cursor.start = this.#cursor.end = this.minSelected() + chars.length;
+        }
+    }
+    /**
+     * Indent the current line. Uses tabs if any line starts with a tab,
+     * otherwise uses two spaces.
+     */
+    #receiveIndent() {
+        const indent = this.#useTabs() ? ['\t'] : [' ', ' '];
+        const lineStart = this.#currentLineStart();
+        this.#chars = this.#chars
+            .slice(0, lineStart)
+            .concat(indent, this.#chars.slice(lineStart));
+        this.#cursor.start += indent.length;
+        this.#cursor.end += indent.length;
+    }
+    /**
+     * Remove one level of indentation from the current line.
+     */
+    #receiveDedent() {
+        const lineStart = this.#currentLineStart();
+        if (this.#chars[lineStart] === '\t') {
+            this.#chars = this.#chars
+                .slice(0, lineStart)
+                .concat(this.#chars.slice(lineStart + 1));
+            this.#cursor.start = Math.max(lineStart, this.#cursor.start - 1);
+            this.#cursor.end = Math.max(lineStart, this.#cursor.end - 1);
+        }
+        else if (this.#chars[lineStart] === ' ' &&
+            this.#chars[lineStart + 1] === ' ') {
+            this.#chars = this.#chars
+                .slice(0, lineStart)
+                .concat(this.#chars.slice(lineStart + 2));
+            this.#cursor.start = Math.max(lineStart, this.#cursor.start - 2);
+            this.#cursor.end = Math.max(lineStart, this.#cursor.end - 2);
+        }
+    }
+    /**
+     * Returns the leading whitespace characters of the current line.
+     */
+    #currentLineIndent() {
+        const lineStart = this.#currentLineStart();
+        const indent = [];
+        for (let i = lineStart; i < this.#chars.length; i++) {
+            if (this.#chars[i] === ' ' || this.#chars[i] === '\t') {
+                indent.push(this.#chars[i]);
+            }
+            else {
+                break;
+            }
+        }
+        return indent;
+    }
+    /**
+     * Returns the index in #chars where the current line starts.
+     */
+    #currentLineStart() {
+        const pos = Math.min(this.#cursor.end, this.#chars.length);
+        for (let i = pos - 1; i >= 0; i--) {
+            if (this.#chars[i] === '\n') {
+                return i + 1;
+            }
+        }
+        return 0;
+    }
+    /**
+     * Returns true if any line in the current text starts with a tab character.
+     */
+    #useTabs() {
+        for (let i = 0; i < this.#chars.length; i++) {
+            if (this.#chars[i] === '\t' && (i === 0 || this.#chars[i - 1] === '\n')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Snapshot the current state before an edit.
+     */
+    #beginEdit(kind) {
+        this.#pendingUndoKind = kind;
+        this.#preEditChars = [...this.#chars];
+        this.#preEditCursor = { ...this.#cursor };
+    }
+    /**
+     * Push the completed edit onto the undo stack. For consecutive inserts at
+     * adjacent positions, coalesce into a single undo entry.
+     */
+    #commitEdit() {
+        if (!this.#pendingUndoKind) {
+            return;
+        }
+        const kind = this.#pendingUndoKind;
+        this.#pendingUndoKind = undefined;
+        const entry = {
+            kind,
+            beforeChars: this.#preEditChars,
+            beforeCursor: this.#preEditCursor,
+            afterChars: [...this.#chars],
+            afterCursor: { ...this.#cursor },
+            insertOffset: kind === 'insert' ? this.#preEditCursor.start : undefined,
+        };
+        // Coalesce consecutive inserts at adjacent positions
+        if (kind === 'insert' &&
+            this.#insertCoalesceEnabled &&
+            this.#undoStack.length > 0) {
+            const last = this.#undoStack[this.#undoStack.length - 1];
+            if (last.kind === 'insert' &&
+                last.afterCursor.start === entry.insertOffset) {
+                // Extend the previous entry
+                last.afterChars = entry.afterChars;
+                last.afterCursor = entry.afterCursor;
+                this.#redoStack = [];
+                return;
+            }
+        }
+        this.#insertCoalesceEnabled = kind === 'insert';
+        this.#undoStack.push(entry);
+        this.#redoStack = [];
+    }
+    #undo() {
+        const entry = this.#undoStack.pop();
+        if (!entry) {
+            return;
+        }
+        this.#redoStack.push(entry);
+        this.#chars = [...entry.beforeChars];
+        this.#cursor = { ...entry.beforeCursor };
+        this.#updateLines(this.#chars, undefined);
+    }
+    #redo() {
+        const entry = this.#redoStack.pop();
+        if (!entry) {
+            return;
+        }
+        this.#undoStack.push(entry);
+        this.#chars = [...entry.afterChars];
+        this.#cursor = { ...entry.afterCursor };
+        this.#updateLines(this.#chars, undefined);
+    }
 }
 function isEmptySelection(cursor) {
     return cursor.start === cursor.end;
@@ -1113,9 +1431,11 @@ const ACCENTS = {
 };
 const ACCENT_KEYS = {
     'A-a': '‵',
+    'A-`': '‵',
     'A-c': '¸',
     'A-e': '´',
     'A-i': 'ˆ',
+    'A-6': 'ˆ',
     'A-n': '˜',
     'A-o': '¯',
     'A-s': '¸',
@@ -1130,4 +1450,8 @@ function isKeyAccent(event) {
     }
     return ACCENT_KEYS[event.full] !== undefined;
 }
+const RESET_RE = /^\x1b\[0?m$/;
+function isTabSigil(char) {
+    return char === '\t';
+}
 //# sourceMappingURL=Input.js.map