Memo
Memo is an Editor styled for the gray dialog palette and safe to place among other controls: it lets Tab pass through, so dialog focus traversal still works. Its content is bound two-way to a Signal<string> — typing writes the signal the same tick, and writing the signal from outside replaces the buffer — so you read and write the memo's text through that signal rather than through the editor. It inherits every Editor capability (undo/redo, clipboard, find/replace); only the styling, Tab behavior, and the signal binding differ.
Usage
import { Dialog, Memo, signal } from '@jsvision/ui';
const notes = signal('initial text');
const memo = new Memo({ value: notes });
memo.layout = { position: 'absolute', rect: { x: 2, y: 2, width: 40, height: 8 } };
const dialog = new Dialog({ title: 'Notes', width: 46, height: 14 });
dialog.add(memo);
// Read the bound signal (e.g. inside an effect) to observe edits; write it to replace the buffer.
notes.set('replaced from outside'); // updates the memo's buffer
console.log('memo text is', notes());Live example
An interactive, in-browser demo of Memo lands in a later update. Until then, the reference below covers its full API.
Props
new Memo(options) — extends EditorOptions with one required field.
| Prop | Type | Default | Description |
|---|---|---|---|
value | Signal<string> | — | Two-way bound content: edits write it; writing it from outside replaces the buffer. |
All other Editor options (clipboard, keyBindings, undoDepth, autoIndent, overwrite, editorDialog, commands) apply unchanged.
Keyboard & mouse
Identical to Editor, with one difference: Tab is not captured — it moves focus to the next control so a memo sits naturally in a dialog's focus order.
Sizing & layout
Give it an absolute rect within the dialog. It behaves like any leaf control in the dialog's layout and traversal.
Best practices
- Read and write through the signal. The
valuesignal is the source of truth — observe edits by reading it in aneffect, and replace the content by setting it; don't reach into the editor buffer. - Use it for bounded, form-like text. A
Memois the multiline field of a dialog (notes, a description); for a full document window useEditWindow.
Theming
Text uses the memoNormal / memoSelected gray-dialog roles (rather than the blue editor roles).
Related
- Editor — the base multiline editor.
- Edit window — a full document window with scroll bars.
- Dialog — the modal frame a memo typically sits in.
- API reference — the generated
Memosignature.