From d19e098222645e15693f2f5eb26288150dc1be7d Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Tue, 12 Dec 2023 13:51:15 +0530 Subject: [PATCH 1/2] fix: decode URI while opening --- .../Message/MessageSimple/utils/generateMarkdownText.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts b/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts index 964b0d02dd..fd21e11f4c 100644 --- a/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts +++ b/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts @@ -21,16 +21,17 @@ export const generateMarkdownText = (text?: string) => { length: 200, omission: '...', }); + const decodedURL = decodeURI(linkInfo.encodedUrl); // Convert raw links/emails in the text to respective markdown syntax. // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io). const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g'); - const markdown = `[${displayLink}](${linkInfo.encodedUrl})`; + const markdown = `[${displayLink}](${decodedURL})`; resultText = text.replace(normalRegEx, markdown); // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text. // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com. const mentionsRegex = new RegExp( - `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.encodedUrl)}\\)`, + `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(decodedURL)}\\)`, 'g', ); resultText = resultText.replace(mentionsRegex, `@${displayLink}`); From 799a0324ea39f508cee577b0abfd2255c08674a1 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Tue, 12 Dec 2023 16:41:39 +0530 Subject: [PATCH 2/2] fix: remove url encoding --- .../MessageSimple/utils/generateMarkdownText.ts | 5 ++--- .../MessageSimple/utils/parseLinks.test.ts | 17 ++++++----------- .../Message/MessageSimple/utils/parseLinks.ts | 4 ++-- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts b/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts index fd21e11f4c..91fb1010fd 100644 --- a/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts +++ b/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts @@ -21,17 +21,16 @@ export const generateMarkdownText = (text?: string) => { length: 200, omission: '...', }); - const decodedURL = decodeURI(linkInfo.encodedUrl); // Convert raw links/emails in the text to respective markdown syntax. // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io). const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g'); - const markdown = `[${displayLink}](${decodedURL})`; + const markdown = `[${displayLink}](${linkInfo.url})`; resultText = text.replace(normalRegEx, markdown); // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text. // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com. const mentionsRegex = new RegExp( - `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(decodedURL)}\\)`, + `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.url)}\\)`, 'g', ); resultText = resultText.replace(mentionsRegex, `@${displayLink}`); diff --git a/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts b/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts index 05f1fc8593..b611f16b3c 100644 --- a/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts +++ b/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts @@ -16,10 +16,7 @@ describe('parseLinksFromText', () => { ], ['reactnative.dev', 'http://reactnative.dev'], ['hinge.health/schedule-with-a-coach', 'http://hinge.health/schedule-with-a-coach'], - [ - 'https://zh.wikipedia.org/wiki/挪威牛油危機', - 'https://zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F', - ], + ['https://zh.wikipedia.org/wiki/挪威牛油危機', 'https://zh.wikipedia.org/wiki/挪威牛油危機'], [ 'https://getstream.io/chat/docs/react-native/?language=javascript', 'https://getstream.io/chat/docs/react-native/?language=javascript', @@ -32,7 +29,7 @@ describe('parseLinksFromText', () => { ], ])('Returns the encoded value of %p as %p', (link, expected) => { const result = parseLinksFromText(link); - expect(result[0]?.encodedUrl).toBe(expected); + expect(result[0]?.url).toBe(expected); }); it('parses fqdn', () => { const input = `We have put the apim bol, @@ -43,9 +40,8 @@ describe('parseLinksFromText', () => { const result = parseLinksFromText(input); expect(result).toEqual([ { - encodedUrl: - 'https://www.contrived-example.com:8080/sub/page.php?p1=1%F0%9F%87%B3%F0%9F%87%B4&p2=2#fragment-identifier', raw: 'https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier', + url: 'https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier', }, ]); }); @@ -56,15 +52,15 @@ describe('parseLinksFromText', () => { ['support_rn@getstream.io'], ])('Can parse the email address %p', (email) => { const result = parseLinksFromText(email); - expect(result[0].encodedUrl).toBe('mailto:' + email); + expect(result[0].url).toBe('mailto:' + email); expect(result[0].raw).toBe(email); }); it("doesn't double the mailto prefix", () => { const input = 'mailto:support@getstream.io'; const result = parseLinksFromText(input); expect(result[0]).toEqual({ - encodedUrl: input, raw: input, + url: input, }); }); it('Does not falsely parse LINKs from text content', () => { @@ -77,15 +73,14 @@ describe('parseLinksFromText', () => { getstream.io `; const result = parseLinksFromText(input); - console.log({ result }); expect(result).toHaveLength(2); }); it('Encodes incomplete emoji unicode', () => { const input = 'https://getstream.io/�'; const result = parseLinksFromText(input); expect(result[0]).toEqual({ - encodedUrl: 'https://getstream.io/%EF%BF%BD', raw: input, + url: 'https://getstream.io/�', }); }); }); diff --git a/package/src/components/Message/MessageSimple/utils/parseLinks.ts b/package/src/components/Message/MessageSimple/utils/parseLinks.ts index f355718b38..fd09d5d653 100644 --- a/package/src/components/Message/MessageSimple/utils/parseLinks.ts +++ b/package/src/components/Message/MessageSimple/utils/parseLinks.ts @@ -1,8 +1,8 @@ import { find } from 'linkifyjs'; interface LinkInfo { - encodedUrl: string; raw: string; + url: string; } /** @@ -27,8 +27,8 @@ export const parseLinksFromText = (input: string): LinkInfo[] => { const emails = find(strippedInput, 'email'); const result: LinkInfo[] = [...links, ...emails].map(({ href, value }) => ({ - encodedUrl: encodeURI(href), raw: value, + url: href, })); return result;