check if value before rendering prism (codesandbox#3808)

SaraVieira · web-flow · commit b08075eb5395 · 2020-04-01T06:57:48.000+02:00
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.tsx
@@ -9,40 +9,42 @@ import { withTheme } from 'styled-components';
 
 export const Code = withTheme(({ value, language, theme }) => (
   <>
-    <Highlight
-      {...defaultProps}
-      code={value}
-      language={language || 'js'}
-      theme={theme.vscodeTheme.type === 'dark' ? nightOwl : nightOwlLight}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <Element
-          as="pre"
-          paddingX={4}
-          paddingY={2}
-          marginY={2}
-          className={className}
-          style={style}
-          css={css({
-            fontSize: 3,
-            whiteSpace: 'pre-wrap',
-            maxHeight: 400,
-            overflow: 'scroll',
+    {value ? (
+      <Highlight
+        {...defaultProps}
+        code={value}
+        language={language || 'js'}
+        theme={theme.vscodeTheme.type === 'dark' ? nightOwl : nightOwlLight}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <Element
+            as="pre"
+            paddingX={4}
+            paddingY={2}
+            marginY={2}
+            className={className}
+            style={style}
+            css={css({
+              fontSize: 3,
+              whiteSpace: 'pre-wrap',
+              maxHeight: 400,
+              overflow: 'scroll',
 
-            '*': {
-              wordBreak: 'break-all',
-            },
-          })}
-        >
-          {tokens.map((line, i) => (
-            <Element {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <Element as="span" {...getTokenProps({ token, key })} />
-              ))}
-            </Element>
-          ))}
-        </Element>
-      )}
-    </Highlight>
+              '*': {
+                wordBreak: 'break-all',
+              },
+            })}
+          >
+            {tokens.map((line, i) => (
+              <Element {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <Element as="span" {...getTokenProps({ token, key })} />
+                ))}
+              </Element>
+            ))}
+          </Element>
+        )}
+      </Highlight>
+    ) : null}
   </>
 ));
