JSVision

Appearance

@jsvision/ui / Editor

Class: Editor ​

Documented in: Editor

Defined in: ui/src/editor/editor.ts:72

A focusable, scrollable multiline text editor. Add it to a Group, give it a size, and drive it via the event loop or programmatically (setText/getText/insertText/ execute). The reactive signals (curPos, modified, canUndo, …) drive a status line/indicator. Share Cut/Copy/Paste by passing one Editor as the clipboard of each (see EditorOptions); for scroll bars + a line/column indicator use EditWindow.

Example ​

ts
import { Group, Editor, createEventLoop, effect } from '@jsvision/ui';

const editor = new Editor({ clipboard: new Editor() });
const root = new Group();
root.add(editor);

const loop = createEventLoop({ width: 60, height: 20 }, {});
loop.mount(root);
loop.focusView(editor);
editor.setText('The quick brown fox\nSecond line.');
effect(() => {
  const { line, col } = editor.curPos();
  console.log(`caret at ${line}:${col}`);
});

Extends ​

Extended by ​

Constructors ​

Constructor ​

new Editor(options?): Editor

Defined in: ui/src/editor/editor.ts:138

Parameters ​

options? ​

EditorOptions = {}

Returns ​

Editor

Overrides ​

View.constructor

Properties ​

autoIndentOn ​

autoIndentOn: boolean

Defined in: ui/src/editor/editor.ts:104

bounds ​

bounds: Rect

Defined in: ui/src/view/view.ts:65

Parent-relative integer rect; written by the layout pass — read it in draw/hit-testing.

Inherited from ​

View.bounds

canRedo ​

readonly canRedo: Signal<boolean>

Defined in: ui/src/editor/editor.ts:90

canUndo ​

readonly canUndo: Signal<boolean>

Defined in: ui/src/editor/editor.ts:89

Whether an undo / redo step is available.

castsShadow ​

castsShadow: boolean = false

Defined in: ui/src/view/view.ts:78

