From 393681b99e16932f6cb73dc3b04ffcfb065edb5f Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Fri, 5 Oct 2018 15:10:20 +0300
Subject: [PATCH] feat: turn off code-blocks wrapping

Can enable using `typography.code.wrap` theme option, fixes #658
---
 src/components/JsonViewer/style.ts          | 2 +-
 src/components/Markdown/styled.elements.tsx | 2 +-
 src/components/SourceCode/SourceCode.tsx    | 2 +-
 src/theme.ts                                | 3 ++-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/JsonViewer/style.ts b/src/components/JsonViewer/style.ts
index 016ddf1ab0..e2b2adceb0 100644
--- 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
index efae6aa8d1..c97d8be8a0 100644
--- 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
index bc874cc888..b670766314 100644
--- 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
index 3fa864f825..28945e4ff4 100644
--- 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;