diff --git a/.changeset/3157.md b/.changeset/3157.md index ba6eb8314f..f15d05c46a 100644 --- a/.changeset/3157.md +++ b/.changeset/3157.md @@ -1,15 +1,16 @@ --- -'@backstage/core': minor +'@backstage/core': patch --- -Adds the MarkdownContent component to render and display markdown input. +Adds the MarkdownContent component to render and display Markdown content with the default +[GFM](https://github.github.com/gfm/) (Github flavored Markdown) dialect. ``` - + ``` -Render and display the github flavored markdown [GFM](https://github.github.com/gfm/) input: +To render the Markdown content with plain [CommonMark](https://commonmark.org/), set the dialect to `common-mark` ``` - + ( - + ); export const MarkdownContentGithubFlavoredCommonMark = () => ( - + ); diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx index 2fb40d2f4f..dcbe421dcb 100644 --- a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx @@ -19,7 +19,7 @@ import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; import { MarkdownContent } from './MarkdownContent'; describe('', () => { - it('render MarkdownContent component with common mark', async () => { + it('render MarkdownContent component', async () => { const rendered = await renderWithEffects( wrapInTestApp( , @@ -30,17 +30,26 @@ describe('', () => { expect(rendered.getByText('H3', { selector: 'h3' })).toBeInTheDocument(); }); - it('render MarkdownContent component with common mark github flavored', async () => { + it('render MarkdownContent component with GitHub flavored Markdown dialect', async () => { const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + wrapInTestApp(), ); expect( rendered.getByText('https://example.com', { selector: 'a' }), ).toBeInTheDocument(); }); + it('Render MarkdownContent component with common mark dialect', async () => { + const rendered = await renderWithEffects( + wrapInTestApp( + , + ), + ); + expect( + rendered.getByText('https://example.com', { selector: 'p' }), + ).toBeInTheDocument(); + }); + it('render MarkdownContent component with CodeSnippet for code blocks', async () => { const rendered = await renderWithEffects( wrapInTestApp(), diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx index 4f234565d2..0000e54a5f 100644 --- a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx @@ -59,12 +59,9 @@ const useStyles = makeStyles(theme => ({ }, })); -/** - * MarkdownContent. Renders markdown (CommonMark, optionally with [GFM](https://github.com/remarkjs/remark-gfm)) to formatted HTML. - */ type Props = { content: string; - enableGfm?: boolean; + dialect?: 'gfm' | 'common-mark'; }; const renderers = { @@ -73,11 +70,17 @@ const renderers = { }, }; -export const MarkdownContent = ({ content, enableGfm = false }: Props) => { +/** + * MarkdownContent + * -- + * Renders markdown with the default dialect [gfm - GitHub flavored Markdown](https://github.github.com/gfm/) to backstage theme styled HTML. + * If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'` + */ +export const MarkdownContent = ({ content, dialect = 'gfm' }: Props) => { const classes = useStyles(); return (