diff --git a/.changeset/spicy-sides-grow.md b/.changeset/spicy-sides-grow.md new file mode 100644 index 0000000000..3f44f35866 --- /dev/null +++ b/.changeset/spicy-sides-grow.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +added support for wrapLongLines option in CodeSnippet diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index 02fbb04805..5e842929e6 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -188,6 +188,7 @@ export interface CodeSnippetProps { showCopyCodeButton?: boolean; showLineNumbers?: boolean; text: string; + wrapLongLines?: boolean; } // Warning: (ae-forgotten-export) The symbol "Props_12" needs to be exported by the entry point index.d.ts diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index 8c31bc4e6d..e79dc07ad3 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -57,6 +57,14 @@ export interface CodeSnippetProps { * Array of line numbers to highlight */ highlightedNumbers?: number[]; + /** + * Whether to style the `` block with `white-space: pre-wrap` or `white-space: pre` + * + * @remarks + * + * Default: false (`white-space: pre`) + */ + wrapLongLines?: boolean; /** * Custom styles applied to code * @@ -79,6 +87,7 @@ export function CodeSnippet(props: CodeSnippetProps) { language, showLineNumbers = false, highlightedNumbers, + wrapLongLines, customStyle, showCopyCodeButton = false, } = props; @@ -94,6 +103,7 @@ export function CodeSnippet(props: CodeSnippetProps) { style={mode} showLineNumbers={showLineNumbers} wrapLines + wrapLongLines={wrapLongLines} lineNumberStyle={{ color: theme.palette.textVerySubtle }} lineProps={(lineNumber: number) => highlightedNumbers?.includes(lineNumber)