From ab72e49a0e4a1920fa979db28020b96a2b2aed24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jasikowski?= Date: Thu, 26 Sep 2024 09:36:37 +0200 Subject: [PATCH] Fixed img alt handling in ExpensiMark.ts, Renamed cacheMediaAttributes to mediaAttributeCachingFn for clarity --- __tests__/ExpensiMark-HTML-test.js | 2 +- __tests__/ExpensiMark-Markdown-test.js | 25 ++++++++++++++++++------- lib/ExpensiMark.ts | 14 +++++++------- 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/__tests__/ExpensiMark-HTML-test.js b/__tests__/ExpensiMark-HTML-test.js index 32ca9e03..8ae98224 100644 --- 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 = 'test'; expect(parser.replace(testString, { diff --git a/__tests__/ExpensiMark-Markdown-test.js b/__tests__/ExpensiMark-Markdown-test.js index 9199ca7d..143dab9d 100644 --- 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 = 'altText'; 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 = ''; + 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 = ''; 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 index b6942ba9..3b410f4e 100644 --- a/lib/ExpensiMark.ts +++ b/lib/ExpensiMark.ts @@ -9,7 +9,7 @@ import * as Utils from './utils'; type Extras = { reportIDToName?: Record; accountIDToName?: Record; - cacheMediaAttributes?: (mediaSource: string, attrs: string) => void; + mediaAttributeCachingFn?: (mediaSource: string, attrs: string) => void; mediaAttributeCache?: Record; }; 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})`;