Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use linkifyjs for better url extraction lgic #569

Merged
merged 2 commits into from
Apr 14, 2024
Merged

Use linkifyjs for better url extraction lgic #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43baec8
use linkifyjs
Tucchhaa Apr 14, 2024
9f2dd8c
add tests
Tucchhaa Apr 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 52 additions & 9 deletions lib/__tests__/__snapshots__/text.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ Array [
>
http://google.com
</a>,
"",
],
<span>
Please go to
Expand All @@ -18,7 +17,6 @@ Array [
>
http://google.com
</a>

</span>,
]
`;
Expand All @@ -27,13 +25,11 @@ exports[`text linkify attach link on nested elements containing links 1`] = `
<span>
Please go to
<span>

<a
href="http://google.com"
>
http://google.com
</a>

</span>
lalala
</span>
Expand All @@ -47,7 +43,6 @@ exports[`text linkify attach link on simple elements containing links 1`] = `
>
http://google.com
</a>

</span>
`;

Expand All @@ -59,7 +54,6 @@ Array [
>
http://google.com
</a>,
"",
]
`;

Expand All @@ -71,7 +65,6 @@ Array [
>
http://www.rumtoast.com/5444/line群組行動條碼邀請-一定要關掉，不然駭客會入侵
</a>,
"",
]
`;

Expand All @@ -90,7 +83,58 @@ Array [
駭客會入侵
</React.Fragment>
</a>,
"",
]
`;

exports[`text linkify parses half-width brackets correctly 1`] = `
Array [
<a
href="http://foo.com/blah_(a)_(b)"
target="_blank"
>
http://foo.com/blah_(a)_(b)
</a>,
" (",
<a
href="http://foo.com/blah_(a)_(b)"
target="_blank"
>
http://foo.com/blah_(a)_(b)
</a>,
") ",
<a
href="http://foo.com/blah_(a)_(b)"
target="_blank"
>
http://foo.com/blah_(a)_(b)
</a>,
")",
]
`;

exports[`text linkify parses full-width brackets correctly 1`] = `
Array [
<a
href="http://foo.com/blah_（a）_（b）"
target="_blank"
>
http://foo.com/blah_（a）_（b）
</a>,
" （",
<a
href="http://foo.com/blah_(a)_(b)"
target="_blank"
>
http://foo.com/blah_(a)_(b)
</a>,
"） ",
<a
href="http://foo.com/blah_(a)_(b)"
target="_blank"
>
http://foo.com/blah_(a)_(b)
</a>,
"）",
]
`;

Expand All @@ -103,7 +147,6 @@ Array [
>
http://google.com
</a>,
"",
]
`;

Expand Down
22 changes: 22 additions & 0 deletions lib/__tests__/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,28 @@ describe('text', () => {
})
).toMatchSnapshot();
});

it('parses half-width brackets correctly', () => {
expect(
linkify(
'http://foo.com/blah_(a)_(b) (http://foo.com/blah_(a)_(b)) http://foo.com/blah_(a)_(b))',
{
props: { target: '_blank' },
}
)
).toMatchSnapshot();
});

it('parses full-width brackets correctly', () => {
expect(
linkify(
'http://foo.com/blah_（a）_（b） （http://foo.com/blah_(a)_(b)） http://foo.com/blah_(a)_(b)）',
{
props: { target: '_blank' },
}
)
).toMatchSnapshot();
});
});

describe('nl2br', () => {
Expand Down
15 changes: 7 additions & 8 deletions lib/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
import { gql } from 'graphql-tag';
import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import { HighlightFieldsFragment } from 'typegen/graphql';
import { tokenize } from 'linkifyjs';

const BREAK = { $$BREAK: true } as const;

Expand Down Expand Up @@ -105,12 +106,10 @@ function shortenUrl(s: string, maxLength: number) {

function flatternPureStrings(tokens: React.ReactChild[]) {
return tokens.every(token => typeof token === 'string')
? tokens.join()
? tokens.join('')
: tokens;
}

const urlRegExp = /(https?:\/\/\S+)/;

/**
* Wrap <a> around hyperlinks inside a react element or string.
*
Expand All @@ -127,13 +126,13 @@ export function linkify(
return traverseForStrings(elem, str => {
if (!str) return str;

const tokenized = str.split(urlRegExp).map((s, i) =>
s.match(urlRegExp) ? (
<a key={`link${i}`} href={s} {...props}>
{shortenUrl(s, maxLength)}
const tokenized = tokenize(str).map((token, i) =>
token.isLink ? (
<a key={`link${i}`} href={token.v} {...props}>
{shortenUrl(token.v, maxLength)}
</a>
) : (
s
token.toString()
)
);

Expand Down
11 changes: 11 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"isomorphic-unfetch": "^3.0.0",
"js-cookie": "^3.0.1",
"json-url": "^2.6.0",
"linkifyjs": "^4.1.3",
"lodash": "^4.17.19",
"marked": "^4.1.1",
"next": "^9.3.2",
Expand Down
Loading