diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx index 04d1d39c8..acb8076be 100644 --- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx +++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx @@ -32,4 +32,22 @@ storiesOf('screens/Contribute/Preview', module) modify={action('modify')} publish={action('publish')} /> + )) + .add('with a link', () => ( + )); diff --git a/src/app/utils/linkify.ts b/src/app/utils/linkify.ts new file mode 100644 index 000000000..6155e9378 --- /dev/null +++ b/src/app/utils/linkify.ts @@ -0,0 +1,5 @@ +// eslint-disable-next-line no-useless-escape +const LINK_DETECTION_REGEX = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi; + +export default (text: string) => + text.replace(LINK_DETECTION_REGEX, url => `${url}`); diff --git a/src/components/organisms/NoticePreview.tsx b/src/components/organisms/NoticePreview.tsx index 6f765513a..c080becc0 100644 --- a/src/components/organisms/NoticePreview.tsx +++ b/src/components/organisms/NoticePreview.tsx @@ -9,6 +9,7 @@ import Message from './NoticeDetails/Message'; import Date from './NoticeDetails/Date'; import { Contribution } from 'app/lmem/notice'; import Avatar from 'components/molecules/Avatar/Avatar'; +import linkify from 'app/utils/linkify'; const DetailsMetaValue = styled.div` margin-left: 10px; @@ -35,7 +36,7 @@ class NoticePreview extends PureComponent { - {message} + {linkify(message)} {children}