Split editor

app/components/Editor.js

@@ -1,9 +1,6 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
-import { Text } from 'slate';
-import RichMarkdownEditor, { Placeholder } from 'rich-markdown-editor';
-import ClickablePadding from 'components/ClickablePadding';
+import RichMarkdownEditor from 'rich-markdown-editor';
 import { uploadFile } from 'utils/uploadFile';
 import isInternalUrl from 'utils/isInternalUrl';
 
@@ -18,26 +15,6 @@ type Props = {
 };
 
 class Editor extends React.Component<Props> {
-  editor: *;
-
-  componentDidMount() {
-    if (!this.props.defaultValue) {
-      this.focusAtStart();
-    }
-  }
-
-  setEditorRef = (ref: RichMarkdownEditor) => {
-    this.editor = ref;
-  };
-
-  focusAtStart = () => {
-    if (this.editor) this.editor.focusAtStart();
-  };
-
-  focusAtEnd = () => {
-    if (this.editor) this.editor.focusAtEnd();
-  };
-
   onUploadImage = async (file: File) => {
     const result = await uploadFile(file);
     return result.url;
@@ -74,67 +51,16 @@ class Editor extends React.Component<Props> {
     this.props.ui.showToast(message, 'success');
   };
 
-  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, expandToFit } = this.props;
-
     return (
-      <React.Fragment>
-        <StyledEditor
-          ref={this.setEditorRef}
-          renderPlaceholder={this.renderPlaceholder}
-          uploadImage={this.onUploadImage}
-          onClickLink={this.onClickLink}
-          onShowToast={this.onShowToast}
-          {...this.props}
-        />
-        {expandToFit && (
-          <ClickablePadding
-            onClick={!readOnly ? this.focusAtEnd : undefined}
-            grow
-          />
-        )}
-      </React.Fragment>
+      <RichMarkdownEditor
+        uploadImage={this.onUploadImage}
+        onClickLink={this.onClickLink}
+        onShowToast={this.onShowToast}
+        {...this.props}
+      />
     );
   }
 }
 
-// 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;

app/scenes/Document/Document.js

@@ -172,7 +172,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   loadEditor = async () => {
-    const EditorImport = await import('components/Editor');
+    const EditorImport = await import('./components/Editor');
     this.editorComponent = EditorImport.default;
   };
 
@@ -360,7 +360,6 @@ class DocumentScene extends React.Component<Props> {
                 history={this.props.history}
                 ui={this.props.ui}
                 schema={schema}
-                expandToFit
               />
             </MaxWidth>
           </Container>

app/scenes/Document/components/Editor.js

@@ -0,0 +1,91 @@
+// @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 ClickablePadding from 'components/ClickablePadding';
+
+type Props = {
+  titlePlaceholder?: string,
+  bodyPlaceholder?: string,
+  defaultValue?: string,
+  readOnly?: boolean,
+};
+
+class DocumentEditor extends React.Component<Props> {
+  editor: *;
+
+  componentDidMount() {
+    if (!this.props.defaultValue) {
+      this.focusAtStart();
+    }
+  }
+
+  focusAtStart = () => {
+    if (this.editor) this.editor.focusAtStart();
+  };
+
+  focusAtEnd = () => {
+    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
+          ref={ref => (this.editor = ref)}
+          renderPlaceholder={this.renderPlaceholder}
+          {...this.props}
+        />
+        <ClickablePadding
+          onClick={!readOnly ? this.focusAtEnd : undefined}
+          grow
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+// 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 {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+
+  p:nth-child(2):last-child {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+`;
+
+export default DocumentEditor;