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:
@@ -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}</>;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user