feat : update

components/public/structured-guide.tsx

@@ -19,6 +19,7 @@ import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { ConstellationImage } from "@/components/public/constellation-image";
+import { RichTextContent } from "@/components/rich-text-content";
 import { LiveRefresh } from "@/components/live-refresh";
 import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
 import { elementIconFilter } from "@/lib/catalog/element";
@@ -38,7 +39,7 @@ import {
   talentTypeLabel,
 } from "@/lib/guides/talents";
 import { parseYouTubeUrl } from "@/lib/guides/youtube";
-import { highlightTextSegments } from "@/lib/guides/highlights";
+import { normalizeExtraRichText } from "@/lib/rich-text";
 import { cn } from "@/lib/utils";
 
 function hasSection(guide: PublicGuide, slug: string): boolean {
@@ -1029,12 +1030,8 @@ function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
             ) : null}
             <CardHeader className="pt-5">
               <CardTitle>{row.heading}</CardTitle>
-              <CardDescription className="whitespace-pre-wrap">
-                {highlightTextSegments(row.body, row.highlights).map((segment, index) => (
-                  <span key={index} style={segment.color ? { color: segment.color } : undefined}>
-                    {segment.text}
-                  </span>
-                ))}
+              <CardDescription>
+                <RichTextContent html={normalizeExtraRichText(row.body, row.highlights)} />
               </CardDescription>
               {row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
             </CardHeader>