diff --git a/ts/components/conversation/Linkify.stories.tsx b/ts/components/conversation/Linkify.stories.tsx
index 63a1efcd37..a098cad76e 100644
--- a/ts/components/conversation/Linkify.stories.tsx
+++ b/ts/components/conversation/Linkify.stories.tsx
@@ -40,6 +40,15 @@ story.add('Links with Emoji without space', () => {
return ;
});
+story.add('Links with Emoji and Text', () => {
+ const props = createProps({
+ text:
+ 'https://example.com ⚠️ 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ https://example.com',
+ });
+
+ return ;
+});
+
story.add('No Link', () => {
const props = createProps({
text: 'I am fond of cats',
diff --git a/ts/components/conversation/Linkify.tsx b/ts/components/conversation/Linkify.tsx
index 49a6d775b1..d57a8c8139 100644
--- a/ts/components/conversation/Linkify.tsx
+++ b/ts/components/conversation/Linkify.tsx
@@ -80,7 +80,6 @@ export class Linkify extends React.Component {
});
const results: Array = [];
- let last = 0;
let count = 1;
chunkData.forEach(({ chunk, matchData }) => {
@@ -90,9 +89,10 @@ export class Linkify extends React.Component {
return;
}
+ let chunkLastIndex = 0;
matchData.forEach(match => {
- if (last < match.index) {
- const textWithNoLink = chunk.slice(last, match.index);
+ if (chunkLastIndex < match.index) {
+ const textWithNoLink = chunk.slice(chunkLastIndex, match.index);
count += 1;
results.push(renderNonLink({ text: textWithNoLink, key: count }));
}
@@ -109,12 +109,17 @@ export class Linkify extends React.Component {
results.push(renderNonLink({ text: originalText, key: count }));
}
- last = match.lastIndex;
+ chunkLastIndex = match.lastIndex;
});
- if (last < chunk.length) {
+ if (chunkLastIndex < chunk.length) {
count += 1;
- results.push(renderNonLink({ text: chunk.slice(last), key: count }));
+ results.push(
+ renderNonLink({
+ text: chunk.slice(chunkLastIndex),
+ key: count,
+ })
+ );
}
});