UI kit reference

code/editor/DiagnosticAnnotation

import { … } from 'zidane-ui/code/editor'ui/src/code/editor/DiagnosticAnnotation.tsx

Components#

Lists the findings on one line under that line, each with its glyph, message, source and code.

TypeScript

function DiagnosticAnnotation<D extends EditorDiagnostic>(
  props: DiagnosticAnnotationProps<D>,
): Element

Type parameters
Name	Type	Description
D	`extends EditorDiagnostic`

Parameters
Name	Type	Description
props	`DiagnosticAnnotationProps<D>`	`items`: the line's findings; `onAddToChat`: shows a per-finding "Add to chat" button.

Element

DiagnosticAnnotation props
Name	Type	Description
className?	`string`	Extra classes on the root element.
items	`readonly D[]`	The findings on this line, in display order.
onAddToChat?	`(d: D) => void`	Called with a finding when its "Add to chat" button is pressed. The button is hidden without it.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

TypeScript

interface DiagnosticAnnotationProps<D extends EditorDiagnostic>

DiagnosticAnnotationProps type parameters
Name	Type	Description
D	`extends EditorDiagnostic`

DiagnosticAnnotationProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
items	`readonly D[]`	The findings on this line, in display order.
onAddToChat?	`(d: D) => void`	Called with a finding when its "Add to chat" button is pressed. The button is hidden without it.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.