diff --git a/.changeset/pretty-otters-report.md b/.changeset/pretty-otters-report.md new file mode 100644 index 00000000..484ff8f5 --- /dev/null +++ b/.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 diff --git a/packages/plugins/src/DocumentAssetsPlugin.ts b/packages/plugins/src/DocumentAssetsPlugin.ts index aca1f715..88a2d338 100644 --- a/packages/plugins/src/DocumentAssetsPlugin.ts +++ b/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 = { const processor = unified() .use(remarkParse) + .use(remarkMdx) .use(remarkRewriteImagePaths, path.join(imagesPrefix, page.route)) .use(remarkStringify); await processor diff --git a/packages/plugins/src/__tests__/DocumentAssetsPlugin.test.ts b/packages/plugins/src/__tests__/DocumentAssetsPlugin.test.ts index 53743dc6..17c50952 100644 --- a/packages/plugins/src/__tests__/DocumentAssetsPlugin.test.ts +++ b/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\nSome 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\nSome Text\n` + ); }); }); });