Upgrade Editor – Slate 0.44 / RME 8.0.0 (#863)

* Upgrade Slate

* Normalization

* Remove dupe dep

* Fixes placeholders

* Image uploading fixed

* Verbose but solid placeholder handling

* RME 8.0.0

* Fixes: Ability to delete embeds

app/scenes/Document/components/Editor.js

@@ -1,14 +1,12 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { Text } from 'slate';
-import { Placeholder } from 'rich-markdown-editor';
 import Editor from 'components/Editor';
+import Placeholder from 'rich-markdown-editor/lib/components/Placeholder';
 import ClickablePadding from 'components/ClickablePadding';
+import plugins from './plugins';
 
 type Props = {
-  titlePlaceholder?: string,
-  bodyPlaceholder?: string,
   defaultValue?: string,
   readOnly?: boolean,
 };
@@ -30,23 +28,6 @@ class DocumentEditor extends React.Component<Props> {
     if (this.editor) this.editor.focusAtEnd();
   };
 
-  renderPlaceholder = (props: *) => {
-    const { editor, node } = props;
-
-    if (editor.state.isComposing) return;
-    if (node.object !== 'block') return;
-    if (!Text.isTextList(node.nodes)) return;
-    if (node.text !== '') return;
-
-    const index = editor.value.document.getBlocks().indexOf(node);
-    if (index > 1) return;
-
-    const text =
-      index === 0 ? this.props.titlePlaceholder : this.props.bodyPlaceholder;
-
-    return <Placeholder>{editor.props.readOnly ? '' : text}</Placeholder>;
-  };
-
   render() {
     const { readOnly } = this.props;
 
@@ -54,7 +35,7 @@ class DocumentEditor extends React.Component<Props> {
       <React.Fragment>
         <StyledEditor
           ref={ref => (this.editor = ref)}
-          renderPlaceholder={this.renderPlaceholder}
+          plugins={plugins}
           {...this.props}
         />
         <ClickablePadding
@@ -66,21 +47,15 @@ class DocumentEditor extends React.Component<Props> {
   }
 }
 
-// additional styles account for placeholder nodes not always re-rendering
 const StyledEditor = styled(Editor)`
   display: flex;
   flex: 0;
 
-  ${Placeholder} {
-    visibility: hidden;
-  }
-
-  h1:first-of-type {
+  p {
     ${Placeholder} {
-      visibility: visible;
+      visibility: hidden;
     }
   }
-
   p:nth-child(2):last-child {
     ${Placeholder} {
       visibility: visible;