CodeEditor
A writable code view, with a cursor, a selection and the clipboard.
import { CodeEditor } from '@textui/documents';
<CodeEditor uri="file:///srv/main.ts" onChange={(value) => console.log(value.length)} />
Props
| Prop | Type | Default | |
| — | — | — | — |
| uri | string \| null | null | The document to edit. Its buffer is the source of truth. |
| value | string | | Starting text, for an editor with no document behind it. The buffer is then this component’s own: onChange reports every edit, but nothing has to be fed back for the next keystroke to be computed against what is actually on screen. |
| onChange | (value: string) => void | | |
| lineNumbers | boolean | true | |
| tabWidth | number | 2 | Spaces one indent step is worth. Also what a soft tab inserts. |
| readonly | boolean | | |
| language | string | | Ask the syntax registry for a highlighter. |
| kind | string | | |
| onCursor | (cursor: { line: number; column: number }) => void | | |
| onSelection | (selection: { chars: number; lines: number }) => void | | Reports how much is selected, for a status bar. Zero means none. |
| scrollbar | boolean | true | Draw a scrollbar when the file is taller than the view. On by default. |
| autoFocus | boolean | | Claim focus on mount, if nothing in this scope already has it. |
Plus everything on BoxProps.
Role: textbox.
CodeViewer with editing on top: a real caret,
a selection, clipboard integration, and onChange for the text.
onCursor and onSelection report position and selection size for a status
bar. readonly keeps the caret and the selection while refusing edits, which
is what a diff or a preview wants.
Given a uri it reads and writes through the document buffer, so dirty state
and saving are the buffer’s - see Document buffers.
See also
- CodeViewer - read-only
- Document buffers - dirty state and saving