From fae12a1908f30b8f589c5c8e4938ee94bce0535b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 19:08:04 +0000
Subject: [PATCH] feat: render highlight comments with RichText component

Enable support for custom emoji, mentions, hashtags, and other rich text features in highlight comments by using the RichText component instead of plain text rendering.

Changes:
- HighlightRenderer: Use RichText for comment rendering with media/embeds disabled
- HighlightDetailRenderer: Add RichText import and use it for comment rendering
---
 src/components/nostr/kinds/HighlightDetailRenderer.tsx | 7 ++++++-
 src/components/nostr/kinds/HighlightRenderer.tsx       | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/nostr/kinds/HighlightDetailRenderer.tsx b/src/components/nostr/kinds/HighlightDetailRenderer.tsx
index 86f71ca..4b9912f 100644
--- a/src/components/nostr/kinds/HighlightDetailRenderer.tsx
+++ b/src/components/nostr/kinds/HighlightDetailRenderer.tsx
@@ -11,6 +11,7 @@ import {
 import { EmbeddedEvent } from "../EmbeddedEvent";
 import { UserName } from "../UserName";
 import { useGrimoire } from "@/core/state";
+import { RichText } from "../RichText";
 
 /**
  * Detail renderer for Kind 9802 - Highlight
@@ -80,7 +81,11 @@ export function Kind9802DetailRenderer({ event }: { event: NostrEvent }) {
           <div className="text-xs text-muted-foreground uppercase tracking-wide">
             Comment
           </div>
-          <p className="text-sm leading-relaxed">{comment}</p>
+          <RichText
+            content={comment}
+            className="text-sm leading-relaxed"
+            options={{ showMedia: false, showEventEmbeds: false }}
+          />
         </div>
       )}
 
diff --git a/src/components/nostr/kinds/HighlightRenderer.tsx b/src/components/nostr/kinds/HighlightRenderer.tsx
index 94f89f1..1350391 100644
--- a/src/components/nostr/kinds/HighlightRenderer.tsx
+++ b/src/components/nostr/kinds/HighlightRenderer.tsx
@@ -53,7 +53,13 @@ export function Kind9802Renderer({ event }: BaseEventProps) {
     <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Comment */}
-        {comment && <p className="text-sm text-foreground">{comment}</p>}
+        {comment && (
+          <RichText
+            content={comment}
+            className="text-sm text-foreground"
+            options={{ showMedia: false, showEventEmbeds: false }}
+          />
+        )}
 
         {/* Highlighted text */}
         {highlightText && (