From f0afa670129e290d34289cd0108fd5377a477e8a Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 26 Feb 2020 22:29:22 -0800
Subject: [PATCH] fix: Focus on empty document after creation fix: Clicking in
 whitespace below document should focus Remove unused component

---
 app/components/Editor/Editor.js               | 12 +++---
 .../LoadingPlaceholder/LoadingPlaceholder.js  | 10 ++++-
 app/scenes/Document/components/Editor.js      |  9 ++++-
 .../Document/components/LoadingPlaceholder.js | 39 -------------------
 app/scenes/DocumentNew.js                     |  2 +-
 5 files changed, 22 insertions(+), 50 deletions(-)
 delete mode 100644 app/scenes/Document/components/LoadingPlaceholder.js

diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js
index d8623ac43..4f6210bfe 100644
--- a/app/components/Editor/Editor.js
+++ b/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} />
+));
diff --git a/app/components/LoadingPlaceholder/LoadingPlaceholder.js b/app/components/LoadingPlaceholder/LoadingPlaceholder.js
index 15de0f56e..b20d66e77 100644
--- a/app/components/LoadingPlaceholder/LoadingPlaceholder.js
+++ b/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;
+`;
diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js
index d8013c883..540b8a9a7 100644
--- a/app/scenes/Document/components/Editor.js
+++ b/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}
diff --git a/app/scenes/Document/components/LoadingPlaceholder.js b/app/scenes/Document/components/LoadingPlaceholder.js
deleted file mode 100644
index 396facc50..000000000
--- a/app/scenes/Document/components/LoadingPlaceholder.js
+++ /dev/null
@@ -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;
diff --git a/app/scenes/DocumentNew.js b/app/scenes/DocumentNew.js
index aa7345b78..53cfdaf25 100644
--- a/app/scenes/DocumentNew.js
+++ b/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';