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

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

## Components

### `EditorColumn`

Component.

A tab strip over one editor per open file (or view), every tab kept mounted. The owner holds
`open` and `active`; the column reports picks, closes, reorders and unsaved state.

```ts
function EditorColumn(props: EditorColumnProps): Element
```

**Parameters**

- `props` (`EditorColumnProps`): See [`EditorColumnProps`](https://zidane.si/docs/reference/ui-code-editor-editor-column.md#EditorColumnProps).

**Returns** `Element`

**Props**

- `active` (`string | null`): The id in `open` whose tab is shown, or `null` for none.
- `className?` (`string`): Extra classes on the column's outer element.
- `empty?` (`ReactNode`): Shown while nothing is open. Default: the `editorEmpty` label.
- `fs` (`FileSystemAdapter`): Reads, writes and watches the files the tabs open.
- `language?` (`EditorLanguage | null`): Findings, hovers and definitions for the files it handles.
- `onActivate` (`(path: string) => void`): A tab was picked; the owner makes it `active`.
- `onClose` (`(path: string) => void`): A tab's close button or a middle-click; the owner drops it from `open`.
- `onDirtyChange?` (`(path: string, dirty: boolean) => void`): A file's unsaved state changed.
- `onNavigate?` (`(target: EditorLocation) => void`): Open a file at a position (a definition, a reference).
- `onReorder` (`(paths: readonly string[]) => void`): The tabs' new order (a drag, a keyboard move).
- `open` (`readonly string[]`): Open files and views, in tab order.
- `readOnly?` (`(path: string) => boolean`): Files shown read-only (type definitions).
- `reveal?` (`EditorReveal | null`): A position to show in an open file, once per nonce.
- `scope?` (`string`): Keys pierre's retained edit state, so two columns never share a draft.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `trailing?` (`ReactNode`): After the tabs, on the strip's right (an action).
- `views?` (`Readonly<Record<string, EditorView>>`): Tabs that are not files, by their id in `open`.

Source: [ui/src/code/editor/EditorColumn.tsx:93](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/EditorColumn.tsx#L93)

## Interfaces

### `EditorColumnProps`

Interface.

Props of [`EditorColumn`](https://zidane.si/docs/reference/ui-code-editor-editor-column.md#EditorColumn).

```ts
interface EditorColumnProps
```

**Properties**

- `active` (`string | null`): The id in `open` whose tab is shown, or `null` for none.
- `className?` (`string`): Extra classes on the column's outer element.
- `empty?` (`ReactNode`): Shown while nothing is open. Default: the `editorEmpty` label.
- `fs` (`FileSystemAdapter`): Reads, writes and watches the files the tabs open.
- `language?` (`EditorLanguage | null`): Findings, hovers and definitions for the files it handles.
- `onActivate` (`(path: string) => void`): A tab was picked; the owner makes it `active`.
- `onClose` (`(path: string) => void`): A tab's close button or a middle-click; the owner drops it from `open`.
- `onDirtyChange?` (`(path: string, dirty: boolean) => void`): A file's unsaved state changed.
- `onNavigate?` (`(target: EditorLocation) => void`): Open a file at a position (a definition, a reference).
- `onReorder` (`(paths: readonly string[]) => void`): The tabs' new order (a drag, a keyboard move).
- `open` (`readonly string[]`): Open files and views, in tab order.
- `readOnly?` (`(path: string) => boolean`): Files shown read-only (type definitions).
- `reveal?` (`EditorReveal | null`): A position to show in an open file, once per nonce.
- `scope?` (`string`): Keys pierre's retained edit state, so two columns never share a draft.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `trailing?` (`ReactNode`): After the tabs, on the strip's right (an action).
- `views?` (`Readonly<Record<string, EditorView>>`): Tabs that are not files, by their id in `open`.

Source: [ui/src/code/editor/EditorColumn.tsx:48](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/EditorColumn.tsx#L48)

### `EditorView`

Interface.

A tab that is not a file (`EditorColumnProps.views`).

```ts
interface EditorView
```

**Properties**

- `body` (`ReactNode`): Fills the column while the tab is active; mounted (hidden) while it is open.
- `glyph` (`ReactNode`): Drawn before the label.
- `label` (`string`): The tab's text.
- `title?` (`string`): The tab's tooltip. Default: the label.

Source: [ui/src/code/editor/EditorColumn.tsx:36](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/EditorColumn.tsx#L36)