'Copy to Clipboard' functionality (#163)

* Adds 'Copy to Clipboard' functionality to all code blocks in readOnly

* Show on hover, move to SC

* 💚

* PR feedback

frontend/components/Editor/components/Code.js

@@ -1,13 +1,40 @@
 // @flow
 import React from 'react';
+import styled from 'styled-components';
+import CopyButton from './CopyButton';
+import { color } from 'styles/constants';
 import type { Props } from '../types';
 
-export default function Code({ children, attributes }: Props) {
+export default function Code({ children, node, readOnly, attributes }: Props) {
   return (
-    <pre>
-      <code {...attributes}>
-        {children}
-      </code>
-    </pre>
+    <Container>
+      {readOnly && <CopyButton text={node.text} />}
+      <Pre>
+        <code {...attributes}>
+          {children}
+        </code>
+      </Pre>
+    </Container>
   );
 }
+
+const Pre = styled.pre`
+  padding: .5em 1em;
+  background: ${color.smoke};
+  border-radius: 4px;
+  border: 1px solid ${color.smokeDark};
+
+  code {
+    padding: 0;
+  }
+`;
+
+const Container = styled.div`
+  position: relative;
+
+  &:hover {
+    > span {
+      opacity: 1;
+    }
+  }
+`;