Merge pull request #366 from Expensify/amechler-email-link

Fix smart quotes and emails in links
Expensify · May 10, 2021 · 2e5cff5 · 2e5cff5
2 parents 05b8a00 + eb62b0a
commit 2e5cff5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/__tests__/ExpensiMark-test.js b/__tests__/ExpensiMark-test.js
@@ -53,7 +53,9 @@ test('Test critical markdown style links', () => {
     + '[third no https://](github.com/Expensify/Expensify.cash/issues/123#:~:text=Please%20work/Expensify.cash) '
     + '[link `[inside another link](https://google.com)`](https://google.com) '
     + '[link with an @ in it](https://google.com) '
-    + '[link with [brackets] inside of it](https://google.com)';
+    + '[link with [brackets] inside of it](https://google.com) '
+    + '[link with smart quotes ‘’“”](https://google.com) '
+    + '[link with someone@expensify.com email in it](https://google.com)';
     const resultString = 'Testing '
     + '<a href="https://www.expensify.com/_devportal/tools/logSearch/#query=request_id:(%22Ufjjim%22)+AND+timestamp:[2021-01-08T03:48:10.389Z+TO+2021-01-08T05:48:10.389Z]&amp;index=logs_expensify-008878" target="_blank">first</a> '
     + '<a href="http://www.expensify.com/_devportal/tools/logSearch/#query=request_id:(%22Ufjjim%22)+AND+timestamp:[2021-01-08T03:48:10.389Z+TO+2021-01-08T05:48:10.389Z]&amp;index=logs_expensify-008878" target="_blank">first no https://</a> '
@@ -63,7 +65,9 @@ test('Test critical markdown style links', () => {
     + '<a href="http://github.com/Expensify/Expensify.cash/issues/123#:~:text=Please%20work/Expensify.cash" target="_blank">third no https://</a> '
     + '<a href="https://google.com" target="_blank">link <code>[inside another link](https://google.com)</code></a> '
     + '<a href="https://google.com" target="_blank">link with an @ in it</a> '
-    + '<a href="https://google.com" target="_blank">link with [brackets] inside of it</a>';
+    + '<a href="https://google.com" target="_blank">link with [brackets] inside of it</a> '
+    + '<a href="https://google.com" target="_blank">link with smart quotes ‘’“”</a> '
+    + '<a href="https://google.com" target="_blank">link with someone@expensify.com email in it</a>';
     expect(parser.replace(testString)).toBe(resultString);
 });
 

diff --git a/lib/ExpensiMark.js b/lib/ExpensiMark.js
@@ -53,19 +53,14 @@ export default class ExpensiMark {
 
             /**
              * Converts markdown style links to anchor tags e.g. [Expensify](concierge@expensify.com)
-             * We need to convert before the auto email link rule since it will not try to create a link
+             * We need to convert before the auto email link rule and the manual link rule since it will not try to create a link
              * from an existing anchor tag.
              */
             {
                 name: 'email',
                 regex: /\[([\w\\s\\d!?&#;]+)\]\(([a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z]+?(\.[a-zA-Z]{2,6})+)\)/gim,
                 replacement: '<a href="mailto:$2">$1</a>'
             },
-            {
-                name: 'autoEmail',
-                regex: /(?![^<]*>|[^<>]*<\\)([_*~]*?)([a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z]+?(\.[a-zA-Z]{2,6})+)(?![^<]*(<\\pre>|<\\code>))/gim,
-                replacement: '<a href="mailto:$2">$2</a>'
-            },
 
             /**
              * Converts markdown style links to anchor tags e.g. [Expensify](https://www.expensify.com)
@@ -77,7 +72,7 @@ export default class ExpensiMark {
 
                 process: (textToProcess, replacement) => {
                     const regex = new RegExp(
-                        `\\[((?:[\\w\\s\\d!?&#;:\\/\\-\\.\\+=<>,@\\[\\]]|(?:<code>.+<\\/code>))+)\\]\\(${URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`,
+                        `\\[((?:[\\w\\s\\d!?&#;:\\/\\-\\.\\+=<>,@\\[\\]‘’“”]|(?:<code>.+<\\/code>))+)\\]\\(${URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`,
                         'gi'
                     );
                     return this.modifyTextForUrlLinks(regex, textToProcess, replacement);
@@ -89,6 +84,21 @@ export default class ExpensiMark {
                     `<a href="${g3 && g3.includes('http') ? '' : 'http://'}${g2}" target="_blank">${g1}</a>`
                 ),
             },
+
+            /**
+             * Automatically links emails that are not in a link. Runs before the autolinker as it will not link an
+             * email that is in a link
+             */
+            {
+                name: 'autoEmail',
+                regex: /(?![^<]*>|[^<>]*<\\)([_*~]*?)([a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z]+?(\.[a-zA-Z]{2,6})+)(?![^<]*(<\/pre>|<\/code>|<\/a>))/gim,
+                replacement: '<a href="mailto:$2">$2</a>'
+            },
+
+            /**
+             * Automatically link urls. Runs last of our linkers since we want anything manual to link before this,
+             * and we do not want to break emails.
+             */
             {
                 name: 'autolink',