From dfc3ed4715c5b8ddd3c65ab6f3c25f2a0bef61e5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 16 May 2026 19:04:08 +0300
Subject: [PATCH] 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.
---
 src/shared/ui/RichText/ui/RichText.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/shared/ui/RichText/ui/RichText.tsx b/src/shared/ui/RichText/ui/RichText.tsx
index a1e5ced..36b88fb 100644
--- a/src/shared/ui/RichText/ui/RichText.tsx
+++ b/src/shared/ui/RichText/ui/RichText.tsx
@@ -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>;
 }