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

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

## Functions

### `matchWord`

Function.

How `text` matches `typed`: every typed character in order, the first one
at a word start. Class 3: a case-exact prefix, 2: a prefix, 1: all hits on
word starts (camelCase, snake_case), 0: anywhere. `null`: no match.

```ts
function matchWord(
  text: string,
  typed: string,
): { positions: number[]; rank: number } | null
```

**Parameters**

- `text` (`string`): The label (or filter text) to match.
- `typed` (`string`): The word typed so far.

**Returns** `{ positions: number[]; rank: number } | null`

Source: [ui/src/code/editor/CodeCompletion.tsx:135](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L135)

### `rankCompletions`

Function.

The items matching `typed`, best first: match class, then the server's own order.

```ts
function rankCompletions(items: readonly CompletionItem[], typed: string): RankedItem[]
```

**Parameters**

- `items` (`readonly CompletionItem[]`): The answer's items, in the server's order.
- `typed` (`string`): The word typed so far.

**Returns** `RankedItem[]`

Source: [ui/src/code/editor/CodeCompletion.tsx:183](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L183)

### `useCompletion`

Function.

Drives completion for one editor: call `onChange` with the editor's changes and render `node`.

```ts
function useCompletion(
  source: CompletionSource | null,
  handle: RefObject<CodeEditorHandle | null>,
): { close: () => void; node: Element | null; onChange: (next: string, changes: readonly EditChange[]) => void; open: boolean }
```

**Parameters**

- `source` (`CompletionSource | null`): Where suggestions come from; `null` turns completion off.
- `handle` (`RefObject<CodeEditorHandle | null>`): The editor's handle (its host takes the keys, its editor the edits).

**Returns** `{ close: () => void; node: Element | null; onChange: (next: string, changes: readonly EditChange[]) => void; open: boolean }`

Source: [ui/src/code/editor/CodeCompletion.tsx:246](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L246)

## Interfaces

### `CompletionAnswer`

Interface.

What a completion request answers.

```ts
interface CompletionAnswer
```

**Properties**

- `busy?` (`string`): The server is still loading.
- `id` (`number`): Answer id, passed back to `CompletionSource.resolve`.
- `incomplete` (`boolean`): Typing on must ask again instead of filtering.
- `items` (`CompletionItem[]`): The suggestions, in the server's order.

Source: [ui/src/code/editor/CodeCompletion.tsx:55](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L55)

### `CompletionDetail`

Interface.

The rest of an item, fetched for the highlighted item and on accept.

```ts
interface CompletionDetail
```

**Properties**

- `additionalEdits?` (`{ newText: string; range: { end: Pos; start: Pos } }[]`): More edits to apply on accept (an auto-import), in 0-based positions; only those ahead of the inserted text apply.
- `detail?` (`string`): Full type or signature, shown in the documentation panel when it says more than the item's own.
- `documentation?` (`string`): Documentation, shown as plain text under the menu.

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

### `CompletionItem`

Interface.

One suggestion (the LSP item, flattened by the source).

```ts
interface CompletionItem
```

**Properties**

- `cursor?` (`{ end: number; start: number }`): Caret (or selected placeholder) inside `insertText`, as offsets; absent: its end.
- `detail?` (`string`): Type or signature, shown dimmed after the label.
- `filterText?` (`string`): Text the typed word is matched against instead of `label`.
- `insertText` (`string`): Text that replaces the typed word on accept.
- `kind?` (`string`): LSP kind as a word (`function`, `field`, …): picks the icon.
- `label` (`string`): Text shown in the menu; the typed word is matched against it unless `filterText` is set.
- `preselect?` (`boolean`): Selected when the menu opens on an empty word.
- `range?` (`{ end: Pos; start: Pos }`): The span the item replaces at request time; absent: the word before the caret.
- `sortText?` (`string`): Sort key within a match class; absent: `label`.

Source: [ui/src/code/editor/CodeCompletion.tsx:33](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L33)

### `CompletionSource`

Interface.

Where the menu's suggestions come from (the Files panel's language server).

```ts
interface CompletionSource
```

**Properties**

- `complete` (`(text: string, line: number, character: number, trigger?: string) => Promise<CompletionAnswer>`): Suggestions at a 0-based caret in `text`; `trigger` is the character just typed when it is not a word character.
- `resolve?` (`(id: number, index: number) => Promise<CompletionDetail | null>`): The rest of item `index` of answer `id`.

Source: [ui/src/code/editor/CodeCompletion.tsx:77](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L77)

### `RankedItem`

Interface.

An item that matches what was typed, with the label characters that matched.

```ts
interface RankedItem
```

**Properties**

- `index` (`number`): Index in the answer (for `resolve`).
- `item` (`CompletionItem`): The suggestion.
- `matches` (`number[]`): Label indices of the matched characters, for highlighting; empty when it matched on `filterText`.

Source: [ui/src/code/editor/CodeCompletion.tsx:85](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeCompletion.tsx#L85)