diff --git a/.changeset/cool-toys-flow.md b/.changeset/cool-toys-flow.md
new file mode 100644
index 0000000000..799bf3ace4
--- /dev/null
+++ b/.changeset/cool-toys-flow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Add `transformLinkUri` and `transformImageUri` to `MarkdownContent`
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..0e5aedda90 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?: (href: string) => string;
+ transformImageUri?: (href: string) => string;
};
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 (
);
}