Various editor fixes (#160)

* Tab should move to body from heading

* Focus editor on mount, closes #156

* Closes #154 - Just went for the simple approach here, considered something more complex but this is clear

* Added body placeholder

frontend/components/Editor/components/Heading.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { Document } from 'slate';
 import _ from 'lodash';
 import slug from 'slug';
 import StarIcon from 'components/Icon/StarIcon';
@@ -41,8 +42,8 @@ const StyledStar = styled(StarIcon)`
   }
 `;
 
-function Heading(
-  {
+function Heading(props: Props, { starred }: Context) {
+  const {
     parent,
     placeholder,
     node,
@@ -52,10 +53,9 @@ function Heading(
     readOnly,
     children,
     component = 'h1',
-  }: Props,
-  { starred }: Context
-) {
-  const firstHeading = parent.nodes.first() === node;
+  } = props;
+  const parentIsDocument = parent instanceof Document;
+  const firstHeading = parentIsDocument && parent.nodes.first() === node;
   const showPlaceholder = placeholder && firstHeading && !node.text;
   const slugish = _.escape(`${component}-${slug(node.text)}`);
   const showStar = readOnly && !!onStar;
@@ -66,7 +66,7 @@ function Heading(
     <Component className={styles.title}>
       {children}
       {showPlaceholder &&
-        <span className={styles.placeholder}>
+        <span className={styles.placeholder} contentEditable={false}>
           {editor.props.placeholder}
         </span>}
       {showHash &&

frontend/components/Editor/components/Paragraph.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { Document } from 'slate';
+import type { Props } from '../types';
+import styles from '../Editor.scss';
+
+export default function Link({
+  attributes,
+  editor,
+  node,
+  parent,
+  children,
+}: Props) {
+  const parentIsDocument = parent instanceof Document;
+  const firstParagraph = parent && parent.nodes.get(1) === node;
+  const lastParagraph = parent && parent.nodes.last() === node;
+  const showPlaceholder =
+    parentIsDocument && firstParagraph && lastParagraph && !node.text;
+
+  return (
+    <p>
+      {children}
+      {showPlaceholder &&
+        <span className={styles.placeholder} contentEditable={false}>
+          {editor.props.bodyPlaceholder}
+        </span>}
+    </p>
+  );
+}