From a5040b8ab65cbf5487e9a4f82ad4d0928b84325d Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Sun, 4 Jan 2026 20:17:14 +0100
Subject: [PATCH] feat: render highlight comments with RichText component (#34)

* 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

* chore: update package-lock.json

* fix: pass event to RichText for custom emoji tag support

Create synthetic events that preserve emoji tags from the original
highlight event while using the comment as content. This ensures
custom emoji in comments render correctly.

Changes:
- HighlightRenderer: Create commentEvent with emoji tags preserved
- HighlightDetailRenderer: Create commentEvent with emoji tags preserved

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../nostr/kinds/HighlightDetailRenderer.tsx     | 17 +++++++++++++++--
 .../nostr/kinds/HighlightRenderer.tsx           | 16 +++++++++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/nostr/kinds/HighlightDetailRenderer.tsx b/src/components/nostr/kinds/HighlightDetailRenderer.tsx
index 86f71ca..c7480fc 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
@@ -38,6 +39,14 @@ export function Kind9802DetailRenderer({ event }: { event: NostrEvent }) {
     },
   );
 
+  // Create synthetic event for comment rendering (preserves emoji tags)
+  const commentEvent = comment
+    ? {
+        ...event,
+        content: comment,
+      }
+    : undefined;
+
   return (
     <div className="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
       {/* Highlight Header */}
@@ -75,12 +84,16 @@ export function Kind9802DetailRenderer({ event }: { event: NostrEvent }) {
       )}
 
       {/* Comment */}
-      {comment && (
+      {commentEvent && (
         <div className="flex flex-col gap-2">
           <div className="text-xs text-muted-foreground uppercase tracking-wide">
             Comment
           </div>
-          <p className="text-sm leading-relaxed">{comment}</p>
+          <RichText
+            event={commentEvent}
+            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..6c7dff4 100644
--- a/src/components/nostr/kinds/HighlightRenderer.tsx
+++ b/src/components/nostr/kinds/HighlightRenderer.tsx
@@ -49,11 +49,25 @@ export function Kind9802Renderer({ event }: BaseEventProps) {
     }
   };
 
+  // Create synthetic event for comment rendering (preserves emoji tags)
+  const commentEvent = comment
+    ? {
+        ...event,
+        content: comment,
+      }
+    : undefined;
+
   return (
     <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Comment */}
-        {comment && <p className="text-sm text-foreground">{comment}</p>}
+        {commentEvent && (
+          <RichText
+            event={commentEvent}
+            className="text-sm text-foreground"
+            options={{ showMedia: false, showEventEmbeds: false }}
+          />
+        )}
 
         {/* Highlighted text */}
         {highlightText && (