Add support for inline image Markdown

__tests__/ExpensiMark-HTML-test.js

@@ -1879,3 +1879,59 @@ describe('multi-level blockquote', () => {
         expect(parser.replace(quoteTestStartString)).toBe(quoteTestReplacedString);
     });
 });
+
+describe('Image markdown conversion to html tag', () => {
+    test('Single image', () => {
+        const testString = '![test](https://example.com/image.png)';
+        const resultString = '<img src="https://example.com/image.png" alt="test" />';
+        expect(parser.replace(testString)).toBe(resultString);
+    });
+
+    test('Text containing images', () => {
+        const testString = 'An image of a banana: ![banana](https://example.com/banana.png) an image of a developer: ![dev](https://example.com/developer.png)';
+        const resultString = 'An image of a banana: <img src="https://example.com/banana.png" alt="banana" /> an image of a developer: <img src="https://example.com/developer.png" alt="dev" />';
+        expect(parser.replace(testString)).toBe(resultString);
+    });
+
+    // Currently any markdown used inside the square brackets is converted to html string in the alt attribute
+    // The attributes should only contain plain text, but it doesn't seem possible to convert markdown to plain text
+    // or let the parser know not to convert markdown to html for html attributes
+    xtest('Image with alt text containing markdown', () => {
+        const testString = '![*bold* _italic_ ~strike~](https://example.com/image.png)';
+        const resultString = '<img src="https://example.com/image.png" alt="*bold* _italic_ ~strike~" />';
+        expect(parser.replace(testString)).toBe(resultString);
+    });
+
+    test('Text containing image and autolink', () => {
+        const testString = 'An image of a banana: ![banana](https://example.com/banana.png) an autolink: example.com';
+        const resultString = 'An image of a banana: <img src="https://example.com/banana.png" alt="banana" /> an autolink: <a href="https://example.com" target="_blank" rel="noreferrer noopener">example.com</a>';
+        expect(parser.replace(testString)).toBe(resultString);
+    });
+
+    test('Image with raw data attributes', () => {
+        const testString = '![test](https://example.com/image.png)';
+        const resultString = '<img src="https://example.com/image.png" alt="test" data-raw-href="https://example.com/image.png" data-link-variant="labeled" />';
+        expect(parser.replace(testString, {shouldKeepRawInput: true})).toBe(resultString);
+    });
+
+    test('Image with invalid url should remain unchanged', () => {
+        const testString = '![test](invalid)';
+        expect(parser.replace(testString)).toBe(testString);
+    });
+
+    test('Trying to pass additional attributes should not create an <img>', () => {
+        const testString = '![test](https://example.com/image.png "title" class="image")';
+
+        // It seems the autolink rule is applied. We might need to update this test if the  autolink rule is changed
+        // Ideally this test should return the same string as the input, or an <img> tag with the alt attribute set to
+        // "test" and no other attributes
+        const resultString = '![test](<a href=\"https://example.com/image.png\" target=\"_blank\" rel=\"noreferrer noopener\">https://example.com/image.png</a> &quot;title&quot; class=&quot;image&quot;)';
+        expect(parser.replace(testString)).toBe(resultString);
+    });
+
+    test('Trying to inject additional attributes should not work', () => {
+        const testString = '![test" onerror="alert(\'xss\')](https://example.com/image.png)';
+        const resultString = '<img src=\"https://example.com/image.png\" alt=\"test&quot; onerror=&quot;alert(&#x27;xss&#x27;)\" />';
+        expect(parser.replace(testString)).toBe(resultString);
+    });
+});

__tests__/ExpensiMark-HTMLToText-test.js

@@ -146,3 +146,8 @@ test('Mention html to text', () => {
     testString = '<mention-user>@user@DOMAIN.com</mention-user>';
     expect(parser.htmlToText(testString)).toBe('@user@DOMAIN.com');
 });
+
+test('Test replacement for <img> tags', () => {
+    const testString = '<img src="https://example.com/image.png" alt="Image description" />';
+    expect(parser.htmlToText(testString)).toBe('(image of: Image description)');
+});

__tests__/ExpensiMark-Markdown-test.js

@@ -756,3 +756,17 @@ test('Mention html to markdown', () => {
     testString = '<mention-user>@user@DOMAIN.com</mention-user>';
     expect(parser.htmlToMarkdown(testString)).toBe('@user@DOMAIN.com');
 });
+
+describe('Image tag conversion to markdown', () => {
+   test('Image with alt attribute', () => {
+         const testString = '<img src="https://example.com/image.png" alt="image" />';
+         const resultString = '![image](https://example.com/image.png)';
+         expect(parser.htmlToMarkdown(testString)).toBe(resultString);
+   });
+
+   test('Image without alt attribute', () => {
+        const testString = '<img src="https://example.com/image.png" />';
+        const resultString = '![https://example.com/image.png](https://example.com/image.png)';
+        expect(parser.htmlToMarkdown(testString)).toBe(resultString);
+   });
+});

lib/ExpensiMark.js

@@ -3,7 +3,9 @@
 import {MARKDOWN_URL_REGEX, LOOSE_URL_REGEX, URL_REGEX} from './Url';
 import {CONST} from './CONST';
 
