From ab5a96c2571bbad9fd49761032837d777f7c7c48 Mon Sep 17 00:00:00 2001
From: Tyler Pfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 9 Apr 2022 19:33:37 -0400
Subject: [PATCH] fix(react-live-block): remove `whiteSpace: pre` from
 `LiveCodePreview` baseStyle

---
 .../codeblock/react-live-block.tsx            | 141 +++++++++---------
 1 file changed, 70 insertions(+), 71 deletions(-)

diff --git a/src/components/mdx-components/codeblock/react-live-block.tsx b/src/components/mdx-components/codeblock/react-live-block.tsx
index ae0aeea98f..b838fb351e 100644
--- a/src/components/mdx-components/codeblock/react-live-block.tsx
+++ b/src/components/mdx-components/codeblock/react-live-block.tsx
@@ -1,71 +1,70 @@
-import { Box, BoxProps, chakra } from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'
-import CodeContainer from './code-container'
-import CopyButton from './copy-button'
-import scope from './react-live-scope'
-import { liveEditorStyle, liveErrorStyle } from './styles'
-import { t } from 'utils/i18n'
-
-const LiveCodePreview = chakra(LivePreview, {
-  baseStyle: {
-    fontFamily: 'body',
-    mt: 5,
-    p: 3,
-    borderWidth: 1,
-    borderRadius: '12px',
-    overflowX: 'auto',
-    whiteSpace: 'pre',
-  },
-})
-
-const EditableNotice = (props: BoxProps) => {
-  return (
-    <Box
-      position='absolute'
-      width='full'
-      top='-1.25em'
-      roundedTop='8px'
-      bg='#011627'
-      py='2'
-      zIndex='0'
-      letterSpacing='wide'
-      color='gray.400'
-      fontSize='xs'
-      fontWeight='semibold'
-      textAlign='center'
-      textTransform='uppercase'
-      pointerEvents='none'
-      {...props}
-    >
-      {t('component.mdx-components.react-live-block.editable-example')}
-    </Box>
-  )
-}
-
-function ReactLiveBlock({ editable, rawCode, ...rest }) {
-  const [editorCode, setEditorCode] = useState(rawCode.trim())
-  const onChange = (newCode) => setEditorCode(newCode.trim())
-  const liveProviderProps = {
-    code: editorCode,
-    scope,
-    ...rest,
-  }
-  return (
-    <LiveProvider {...liveProviderProps}>
-      <LiveCodePreview zIndex='1' />
-      <Box position='relative' zIndex='0'>
-        {editable && (
-          <CodeContainer>
-            <LiveEditor onChange={onChange} style={liveEditorStyle} />
-          </CodeContainer>
-        )}
-        <CopyButton code={editorCode} />
-        {editable && <EditableNotice />}
-      </Box>
-      {editable && <LiveError style={liveErrorStyle} />}
-    </LiveProvider>
-  )
-}
-
-export default ReactLiveBlock
+import { Box, BoxProps, chakra } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'
+import CodeContainer from './code-container'
+import CopyButton from './copy-button'
+import scope from './react-live-scope'
+import { liveEditorStyle, liveErrorStyle } from './styles'
+import { t } from 'utils/i18n'
+
+const LiveCodePreview = chakra(LivePreview, {
+  baseStyle: {
+    fontFamily: 'body',
+    mt: 5,
+    p: 3,
+    borderWidth: 1,
+    borderRadius: '12px',
+    overflowX: 'auto',
+  },
+})
+
+const EditableNotice = (props: BoxProps) => {
+  return (
+    <Box
+      position='absolute'
+      width='full'
+      top='-1.25em'
+      roundedTop='8px'
+      bg='#011627'
+      py='2'
+      zIndex='0'
+      letterSpacing='wide'
+      color='gray.400'
+      fontSize='xs'
+      fontWeight='semibold'
+      textAlign='center'
+      textTransform='uppercase'
+      pointerEvents='none'
+      {...props}
+    >
+      {t('component.mdx-components.react-live-block.editable-example')}
+    </Box>
+  )
+}
+
+function ReactLiveBlock({ editable, rawCode, ...rest }) {
+  const [editorCode, setEditorCode] = useState(rawCode.trim())
+  const onChange = (newCode) => setEditorCode(newCode.trim())
+  const liveProviderProps = {
+    code: editorCode,
+    scope,
+    ...rest,
+  }
+  return (
+    <LiveProvider {...liveProviderProps}>
+      <LiveCodePreview zIndex='1' />
+      <Box position='relative' zIndex='0'>
+        {editable && (
+          <CodeContainer>
+            <LiveEditor onChange={onChange} style={liveEditorStyle} />
+          </CodeContainer>
+        )}
+        <CopyButton code={editorCode} />
+        {editable && <EditableNotice />}
+      </Box>
+      {editable && <LiveError style={liveErrorStyle} />}
+    </LiveProvider>
+  )
+}
+
+export default ReactLiveBlock