feat: editorial typography via RichText component

Always wraps content in .rich-text: max-width 65ch, onum figures,
hanging punctuation, pretty text-wrap, auto hyphens, 1.65 line-height,
and 1.2em paragraph spacing. className prop merges additonal classes.
This commit is contained in:
Ilia Mashkov
2026-05-16 19:04:08 +03:00
parent a77cd43749
commit dfc3ed4715
+4 -8
View File
@@ -1,4 +1,5 @@
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import { cn } from '$shared/lib';
type Props = { type Props = {
/** /**
@@ -6,24 +7,19 @@ type Props = {
*/ */
html: string; html: string;
/** /**
* CSS classes applied to the wrapper div * Additional CSS classes merged onto the wrapper div
*/ */
className?: string; className?: string;
}; };
/** /**
* Renders a PocketBase rich-text HTML string as React elements. * Renders a PocketBase rich-text HTML string as React elements.
* Always applies editorial magazine typography via the rich-text CSS class.
*/ */
export function RichText({ html, className }: Props) { export function RichText({ html, className }: Props) {
if (!html) { if (!html) {
return null; return null;
} }
const parsed = parse(html); return <div className={cn('rich-text', className)}>{parse(html)}</div>;
if (className) {
return <div className={className}>{parsed}</div>;
}
return <>{parsed}</>;
} }