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;
 `;
 

app/components/Editor/marks.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import Code from './components/InlineCode';
+import InlineCode from './components/InlineCode';
 import { Mark } from 'slate';
 
 type Props = {
@@ -13,7 +13,7 @@ export default function renderMark(props: Props) {
     case 'bold':
       return <strong>{props.children}</strong>;
     case 'code':
-      return <Code>{props.children}</Code>;
+      return <InlineCode>{props.children}</InlineCode>;
     case 'italic':
       return <em>{props.children}</em>;
     case 'underlined':

app/components/Editor/nodes.js

@@ -53,6 +53,8 @@ export default function createRenderNode({ onInsertImage }: Options) {
         return <HorizontalRule {...props} />;
       case 'code':
         return <Code {...props} />;
+      case 'code-line':
+        return <pre {...attributes}>{props.children}</pre>;
       case 'image':
         return <Image {...props} />;
       case 'link':

app/components/Editor/plugins.js

@@ -3,7 +3,7 @@ import InsertImages from '@tommoor/slate-drop-or-paste-images';
 import PasteLinkify from 'slate-paste-linkify';
 import CollapseOnEscape from 'slate-collapse-on-escape';
 import TrailingBlock from 'slate-trailing-block';
-import EditCode from 'slate-edit-code';
+import EditCode from '@tommoor/slate-edit-code';
 import Prism from 'slate-prism';
 import EditList from './plugins/EditList';
 import KeyboardShortcuts from './plugins/KeyboardShortcuts';
@@ -15,8 +15,6 @@ type Options = {
   onImageUploadStop: () => void,
 };
 
-const onlyInCode = node => node.type === 'code';
-
 const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
   return [
     PasteLinkify({
@@ -37,14 +35,14 @@ const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
     }),
     EditList,
     EditCode({
-      onlyIn: onlyInCode,
       containerType: 'code',
       lineType: 'code-line',
       exitBlocktype: 'paragraph',
+      allowMarks: false,
       selectAll: true,
     }),
     Prism({
-      onlyIn: onlyInCode,
+      onlyIn: node => node.type === 'code',
       getSyntax: node => 'javascript',
     }),
     CollapseOnEscape({ toEdge: 'end' }),