RichTextField

Renders an HTML string as rich text. The HTML is sanitized with DOMPurify and parsed into a React element tree with html-react-parser. This means no React HTML-injection escape hatch is used, and the field is safe from Cross-Site Scripting (XSS) attacks.

Installation

pnpm dlx shadcn@latest add @shadmin/rich-text-field

Even though the rendering path is safe, it is still good practice to sanitize the content on the server as defense-in-depth.

Usage

import { RichTextField } from "@/components/admin";
 
<RichTextField source="body" />;

To render the value as plain text with all markup removed, pass stripTags:

<RichTextField source="body" stripTags />

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field containing the HTML
`record`	Optional	`object`	Record from context	Explicit record
`defaultValue`	Optional	`any`	-	Fallback value
`empty`	Optional	`ReactNode`	-	Placeholder when value is null or empty
`stripTags`	Optional	`boolean`	`false`	Strip all HTML and render plain text
`purifyOptions`	Optional	`PurifyOptions`	`{}`	Options passed to DOMPurify
`className`	Optional	`string`	-	Additional CSS classes

Remaining props are forwarded to the wrapping <span>.

`source`

Name of the field containing the HTML string.

<RichTextField source="body" />

`stripTags`

When true, all HTML markup is removed and only the plain text is rendered.

<RichTextField source="body" stripTags />

`purifyOptions`

Options forwarded to DOMPurify's sanitize call to tighten or loosen the allow-list of tags and attributes.

<RichTextField
  source="body"
  purifyOptions={{
    ALLOWED_TAGS: ["p", "strong", "em", "a"],
    ALLOWED_ATTR: ["href"],
  }}
/>

`empty`

Rendered when the field value is null, undefined, or an empty string. Strings are passed through the translator.

<RichTextField source="body" empty="No description" />