Fixes code blocks (#554)

* Fixes code blocks

* Flow ignore uncompiled files

* 💚

* big > bug

.flowconfig

@@ -8,7 +8,8 @@
 .*/node_modules/polished/.*
 .*/node_modules/react-side-effect/.*
 .*/node_modules/fbjs/.*
-.*/node_modules/slate-edit-code/.*
+.*/node_modules/@tommoor/slate-edit-code/example/.*
+.*/node_modules/@tommoor/slate-edit-code/lib/.*
 .*/node_modules/slate-edit-list/.*
 .*/node_modules/slate-prism/.*
 .*/node_modules/config-chain/.*

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' }),

package.json

@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@tommoor/slate-drop-or-paste-images": "^0.8.1",
+    "@tommoor/slate-edit-code": "^0.13.3",
     "aws-sdk": "^2.135.0",
     "babel-core": "^6.24.1",
     "babel-eslint": "^8.1.2",
@@ -165,7 +166,6 @@
     "sequelize-encrypted": "0.1.0",
     "slate": "^0.31.5",
     "slate-collapse-on-escape": "^0.6.0",
-    "slate-edit-code": "^0.13.2",
     "slate-edit-list": "^0.10.2",
     "slate-md-serializer": "^1.0.7",
     "slate-paste-linkify": "^0.5.0",

yarn.lock

@@ -75,6 +75,15 @@
     mime-types "^2.1.11"
     slate-dev-logger "^0.1.0"
 
+"@tommoor/slate-edit-code@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@tommoor/slate-edit-code/-/slate-edit-code-0.13.3.tgz#05c00bd23e79d1229fccdd9988c23bd8bb94b448"
+  dependencies:
+    detect-indent "^4.0.0"
+    detect-newline "^2.1.0"
+    ends-with "^0.2.0"
+    is-hotkey "^0.1.1"
+
 "@types/geojson@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.3.tgz#fbcf7fa5eb6dd108d51385cc6987ec1f24214523"
@@ -8722,15 +8731,6 @@ slate-dev-logger@^0.1.0, slate-dev-logger@^0.1.36:
   version "0.1.36"
   resolved "https://registry.npmjs.org/slate-dev-logger/-/slate-dev-logger-0.1.36.tgz#ecdb37dbf944dfc742bab23b6a20d5a0472db95e"
 
-slate-edit-code@^0.13.2:
-  version "0.13.2"
-  resolved "https://registry.npmjs.org/slate-edit-code/-/slate-edit-code-0.13.2.tgz#682a7640da076906e5b4a4c73ec0e46d31d92c62"
-  dependencies:
-    detect-indent "^4.0.0"
-    detect-newline "^2.1.0"
-    ends-with "^0.2.0"
-    is-hotkey "^0.1.1"
-
 slate-edit-list@^0.10.2:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/slate-edit-list/-/slate-edit-list-0.10.2.tgz#938a791c7e7974fac3ef00505cc98710c307efc6"