@backstage/core-components 0.18.4-next.2 → 0.18.5-next.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @backstage/core-components
 
+## 0.18.5-next.0
+
+### Patch Changes
+
+- a723b8a: The MarkdownContent component now handles HTML content the same way as GitHub when rendering GitHub-flavored Markdown
+
+## 0.18.4
+
+### Patch Changes
+
+- 9a942a4: Fixed bug in the `LogViewer` component where shift + click always opened a new window instead of just changing the selection.
+
+  In addition, improved the `LogViewer` component by a few usability enhancements:
+
+  - Added support for multiple selections using cmd/ctrl + click
+  - Improved the generated hash that is added to the URL to also support ranges & multiple selections
+  - Added an hover effect & info tooltip to the "Copy to clipboard" button to indicate its functionality
+  - Added some color and a separator to the line numbers to improve readability
+
+- 207c3c8: long words like urls now breaks to new line on warning panels instead of overflowing the container
+- 4c00303: Add `tooltipClasses` prop to `OverflowTooltip` component to allow customisation of the tooltip
+- 5d52dab: Add i18n support for LogViewer search control
+- f6b49ce: added support for wrapLongLines option in CodeSnippet
+- Updated dependencies
+  - @backstage/core-plugin-api@1.12.1
+  - @backstage/theme@0.7.1
+
 ## 0.18.4-next.2
 
 ### Patch Changes

package/dist/components/CodeSnippet/CodeSnippet.esm.js

@@ -12,6 +12,7 @@ function CodeSnippet(props) {
     language,
     showLineNumbers = false,
     highlightedNumbers,
+    wrapLongLines,
     customStyle,
     showCopyCodeButton = false
   } = props;
