Fix rendering of links with emoji

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

View file

@ -40,6 +40,15 @@ story.add('Links with Emoji without space', () => {
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', () => {
const props = createProps({
text: 'I am fond of cats',

View file

@ -80,7 +80,6 @@ export class Linkify extends React.Component<Props> {
});
const results: Array<JSX.Element | string> = [];
let last = 0;
let count = 1;
chunkData.forEach(({ chunk, matchData }) => {
@ -90,9 +89,10 @@ export class Linkify extends React.Component<Props> {
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<Props> {
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,
})
);
}
});