Version: latest

Universell einsetzbar

RichText funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/rich-text) — die Library erkennt die Umgebung automatisch.

RichText

RichText rendert aufbereiteten Rich-Text/HTML-Content mit prokodo-Typografie, semantischen Elementen und sicheren Standard-Styles.

Übersicht

import { RichText } from "@prokodo/ui/rich-text"
;<RichText html={article.content} />

Live PreviewOpen in Storybook ↗

Import

import { RichText } from "@prokodo/ui/rich-text"

CSS:

import "@prokodo/ui/rich-text.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`html`	`string`	—	—	Sanitised HTML string to render.
`children`	`ReactNode`	—	—	Structured React content alternative to `html`.
`prose`	`boolean`	`true`	—	Apply `prose` typography class.
`className`	`string`	—	—	CSS class on root `<div>`.

Siehe src/components/rich-text/RichText.model.ts für den vollständigen RichTextProps-Typ.

Design-Tokens

RichText definiert keine komponentenspezifischen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:

Token	Beschreibung
`--pk-color-brand`	Linkfarbe und Listenmarkierung (geordnete Liste)
`--pk-color-muted`	Text- und Code-Farbe
`--pk-color-fg`	Listenelement-Textfarbe
`--pk-color-border`	Rahmen bei Codeblock und Blockquote
`--pk-color-surface-raised`	Hintergrund von Codeblock und Blockquote
`--pk-space-lg`	Horizontales Padding des Blockquote
`--pk-space-sm`	Rechter Abstand des Listen-Icons
`--pk-space-xs`	Unterer Abstand zwischen Listenelementen
`--pk-radius-sm`	Eckenradius des Codeblocks
`--pk-radius-md`	Eckenradius von Inline-Bildern
`--pk-palette-white`	Textfarbe der Listenmarkierung (geordnete Liste)

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { RichText } from "@prokodo/ui/rich-text"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	🔍 Manuell prüfen	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.3	Kontrast (Minimum) (AA)	🔍 Manuell prüfen	Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich.
2.4.6	Überschriften und Bezeichnungen (AA)	🔍 Manuell prüfen	Überschriften und Labels müssen das Thema oder den Zweck des zugehörigen Inhalts beschreiben.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 4 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 RichText in Storybook öffnen

Quellcode

src/components/rich-text/RichText.model.ts