Rich Content

1// The post-body renderer — wire AS-IS (machinery, not a reference). A post body is a Ricos
2// document, not HTML and not text: never innerHTML it, never String() its nodes. This is the
3// documented render path (@wix/ricos viewer + quick-start plugins).
4//
5// In Astro this component MUST be a `client:only="react"` island — the ricos viewer breaks
6// under SSR. Dark theme: the ricos CSS hardcodes near-black text; scope an override on
7// `.ricos-content` forcing the foreground token (in Astro use <style is:global> — React
8// islands don't inherit scoped Astro styles).
9import { quickStartViewerPlugins, RicosViewer } from "@wix/ricos";
10import "@wix/ricos/css/all-plugins-viewer.css";
11
12// Module-level, once — never rebuild the plugin list per render.
13const plugins = quickStartViewerPlugins();
14
15export interface RichContentProps {
16  /** PostDetail.richContent — the Ricos document (plain JSON). */
17  content: Record<string, unknown> | null;
18  /** PostDetail.paragraphs — the honest fallback body when richContent is null. */
19  fallbackParagraphs?: string[];
20}
21
22export default function RichContent({ content, fallbackParagraphs = [] }: RichContentProps) {
23  if (content) {
24    return (
25      <div className="ricos-content">
26        <RicosViewer content={content as any} plugins={plugins} />
27      </div>
28    );
29  }
30  if (fallbackParagraphs.length > 0) {
31    return (
32      <div className="space-y-4">
33        {fallbackParagraphs.map((p, i) => (
34          <p key={i} className="leading-relaxed">
35            {p}
36          </p>
37        ))}
38      </div>
39    );
40  }
41  return null;
42}