mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix rendering of links with emoji

Browse source
This commit is contained in:
Fedor Indutny 2021-07-27 16:39:57 -07:00 • committed by GitHub
parent 4c933a1f5a
commit b7e5efe0a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
ts/components/conversation/Linkify.stories.tsx
View file

@ -40,6 +40,15 @@ story.add('Links with Emoji without space', () => {
return <Linkify {...props} />; return <Linkify {...props} />;
}); });
story.add('Links with Emoji and Text', () => {
const props = createProps({
text:
'https://example.com ⚠️ 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ https://example.com',
});
return <Linkify {...props} />;
});
story.add('No Link', () => { story.add('No Link', () => {
const props = createProps({ const props = createProps({
text: 'I am fond of cats', text: 'I am fond of cats',

17
ts/components/conversation/Linkify.tsx
View file

@ -80,7 +80,6 @@ export class Linkify extends React.Component<Props> {
}); });
const results: Array<JSX.Element | string> = []; const results: Array<JSX.Element | string> = [];
let last = 0;
let count = 1; let count = 1;
chunkData.forEach(({ chunk, matchData }) => { chunkData.forEach(({ chunk, matchData }) => {
@ -90,9 +89,10 @@ export class Linkify extends React.Component<Props> {
return; return;
} }
let chunkLastIndex = 0;
matchData.forEach(match => { matchData.forEach(match => {
if (last < match.index) { if (chunkLastIndex < match.index) {
const textWithNoLink = chunk.slice(last, match.index); const textWithNoLink = chunk.slice(chunkLastIndex, match.index);
count += 1; count += 1;
results.push(renderNonLink({ text: textWithNoLink, key: count })); results.push(renderNonLink({ text: textWithNoLink, key: count }));
} }
@ -109,12 +109,17 @@ export class Linkify extends React.Component<Props> {
results.push(renderNonLink({ text: originalText, key: count })); results.push(renderNonLink({ text: originalText, key: count }));
} }
last = match.lastIndex; chunkLastIndex = match.lastIndex;
}); });
if (last < chunk.length) { if (chunkLastIndex < chunk.length) {
count += 1; count += 1;
results.push(renderNonLink({ text: chunk.slice(last), key: count })); results.push(
renderNonLink({
text: chunk.slice(chunkLastIndex),
key: count,
})
);
} }
}); });