From e546d787f070e68c0b7b1af01b02988ba79fef6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Oct 2024 20:31:41 +0200
Subject: [PATCH] pl-fe: Add index?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/parsed-content.tsx |  4 ++--
 packages/pl-fe/src/features/emoji/emojify.tsx    | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/pl-fe/src/components/parsed-content.tsx b/packages/pl-fe/src/components/parsed-content.tsx
index 2573a3c4b..2ed7bed59 100644
--- a/packages/pl-fe/src/components/parsed-content.tsx
+++ b/packages/pl-fe/src/components/parsed-content.tsx
@@ -107,9 +107,9 @@ const ParsedContent: React.FC<IParsedContent> = (({ html, mentions, hasQuote, em
         }
       },
 
-      transform(reactNode) {
+      transform(reactNode, _domNode, index) {
         if (typeof reactNode === 'string') {
-          return <Emojify text={reactNode} emojis={emojiMap} />;
+          return <Emojify key={index} text={reactNode} emojis={emojiMap} />;
         }
 
         return reactNode as JSX.Element;
diff --git a/packages/pl-fe/src/features/emoji/emojify.tsx b/packages/pl-fe/src/features/emoji/emojify.tsx
index ac159816a..909a56c3e 100644
--- a/packages/pl-fe/src/features/emoji/emojify.tsx
+++ b/packages/pl-fe/src/features/emoji/emojify.tsx
@@ -47,7 +47,11 @@ const Emojify: React.FC<IEmojify> = ({ text, emojis = {} }) => React.useMemo(()
     stack = '';
   };
 
-  for (let c of split(text)) {
+  const splitText = split(text);
+
+  for (const index in splitText) {
+    let c = splitText[index];
+
     // convert FE0E selector to FE0F so it can be found in unimap
     if (c.codePointAt(c.length - 1) === 65038) {
       c = c.slice(0, -1) + String.fromCodePoint(65039);
@@ -62,7 +66,7 @@ const Emojify: React.FC<IEmojify> = ({ text, emojis = {} }) => React.useMemo(()
       const { unified, shortcode } = unicodeMapping[c];
 
       nodes.push(
-        <img draggable={false} className='emojione' alt={c} title={`:${shortcode}:`} src={`/packs/emoji/${unified}.svg`} />,
+        <img key={index} draggable={false} className='emojione' alt={c} title={`:${shortcode}:`} src={`/packs/emoji/${unified}.svg`} />,
       );
     } else if (unqualified in unicodeMapping) {
       clearStack();
@@ -70,7 +74,7 @@ const Emojify: React.FC<IEmojify> = ({ text, emojis = {} }) => React.useMemo(()
       const { unified, shortcode } = unicodeMapping[unqualified];
 
       nodes.push(
-        <img draggable={false} className='emojione' alt={unqualified} title={`:${shortcode}:`} src={`/packs/emoji/${unified}.svg`} />,
+        <img key={index} draggable={false} className='emojione' alt={unqualified} title={`:${shortcode}:`} src={`/packs/emoji/${unified}.svg`} />,
       );
     } else if (c === ':') {
       if (!open) {
@@ -81,7 +85,7 @@ const Emojify: React.FC<IEmojify> = ({ text, emojis = {} }) => React.useMemo(()
 
       // we see another : we convert it and clear the stack buffer
       if (open) {
-        nodes.push(<MaybeEmoji text={stack} emojis={emojis} />);
+        nodes.push(<MaybeEmoji key={index} text={stack} emojis={emojis} />);
         stack = '';
       }