From 9d8ec897eb3a7f64153513983d5ed69c96ba32a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=B4me=20Tresarrieu?= Date: Thu, 16 Jun 2022 20:22:27 +0200 Subject: [PATCH 1/5] feat(MarkdownContent): Expose `transformLinkUri` and `transformImageUri` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Côme Tresarrieu --- .../MarkdownContent/MarkdownContent.test.tsx | 38 +++++++++++++++++++ .../MarkdownContent/MarkdownContent.tsx | 12 +++++- 2 files changed, 49 insertions(+), 1 deletion(-) 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 ( ); } From 32204fa79454a1ef5907b6cd5616e022a14b335b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=B4me=20Tresarrieu?= Date: Thu, 16 Jun 2022 20:23:14 +0200 Subject: [PATCH 2/5] chore: add changeset file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Côme Tresarrieu --- .changeset/cool-toys-flow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cool-toys-flow.md 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` From 411e8e60819013fbcf847ded2be8d577abf4fc12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=B4me=20Tresarrieu?= Date: Mon, 20 Jun 2022 17:32:29 +0200 Subject: [PATCH 3/5] chore: add custom types for transform function MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is to avoid exposing complex types from our internal deps. Signed-off-by: Côme Tresarrieu --- .../MarkdownContent/MarkdownContent.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index 4059482b79..3052aff7d9 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -64,12 +64,23 @@ const useStyles = makeStyles( { name: 'BackstageMarkdownContent' }, ); +type TransformLink = ( + href: string, + // Complex type from internal react-markdown dep library (hast)[./node_modules/@types/hast/index.d.ts] + children: any[], + title: string | null, +) => string; + type Props = { content: string; dialect?: 'gfm' | 'common-mark'; - linkTarget?: Options['linkTarget']; - transformLinkUri?: Options['transformLinkUri']; - transformImageUri?: Options['transformImageUri']; + linkTarget?: React.HTMLAttributeAnchorTarget | TransformLink; + transformLinkUri?: TransformLink; + transformImageUri?: ( + src: string, + alt: string, + title: string | null, + ) => string; }; const components: Options['components'] = { From 31bcb855954142b7a8b150b79ceaec8c807151ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=B4me=20Tresarrieu?= Date: Tue, 28 Jun 2022 16:23:39 +0200 Subject: [PATCH 4/5] chore: simplify `TransformLink` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Côme Tresarrieu --- .../src/components/MarkdownContent/MarkdownContent.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index 3052aff7d9..98d5af278f 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -64,12 +64,7 @@ const useStyles = makeStyles( { name: 'BackstageMarkdownContent' }, ); -type TransformLink = ( - href: string, - // Complex type from internal react-markdown dep library (hast)[./node_modules/@types/hast/index.d.ts] - children: any[], - title: string | null, -) => string; +type TransformLink = (href: string) => string; type Props = { content: string; From 61813aff256d261363b666238f8749232993553e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=B4me=20Tresarrieu?= Date: Tue, 28 Jun 2022 17:52:51 +0200 Subject: [PATCH 5/5] chore: simplify types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Côme Tresarrieu --- .../components/MarkdownContent/MarkdownContent.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index 98d5af278f..0e5aedda90 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -64,18 +64,12 @@ const useStyles = makeStyles( { name: 'BackstageMarkdownContent' }, ); -type TransformLink = (href: string) => string; - type Props = { content: string; dialect?: 'gfm' | 'common-mark'; - linkTarget?: React.HTMLAttributeAnchorTarget | TransformLink; - transformLinkUri?: TransformLink; - transformImageUri?: ( - src: string, - alt: string, - title: string | null, - ) => string; + linkTarget?: Options['linkTarget']; + transformLinkUri?: (href: string) => string; + transformImageUri?: (href: string) => string; }; const components: Options['components'] = {