Fixed img alt handling in ExpensiMark.ts,

Renamed cacheMediaAttributes to mediaAttributeCachingFn for clarity
Expensify · Sep 26, 2024 · ab72e49 · ab72e49
1 parent 210bad3
commit ab72e49
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/__tests__/ExpensiMark-HTML-test.js b/__tests__/ExpensiMark-HTML-test.js
@@ -2221,7 +2221,7 @@ describe('Image markdown conversion to html tag', () => {
         expect(parser.replace(testString, {shouldKeepRawInput: true})).toBe(resultString);
     });
 
-    test('Single image with extra cached attribues', () => {
+    test('Single image with extra cached attributes', () => {
         const testString = '![test](https://example.com/image.jpg)';
         const resultString = '<img src="https://example.com/image.jpg" alt="test" data-expensify-height="100" data-expensify-width="100"/>';
         expect(parser.replace(testString, {

diff --git a/__tests__/ExpensiMark-Markdown-test.js b/__tests__/ExpensiMark-Markdown-test.js
@@ -868,15 +868,26 @@ describe('Image tag conversion to markdown', () => {
         expect(parser.htmlToMarkdown(testString)).toBe(resultString);
     });
 
-    test('Cache extra attributes for img', () => {
-        const cacheMediaAttributes = jest.fn();
+    test('Cache extra attributes for img with alt', () => {
+        const mediaAttributeCachingFn = jest.fn();
         const testString = '<img src="https://example.com/image.png" alt="altText" data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source" />';
         const resultString = '![altText](https://example.com/image.png)';
         const extras = {
-            cacheMediaAttributes,
+            mediaAttributeCachingFn,
         };
         expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
-        expect(cacheMediaAttributes).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
+        expect(mediaAttributeCachingFn).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
+    });
+
+    test('Cache extra attributes for img without alt', () => {
+        const mediaAttributeCachingFn = jest.fn();
+        const testString = '<img src="https://example.com/image.png" data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source" />';
+        const resultString = '!(https://example.com/image.png)';
+        const extras = {
+            mediaAttributeCachingFn,
+        };
+        expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
+        expect(mediaAttributeCachingFn).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
     });
 
 });
@@ -895,14 +906,14 @@ describe('Video tag conversion to markdown', () => {
     })
 
     test('While convert video, cache some extra attributes from the video tag', () => {
-        const cacheMediaAttributes = jest.fn();
+        const mediaAttributeCachingFn = jest.fn();
         const testString = '<video data-expensify-source="https://example.com/video.mp4" data-expensify-width="100" data-expensify-height="500" data-expensify-thumbnail-url="https://image.com/img.jpg">video</video>';
         const resultString = '![video](https://example.com/video.mp4)';
         const extras = {
-            cacheMediaAttributes,
+            mediaAttributeCachingFn,
         };
         expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
-        expect(cacheMediaAttributes).toHaveBeenCalledWith("https://example.com/video.mp4", ' data-expensify-width="100" data-expensify-height="500" data-expensify-thumbnail-url="https://image.com/img.jpg"')
+        expect(mediaAttributeCachingFn).toHaveBeenCalledWith("https://example.com/video.mp4", ' data-expensify-width="100" data-expensify-height="500" data-expensify-thumbnail-url="https://image.com/img.jpg"')
     })
 })
 

diff --git a/lib/ExpensiMark.ts b/lib/ExpensiMark.ts
@@ -9,7 +9,7 @@ import * as Utils from './utils';
 type Extras = {
     reportIDToName?: Record<string, string>;
     accountIDToName?: Record<string, string>;
-    cacheMediaAttributes?: (mediaSource: string, attrs: string) => void;
+    mediaAttributeCachingFn?: (mediaSource: string, attrs: string) => void;
     mediaAttributeCache?: Record<string, string>;
 };
 const EXTRAS_DEFAULT = {};
@@ -677,17 +677,17 @@ export default class ExpensiMark {
                     let altText = '';
                     const altRegex = /alt\s*=\s*(['"])(.*?)\1/i;
                     const altMatch = imgAttrs.match(altRegex);
-                    let attributes = '';
+                    let attributes = imgAttrs;
                     if (altMatch) {
                         altText = altMatch[2];
                         // Remove the alt attribute from imgAttrs
-                        attributes = imgAttrs.replace(altRegex, '');
+                        attributes = attributes.replace(altRegex, '');
                     }
                     // Remove trailing slash and extra whitespace
                     attributes = attributes.replace(/\s*\/\s*$/, '').trim();
                     // Cache attributes without alt and trailing slash
-                    if (imgAttrs && extras && extras.cacheMediaAttributes && typeof extras.cacheMediaAttributes === 'function') {
-                        extras.cacheMediaAttributes(imgSource, attributes);
+                    if (imgAttrs && extras && extras.mediaAttributeCachingFn && typeof extras.mediaAttributeCachingFn === 'function') {
+                        extras.mediaAttributeCachingFn(imgSource, attributes);
                     }
                     // Return the markdown image tag
                     if (altText) {
@@ -710,8 +710,8 @@ export default class ExpensiMark {
                  * @returns The markdown video tag
                  */
                 replacement: (extras, _match, _g1, videoSource, videoAttrs, videoName) => {
-                    if (videoAttrs && extras && extras.cacheMediaAttributes && typeof extras.cacheMediaAttributes === 'function') {
-                        extras.cacheMediaAttributes(videoSource, videoAttrs);
+                    if (videoAttrs && extras && extras.mediaAttributeCachingFn && typeof extras.mediaAttributeCachingFn === 'function') {
+                        extras.mediaAttributeCachingFn(videoSource, videoAttrs);
                     }
                     if (videoName) {
                         return `![${videoName}](${videoSource})`;