From f2ba034fc452838cfdda43669d2d53baa52d8291 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 21 Nov 2025 14:34:29 +0000
Subject: [PATCH] Improve story preview by displaying emojis correctly

Integrates Twemoji library into the PreviewModal component to render emojis as images, ensuring accurate visual representation of posts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: f14eb440-b642-488d-9a57-924557db0bc4
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/preview-modal.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/preview-modal.tsx b/client/src/components/preview-modal.tsx
index 7fcd3e9..1f4b1be 100644
--- a/client/src/components/preview-modal.tsx
+++ b/client/src/components/preview-modal.tsx
@@ -5,6 +5,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { ChevronLeft, ChevronRight, Send, Facebook, Instagram, Heart, MessageCircle, Share2, Bookmark } from 'lucide-react';
 import type { Media } from '@shared/schema';
 import { removeHashtags } from '@shared/emoji';
+import { EmojiText } from '@/components/emoji-text';
 
 interface PreviewModalProps {
   open: boolean;
@@ -425,7 +426,9 @@ export function PreviewModal({
                   }}
                 >
                   {lines.map((line, idx) => (
-                    <div key={idx}>{line}</div>
+                    <div key={idx}>
+                      <EmojiText text={line} emojiSize={fontSize} />
+                    </div>
                   ))}
                 </div>
               </div>