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 { cn } from '$shared/lib';
type Props = {
/**
@@ -6,24 +7,19 @@ type Props = {
*/
html: string;
/**
* CSS classes applied to the wrapper div
* Additional CSS classes merged onto the wrapper div
*/
className?: string;
};
/**
* 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) {
if (!html) {
return null;
}
const parsed = parse(html);
if (className) {
return <div className={className}>{parsed}</div>;
}
return <>{parsed}</>;
return <div className={cn('rich-text', className)}>{parse(html)}</div>;
}