Content blocks

Rich text

Renders a `RichText` value inline: marks, links, inline code, colors, emoji and mentions. Every text block uses it; use it directly inside your own components.

Mixed bold italic, a link, x^2, orange and 📚Docs 🎉

Rich text utilities

Offset-based helpers used by the editor, exported for your own tooling:

  • splitRichText(value, offset) → [before, after]
  • deleteRange(value, from, to) removes characters
  • applyMarks(value, from, to, patch) sets marks (undefined removes)
  • hasMark(value, from, to, mark) is true when the whole range has the mark
  • normalizeRichText(value) merges equal adjacent runs and drops empty ones
  • richTextToHtml(value) / parseRichTextDom(el) round-trip through contenteditable HTML (data-m holds marks)
  • MentionToken renders one mention; inlineCodeClass is the inline code chip class

Usage

  • Use RichTextView to render a RichText value (marks, colors, links, mentions, inline equations) inside any block or custom UI.
  • Store text as RichText segments rather than HTML so blocks and the editor can share it.
  • Don’t use it for long-form documents on its own; use BlockRenderer for a Block[] tree.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/RichtextExample.tsx
import { BlockContent, RichTextView } from '@krackedui/motion';

export function RichTextExample() {
  return (
    <BlockContent>
      <p>
        <RichTextView
          value={[
            { text: 'Mixed ' },
            { text: 'bold italic', marks: { bold: true, italic: true } },
            { text: ', ' },
            { text: 'a link', marks: { link: 'https://example.com' } },
            { text: ', ' },
            { text: 'x^2', marks: { equation: true } },
            { text: ', ' },
            { text: 'orange', marks: { color: 'orange' } },
            { text: ' and ' },
            { text: 'Docs', mention: { kind: 'page', label: 'Docs', icon: '📚' } },
            { text: ' 🎉' },
          ]}
        />
      </p>
    </BlockContent>
  );
}

API Reference

MentionToken

One non-editable mention, as RichTextView renders a span with mention: a page (icon + underlined title), a person (@Name) or a date (@Date). Carries data-mention so parseRichTextDom reads it back.

PropTypeDefault
mention
Mention

RichTextView

PropTypeDefault
value
RichText

TextSpan

One run of RichText.

PropTypeDefault
text
string
marks
TextMarks
mention
Mention

Accessibility

  • Output is inline spans and <a> links, so it inherits the surrounding semantics.
  • Emoji are wrapped in an emoji-font span; they are read by their Unicode names.
© 2026 Motion. Internal documentation.