feat: turn off code-blocks wrapping

Can enable using `typography.code.wrap` theme option, fixes #658
Redocly · Oct 5, 2018 · 393681b · 393681b
1 parent f39fc98
commit 393681b
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/src/components/JsonViewer/style.ts b/src/components/JsonViewer/style.ts
@@ -8,7 +8,7 @@ export const jsonStyles = css`
   font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: ${props => props.theme.typography.code.fontSize};
 
-  white-space: pre-wrap;
+  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
   overflow-x: auto;
 
   .callback-function {

diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
@@ -74,7 +74,7 @@ export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boole
 
   pre {
     font-family: ${props => props.theme.typography.code.fontFamily};
-    white-space: pre-wrap;
+    white-space:${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
     background-color: #263238;
     color: white;
     padding: 12px 14px 15px 14px;

diff --git a/src/components/SourceCode/SourceCode.tsx b/src/components/SourceCode/SourceCode.tsx
@@ -12,7 +12,7 @@ const StyledPre = styled(PrismDiv.withComponent('pre'))`
   overflow-x: auto;
   margin: 0;
 
-  white-space: pre-wrap;
+  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
 `;
 
 export interface SourceCodeProps {

diff --git a/src/theme.ts b/src/theme.ts
@@ -102,7 +102,6 @@ const defaultTheme: ThemeInterface = {
     fontFamily: 'Roboto, sans-serif',
     smoothing: 'antialiased',
     optimizeSpeed: true,
-
     headings: {
       fontFamily: 'Montserrat, sans-serif',
     },
@@ -113,6 +112,7 @@ const defaultTheme: ThemeInterface = {
       fontWeight: ({ typography }) => typography.fontWeightRegular,
       color: '#e53935',
       backgroundColor: 'rgba(38, 50, 56, 0.04)',
+      wrap: false,
     },
     links: {
       color: ({ colors }) => colors.primary.main,
@@ -271,6 +271,7 @@ export interface ResolvedThemeInterface {
 
     code: FontSettings & {
       backgroundColor: string;
+      wrap: boolean;
     };
     headings: {
       fontFamily: string;