Editor fixes

frontend/components/DropToImport/DropToImport.js

@@ -96,10 +96,8 @@ class DropToImport extends Component {
         multiple
         {...props}
       >
-        <span>
-          {this.state.isImporting && <LoadingIndicator />}
-          {this.props.children}
-        </span>
+        {this.state.isImporting && <LoadingIndicator />}
+        {this.props.children}
       </Dropzone>
     );
   }

frontend/components/Editor/Editor.js

@@ -5,11 +5,13 @@ import { observer } from 'mobx-react';
 import { Editor, Plain } from 'slate';
 import classnames from 'classnames/bind';
 import type { Document, State, Editor as EditorType } from './types';
+import Flex from 'components/Flex';
 import ClickablePadding from './components/ClickablePadding';
 import Toolbar from './components/Toolbar';
 import Markdown from './serializer';
 import createSchema from './schema';
 import createPlugins from './plugins';
+import styled from 'styled-components';
 import styles from './Editor.scss';
 
 const cx = classnames.bind(styles);
@@ -25,6 +27,7 @@ type Props = {
   onImageUploadStop: Function,
   starred: boolean,
   readOnly: boolean,
+  heading?: ?React.Element<*>,
 };
 
 type KeyData = {
@@ -116,7 +119,13 @@ type KeyData = {
 
   render = () => {
     return (
-      <div>
+      <Container auto column>
+        <HeaderContainer
+          onClick={this.focusAtStart}
+          readOnly={this.props.readOnly}
+        >
+          {this.props.heading}
+        </HeaderContainer>
         <Toolbar state={this.state.state} onChange={this.onChange} />
         <Editor
           key={this.props.starred}
@@ -134,7 +143,7 @@ type KeyData = {
         />
         {!this.props.readOnly &&
           <ClickablePadding onClick={this.focusAtEnd} grow />}
-      </div>
+      </Container>
     );
   };
 }
@@ -143,4 +152,15 @@ MarkdownEditor.childContextTypes = {
   starred: PropTypes.bool,
 };
 
+const Container = styled(Flex)`
+  height: 100%;
+`;
+
+const HeaderContainer = styled(Flex).attrs({
+  align: 'flex-end',
+})`
+  height: 100px;
+  ${({ readOnly }) => !readOnly && 'cursor: text;'}
+`;
+
 export default MarkdownEditor;

frontend/scenes/Document/Document.js

@@ -6,6 +6,7 @@ import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
 import { layout } from 'styles/constants';
+import invariant from 'invariant';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
@@ -135,6 +136,21 @@ type Props = {
     this.setState({ isDragging: false });
   };
 
+  renderHeading(isEditing: boolean) {
+    invariant(this.document, 'document not available');
+    return (
+      <InfoWrapper visible={!isEditing}>
+        <PublishingInfo
+          collaborators={this.document.collaborators}
+          createdAt={this.document.createdAt}
+          createdBy={this.document.createdBy}
+          updatedAt={this.document.updatedAt}
+          updatedBy={this.document.updatedBy}
+        />
+      </InfoWrapper>
+    );
+  }
+
   render() {
     const isNew = this.props.newDocument;
     const isEditing = this.props.match.params.edit || isNew;
@@ -161,37 +177,28 @@ type Props = {
             onDragEnter={this.onStartDragging}
             onDragLeave={this.onStopDragging}
             onDrop={this.onStopDragging}
+            style={{ display: 'flex', flex: 1 }}
           >
-            <PagePadding justify="center" auto>
+            <Flex justify="center" auto>
               <Prompt
                 when={this.document.hasPendingChanges}
                 message={DISCARD_CHANGES}
               />
               <DocumentContainer>
-                <InfoWrapper visible={!isEditing}>
-                  <PublishingInfo
-                    collaborators={this.document.collaborators}
-                    createdAt={this.document.createdAt}
-                    createdBy={this.document.createdBy}
-                    updatedAt={this.document.updatedAt}
-                    updatedBy={this.document.updatedBy}
-                  />
-                </InfoWrapper>
-                <Content>
-                  <Editor
-                    key={this.document.id}
-                    text={this.document.text}
-                    onImageUploadStart={this.onImageUploadStart}
-                    onImageUploadStop={this.onImageUploadStop}
-                    onChange={this.onChange}
-                    onSave={this.onSave}
-                    onCancel={this.onCancel}
-                    onStar={this.document.star}
-                    onUnstar={this.document.unstar}
-                    starred={this.document.starred}
-                    readOnly={!isEditing}
-                  />
-                </Content>
+                <Editor
+                  key={this.document.id}
+                  text={this.document.text}
+                  onImageUploadStart={this.onImageUploadStart}
+                  onImageUploadStop={this.onImageUploadStop}
+                  onChange={this.onChange}
+                  onSave={this.onSave}
+                  onCancel={this.onCancel}
+                  onStar={this.document.star}
+                  onUnstar={this.document.unstar}
+                  starred={this.document.starred}
+                  heading={this.renderHeading(!!isEditing)}
+                  readOnly={!isEditing}
+                />
               </DocumentContainer>
               <Meta align="center" justify="flex-end" readOnly={!isEditing}>
                 <Flex align="center">
@@ -207,7 +214,7 @@ type Props = {
                   {!isEditing && <Menu document={this.document} />}
                 </Flex>
               </Meta>
-            </PagePadding>
+            </Flex>
           </DropToImport>}
       </Container>
     );
@@ -228,22 +235,18 @@ const DropHere = styled(Flex)`
 
 const Meta = styled(Flex)`
   align-items: flex-start;
-  width: 100%;
   position: absolute;
   top: 0;
+  right: 0;
   padding: ${layout.padding};
 `;
 
-const Content = styled(Flex)`
-  margin-bottom: 20px;
-`;
-
 const InfoWrapper = styled(Flex)`
   opacity: ${({ visible }) => (visible ? '1' : '0')};
   transition: all 100ms ease-in-out;
 `;
 
-const Container = styled.div`
+const Container = styled(Flex)`
   position: relative;
   width: 100%;
 `;
@@ -252,11 +255,6 @@ const LoadingState = styled(PreviewLoading)`
   margin: 80px 20px;
 `;
 
-const PagePadding = styled(Flex)`
-  padding: 80px 20px;
-  position: relative;
-`;
-
 const DocumentContainer = styled.div`
   font-weight: 400;
   font-size: 1em;