Upgrade to RME 2, restores functionality removed from that module

app/components/ClickablePadding.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  onClick?: ?Function,
+  grow?: boolean,
+};
+
+const ClickablePadding = (props: Props) => {
+  return <Container grow={props.grow} onClick={props.onClick} />;
+};
+
+const Container = styled.div`
+  min-height: 50vh;
+  padding-top: 50px;
+  cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
+  ${({ grow }) => grow && `flex-grow: 1;`};
+`;
+
+export default ClickablePadding;

app/scenes/Document/Document.js

@@ -140,7 +140,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   loadEditor = async () => {
-    const EditorImport = await import('rich-markdown-editor');
+    const EditorImport = await import('./components/Editor');
     this.editorComponent = EditorImport.default;
   };
 

app/scenes/Document/components/Editor.js

@@ -0,0 +1,112 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { Block, Change, Node, Mark, Text } from 'slate';
+import RichMarkdownEditor, { Placeholder, schema } from 'rich-markdown-editor';
+import ClickablePadding from 'components/ClickablePadding';
+
+type Props = {
+  titlePlaceholder: string,
+  bodyPlaceholder: string,
+  readOnly: boolean,
+};
+
+// add rules to the schema to ensure the first node is a heading
+schema.document.nodes.unshift({ types: ['heading1'], min: 1, max: 1 });
+schema.document.normalize = (
+  change: Change,
+  reason: string,
+  {
+    node,
+    child,
+    mark,
+    index,
+  }: { node: Node, mark?: Mark, child: Node, index: number }
+) => {
+  switch (reason) {
+    case 'child_type_invalid': {
+      return change.setNodeByKey(
+        child.key,
+        index === 0 ? 'heading1' : 'paragraph'
+      );
+    }
+    case 'child_required': {
+      const block = Block.create(index === 0 ? 'heading1' : 'paragraph');
+      return change.insertNodeByKey(node.key, index, block);
+    }
+    default:
+  }
+};
+
+class Editor extends React.Component<Props> {
+  editor: *;
+
+  setEditorRef = (ref: RichMarkdownEditor) => {
+    this.editor = ref;
+  };
+
+  focusAtEnd = () => {
+    console.log(this.editor);
+    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;
+
+    return (
+      <React.Fragment>
+        <StyledEditor
+          innerRef={this.setEditorRef}
+          renderPlaceholder={this.renderPlaceholder}
+          schema={schema}
+          {...this.props}
+        />
+        <ClickablePadding
+          onClick={!readOnly ? this.focusAtEnd : undefined}
+          grow
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+// additional styles account for placeholder nodes not always re-rendering
+const StyledEditor = styled(RichMarkdownEditor)`
+  display: flex;
+  flex: 0;
+
+  ${Placeholder} {
+    visibility: hidden;
+  }
+
+  h1:first-of-type {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+
+  p:nth-child(2):last-child {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+`;
+
+export default Editor;

package.json

@@ -157,7 +157,7 @@
     "react-waypoint": "^7.3.1",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
-    "rich-markdown-editor": "1.4.3-0",
+    "rich-markdown-editor": "2.0.4",
     "safestart": "1.1.0",
     "sequelize": "4.28.6",
     "sequelize-cli": "^2.7.0",

yarn.lock

@@ -762,7 +762,7 @@ babel-plugin-syntax-trailing-function-commas@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
 
-babel-plugin-transform-async-to-generator@^6.22.0:
+babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
   dependencies:
@@ -1011,6 +1011,12 @@ babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^
   dependencies:
     regenerator-transform "^0.10.0"
 
+babel-plugin-transform-runtime@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
@@ -8848,11 +8854,13 @@ retry-axios@0.3.2, retry-axios@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/retry-axios/-/retry-axios-0.3.2.tgz#5757c80f585b4cc4c4986aa2ffd47a60c6d35e13"
 
-rich-markdown-editor@1.4.3-0:
+rich-markdown-editor@2.0.4:
-  version "1.4.3-0"
+  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-1.4.3-0.tgz#2b90e185b35821463c138ad36f2eb209c990c05a"
+  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-2.0.4.tgz#6cd317e213a0b574a2ed905ea710eba2d27aab21"
   dependencies:
     "@tommoor/slate-drop-or-paste-images" "^0.8.1"
+    babel-plugin-transform-async-to-generator "^6.24.1"
+    babel-plugin-transform-runtime "^6.23.0"
     boundless-arrow-key-navigation "^1.1.0"
     copy-to-clipboard "^3.0.8"
     eslint-plugin-flowtype "^2.46.1"
@@ -8874,7 +8882,7 @@ rich-markdown-editor@1.4.3-0:
     slate-prism "^0.5.0"
     slate-react "^0.12.3"
     slate-trailing-block "^0.5.0"
-    slug "^0.9.1"
+    slugify "^1.3.0"
     styled-components "^3.2.3"
 
 right-align@^0.1.1:
@@ -9320,12 +9328,16 @@ slide@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
 
-slug@0.9.1, slug@^0.9.1:
+slug@0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/slug/-/slug-0.9.1.tgz#af08f608a7c11516b61778aa800dce84c518cfda"
   dependencies:
     unicode ">= 0.3.1"
 
+slugify@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.0.tgz#787919259d28c825fbcae6da2e01c77a109793f6"
+
 snake-case@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
@@ -10152,8 +10164,8 @@ unherit@^1.0.4:
     xtend "^4.0.1"
 
 "unicode@>= 0.3.1":
-  version "10.0.0"
+  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/unicode/-/unicode-10.0.0.tgz#e5d51c1db93b6c71a0b879e0b0c4af7e6fdf688e"
+  resolved "https://registry.yarnpkg.com/unicode/-/unicode-11.0.1.tgz#735bd422ec75cf28d396eb224d535d168d5f1db6"
 
 unified@^6.1.5:
   version "6.1.6"