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

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

## Components

### `HoverCode`

Component.

A hover's code block: plain text at once, recolored in place once the highlighter answers.

```ts
function HoverCode(props: HoverCodeProps): Element
```

**Parameters**

- `props` (`HoverCodeProps`): `code`: the block's text; `lang`: its fence language.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `code` (`string`): The block's text.
- `lang` (`string`): The fence's language id; unknown ones stay plain.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/CodeHover.tsx:339](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L339)

## Functions

### `renderHover`

Function.

Minimal markdown for LSP hovers, one node per section: fenced code blocks
become `HoverCode` (plain first, highlighted in place), other lines are
paragraphs with `code`, **bold** and *italic* spans. No remark: a hover
must paint in one frame.

```ts
function renderHover(markdown: string): ReactNode[]
```

**Parameters**

- `markdown` (`string`): The hover text a language server returned.

**Returns** `ReactNode[]`

Source: [ui/src/code/editor/CodeHover.tsx:389](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L389)

### `tokensFromHtml`

Function.

The highlighter's `<pre><code><span style="color:…">…` back into lines of colored runs. A run can
span lines (its text holds the newlines): it is cut at each one.

```ts
function tokensFromHtml(html: string): HoverToken[][]
```

**Parameters**

- `html` (`string`): The highlighter's HTML (`highlights.ts`).

**Returns** `HoverToken[][]`

Source: [ui/src/code/editor/CodeHover.tsx:308](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L308)

### `useHoverCard`

Function.

Drives the hover card for a code view: wire `onEnter` / `onLeave` to the view's token
events and render `node` (a portal) anywhere.

```ts
function useHoverCard(
  fetch: ((line: number, column: number) => Promise<HoverAnswer>) | null,
  actions?: readonly HoverAction[],
  docVersion?: unknown,
  notesAt?: (line: number, column: number) => EditorDiagnostic[],
): { node: Element | null; onEnter: (t: CodeToken, _e: PointerEvent) => void; onLeave: () => void }
```

**Parameters**

- `fetch` (`((line: number, column: number) => Promise<HoverAnswer>) | null`): The answer for the symbol at a 1-based (line, column); `null` here: findings only.
- `actions?` (`readonly HoverAction[]`, default `NO_ACTIONS`): Links at the card's foot (go to definition, find references).
- `docVersion?` (`unknown`, default `null`): Changes whenever the document text changes; invalidates the cache.
- `notesAt?` (`(line: number, column: number) => EditorDiagnostic[]`): Findings to show for the hovered position, ahead of the server's answer.

**Returns** `{ node: Element | null; onEnter: (t: CodeToken, _e: PointerEvent) => void; onLeave: () => void }`

Source: [ui/src/code/editor/CodeHover.tsx:72](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L72)

## Interfaces

### `HoverAction`

Interface.

A link at the foot of the hover card.

```ts
interface HoverAction
```

**Properties**

- `label` (`string`): The link's text.
- `run` (`(line: number, column: number) => void | Promise<unknown>`): Runs with the hovered 1-based (line, column) after the card closes.

Source: [ui/src/code/editor/CodeHover.tsx:50](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L50)

### `HoverAnswer`

Interface.

What a hover fetch answers: the markdown, and why it is missing when the server is still loading.

```ts
interface HoverAnswer
```

**Properties**

- `busy?` (`string`): The server is still loading ("rust-analyzer: Indexing 12/340").
- `text` (`string | null`): The hover's markdown; `null`: nothing to show.

Source: [ui/src/code/editor/CodeHover.tsx:42](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L42)

### `HoverCodeProps`

Interface.

Props for [`HoverCode`](https://zidane.si/docs/reference/ui-code-editor-code-hover.md#HoverCode).

```ts
interface HoverCodeProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `code` (`string`): The block's text.
- `lang` (`string`): The fence's language id; unknown ones stay plain.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/CodeHover.tsx:323](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/CodeHover.tsx#L323)