zidanecode/editor/CodeHover
import { … } from 'zidane-ui/code/editor'ui/src/code/editor/CodeHover.tsx
Components#
HoverCodeComponent#
A hover's code block: plain text at once, recolored in place once the highlighter answers.
function HoverCode(props: HoverCodeProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | HoverCodeProps |
|
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| 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. |
Functions#
renderHoverFunction#
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.
function renderHover(markdown: string): ReactNode[]Parameters
| Name | Type | Description |
|---|---|---|
| markdown | string | The hover text a language server returned. |
Returns
ReactNode[]tokensFromHtmlFunction#
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.
function tokensFromHtml(html: string): HoverToken[][]Parameters
| Name | Type | Description |
|---|---|---|
| html | string | The highlighter's HTML ( |
Returns
HoverToken[][]useHoverCardFunction#
Drives the hover card for a code view: wire onEnter / onLeave to the view's token
events and render node (a portal) anywhere.
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
| Name | Type | Default | Description |
|---|---|---|---|
| fetch | ((line: number, column: number) => Promise<HoverAnswer>) | null | The answer for the symbol at a 1-based (line, column); | |
| actions? | readonly HoverAction[] | NO_ACTIONS | Links at the card's foot (go to definition, find references). |
| docVersion? | unknown | 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 }Interfaces#
HoverActionInterface#
A link at the foot of the hover card.
interface HoverActionProperties
| Name | Type | Description |
|---|---|---|
| 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. |
HoverAnswerInterface#
What a hover fetch answers: the markdown, and why it is missing when the server is still loading.
interface HoverAnswerProperties
| Name | Type | Description |
|---|---|---|
| busy? | string | The server is still loading ("rust-analyzer: Indexing 12/340"). |
| text | string | null | The hover's markdown; |
HoverCodePropsInterface#
Props for HoverCode.
interface HoverCodePropsProperties
| Name | Type | Description |
|---|---|---|
| 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. |