Rich text

# RichTextSection

Render Markdown, literal text or structured blocks. Use blocks for addresses, inline emphasis, lists and panels without custom section components.

svelte

<script>
  import { RichTextSection } from '@page-sections/svelte';
</script>

<RichTextSection
  section={{
    id: 'contact',
    title: 'Contact',
    headline: 'Contact',
    blocks: [
      {
        type: 'address',
        name: 'Example Studio',
        lines: ['Sample Street 12', 'Example City']
      },
      {
        type: 'paragraph',
        text: [
          { type: 'strong', text: 'Email: ' },
          { type: 'link', text: 'hello@example.com', href: 'mailto:hello@example.com' }
        ]
      },
      {
        type: 'panel',
        title: 'A note',
        blocks: [{ type: 'paragraph', text: 'More information.' }]
      }
    ]
  }}
/>

Props and configuration

The required section combines SectionDefinition and RichTextContentData without a required type discriminator. The serialized discriminator is richText. Choose exactly one source:

body: string, with optional format (markdown or text; default markdown).
blocks: RichTextBlock[].

RichTextBlock variants:

Type	Fields
paragraph	text: InlineText; optional variant: default/lead/muted
address	name: string; lines: InlineText[]
list	items: InlineText[]; optional ordered: boolean
panel	blocks: RichTextBlock[]; optional title, tone (standard/muted), actions: ContentAction[]

InlineText is a string or InlineRun array. Runs are text/strong/emphasis/code with text, link with text/href, or break. Inline content is escaped; links pass through safeHref. String values in blocks are literal text, not Markdown. Paragraph whitespace preserves line breaks. Panels can nest and increment their heading level, capped at h6.

Low-level content components

RichTextContent accepts required content: RichTextContentData and renders the same prose without a section wrapper. InlineTextContent accepts required text: InlineText. Neither adds a page heading, registry entry, arbitrary HTML parser or application dependency.

Rendering and styling

Markdown uses markdown-it with html=false, linkify=true and typographer=false. Plain text uses escaped text with preserved line breaks. Raw Markdown HTML is escaped; dangerous links are rejected. Authored Markdown headings retain their levels, so choose them to fit the page. Structured headings inherit automatically.

The ps-prose wrapper provides line spacing, wrapping and scrollable code/table content. Section controls width, background and padding. All content is present in SSR HTML.