fix: Focus on empty document after creation

fix: Clicking in whitespace below document should focus
Remove unused component

app/components/Editor/Editor.js

@@ -280,9 +280,9 @@ const EditorTooltip = ({ children, ...props }) => (
   </Tooltip>
 );
 
-export default withRouter(
-  withTheme(
-    // $FlowIssue - https://github.com/facebook/flow/issues/6103
-    React.forwardRef((props, ref) => <Editor {...props} forwardedRef={ref} />)
-  )
-);
+const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
+
+// $FlowIssue - https://github.com/facebook/flow/issues/6103
+export default React.forwardRef((props, ref) => (
+  <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
+));

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react';
+import styled from 'styled-components';
 import Mask from 'components/Mask';
 import Fade from 'components/Fade';
 import Flex from 'shared/components/Flex';
 
 export default function LoadingPlaceholder(props: Object) {
   return (
-    <Fade>
+    <Wrapper>
       <Flex column auto {...props}>
         <Mask height={34} />
         <br />
@@ -14,6 +15,11 @@ export default function LoadingPlaceholder(props: Object) {
         <Mask />
         <Mask />
       </Flex>
-    </Fade>
+    </Wrapper>
   );
 }
+
+const Wrapper = styled(Fade)`
+  display: block;
+  margin: 40px 0;
+`;

app/scenes/Document/components/Editor.js

@@ -19,11 +19,15 @@ class DocumentEditor extends React.Component<Props> {
   }
 
   focusAtStart = () => {
-    if (this.editor) this.editor.focusAtStart();
+    if (this.editor) {
+      this.editor.focusAtStart();
+    }
   };
 
   focusAtEnd = () => {
-    if (this.editor) this.editor.focusAtEnd();
+    if (this.editor) {
+      this.editor.focusAtEnd();
+    }
   };
 
   render() {
@@ -33,6 +37,7 @@ class DocumentEditor extends React.Component<Props> {
       <React.Fragment>
         <Editor
           ref={ref => (this.editor = ref)}
+          autoFocus={!this.props.defaultValue}
           plugins={plugins}
           grow={!readOnly}
           {...this.props}

app/scenes/Document/components/LoadingPlaceholder.js

@@ -1,39 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { pulsate } from 'shared/styles/animations';
-import Flex from 'shared/components/Flex';
-import Fade from 'components/Fade';
-
-import { randomInteger } from 'shared/random';
-
-const randomValues = Array.from(
-  new Array(5),
-  () => `${randomInteger(85, 100)}%`
-);
-
-const LoadingPlaceholder = () => {
-  return (
-    <Wrapper>
-      <Flex column auto>
-        <Mask style={{ width: randomValues[0] }} header />
-        <Mask style={{ width: randomValues[1] }} />
-        <Mask style={{ width: randomValues[2] }} />
-        <Mask style={{ width: randomValues[3] }} />
-      </Flex>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled(Fade)`
-  margin: 40px 0;
-`;
-
-const Mask = styled(Flex)`
-  height: ${props => (props.header ? 28 : 18)}px;
-  margin-bottom: ${props => (props.header ? 32 : 14)}px;
-  background-color: ${props => props.theme.smoke};
-  animation: ${pulsate} 1.3s infinite;
-`;
-
-export default LoadingPlaceholder;

app/scenes/DocumentNew.js

@@ -4,7 +4,7 @@ import { inject } from 'mobx-react';
 import type { RouterHistory, Location } from 'react-router-dom';
 import Flex from 'shared/components/Flex';
 import CenteredContent from 'components/CenteredContent';
-import LoadingPlaceholder from 'scenes/Document/components/LoadingPlaceholder';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import DocumentsStore from 'stores/DocumentsStore';
 import UiStore from 'stores/UiStore';
 import { documentEditUrl } from 'utils/routeHelpers';