fix: DocumentAssetsPlugin was escaping JSX, assuming it was un-safe h…

…tml (#671)

.changeset/pretty-otters-report.md

@@ -0,0 +1,7 @@
+---
+'@jpmorganchase/mosaic-plugins': patch
+---
+
+added `remark-mdx` to `DocumentAssetsPlugin`
+
+when parsing JSX, it was escaping JSX elements it considered un-safe, because it thought they were html

packages/plugins/src/DocumentAssetsPlugin.ts

@@ -6,6 +6,7 @@ import { escapeRegExp } from 'lodash-es';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 import remarkParse from 'remark-parse';
+import remarkMdx from 'remark-mdx';
 import remarkStringify from 'remark-stringify';
 import { VFile } from 'vfile';
 
@@ -165,6 +166,7 @@ const DocumentAssetsPlugin: PluginType<Page, DocumentAssetsPluginOptions> = {
 
       const processor = unified()
         .use(remarkParse)
+        .use(remarkMdx)
         .use(remarkRewriteImagePaths, path.join(imagesPrefix, page.route))
         .use(remarkStringify);
       await processor

packages/plugins/src/__tests__/DocumentAssetsPlugin.test.ts

@@ -5,7 +5,7 @@ import mockFs from 'mock-fs';
 import path from 'path';
 import DocumentAssetsPlugin from '../DocumentAssetsPlugin';
 
-describe('GIVEN the LocalImagePlugin', () => {
+describe('GIVEN the DocumentAssetsPlugin', () => {
   describe('afterUpdate', () => {
     const srcDir = './src';
     const outputDir = './public';
@@ -126,6 +126,12 @@ describe('GIVEN the LocalImagePlugin', () => {
         fullPath: '/path/to/page7.mdx',
         route: '/namespace/page7',
         content: '![alt text](https://www.saltdesignsystem.com/img/hero_image.svg)'
+      },
+      // MDX with both image and JSX element - JSX should not be changed
+      {
+        fullPath: '/path/to/page8.mdx',
+        route: '/namespace/page8',
+        content: '![alt text](./images/image8.png)\n\n<Text>Some Text</Text>'
       }
     ];
     const ignorePages = ['/path/to/ignore.mdx'];
@@ -153,7 +159,7 @@ describe('GIVEN the LocalImagePlugin', () => {
         { ignorePages, pageExtensions },
         { srcDir, outputDir }
       );
-      expect(result.length).toEqual(7);
+      expect(result.length).toEqual(8);
       expect(result[0].content).toBe('![alt text](/images/namespace/subdir1/images/image1.png)\n');
       expect(result[1].content).toBe('![alt text](/images/namespace/subdir1/images/image2.png)\n');
       expect(result[2].content).toBe('![alt text](/images/namespace/images/image3.jpg)\n');
@@ -163,6 +169,9 @@ describe('GIVEN the LocalImagePlugin', () => {
       expect(result[6].content).toBe(
         '![alt text](https://www.saltdesignsystem.com/img/hero_image.svg)\n'
       );
+      expect(result[7].content).toBe(
+        `![alt text](/images/namespace/images/image8.png)\n\n<Text>Some Text</Text>\n`
+      );
     });
   });
 });