From 357f42b6a105d7ce1ed93b66abe10bb1e8e464f7 Mon Sep 17 00:00:00 2001 From: Jesko Steinberg Date: Thu, 29 Oct 2020 13:14:15 +0100 Subject: [PATCH 1/6] feat: add MarkdownContent component --- .changeset/wet-tools-exercise.md | 15 +++ packages/core/package.json | 4 +- .../MarkdownContent.stories.tsx | 120 ++++++++++++++++++ .../MarkdownContent/MarkdownContent.test.tsx | 43 +++++++ .../MarkdownContent/MarkdownContent.tsx | 74 +++++++++++ .../src/components/MarkdownContent/index.ts | 17 +++ packages/core/src/components/index.ts | 1 + 7 files changed, 273 insertions(+), 1 deletion(-) create mode 100644 .changeset/wet-tools-exercise.md create mode 100644 packages/core/src/components/MarkdownContent/MarkdownContent.stories.tsx create mode 100644 packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx create mode 100644 packages/core/src/components/MarkdownContent/MarkdownContent.tsx create mode 100644 packages/core/src/components/MarkdownContent/index.ts diff --git a/.changeset/wet-tools-exercise.md b/.changeset/wet-tools-exercise.md new file mode 100644 index 0000000000..ba6eb8314f --- /dev/null +++ b/.changeset/wet-tools-exercise.md @@ -0,0 +1,15 @@ +--- +'@backstage/core': minor +--- + +Adds the MarkdownContent component to render and display markdown input. + +``` + +``` + +Render and display the github flavored markdown [GFM](https://github.github.com/gfm/) input: + +``` + +``` diff --git a/packages/core/package.json b/packages/core/package.json index ec4411b390..a78fcc0a82 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -48,11 +48,13 @@ "react-dom": "^16.12.0", "react-helmet": "6.1.0", "react-hook-form": "^6.6.0", + "react-markdown": "^5.0.2", "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", "react-sparklines": "^1.7.0", "react-syntax-highlighter": "^13.5.1", - "react-use": "^15.3.3" + "react-use": "^15.3.3", + "remark-gfm": "^1.0.0" }, "devDependencies": { "@backstage/cli": "^0.1.1-alpha.26", diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.stories.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.stories.tsx new file mode 100644 index 0000000000..b3747971a7 --- /dev/null +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.stories.tsx @@ -0,0 +1,120 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { MarkdownContent } from './MarkdownContent'; + +export default { + title: 'Data Display/MarkdownContent', + component: MarkdownContent, +}; + +const markdownGithubFlavored = + '# GFM\n' + + '\n' + + '## Autolink literals\n' + + '\n' + + 'www.example.com, https://example.com, and contact@example.com.\n' + + '\n' + + '## Strikethrough\n' + + '\n' + + '~one~ or ~~two~~ tildes.\n' + + '\n' + + '## Table\n' + + '\n' + + '| foo | bar |\n' + + '| --- | --- |\n' + + '| baz | bim |\n' + + '| buz | bum |\n' + + '| biz | bim |\n' + + '\n' + + '## Tasklist\n' + + '\n' + + '* [ ] to do\n' + + '* [x] done'; + +const markdown = + '# Choreas Iovis\n' + + '\n' + + '## Incedere retenta\n' + + '\n' + + 'Lorem markdownum velamina [nupta amici aequoreis](http://est-quae.org/sic)\n' + + 'desertum factum premunt: falcato parvos nihil. Facietque vulnus tum dumque\n' + + 'reserato Maeandros insignia solidis, tot longi causa et nimium arcuerat altera\n' + + 'unus, in quis.\n' + + '\n' + + '1. Est qui dixere nullus\n' + + '2. Fuit obicit\n' + + '3. Vim patrem portae materiem ulla quod crater\n' + + '4. Rigido est magis raptor quid crepitante aequa\n' + + '5. Imago quis ignis tamen\n' + + '\n' + + '## Vix posse vestem\n' + + '\n' + + 'Nec deos robora visa pater toris remittit *crimina* utque, ora ego lacerae quae\n' + + 'laboris laturus silvas audax terrae. Qua fuisse patrio inlaesas [sine\n' + + 'seque](http://ambitvictore.org/), nondum et tamen annis, nec. Poscimur magnum,\n' + + 'Hesperium dedisti, ait ipse et fides terras scalas.\n' + + '\n' + + '- Quas superis satyri adloquitur natura hausimus\n' + + '- Dux suspicere siccare\n' + + '- Cape huc quid videor\n' + + '- Foret vivit concolor\n' + + '- Occupat morte oblectamina minuunt quaeque placidis nate\n' + + '- Non posset' + + '\n' + + 'Licet movitque dederat potest in sorores in sola pendere luce pro quod, sit.\n' + + 'Inpia ut in opibus flores uno quam quo multifidasque fera anhelitus retorsit.\n' + + 'Sustinui premebat puppe somnos. Dicit genu sic qualia excussit facunde parvae in\n' + + 'robur, Ianthe Interea. Superis victorque ponat puta cum: est enim.\n' + + '\n' + + '## Tacetve est in nullis Cerberus silvani luminibus\n' + + '\n' + + 'Divulsere *summissoque esse manes*; artus ausus conatoque utque: illo\n' + + 'Phaestiadas quod pascat et referentem, nec. In seris, iubebat iam nomina:\n' + + 'tergoque occidit ingenii.\n' + + '\n' + + ' mouseDdl(tablet_definition * phishing_icann_mamp);\n' + + ' vector += 20 + key_ram.source_isa(hard_tunneling_zone(w_wireless_page));\n' + + ' if (rate_client_direct) {\n' + + ' textXDpi += sql_cloud_class.sdk.speakers_wired_warm(pcZettabyteGis(\n' + + ' market_bezel, 1), 1);\n' + + ' tag_scraping = format_ppi;\n' + + ' }\n' + + '\n' + + 'Per quem, nec formosior qui cum Peliden me interea **ornatos**! Te facit\n' + + 'instimulat sequentia in flumina exilium te vulnere, sola. Coetum nec amnes.\n' + + 'Protinus nam Caras cava, *a* vocantem dicta inevitabile, nata nulla.\n' + + '\n' + + '## Piscem Iunoni maius\n' + + '\n' + + 'Prece fallere arduus, *ad Athamantis laticem* simillima in ante Temesesque opus!\n' + + 'Ausim quoslibet crede Tyria: Medusa [muneris Aeneaden\n' + + 'tutaque](http://cragon-aequoribus.io/) genitor fistula cogeris abstrahere nati,\n' + + 'relevare videri *non*.\n' + + '\n' + + '> Promissas ulterius senectae Desinet his ait pedum! Libet *sublime* vibrantia\n' + + '> si *dicta quod* pectora cupidine hastam dominoque.\n' + + '\n' + + 'Pedis hic, est bis quod, adhaeret et reditum. Fixa sic vel pugnare **forte est**\n' + + 'parte in quaerite generisque repugnat; de quod, creatos.'; +export const MarkdownContentCommonMark = () => ( + +); + +export const MarkdownContentGithubFlavoredCommonMark = () => ( + +); diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx new file mode 100644 index 0000000000..a96525a3f6 --- /dev/null +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { MarkdownContent } from './MarkdownContent'; + +describe('', () => { + it('render MarkdownContent component with common mark', async () => { + const rendered = await renderWithEffects( + wrapInTestApp( + , + ), + ); + expect(rendered.getByText('H1', { selector: 'h1' })).toBeInTheDocument(); + expect(rendered.getByText('H2', { selector: 'h2' })).toBeInTheDocument(); + expect(rendered.getByText('H3', { selector: 'h3' })).toBeInTheDocument(); + }); + + it('render MarkdownContent component with common mark github flavored', async () => { + const rendered = await renderWithEffects( + wrapInTestApp( + , + ), + ); + expect( + rendered.getByText('https://example.com', { selector: 'a' }), + ).toBeInTheDocument(); + }); +}); diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx new file mode 100644 index 0000000000..1449c5b1be --- /dev/null +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx @@ -0,0 +1,74 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { makeStyles } from '@material-ui/core'; +import ReactMarkdown from 'react-markdown'; +import gfm from 'remark-gfm'; +import React from 'react'; + +const useStyles = makeStyles(theme => ({ + markdown: { + '& table': { + borderCollapse: 'collapse', + border: '1px solid #dfe2e5', + color: 'rgb(36, 41, 46)', + }, + '& th, & td': { + border: '1px solid #dfe2e5', + padding: theme.spacing(1), + }, + '& tr': { + backgroundColor: '#fff', + }, + '& tr:nth-child(2n)': { + backgroundColor: '#f6f8fa', + }, + '& pre': { + padding: '16px', + overflow: 'auto', + fontSize: '85%', + lineHeight: 1.45, + backgroundColor: '#f6f8fa', + borderRadius: '6px', + color: 'rgba(0, 0, 0, 0.87)', + }, + '& a': { + color: '#2E77D0', + }, + '& img': { + maxWidth: '100%', + }, + }, +})); + +/** + * MarkdownContent. Renders markdown (CommonMark, optionally with [GFM](https://github.com/remarkjs/remark-gfm)) to formatted HTML. + */ +type Props = { + content: string; + enableGfm?: boolean; +}; + +export const MarkdownContent = ({ content, enableGfm = false }: Props) => { + const classes = useStyles(); + return ( + + ); +}; diff --git a/packages/core/src/components/MarkdownContent/index.ts b/packages/core/src/components/MarkdownContent/index.ts new file mode 100644 index 0000000000..7267ff191c --- /dev/null +++ b/packages/core/src/components/MarkdownContent/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { MarkdownContent } from './MarkdownContent'; diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index 4f085ffd6a..40c4ef0c11 100644 --- a/packages/core/src/components/index.ts +++ b/packages/core/src/components/index.ts @@ -35,3 +35,4 @@ export * from './Tabs'; export * from './TrendLine'; export * from './WarningPanel'; export * from './EmptyState'; +export * from './MarkdownContent'; From 7b37d65fd8ffc3e06737a6815a4beadf08ec5f12 Mon Sep 17 00:00:00 2001 From: Jesko Steinberg Date: Fri, 30 Oct 2020 11:02:57 +0100 Subject: [PATCH 2/6] fix: update github-insights-plugin to resolve conflicts --- .changeset/3157.md | 9 +++++++++ .changeset/wet-tools-exercise.md | 15 --------------- 2 files changed, 9 insertions(+), 15 deletions(-) create mode 100644 .changeset/3157.md delete mode 100644 .changeset/wet-tools-exercise.md diff --git a/.changeset/3157.md b/.changeset/3157.md new file mode 100644 index 0000000000..d6c0120d8a --- /dev/null +++ b/.changeset/3157.md @@ -0,0 +1,9 @@ +--- +'@backstage/core': minor +--- + +Adds the MarkdownContent component to render and display markdown input. + +``` + +``` diff --git a/.changeset/wet-tools-exercise.md b/.changeset/wet-tools-exercise.md deleted file mode 100644 index ba6eb8314f..0000000000 --- a/.changeset/wet-tools-exercise.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -'@backstage/core': minor ---- - -Adds the MarkdownContent component to render and display markdown input. - -``` - -``` - -Render and display the github flavored markdown [GFM](https://github.github.com/gfm/) input: - -``` - -``` From ef8e3c20ac52626ced7b2ddabbd0235f0d9a7703 Mon Sep 17 00:00:00 2001 From: Jesko Steinberg Date: Fri, 30 Oct 2020 12:08:12 +0100 Subject: [PATCH 3/6] feat: add code block to backstage theme --- packages/theme/src/themes.ts | 8 ++++++++ packages/theme/src/types.ts | 4 ++++ 2 files changed, 12 insertions(+) diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 5b233ac303..48142d48b9 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -48,6 +48,10 @@ export const lightTheme = createTheme({ text: '#FFFFFF', link: '#000000', }, + code: { + background: '#333333', + text: '#FFFFFF', + }, border: '#E6E6E6', textContrast: '#000000', textVerySubtle: '#DDD', @@ -110,6 +114,10 @@ export const darkTheme = createTheme({ text: '#FFFFFF', link: '#000000', }, + code: { + background: '#F8F8F8', + text: '#333333', + }, border: '#E6E6E6', textContrast: '#FFFFFF', textVerySubtle: '#727272', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 5acc0f75e9..c87c5c26f4 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -69,6 +69,10 @@ type PaletteAdditions = { text: string; link: string; }; + code: { + background: string; + text: string; + }; }; export type BackstagePalette = Palette & PaletteAdditions; From bbc15f5112f5982d333c1a4991d426bdf5e85f05 Mon Sep 17 00:00:00 2001 From: Jesko Steinberg Date: Fri, 30 Oct 2020 12:08:36 +0100 Subject: [PATCH 4/6] fix: use backstage theme for MarkdownContent --- .changeset/3157.md | 6 ++++ .../MarkdownContent/MarkdownContent.tsx | 33 +++++++++++++------ 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/.changeset/3157.md b/.changeset/3157.md index d6c0120d8a..ba6eb8314f 100644 --- a/.changeset/3157.md +++ b/.changeset/3157.md @@ -7,3 +7,9 @@ Adds the MarkdownContent component to render and display markdown input. ``` ``` + +Render and display the github flavored markdown [GFM](https://github.github.com/gfm/) input: + +``` + +``` diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx index 1449c5b1be..baa3f45862 100644 --- a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx @@ -18,35 +18,48 @@ import { makeStyles } from '@material-ui/core'; import ReactMarkdown from 'react-markdown'; import gfm from 'remark-gfm'; import React from 'react'; +import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ markdown: { '& table': { borderCollapse: 'collapse', - border: '1px solid #dfe2e5', - color: 'rgb(36, 41, 46)', + border: `1px solid ${theme.palette.border}`, }, '& th, & td': { - border: '1px solid #dfe2e5', + border: `1px solid ${theme.palette.border}`, padding: theme.spacing(1), }, + '& td': { + wordBreak: 'break-word', + overflow: 'hidden', + verticalAlign: 'middle', + lineHeight: '1', + margin: 0, + padding: theme.spacing(3, 2, 3, 2.5), + borderBottom: 0, + }, + '& th': { + backgroundColor: theme.palette.background.paper, + }, '& tr': { - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, }, - '& tr:nth-child(2n)': { - backgroundColor: '#f6f8fa', + '& tr:nth-child(odd)': { + backgroundColor: theme.palette.background.default, }, + '& pre': { padding: '16px', overflow: 'auto', fontSize: '85%', lineHeight: 1.45, - backgroundColor: '#f6f8fa', + backgroundColor: theme.palette.code.background, borderRadius: '6px', - color: 'rgba(0, 0, 0, 0.87)', + color: theme.palette.code.text, }, '& a': { - color: '#2E77D0', + color: theme.palette.link, }, '& img': { maxWidth: '100%', From d76b4659755b9d5e987a7a0efa2d184e1c4de0dc Mon Sep 17 00:00:00 2001 From: Jesko Steinberg Date: Fri, 30 Oct 2020 14:25:03 +0100 Subject: [PATCH 5/6] fix: use code snippet for code rendering --- .../MarkdownContent/MarkdownContent.test.tsx | 13 +++++++++++++ .../MarkdownContent/MarkdownContent.tsx | 17 ++++++++--------- packages/theme/src/themes.ts | 8 -------- packages/theme/src/types.ts | 4 ---- yarn.lock | 2 +- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx index a96525a3f6..2fb40d2f4f 100644 --- a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx @@ -40,4 +40,17 @@ describe('', () => { rendered.getByText('https://example.com', { selector: 'a' }), ).toBeInTheDocument(); }); + + it('render MarkdownContent component with CodeSnippet for code blocks', async () => { + const rendered = await renderWithEffects( + wrapInTestApp(), + ); + const fp1 = rendered.getByText('jest', { selector: 'span' }); + expect(fp1).toBeInTheDocument(); + expect(fp1.className).toEqual('hljs-function'); + const fp2 = rendered.getByText('(test: string)', { selector: 'span' }); + expect(fp2).toBeInTheDocument(); + expect(fp2.className).toEqual('hljs-function'); + expect(rendered.getByText(';', { selector: 'span' })).toBeInTheDocument(); + }); }); diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx index baa3f45862..4f234565d2 100644 --- a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx @@ -19,6 +19,7 @@ import ReactMarkdown from 'react-markdown'; import gfm from 'remark-gfm'; import React from 'react'; import { BackstageTheme } from '@backstage/theme'; +import { CodeSnippet } from '../CodeSnippet'; const useStyles = makeStyles(theme => ({ markdown: { @@ -49,15 +50,6 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.default, }, - '& pre': { - padding: '16px', - overflow: 'auto', - fontSize: '85%', - lineHeight: 1.45, - backgroundColor: theme.palette.code.background, - borderRadius: '6px', - color: theme.palette.code.text, - }, '& a': { color: theme.palette.link, }, @@ -75,6 +67,12 @@ type Props = { enableGfm?: boolean; }; +const renderers = { + code: ({ language, value }: { language: string; value: string }) => { + return ; + }, +}; + export const MarkdownContent = ({ content, enableGfm = false }: Props) => { const classes = useStyles(); return ( @@ -82,6 +80,7 @@ export const MarkdownContent = ({ content, enableGfm = false }: Props) => { plugins={enableGfm ? [gfm] : []} className={classes.markdown} children={content} + renderers={renderers} /> ); }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 48142d48b9..5b233ac303 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -48,10 +48,6 @@ export const lightTheme = createTheme({ text: '#FFFFFF', link: '#000000', }, - code: { - background: '#333333', - text: '#FFFFFF', - }, border: '#E6E6E6', textContrast: '#000000', textVerySubtle: '#DDD', @@ -114,10 +110,6 @@ export const darkTheme = createTheme({ text: '#FFFFFF', link: '#000000', }, - code: { - background: '#F8F8F8', - text: '#333333', - }, border: '#E6E6E6', textContrast: '#FFFFFF', textVerySubtle: '#727272', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index c87c5c26f4..5acc0f75e9 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -69,10 +69,6 @@ type PaletteAdditions = { text: string; link: string; }; - code: { - background: string; - text: string; - }; }; export type BackstagePalette = Palette & PaletteAdditions; diff --git a/yarn.lock b/yarn.lock index 80d96ad134..3615ad7f7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19682,7 +19682,7 @@ react-markdown@^4.3.1: unist-util-visit "^1.3.0" xtend "^4.0.1" -react-markdown@^5.0.0: +react-markdown@^5.0.0, react-markdown@^5.0.2: version "5.0.2" resolved "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.2.tgz#d15a8beb37b4ec34fc23dd892e7755eb7040b8db" integrity sha512-kmkB4JbV7LqkDAjvaKRKtodB3n3Id76/DalaDun1U8FuLB0SenPfvH+jAQ5Pcpo54cACRQc1LB1yXmuuuIVecw== From a963b59b0441960d23244788f1e520c27086b3f8 Mon Sep 17 00:00:00 2001 From: Jesko Steinberg Date: Tue, 3 Nov 2020 14:39:39 +0100 Subject: [PATCH 6/6] refactor: use markdown dialects (gfm as default) --- .changeset/3157.md | 11 ++++++----- .../MarkdownContent.stories.tsx | 4 ++-- .../MarkdownContent/MarkdownContent.test.tsx | 19 ++++++++++++++----- .../MarkdownContent/MarkdownContent.tsx | 15 +++++++++------ 4 files changed, 31 insertions(+), 18 deletions(-) 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 (