From 86ac089fb28810a054b1b4ce97c3986fef73a9d1 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 21 Nov 2025 14:33:58 +0000
Subject: [PATCH] Add a component to display emojis correctly in previews

Create a new React component that parses and renders text with emojis as Twemoji images, ensuring consistency between preview and final output.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: e41fe0af-9a57-474c-998a-d509286b7711
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/JcM96XE
---
 client/src/components/emoji-text.tsx | 42 ++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 client/src/components/emoji-text.tsx

diff --git a/client/src/components/emoji-text.tsx b/client/src/components/emoji-text.tsx
new file mode 100644
index 0000000..bc84a62
--- /dev/null
+++ b/client/src/components/emoji-text.tsx
@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { parseTextWithEmojis } from '@/lib/emojiUtils';
+
+interface EmojiTextProps {
+  text: string;
+  className?: string;
+  emojiSize?: number;
+}
+
+/**
+ * Component that renders text with emojis as Twemoji images
+ * Matches the backend Twemoji rendering for consistent preview
+ */
+export function EmojiText({ text, className = '', emojiSize = 20 }: EmojiTextProps) {
+  const segments = useMemo(() => parseTextWithEmojis(text), [text]);
+
+  return (
+    <span className={className}>
+      {segments.map((segment, idx) => {
+        if (segment.type === 'text') {
+          return <span key={idx}>{segment.content}</span>;
+        } else {
+          return (
+            <img
+              key={idx}
+              src={segment.url}
+              alt={segment.content}
+              className="inline-block align-middle"
+              style={{
+                width: `${emojiSize}px`,
+                height: `${emojiSize}px`,
+                marginLeft: '2px',
+                marginRight: '2px'
+              }}
+              draggable={false}
+            />
+          );
+        }
+      })}
+    </span>
+  );
+}