TextArea#

A focusable multi-line editor that grows with its content, built on the headless textBuffer layout engine. Word-wraps to a width and windows the visible rows so the cursor stays in view.

Import#

TSX 
import { TextArea } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, signal, TextArea } from '@sigx/terminal';

const App = component(() => {
    const body = signal('');
    return () => (
        <box border="rounded" label="Message">
            <TextArea
                model={() => body}
                placeholder="Write a message…"
                width={60}
                maxRows={8}
                autofocus
                onSubmit={(v) => console.log('sent:', v)}
            />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeNotes
modelModel<string>two-way bound multi-line value
placeholderstringshown when empty
promptGlyphstringper-line prompt glyph
widthnumberwrap width in columns
maxRowsnumbermax visible rows before the view windows
autofocusbooleangrab focus on mount

Events#

EventPayloadWhen
inputstringthe value changes
submitstringa submit keystroke

Editing supports arrow movement, line start/end and word wrapping. A trailing backslash continues a line: it is stripped and a newline inserted. Several "Shift/Ctrl+Enter" encodings insert a newline (Ctrl+J, ESC+Enter, and the CSI-u sequences); plain Enter submits where the terminal can distinguish it. Paste chunks are accepted, with control bytes stripped.

See also#