Merge pull request #22541 from storybookjs/chaks/fix-react-syntaxhigh…

…lighter-wrap Storysource: Fix StyledSyntaxHighlighter to wrap long lines
storybookjs · Jun 2, 2023 · e0d42d6 · e0d42d6
2 parents 2bd02fe + 243fb0f
commit e0d42d6
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/code/addons/storysource/src/StoryPanel.tsx b/code/addons/storysource/src/StoryPanel.tsx
@@ -176,6 +176,8 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       format={false}
       copyable={false}
       padded
+      wrapLongLines
+      lineProps={{ style: { whiteSpace: 'pre' } }}
     >
       {source}
     </StyledSyntaxHighlighter>

diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
@@ -35,6 +35,7 @@ export interface SyntaxHighlighterBaseProps {
   lineProps?: LineTagPropsFunction | React.HTMLProps<HTMLElement>;
   showLineNumbers?: boolean;
   startingLineNumber?: number;
+  wrapLongLines?: boolean;
   style?: any;
   useInlineStyles?: boolean;
 }