diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx
index 2e1550078f..9c08b83c40 100644
--- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx
+++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx
@@ -62,4 +62,42 @@ describe('', () => {
expect(fp2).toBeInTheDocument();
expect(rendered.getByText(');', { selector: 'span' })).toBeInTheDocument();
});
+
+ it('render MarkdownContent component with transformed link', async () => {
+ const rendered = await renderWithEffects(
+ wrapInTestApp(
+ {
+ return `${href}-modified`;
+ }}
+ />,
+ ),
+ );
+ const fp1 = rendered.getByText('Title', {
+ selector: 'a',
+ });
+ expect(fp1).toBeInTheDocument();
+ expect(fp1.getAttribute('href')).toEqual(
+ 'https://backstage.io/link-modified',
+ );
+ });
+
+ it('render MarkdownContent component with transformed image', async () => {
+ const rendered = await renderWithEffects(
+ wrapInTestApp(
+ {
+ return `https://example.com/blog/assets/6/header.png`;
+ }}
+ />,
+ ),
+ );
+ const fp1 = rendered.getByAltText('Image');
+ expect(fp1).toBeInTheDocument();
+ expect(fp1.getAttribute('src')).toEqual(
+ 'https://example.com/blog/assets/6/header.png',
+ );
+ });
});
diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
index df4ad56776..4059482b79 100644
--- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
+++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
@@ -68,6 +68,8 @@ type Props = {
content: string;
dialect?: 'gfm' | 'common-mark';
linkTarget?: Options['linkTarget'];
+ transformLinkUri?: Options['transformLinkUri'];
+ transformImageUri?: Options['transformImageUri'];
};
const components: Options['components'] = {
@@ -91,7 +93,13 @@ const components: Options['components'] = {
* If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'`
*/
export function MarkdownContent(props: Props) {
- const { content, dialect = 'gfm', linkTarget } = props;
+ const {
+ content,
+ dialect = 'gfm',
+ linkTarget,
+ transformLinkUri,
+ transformImageUri,
+ } = props;
const classes = useStyles();
return (
);
}