From 50fcb2db2503bde5aea820c48d161afbdcf3ddcf Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io> Date: Tue, 10 Sep 2024 10:40:11 +0200 Subject: [PATCH 1/2] fix: avoid prepending http before native supported url schemes --- .../src/components/Message/MessageSimple/utils/renderText.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package/src/components/Message/MessageSimple/utils/renderText.tsx b/package/src/components/Message/MessageSimple/utils/renderText.tsx index 5096ea0390..7d4f12a7c9 100644 --- a/package/src/components/Message/MessageSimple/utils/renderText.tsx +++ b/package/src/components/Message/MessageSimple/utils/renderText.tsx @@ -133,7 +133,8 @@ export const renderText = < }; const onLink = (url: string) => { - const pattern = new RegExp(/^\S+:\/\//); + // Matching these: https://reactnative.dev/docs/0.73/linking?syntax=ios#built-in-url-schemes + const pattern = new RegExp(/^(mailto:|tel:|sms:|\S+:\/\/)/); if (!pattern.test(url)) { url = 'http://' + url; } From b1f418f3fbbcda7558c0234545caba87b277af7b Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io> Date: Tue, 10 Sep 2024 12:00:15 +0200 Subject: [PATCH 2/2] fix: move check to link parsing module --- .../MessageSimple/utils/parseLinks.test.ts | 1 + .../Message/MessageSimple/utils/parseLinks.ts | 17 +++++++++++++---- .../Message/MessageSimple/utils/renderText.tsx | 11 ++--------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts b/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts index 7b32e22df5..b038b0fc47 100644 --- a/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts +++ b/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts @@ -31,6 +31,7 @@ describe('parseLinksFromText', () => { ['[https://www.google.com](https://www.google.com)', undefined], ['[abc]()', undefined], ['[](https://www.google.com)', undefined], + ['slack:some-slack', undefined], ])('Returns the encoded value of %p as %p', (link, expected) => { const result = parseLinksFromText(link); expect(result[0]?.url).toBe(expected); diff --git a/package/src/components/Message/MessageSimple/utils/parseLinks.ts b/package/src/components/Message/MessageSimple/utils/parseLinks.ts index 7713d5f8ce..1438ed2f69 100644 --- a/package/src/components/Message/MessageSimple/utils/parseLinks.ts +++ b/package/src/components/Message/MessageSimple/utils/parseLinks.ts @@ -26,10 +26,19 @@ export const parseLinksFromText = (input: string): LinkInfo[] => { const links = find(strippedInput, 'url'); const emails = find(strippedInput, 'email'); - const result: LinkInfo[] = [...links, ...emails].map(({ href, value }) => ({ - raw: value, - url: href, - })); + const result: LinkInfo[] = [...links, ...emails].map(({ href, value }) => { + let hrefWithProtocol = href; + // Matching these: https://reactnative.dev/docs/0.73/linking?syntax=ios#built-in-url-schemes + const pattern = new RegExp(/^(mailto:|tel:|sms:|\S+:\/\/)/); + if (!pattern.test(hrefWithProtocol)) { + hrefWithProtocol = 'http://' + hrefWithProtocol; + } + + return { + raw: value, + url: hrefWithProtocol, + }; + }); return result; }; diff --git a/package/src/components/Message/MessageSimple/utils/renderText.tsx b/package/src/components/Message/MessageSimple/utils/renderText.tsx index 7d4f12a7c9..24a52eadb7 100644 --- a/package/src/components/Message/MessageSimple/utils/renderText.tsx +++ b/package/src/components/Message/MessageSimple/utils/renderText.tsx @@ -132,17 +132,10 @@ export const renderText = < }, }; - const onLink = (url: string) => { - // Matching these: https://reactnative.dev/docs/0.73/linking?syntax=ios#built-in-url-schemes - const pattern = new RegExp(/^(mailto:|tel:|sms:|\S+:\/\/)/); - if (!pattern.test(url)) { - url = 'http://' + url; - } - - return onLinkParams + const onLink = (url: string) => + onLinkParams ? onLinkParams(url) : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url)); - }; let previousLink: string | undefined; const linkReact: ReactNodeOutput = (node, output, { ...state }) => {