When true, the renderer paints a drop shadow on the cells just below and to the right of this view, in paint order (a later sibling's shadow falls over an earlier one). Default false. The Desktop sets it per window.

Inherited from ​

View.castsShadow

centered ​

centered: boolean = false

Defined in: ui/src/view/view.ts:86

When true, the layout pass recentres this view within its parent after layout — origin = (parent - self) / 2 on both axes. Intended for absolutely-placed views (a modal dialog, a message box) whose size is fixed and whose origin would otherwise be placed by the caller. Default false; Dialog sets it when centered.

Inherited from ​

View.centered

curPos ​

readonly curPos: Signal<{ col: number; line: number; }>

Defined in: ui/src/editor/editor.ts:81

The caret as 1-based {line, col} (col is the visual column).

curPtr ​

curPtr: number = 0

Defined in: ui/src/editor/editor.ts:98

curY ​

curY: number = 0

Defined in: ui/src/editor/editor.ts:107

delta ​

readonly delta: object

Defined in: ui/src/editor/editor.ts:92

The scroll offset, as a pair of signals — also the value channel for scroll bars: a bar bound to delta.x/delta.y scrolls the editor on any write (clamped to the content).

x ​

readonly x: Signal<number>

y ​

readonly y: Signal<number>

doReplace ​

doReplace: boolean = false

Defined in: ui/src/editor/editor.ts:252

drawLine ​

drawLine: number = 0

Defined in: ui/src/editor/editor.ts:108

drawPtrP ​

drawPtrP: number = 0

Defined in: ui/src/editor/editor.ts:109

eolKind ​

eolKind: LineEnding = 'lf'

Defined in: ui/src/editor/editor.ts:97

focusable ​

focusable: boolean = true

Defined in: ui/src/editor/editor.ts:73

Whether this view can receive keyboard focus. Effective focusability also requires the view to be visible and enabled with no hidden/disabled ancestor. Default false; the focus manager drives the state.focused flag.

Overrides ​

View.focusable

hasSelection ​

readonly hasSelection: Signal<boolean>

Defined in: ui/src/editor/editor.ts:83

Whether any text is currently selected.

indicator ​

indicator: IndicatorTarget | null = null

Defined in: ui/src/editor/editor.ts:132

insertMode ​

readonly insertMode: Signal<boolean>

Defined in: ui/src/editor/editor.ts:85

true = insert mode, false = overwrite mode; the Insert key toggles it.

keyBindings ​

readonly keyBindings: EditorKeyBindings

Defined in: ui/src/editor/editor.ts:113

layout ​

layout: LayoutProps = {}

Defined in: ui/src/view/view.ts:69

Layout props for this view (direction, size, padding, absolute placement, …).

Inherited from ​

View.layout

limitY ​

limitY: number = 1

Defined in: ui/src/editor/editor.ts:110

lineCount ​

readonly lineCount: Signal<number>

Defined in: ui/src/editor/editor.ts:87

The number of lines in the buffer.

modified ​

readonly modified: Signal<boolean>

Defined in: ui/src/editor/editor.ts:79

Whether the buffer has unsaved changes since it was last loaded or saved.

normalRole ​

protected normalRole: keyof Theme = 'editorNormal'

Defined in: ui/src/editor/editor.ts:135

The normal/selected theme roles; Memo overrides them to the gray-dialog palette.

options ​

readonly options: EditorOptions

Defined in: ui/src/editor/editor.ts:118

overwrite ​

overwrite: boolean

Defined in: ui/src/editor/editor.ts:103

postProcess ​

postProcess: boolean = false

Defined in: ui/src/view/view.ts:98

Take part in the post-process sweep (after the focused view sees the event).

Inherited from ​

View.postProcess

preProcess ​

preProcess: boolean = true

Defined in: ui/src/editor/editor.ts:75

Sees keys before app chrome so the focused editor can claim the WordStar Ctrl-Q/Ctrl-K prefixes.

Overrides ​

View.preProcess

promptOnReplace ​

promptOnReplace: boolean = true

Defined in: ui/src/editor/editor.ts:250

replaceAllFlag ​

replaceAllFlag: boolean = false

Defined in: ui/src/editor/editor.ts:251

replaceStr ​

replaceStr: string = ''

Defined in: ui/src/editor/editor.ts:248

searchOpts ​

searchOpts: SearchOptions

Defined in: ui/src/editor/editor.ts:249

selectedRole ​

protected selectedRole: keyof Theme = 'editorSelected'

Defined in: ui/src/editor/editor.ts:136

selecting ​

selecting: boolean = false

Defined in: ui/src/editor/editor.ts:102

selEndP ​

selEndP: number = 0

Defined in: ui/src/editor/editor.ts:101

state ​

readonly state: ViewState

Defined in: ui/src/view/view.ts:67

Draw-against flags. The object reference is fixed; individual fields mutate (e.g. focused).

Inherited from ​

View.state

undoStack ​

readonly undoStack: UndoStack

Defined in: ui/src/editor/editor.ts:121

vBar ​

vBar: GadgetBar | null = null

Defined in: ui/src/editor/editor.ts:131

Methods ​

accelerators() ​

accelerators(): readonly string[]

Defined in: ui/src/view/view.ts:114

The Alt+hotkey accelerator characters (lowercase) this view claims in its focus scope, for duplicate-accelerator detection. The base returns none; accelerator-bearing widgets (Button/Label/CheckGroup/RadioGroup) override it to report their ~X~ hotkey(s).

Returns ​

readonly string[]

The claimed accelerator chars, or an empty list when the view claims none.

Inherited from ​

View.accelerators

attachGadgets() ​

attachGadgets(h?, v?, ind?): void

Defined in: ui/src/editor/editor.ts:228

Wire up the scroll bars and line/column indicator that display and drive this editor.

Parameters ​

h? ​

GadgetBar

v? ​

GadgetBar

ind? ​

IndicatorTarget

Returns ​

void

bind() ​

bind<T>(reader, apply?, opts?): void

Defined in: ui/src/view/view.ts:228

Bind a reactive value to a redraw. Creates an effect (owned by this view's scope) that reads reader() — subscribing to whatever signals it touches — runs the optional apply(value), then requests a frame: a repaint by default, or a reflow when { relayout: true }. It re-runs automatically whenever those signals change, and is disposed when the view unmounts.

Call it from onMount, not the constructor — the view's scope only exists once mounted, so a pre-mount bind throws rather than silently dropping the binding.

Type Parameters ​

T ​

T

Parameters ​

reader ​

() => T

Reads the reactive source; the signals it reads become dependencies.

apply? ​

(v) => void

Optional: apply the read value to the widget (e.g. store it in a field).

opts? ​

Pass { relayout: true } when the change affects layout, so it reflows instead of just repainting.

relayout? ​

boolean

Returns ​

void

Example ​

ts
import { signal } from '@jsvision/ui';

const count = signal(0);
// `status` is a View whose draw() reads count():
status.onMount(() => {
  status.bind(() => count()); // repaint the status line whenever `count` changes
});

Inherited from ​

View.bind

copy() ​

copy(): void

Defined in: ui/src/editor/editor.ts:278

Copy the selection to the shared clipboard editor (and the OS clipboard when supported).

Returns ​

void

cut() ​

cut(): void

Defined in: ui/src/editor/editor.ts:283

Cut the selection to the shared clipboard editor, as one undo step.

Returns ​

void

deleteSelect() ​

deleteSelect(): void

Defined in: ui/src/editor/editor.ts:416

Returns ​

void

derived() ​

protected derived<T>(fn): () => T

Defined in: ui/src/view/view.ts:261

Create a stable derived accessor owned by this view's scope. The returned () => T keeps the same identity for the life of the view, so it is safe to build in the constructor and hand to child views before this view mounts. The backing computed is created lazily under the view's own scope, so it is always owned and disposed at unmount — unlike a bare computed() in the constructor, which would run before any scope exists, leak, and warn.

Reads behave sensibly across the lifecycle:

  • Before mount: evaluates fn() directly (correct current value, nothing persisted). Good for a pre-mount natural-size measure.
  • After mount: builds and memoizes a computed(fn) under the view's scope.
  • After an unmount→remount: the memo is keyed to the scope it was built under, so a remounted view (which gets a fresh scope) re-derives under the new scope instead of returning the previous mount's disposed, now-frozen computed — keeping a Show/For-remounted widget reactive.

Type Parameters ​

T ​

T

Parameters ​

fn ​

() => T

The derivation (pure; the signals it reads become the computed's dependencies).

Returns ​

A stable accessor; call it to read the derived value.

() => T

Inherited from ​

View.derived

desiredCaret() ​

desiredCaret(): Point | null

Defined in: ui/src/editor/editor.ts:236

The hardware-caret cell (view-local) while focused and in view, else null.

Returns ​

Point | null

Overrides ​

View.desiredCaret

doSearchReplace() ​

doSearchReplace(): Promise<number>

Defined in: ui/src/editor/editor.ts:273

Returns ​

Promise<number>

draw() ​

draw(ctx): void

Defined in: ui/src/editor/editor.ts:486

Paint the visible rows.

Parameters ​

ctx ​

DrawContext

Returns ​

void

Overrides ​

View.draw

execute() ​

execute(action): void

Defined in: ui/src/editor/editor.ts:223

Run one editor action programmatically — the same operations the keymap triggers.

Parameters ​

action ​

EditorAction

The action to run (e.g. 'lineDown', 'undo', 'textEnd', 'selectAll').

Returns ​

void

Example ​

ts
editor.setText('hello world');
editor.execute('textEnd'); // caret to end of buffer

find() ​

find(): Promise<void>

Defined in: ui/src/editor/editor.ts:255

Open the Find dialog and search for the first match. Resolves when the interaction is done.

Returns ​

Promise<void>

focusSignal() ​

focusSignal(): Signal<void>

Defined in: ui/src/view/view.ts:136

Subscribe to this view's focus changes. Reading the returned signal inside a bind/effect re-runs that effect whenever this view gains or loses focus — including from another view (e.g. a Label repainting when the control it labels is focused). The signal notifies on every poke even without a value change. Lazy: the backing signal is created on first call.

Returns ​

Signal<void>

A signal that ticks whenever this view gains or loses focus.

Example ​

ts
// Inside a widget's onMount, repaint whenever `other` view's focus changes:
this.onMount(() => this.bind(() => other.focusSignal()()));

Inherited from ​

View.focusSignal

getMousePtr() ​

getMousePtr(local): number

Defined in: ui/src/editor/editor.ts:469

Parameters ​

local ​

Point

Returns ​

number

getText() ​

getText(range?): string

Defined in: ui/src/editor/editor.ts:197

The full buffer content, or the text in a [from, to) range — returned verbatim.

Parameters ​

range? ​

Optional half-open buffer-offset range; omit for the whole buffer.

from ​

number

to ​

number

Returns ​

string

The requested text.

insertText() ​

insertText(text): void

Defined in: ui/src/editor/editor.ts:206

Insert text at the caret, replacing any selection; line endings are normalized to the buffer's kind, as if typed.

Parameters ​

text ​

string

The text to insert.

Returns ​

void

invalidate() ​

invalidate(): void

Defined in: ui/src/view/view.ts:197

Request a repaint of this view. A no-op before the view is mounted (the first frame paints everything).

Returns ​

void

Inherited from ​

View.invalidate

invalidateLayout() ​

invalidateLayout(): void

Defined in: ui/src/view/view.ts:202

Request a reflow (re-run layout, then repaint). Use this when a change affects size/position, not just pixels.

Returns ​

void

Inherited from ​

View.invalidateLayout

measure()? ​

optional measure(available): Size2D

Defined in: ui/src/view/view.ts:71

Optional intrinsic-size hook for auto sizing — return the size this view wants for available.

Parameters ​

available ​

Size2D

Returns ​

Size2D

Inherited from ​

View.measure

onCleanup() ​

onCleanup(fn): void

Defined in: ui/src/view/view.ts:298

Register a teardown callback that runs once when this view unmounts. Requires a mounted view — so call it from within onMount. Use it to release anything the view acquired (a timer, an external subscription).

Parameters ​

fn ​

() => void

The teardown callback.

Returns ​

void

Inherited from ​

View.onCleanup

onEvent() ​

onEvent(ev): void

Defined in: ui/src/editor/editor.ts:491

Handle a dispatched event (keys, mouse/wheel, paste, and editing commands).

Parameters ​

ev ​

DispatchEvent

Returns ​

void

Overrides ​

View.onEvent

onMount() ​

onMount(fn): void

Defined in: ui/src/view/view.ts:283

Register a callback to run once when the view becomes live (after its first layout gives it bounds). This is where to call bind, since the view's reactive scope exists by then. Registering after the view is already live runs the callback immediately.

Parameters ​

fn ​

() => void

Post-mount setup.

Returns ​

void

Inherited from ​

View.onMount

paste() ​

paste(): void

Defined in: ui/src/editor/editor.ts:288

Paste the shared clipboard editor's selection at the caret, as one undo step.

Returns ​

void

redo() ​

redo(): void

Defined in: ui/src/editor/editor.ts:298

Redo the most recently undone edit.

Returns ​

void

replace() ​

replace(): Promise<number>

Defined in: ui/src/editor/editor.ts:260

Open the Replace dialog and run the replace loop; resolves with the number of replacements made.

Returns ​

Promise<number>

scrollTo() ​

scrollTo(x, y): void

Defined in: ui/src/editor/editor.ts:460

Parameters ​

x ​

number

y ​

number

Returns ​

void

searchAgain() ​

searchAgain(): Promise<number>

Defined in: ui/src/editor/editor.ts:265

Repeat the last search/replace with the stored parameters; resolves with the replacement count.

Returns ​

Promise<number>

searchOnce() ​

searchOnce(): boolean

Defined in: ui/src/editor/editor.ts:269

Returns ​

boolean

selectByClick()? ​

optional selectByClick(): void

Defined in: ui/src/view/view.ts:182

Optional "select + raise on click" hook. Left undefined on the base, so a plain view is not a select/raise target. A container that owns z-order (a Window) overrides it to select and raise itself. The hit-test invokes the first ancestor that defines this — before delivering the mouse-down — so a click always raises the window even if the interior also consumes the click.

Returns ​

void

Inherited from ​

View.selectByClick

selectionText() ​

selectionText(): string

Defined in: ui/src/editor/editor.ts:212

The currently selected text, or '' when there is no selection.

Returns ​

string

setText() ​

setText(text): void

Defined in: ui/src/editor/editor.ts:171

Replace the entire content (verbatim, mixed line endings preserved); the line-ending kind is re-detected and cursor/selection/scroll/undo history are reset.

Parameters ​

text ​

string

The new buffer content.

Returns ​

void

toggleInsMode() ​

toggleInsMode(): void

Defined in: ui/src/editor/editor.ts:454

Returns ​

void

undo() ​

undo(): void

Defined in: ui/src/editor/editor.ts:293

Undo the most recent edit.

Returns ​

void

viewH() ​

viewH(): number

Defined in: ui/src/editor/editor.ts:308

Returns ​

number