-const MARKDOWN_LINK_REGEX = new RegExp(`\\[([^\\][]*(?:\\[[^\\][]*][^\\][]*)*)]\\(${MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');
+const MARKDOWN_LINK = `\\[([^\\][]*(?:\\[[^\\][]*][^\\][]*)*)]\\(${MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`;
+const MARKDOWN_LINK_REGEX = new RegExp(MARKDOWN_LINK, 'gi');
+const MARKDOWN_IMAGE_REGEX = new RegExp(`\\!${MARKDOWN_LINK}`, 'gi');
 
 const SLACK_SPAN_NEW_LINE_TAG = '<span class="c-mrkdwn__br" data-stringify-type="paragraph-break" style="box-sizing: inherit; display: block; height: unset;"></span>';
 
@@ -67,8 +69,8 @@
 
             /**
              * Converts markdown style links to anchor tags e.g. [Expensify](concierge@expensify.com)
-             * 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.
+             * 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',
@@ -107,6 +109,18 @@
                 replacement: '<h1>$1</h1>',
             },
 
+            /**
+             * Converts markdown style images to img tags e.g. ![Expensify](https://www.expensify.com/attachment.png)
+             * We need to convert before linking rules since they will not try to create a link from an existing img
+             * tag.
+             */
+            {
+                name: 'image',
+                regex: MARKDOWN_IMAGE_REGEX,
+                replacement: (match, g1, g2) => `<img src="${Str.sanitizeURL(g2)}" alt="${g1}" />`,
+                rawInputReplacement: (match, g1, g2) => `<img src="${Str.sanitizeURL(g2)}" alt="${g1}" data-raw-href="${g2}" data-link-variant="labeled" />`
+            },
+
             /**
              * Converts markdown style links to anchor tags e.g. [Expensify](https://www.expensify.com)
              * We need to convert before the autolink rule since it will not try to create a link
@@ -115,7 +129,6 @@
             {
                 name: 'link',
                 process: (textToProcess, replacement) => this.modifyTextForUrlLinks(MARKDOWN_LINK_REGEX, textToProcess, replacement),
-
                 replacement: (match, g1, g2) => {
                     if (g1.match(CONST.REG_EXP.EMOJIS) || !g1.trim()) {
                         return match;
@@ -132,13 +145,14 @@
 
             /**
              * Apply the hereMention first because the string @here is still a valid mention for the userMention regex.
-             * This ensures that the hereMention is always considered first, even if it is followed by a valid userMention.
+             * This ensures that the hereMention is always considered first, even if it is followed by a valid
+             * userMention.
              *
              * Also, apply the mention rule after email/link to prevent mention appears in an email/link.
              */
             {
                 name: 'hereMentions',
                 regex: /([a-zA-Z0-9.!$%&+/=?^`{|}_-]?)(@here)([.!$%&+/=?^`{|}_-]?)(?=\b)(?!([\w'#%+-]*@(?:[a-z\d-]+\.)+[a-z]{2,}(?:\s|$|@here))|((?:(?!<a).)+)?<\/a>|[^<]*(<\/pre>|<\/code>))/gm,
                 replacement: (match, g1, g2, g3) => {
                     if (!Str.isValidMention(match)) {
                         return match;
@@ -149,10 +163,12 @@
 
             /**
              * This regex matches a valid user mention in a string.
-             * A user mention is a string that starts with the '@' symbol and is followed by a valid user's primary login
+             * A user mention is a string that starts with the '@' symbol and is followed by a valid user's primary
+             * login
              *
-             * Note: currently we are only allowing mentions in a format of @+19728974297 (E.164 format phone number) and @username@example.com
-             * The username can contain any combination of alphanumeric letters, numbers, and underscores
+             * Note: currently we are only allowing mentions in a format of @+19728974297 (E.164 format phone number)
+             * and @username@example.com The username can contain any combination of alphanumeric letters, numbers, and
+             * underscores
              */
             {
                 name: 'userMentions',
@@ -414,6 +430,11 @@
                     return `[${g4}](${email || g3})`;
                 },
             },
+            {
+                name: 'image',
+                regex: /<img[^><]*src\s*=\s*(['"])(.*?)\1(?:[^><]*alt\s*=\s*(['"])(.*?)\3)?[^><]*>*(?![^<][\s\S]*?(<\/pre>|<\/code>))/gi,
+                replacement: (match, g1, g2, g3, g4) => `![${g4 || g2}](${g2})`
+            }
         ];
 
         /**
@@ -452,6 +473,11 @@
                 regex: /<style>.*?<\/style>/gi,
                 replacement: '',
             },
+            {
+                name: 'image',
+                regex: /<img[^><]*src\s*=\s*(['"])(.*?)\1(?:[^><]*alt\s*=\s*(['"])(.*?)\3)?[^><]*>*(?![^<][\s\S]*?(<\/pre>|<\/code>))/gi,
+                replacement: '(image of: $4)',
+            },
             {
                 name: 'stripTag',
                 regex: /(<([^>]+)>)/gi,