# code/editor/CodeEditor (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/CodeEditor.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeEditor.tsx).

## Components

### `CodeEditor`

Component.

A file's text, read-only until used and then editable in place; see the module comment for how it
arms, saves and finds.

```ts
function CodeEditor<A = unknown>(
  props: CodeEditorProps<A> & { ref?: Ref<CodeEditorHandle> },
): Element
```

**Type parameters**

- `A` (default `unknown`)

**Parameters**

- `props` (`CodeEditorProps<A> & { ref?: Ref<CodeEditorHandle> }`): The document, its session key and the view hooks; `ref` reaches the [`CodeEditorHandle`](https://zidane.si/docs/reference/ui-code-editor-code-editor.md#CodeEditorHandle).

**Returns** `Element`

**Props**

- `annotations?` (`readonly LineAnnotation<A>[]`): Content anchored under lines (review comments); rendered by `renderAnnotation`.
- `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 `useCodeDocument`: text, draft, dirty and conflict flags, save and discard.
- `findAsk?` (`number`): Bumps on ⌘F; the visible editor opens find.
- `hostAttributes?` (`Record<string, string | undefined>`): Extra attributes on the host (`data-*` states the owner styles).
- `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 `annotations`.
- `scrollerClassName?` (`string`): The scroll container's classes (the view virtualises its lines).
- `selectedLines?` (`SelectedLineRange | null`): The selected line range, controlled by the owner; needs `onSelectionEnd`.
- `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 [`CodeEditorHandle`](https://zidane.si/docs/reference/ui-code-editor-code-editor.md#CodeEditorHandle).

Source: [ui/src/code/editor/CodeEditor.tsx:425](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeEditor.tsx#L425)

## Interfaces

### `CodeEditorHandle`

Interface.

What a [`CodeEditor`](https://zidane.si/docs/reference/ui-code-editor-code-editor.md#CodeEditor) ref reaches.

```ts
interface CodeEditorHandle
```

**Properties**

- `editor` (`() => Editor<'file', unknown, undefined> | null`): The armed editor, `null` while read-only.
- `host` (`() => HTMLDivElement | null`): The editor's outer element (holds the scroller and pierre's `<diffs-container>`), `null` before mount.
- `placeCaret` (`(caret: { character: number; lineNumber: number }) => void`): Put the caret there: focuses the editor, arming it first when needed.

Source: [ui/src/code/editor/CodeEditor.tsx:57](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeEditor.tsx#L57)

### `CodeEditorProps`

Interface.

Props of [`CodeEditor`](https://zidane.si/docs/reference/ui-code-editor-code-editor.md#CodeEditor); `A` is the annotation payload type.

```ts
interface CodeEditorProps<A>
```

**Type parameters**

- `A`

**Properties**

- `annotations?` (`readonly LineAnnotation<A>[]`): Content anchored under lines (review comments); rendered by `renderAnnotation`.
- `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 `useCodeDocument`: text, draft, dirty and conflict flags, save and discard.
- `findAsk?` (`number`): Bumps on ⌘F; the visible editor opens find.
- `hostAttributes?` (`Record<string, string | undefined>`): Extra attributes on the host (`data-*` states the owner styles).
- `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 `annotations`.
- `scrollerClassName?` (`string`): The scroll container's classes (the view virtualises its lines).
- `selectedLines?` (`SelectedLineRange | null`): The selected line range, controlled by the owner; needs `onSelectionEnd`.
- `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.

Source: [ui/src/code/editor/CodeEditor.tsx:67](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeEditor.tsx#L67)