zidanecode/editor/CodeEditor
import { … } from 'zidane-ui/code/editor'ui/src/code/editor/CodeEditor.tsx
Components#
CodeEditorComponent#
A file's text, read-only until used and then editable in place; see the module comment for how it arms, saves and finds.
function CodeEditor<A = unknown>(
props: CodeEditorProps<A> & { ref?: Ref<CodeEditorHandle> },
): ElementType parameters
| Name | Default | Description |
|---|---|---|
| A | unknown |
Parameters
| Name | Type | Description |
|---|---|---|
| props | CodeEditorProps<A> & { ref?: Ref<CodeEditorHandle> } | The document, its session key and the view hooks; |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| annotations? | readonly LineAnnotation<A>[] | Content anchored under lines (review comments); rendered by |
| children? | ReactNode | Rendered after the view (a context menu, a hover card). |
| className? | string | Extra classes on the root element. |
| doc | CodeDocument | The file's state from |
| findAsk? | number | Bumps on ⌘F; the visible editor opens find. |
| hostAttributes? | Record<string, string | undefined> | Extra attributes on the host ( |
| markers? | readonly Marker[] | Squiggles with hover messages, while editing. |
| onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | Right-click anywhere in the view. |
| onGutterAction? | (range: SelectedLineRange) => void | Gutter "+" on hover / at the selection end; called with the range it covers. Passing it shows the button. |
| onSelectionEnd? | (range: SelectedLineRange | null) => void | Gutter line selection finished; passing it turns line selection on. |
| onTokenClick? | (token: CodeToken, event: MouseEvent) => void | Click on an identifier (Cmd/Ctrl-click for go to definition). |
| onTokenEnter? | (token: CodeToken, event: PointerEvent) => void | The pointer moved onto an identifier (for hovers and the definition underline). |
| onTokenLeave? | () => void | The pointer left the identifier it entered. |
| path | string | Display name; the language is inferred from its extension. |
| readOnly? | boolean | Never arm the editor, even with the Editor setting on. |
| renderAnnotation? | (annotation: LineAnnotation<A>) => ReactNode | Renders one entry of |
| scrollerClassName? | string | The scroll container's classes (the view virtualises its lines). |
| selectedLines? | SelectedLineRange | null | The selected line range, controlled by the owner; needs |
| sessionKey | string | pierre's retained-session key (the draft and undo stack survive remounts under it). |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| visible? | boolean | Whether this editor is on screen (default true): it takes focus when it becomes visible, arms on idle and answers ⌘F only then. |
| ref? | Ref<CodeEditorHandle> | Receives the |
Interfaces#
CodeEditorHandleInterface#
What a CodeEditor ref reaches.
interface CodeEditorHandleProperties
| Name | Type | Description |
|---|---|---|
| editor | () => Editor<'file', unknown, undefined> | null | The armed editor, |
| host | () => HTMLDivElement | null | The editor's outer element (holds the scroller and pierre's |
| placeCaret | (caret: { character: number; lineNumber: number }) => void | Put the caret there: focuses the editor, arming it first when needed. |
CodeEditorPropsInterface#
Props of CodeEditor; A is the annotation payload type.
interface CodeEditorProps<A>Type parameters
| Name | Description |
|---|---|
| A |
Properties
| Name | Type | Description |
|---|---|---|
| annotations? | readonly LineAnnotation<A>[] | Content anchored under lines (review comments); rendered by |
| children? | ReactNode | Rendered after the view (a context menu, a hover card). |
| className? | string | Extra classes on the root element. |
| doc | CodeDocument | The file's state from |
| findAsk? | number | Bumps on ⌘F; the visible editor opens find. |
| hostAttributes? | Record<string, string | undefined> | Extra attributes on the host ( |
| markers? | readonly Marker[] | Squiggles with hover messages, while editing. |
| onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | Right-click anywhere in the view. |
| onGutterAction? | (range: SelectedLineRange) => void | Gutter "+" on hover / at the selection end; called with the range it covers. Passing it shows the button. |
| onSelectionEnd? | (range: SelectedLineRange | null) => void | Gutter line selection finished; passing it turns line selection on. |
| onTokenClick? | (token: CodeToken, event: MouseEvent) => void | Click on an identifier (Cmd/Ctrl-click for go to definition). |
| onTokenEnter? | (token: CodeToken, event: PointerEvent) => void | The pointer moved onto an identifier (for hovers and the definition underline). |
| onTokenLeave? | () => void | The pointer left the identifier it entered. |
| path | string | Display name; the language is inferred from its extension. |
| readOnly? | boolean | Never arm the editor, even with the Editor setting on. |
| renderAnnotation? | (annotation: LineAnnotation<A>) => ReactNode | Renders one entry of |
| scrollerClassName? | string | The scroll container's classes (the view virtualises its lines). |
| selectedLines? | SelectedLineRange | null | The selected line range, controlled by the owner; needs |
| sessionKey | string | pierre's retained-session key (the draft and undo stack survive remounts under it). |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| visible? | boolean | Whether this editor is on screen (default true): it takes focus when it becomes visible, arms on idle and answers ⌘F only then. |