@@ -27,6 +28,7 @@ function CodeSnippet(props) {
         style: mode,
         showLineNumbers,
         wrapLines: true,
+        wrapLongLines,
         lineNumberStyle: { color: theme.palette.textVerySubtle },
         lineProps: (lineNumber) => highlightedNumbers?.includes(lineNumber) ? {
           style: {

package/dist/components/CodeSnippet/CodeSnippet.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeSnippet.esm.js","sources":["../../../src/components/CodeSnippet/CodeSnippet.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport type {} from 'react-syntax-highlighter';\nimport LightAsync from 'react-syntax-highlighter/dist/esm/light-async';\nimport dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark';\nimport docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';\n\nimport { CopyTextButton } from '../CopyTextButton';\n\n/**\n * Properties for {@link CodeSnippet}\n *\n * @public\n */\nexport interface CodeSnippetProps {\n  /**\n   * Code Snippet text\n   */\n  text: string;\n  /**\n   * Language used by {@link CodeSnippetProps.text}\n   */\n  language: string;\n  /**\n   * Whether to show line number\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether to show button to copy code snippet\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showCopyCodeButton?: boolean;\n  /**\n   * Array of line numbers to highlight\n   */\n  highlightedNumbers?: number[];\n  /**\n   * Custom styles applied to code\n   *\n   * @remarks\n   *\n   * Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n   */\n  customStyle?: any;\n}\n\n/**\n * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n * providing consistent theming and copy code button\n *\n * @public\n */\nexport function CodeSnippet(props: CodeSnippetProps) {\n  const {\n    text,\n    language,\n    showLineNumbers = false,\n    highlightedNumbers,\n    customStyle,\n    showCopyCodeButton = false,\n  } = props;\n  const theme = useTheme();\n  const mode = theme.palette.type === 'dark' ? dark : docco;\n  const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';\n\n  return (\n    <Box position=\"relative\">\n      <LightAsync\n        customStyle={customStyle}\n        language={language}\n        style={mode}\n        showLineNumbers={showLineNumbers}\n        wrapLines\n        lineNumberStyle={{ color: theme.palette.textVerySubtle }}\n        lineProps={(lineNumber: number) =>\n          highlightedNumbers?.includes(lineNumber)\n            ? {\n                style: {\n                  backgroundColor: highlightColor,\n                },\n              }\n            : {}\n        }\n      >\n        {text}\n      </LightAsync>\n      {showCopyCodeButton && (\n        <Box position=\"absolute\" top={0} right={0}>\n          <CopyTextButton text={text} />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2EO,SAAS,YAAY,KAAA,EAAyB;AACnD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,kBAAA,GAAqB;AAAA,GACvB,GAAI,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,SAAS,IAAA,GAAO,KAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,SAAS,SAAA,GAAY,SAAA;AAEnE,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,QAAA,EAAS,UAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA,EAAO,IAAA;AAAA,QACP,eAAA;AAAA,QACA,SAAA,EAAS,IAAA;AAAA,QACT,eAAA,EAAiB,EAAE,KAAA,EAAO,KAAA,CAAM,QAAQ,cAAA,EAAe;AAAA,QACvD,WAAW,CAAC,UAAA,KACV,kBAAA,EAAoB,QAAA,CAAS,UAAU,CAAA,GACnC;AAAA,UACE,KAAA,EAAO;AAAA,YACL,eAAA,EAAiB;AAAA;AACnB,YAEF,EAAC;AAAA,QAGN,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,kBAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,QAAA,EAAS,UAAA,EAAW,GAAA,EAAK,CAAA,EAAG,KAAA,EAAO,CAAA,EACtC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,CAAA,EAC9B;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CodeSnippet.esm.js","sources":["../../../src/components/CodeSnippet/CodeSnippet.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport type {} from 'react-syntax-highlighter';\nimport LightAsync from 'react-syntax-highlighter/dist/esm/light-async';\nimport dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark';\nimport docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';\n\nimport { CopyTextButton } from '../CopyTextButton';\n\n/**\n * Properties for {@link CodeSnippet}\n *\n * @public\n */\nexport interface CodeSnippetProps {\n  /**\n   * Code Snippet text\n   */\n  text: string;\n  /**\n   * Language used by {@link CodeSnippetProps.text}\n   */\n  language: string;\n  /**\n   * Whether to show line number\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether to show button to copy code snippet\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showCopyCodeButton?: boolean;\n  /**\n   * Array of line numbers to highlight\n   */\n  highlightedNumbers?: number[];\n  /**\n   * Whether to style the `<code>` block with `white-space: pre-wrap` or `white-space: pre`\n   *\n   * @remarks\n   *\n   * Default: false (`white-space: pre`)\n   */\n  wrapLongLines?: boolean;\n  /**\n   * Custom styles applied to code\n   *\n   * @remarks\n   *\n   * Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n   */\n  customStyle?: any;\n}\n\n/**\n * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n * providing consistent theming and copy code button\n *\n * @public\n */\nexport function CodeSnippet(props: CodeSnippetProps) {\n  const {\n    text,\n    language,\n    showLineNumbers = false,\n    highlightedNumbers,\n    wrapLongLines,\n    customStyle,\n    showCopyCodeButton = false,\n  } = props;\n  const theme = useTheme();\n  const mode = theme.palette.type === 'dark' ? dark : docco;\n  const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';\n\n  return (\n    <Box position=\"relative\">\n      <LightAsync\n        customStyle={customStyle}\n        language={language}\n        style={mode}\n        showLineNumbers={showLineNumbers}\n        wrapLines\n        wrapLongLines={wrapLongLines}\n        lineNumberStyle={{ color: theme.palette.textVerySubtle }}\n        lineProps={(lineNumber: number) =>\n          highlightedNumbers?.includes(lineNumber)\n            ? {\n                style: {\n                  backgroundColor: highlightColor,\n                },\n              }\n            : {}\n        }\n      >\n        {text}\n      </LightAsync>\n      {showCopyCodeButton && (\n        <Box position=\"absolute\" top={0} right={0}>\n          <CopyTextButton text={text} />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAmFO,SAAS,YAAY,KAAA,EAAyB;AACnD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,kBAAA,GAAqB;AAAA,GACvB,GAAI,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,SAAS,IAAA,GAAO,KAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,SAAS,SAAA,GAAY,SAAA;AAEnE,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,QAAA,EAAS,UAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA,EAAO,IAAA;AAAA,QACP,eAAA;AAAA,QACA,SAAA,EAAS,IAAA;AAAA,QACT,aAAA;AAAA,QACA,eAAA,EAAiB,EAAE,KAAA,EAAO,KAAA,CAAM,QAAQ,cAAA,EAAe;AAAA,QACvD,WAAW,CAAC,UAAA,KACV,kBAAA,EAAoB,QAAA,CAAS,UAAU,CAAA,GACnC;AAAA,UACE,KAAA,EAAO;AAAA,YACL,eAAA,EAAiB;AAAA;AACnB,YAEF,EAAC;AAAA,QAGN,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,kBAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,QAAA,EAAS,UAAA,EAAW,GAAA,EAAK,CAAA,EAAG,KAAA,EAAO,CAAA,EACtC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,CAAA,EAC9B;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/MarkdownContent/MarkdownContent.esm.js

@@ -4,6 +4,8 @@ import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import { Children, createElement } from 'react';
 import { CodeSnippet } from '../CodeSnippet/CodeSnippet.esm.js';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -67,6 +69,29 @@ const components = {
   h5: headingRenderer,
   h6: headingRenderer
 };
+const gfmRehypePlugins = [
+  [
+    rehypeRaw,
+    {
+      tagFiter: true
+    }
+  ],
+  [
+    rehypeSanitize,
+    {
+      ...defaultSchema,
+      attributes: {
+        ...defaultSchema.attributes,
+        code: [
+          ...defaultSchema.attributes?.code ?? [],
+          // for syntax highlighting classes in code blocks
+          // breaks the codesnippet component override above if omitted
+          ["className"]
+        ]
+      }
+    }
+  ]
+];
 function MarkdownContent(props) {
   const {
     content,
@@ -81,6 +106,7 @@ function MarkdownContent(props) {
     ReactMarkdown,
     {
       remarkPlugins: dialect === "gfm" ? [gfm] : [],
+      rehypePlugins: dialect === "gfm" ? gfmRehypePlugins : [],
       className: `${classes.markdown} ${className ?? ""}`.trim(),
       children: content,
       components,

package/dist/components/MarkdownContent/MarkdownContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownContent.esm.js","sources":["../../../src/components/MarkdownContent/MarkdownContent.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport ReactMarkdown, { Options } from 'react-markdown';\nimport gfm from 'remark-gfm';\nimport { Children, createElement } from 'react';\nimport { CodeSnippet } from '../CodeSnippet';\nimport { HeadingProps } from 'react-markdown/lib/ast-to-react';\n\nexport type MarkdownContentClassKey = 'markdown';\n\nconst useStyles = makeStyles(\n  theme => ({\n    markdown: {\n      '& table': {\n        borderCollapse: 'collapse',\n        border: `1px solid ${theme.palette.border}`,\n      },\n      '& th, & td': {\n        border: `1px solid ${theme.palette.border}`,\n        padding: theme.spacing(1),\n      },\n      '& td': {\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        verticalAlign: 'middle',\n        lineHeight: '1',\n        margin: 0,\n        padding: theme.spacing(3, 2, 3, 2.5),\n        borderBottom: 0,\n      },\n      '& th': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& tr': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& tr:nth-child(odd)': {\n        backgroundColor: theme.palette.background.default,\n      },\n\n      '& a': {\n        color: theme.palette.link,\n      },\n      '& img': {\n        maxWidth: '100%',\n      },\n    },\n  }),\n  { name: 'BackstageMarkdownContent' },\n);\n\ntype Props = {\n  content: string;\n  dialect?: 'gfm' | 'common-mark';\n  linkTarget?: Options['linkTarget'];\n  transformLinkUri?: (href: string) => string;\n  transformImageUri?: (href: string) => string;\n  className?: string;\n};\n\nconst flatten = (text: string, child: any): string => {\n  if (!child) return text;\n\n  return typeof child === 'string'\n    ? text + child\n    : Children.toArray(child.props.children).reduce(flatten, text);\n};\n\nconst headingRenderer = ({ level, children }: HeadingProps) => {\n  const childrenArray = Children.toArray(children);\n  const text = childrenArray.reduce(flatten, '');\n  const slug = text.toLocaleLowerCase('en-US').replace(/\\W/g, '-');\n  return createElement(`h${level}`, { id: slug }, children);\n};\n\nconst components: Options['components'] = {\n  code: ({ inline, className, children, ...props }) => {\n    const text = String(children).replace(/\\n+$/, '');\n    const match = /language-(\\w+)/.exec(className || '');\n    return !inline && match ? (\n      <CodeSnippet language={match[1]} text={text} />\n    ) : (\n      <code className={className} {...props}>\n        {children}\n      </code>\n    );\n  },\n  h1: headingRenderer,\n  h2: headingRenderer,\n  h3: headingRenderer,\n  h4: headingRenderer,\n  h5: headingRenderer,\n  h6: headingRenderer,\n};\n\n/**\n * Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.\n *\n * @remarks\n * If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`\n */\nexport function MarkdownContent(props: Props) {\n  const {\n    content,\n    dialect = 'gfm',\n    linkTarget,\n    transformLinkUri,\n    transformImageUri,\n    className,\n  } = props;\n  const classes = useStyles();\n  return (\n    <ReactMarkdown\n      remarkPlugins={dialect === 'gfm' ? [gfm] : []}\n      className={`${classes.markdown} ${className ?? ''}`.trim()}\n      children={content}\n      components={components}\n      linkTarget={linkTarget}\n      transformLinkUri={transformLinkUri}\n      transformImageUri={transformImageUri}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MarkdownContent.esm.js","sources":["../../../src/components/MarkdownContent/MarkdownContent.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport ReactMarkdown, { Options } from 'react-markdown';\nimport gfm from 'remark-gfm';\nimport { Children, createElement } from 'react';\nimport { CodeSnippet } from '../CodeSnippet';\nimport { HeadingProps } from 'react-markdown/lib/ast-to-react';\nimport rehypeRaw from 'rehype-raw';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport type { PluggableList } from 'react-markdown/lib/react-markdown';\n\nexport type MarkdownContentClassKey = 'markdown';\n\nconst useStyles = makeStyles(\n  theme => ({\n    markdown: {\n      '& table': {\n        borderCollapse: 'collapse',\n        border: `1px solid ${theme.palette.border}`,\n      },\n      '& th, & td': {\n        border: `1px solid ${theme.palette.border}`,\n        padding: theme.spacing(1),\n      },\n      '& td': {\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        verticalAlign: 'middle',\n        lineHeight: '1',\n        margin: 0,\n        padding: theme.spacing(3, 2, 3, 2.5),\n        borderBottom: 0,\n      },\n      '& th': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& tr': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& tr:nth-child(odd)': {\n        backgroundColor: theme.palette.background.default,\n      },\n\n      '& a': {\n        color: theme.palette.link,\n      },\n      '& img': {\n        maxWidth: '100%',\n      },\n    },\n  }),\n  { name: 'BackstageMarkdownContent' },\n);\n\ntype Props = {\n  content: string;\n  dialect?: 'gfm' | 'common-mark';\n  linkTarget?: Options['linkTarget'];\n  transformLinkUri?: (href: string) => string;\n  transformImageUri?: (href: string) => string;\n  className?: string;\n};\n\nconst flatten = (text: string, child: any): string => {\n  if (!child) return text;\n\n  return typeof child === 'string'\n    ? text + child\n    : Children.toArray(child.props.children).reduce(flatten, text);\n};\n\nconst headingRenderer = ({ level, children }: HeadingProps) => {\n  const childrenArray = Children.toArray(children);\n  const text = childrenArray.reduce(flatten, '');\n  const slug = text.toLocaleLowerCase('en-US').replace(/\\W/g, '-');\n  return createElement(`h${level}`, { id: slug }, children);\n};\n\nconst components: Options['components'] = {\n  code: ({ inline, className, children, ...props }) => {\n    const text = String(children).replace(/\\n+$/, '');\n    const match = /language-(\\w+)/.exec(className || '');\n    return !inline && match ? (\n      <CodeSnippet language={match[1]} text={text} />\n    ) : (\n      <code className={className} {...props}>\n        {children}\n      </code>\n    );\n  },\n  h1: headingRenderer,\n  h2: headingRenderer,\n  h3: headingRenderer,\n  h4: headingRenderer,\n  h5: headingRenderer,\n  h6: headingRenderer,\n};\n\nconst gfmRehypePlugins: PluggableList = [\n  [\n    rehypeRaw,\n    {\n      tagFiter: true,\n    },\n  ],\n  [\n    rehypeSanitize,\n    {\n      ...defaultSchema,\n      attributes: {\n        ...defaultSchema.attributes,\n        code: [\n          ...(defaultSchema.attributes?.code ?? []),\n          // for syntax highlighting classes in code blocks\n          // breaks the codesnippet component override above if omitted\n          ['className'],\n        ],\n      },\n    },\n  ],\n];\n\n/**\n * Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.\n *\n * @remarks\n * If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`\n */\nexport function MarkdownContent(props: Props) {\n  const {\n    content,\n    dialect = 'gfm',\n    linkTarget,\n    transformLinkUri,\n    transformImageUri,\n    className,\n  } = props;\n  const classes = useStyles();\n  return (\n    <ReactMarkdown\n      remarkPlugins={dialect === 'gfm' ? [gfm] : []}\n      rehypePlugins={dialect === 'gfm' ? gfmRehypePlugins : []}\n      className={`${classes.markdown} ${className ?? ''}`.trim()}\n      children={content}\n      components={components}\n      linkTarget={linkTarget}\n      transformLinkUri={transformLinkUri}\n      transformImageUri={transformImageUri}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -220,6 +220,14 @@ interface CodeSnippetProps {
      * Array of line numbers to highlight
      */
     highlightedNumbers?: number[];
+    /**
+     * Whether to style the `<code>` block with `white-space: pre-wrap` or `white-space: pre`
+     *
+     * @remarks
+     *
+     * Default: false (`white-space: pre`)
+     */
+    wrapLongLines?: boolean;
     /**
      * Custom styles applied to code
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.18.4-next.2",
+  "version": "0.18.5-next.0",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -67,9 +67,9 @@
   },
   "dependencies": {
     "@backstage/config": "1.3.6",
-    "@backstage/core-plugin-api": "1.12.1-next.0",
+    "@backstage/core-plugin-api": "1.12.1",
     "@backstage/errors": "1.2.7",
-    "@backstage/theme": "0.7.1-next.0",
+    "@backstage/theme": "0.7.1",
     "@backstage/version-bridge": "1.0.11",
     "@dagrejs/dagre": "^1.1.4",
     "@date-io/core": "^1.3.13",
@@ -89,6 +89,7 @@
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
     "lodash": "^4.17.21",
+    "parse5": "^6.0.0",
     "pluralize": "^8.0.0",
     "qs": "^6.9.4",
     "rc-progress": "3.5.1",
@@ -102,15 +103,17 @@
     "react-use": "^17.3.2",
     "react-virtualized-auto-sizer": "^1.0.11",
     "react-window": "^1.8.6",
+    "rehype-raw": "^6.0.0",
+    "rehype-sanitize": "^5.0.0",
     "remark-gfm": "^3.0.1",
     "zen-observable": "^0.10.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "1.7.3-next.0",
-    "@backstage/cli": "0.35.0-next.2",
-    "@backstage/core-app-api": "1.19.3-next.1",
-    "@backstage/test-utils": "1.7.14-next.0",
+    "@backstage/app-defaults": "1.7.4-next.0",
+    "@backstage/cli": "0.35.2-next.1",
+    "@backstage/core-app-api": "1.19.3",
+    "@backstage/test-utils": "1.7.14",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/user-event": "^14.0.0",