{
  "name": "RichTextContent",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RichTextContent.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "rich-text-content",
  "elName": "RichTextContent",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#rich-text-content",
  "hasLiveDemo": false,
  "description": "Read-only renderer for rich-text HTML authored in `<RichTextEditor>` or\n`<RichTextEditorPro>`. Sanitises the input against the kit allowlist\n(`lib/sanitiseHtml`) and renders it — no editor engine, no TipTap, no\nclient boundary. Use it on detail pages and activity feeds that display\nsaved bodies but never edit them.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "RichTextContent",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RichTextContentProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RichTextContent } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "html",
      "optional": false,
      "type": "string | null | undefined",
      "doc": "Stored rich-text HTML — typically the saved output of a kit editor. Sanitised against the kit allowlist before rendering."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the wrapping `<div class=\"rich-text-content\">`."
    },
    {
      "name": "style",
      "optional": true,
      "type": "CSSProperties",
      "doc": "Inline style on the wrapper."
    }
  ],
  "classesUsed": [
    "rich-text-content"
  ],
  "examples": {
    "react": "<RichTextContent html={note.body} />",
    "html": "<div class=\"rich-text-content\"><h3>Q3 onboarding plan</h3><p>Owner: <span data-mention data-id=\"u_18\">@Priya Nair</span> — kickoff <strong>next Tuesday</strong>.</p><ul><li>Confirm sandbox access</li><li>Draft the success metrics</li></ul><blockquote>Keep the first call to 30 minutes.</blockquote></div>",
    "css": ".rich-text-content {\n  color: var(--fg);\n  font: 400 15px/1.6 var(--f-body);\n}"
  }
}