Fixes code blocks (#554)

* Fixes code blocks

* Flow ignore uncompiled files

* 💚

* big > bug

app/components/Editor/components/Code.js

@@ -5,37 +5,44 @@ import type { SlateNodeProps } from '../types';
 import CopyButton from './CopyButton';
 import { color } from 'shared/styles/constants';
 
+function getCopyText(node) {
+  return node.nodes.reduce((memo, line) => `${memo}${line.text}\n`, '');
+}
+
 export default function Code({
   children,
   node,
   readOnly,
   attributes,
 }: SlateNodeProps) {
-  const language = node.data.get('language') || 'javascript';
+  // TODO: There is a currently a bug in slate-prism that prevents code elements
+  // with a language class name from formatting correctly on first load.
+  // const language = node.data.get('language') || 'javascript';
 
   return (
     <Container {...attributes} spellCheck={false}>
-      {readOnly && <CopyButton text={node.text} />}
-      <Pre className={`language-${language}`}>
-        <code className={`language-${language}`}>{children}</code>
-      </Pre>
+      {readOnly && <CopyButton text={getCopyText(node)} />}
+      <code>{children}</code>
     </Container>
   );
 }
 
-const Pre = styled.pre`
+const Container = styled.div`
+  position: relative;
   padding: 0.5em 1em;
   background: ${color.smokeLight};
   border-radius: 4px;
   border: 1px solid ${color.smokeDark};
 
   code {
+    display: block;
     padding: 0;
+    line-height: 1.4em;
   }
-`;
 
-const Container = styled.div`
-  position: relative;
+  pre {
+    margin: 0;
+  }
 
   &:hover {
     > span {

app/components/Editor/components/CopyButton.js

@@ -23,7 +23,7 @@ class CopyButton extends Component {
   render() {
     return (
       <StyledCopyToClipboard onCopy={this.handleCopy} {...this.props}>
-        <span>{this.copied ? 'Copied!' : 'Copy to clipboard'}</span>
+        <span>{this.copied ? 'Copied!' : 'Copy'}</span>
       </StyledCopyToClipboard>
     );
   }
@@ -38,13 +38,13 @@ const StyledCopyToClipboard = styled(CopyToClipboard)`
   transition: opacity 50ms ease-in-out;
   z-index: 1;
   font-size: 12px;
-  background: ${color.slateLight};
+  background: ${color.smoke};
   border-radius: 0 2px 0 2px;
   padding: 1px 6px;
   cursor: pointer;
 
   &:hover {
-    background: ${color.slate};
+    background: ${color.smokeDark};
   }
 `;
 

app/components/Editor/components/Image.js

@@ -78,7 +78,8 @@ const StyledImg = styled.img`
   opacity: ${props => (props.loading ? 0.5 : 1)};
 `;
 
-const CenteredImage = styled.div`
+const CenteredImage = styled.span`
+  display: block;
   text-align: center;
 `;