feat: Separate title from body (#1216)

* first pass at updating all Time components each second

* fix a couple date variable typos

* use class style state management instead of hooks

* wip: Separate title from body

* address feedback

* test: Remove unused test

* feat: You in publishing info language
fix: Removal of secondary headings

* After much deliberation… a migration is needed for this to be reliable

* fix: Export to work with new title structure

* fix: Untitled

* fix: Consistent spacing of first editor node

* fix: Emoji in title handling

* fix: Time component not updating for new props

* chore: Add createdAt case

* fix: Conflict after merging new TOC

* PR feedback

* lint

* fix: Heading level adjustment

Co-authored-by: Taylor Lapeyre <taylorlapeyre@gmail.com>

app/components/DocumentPreview/DocumentPreview.js

@@ -152,7 +152,7 @@ class DocumentPreview extends React.Component<Props> {
         {...rest}
       >
         <Heading>
-          <Title text={document.title} highlight={highlight} />
+          <Title text={document.title || 'Untitled'} highlight={highlight} />
           {!document.isDraft &&
             !document.isArchived && (
               <Actions>

app/components/Editor/Editor.js

@@ -113,7 +113,7 @@ const StyledEditor = styled(RichMarkdownEditor)`
       visibility: hidden;
     }
   }
-  p:nth-child(2):last-child {
+  p:nth-child(1):last-child {
     ${Placeholder} {
       visibility: visible;
     }
@@ -131,6 +131,15 @@ const StyledEditor = styled(RichMarkdownEditor)`
       }
     }
   }
+
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child,
+  h6:first-child {
+    margin-top: 0;
+  }
 `;
 
 /*

app/components/PublishingInfo.js

@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react';
-import { inject } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import styled from 'styled-components';
 import Document from 'models/Document';
 import Flex from 'shared/components/Flex';
 import Time from 'shared/components/Time';
 import Breadcrumb from 'shared/components/Breadcrumb';
 import CollectionsStore from 'stores/CollectionsStore';
+import AuthStore from 'stores/AuthStore';
 
 const Container = styled(Flex)`
   color: ${props => props.theme.textTertiary};
@@ -23,29 +24,33 @@ const Modified = styled.span`
 
 type Props = {
   collections: CollectionsStore,
+  auth: AuthStore,
   showCollection?: boolean,
   showPublished?: boolean,
   document: Document,
-  views?: number,
+  children: React.Node,
 };
 
 function PublishingInfo({
+  auth,
   collections,
   showPublished,
   showCollection,
   document,
+  children,
+  ...rest
 }: Props) {
   const {
     modifiedSinceViewed,
     updatedAt,
     updatedBy,
+    createdAt,
     publishedAt,
     archivedAt,
     deletedAt,
     isDraft,
   } = document;
 
-  const neverUpdated = publishedAt === updatedAt;
   let content;
 
   if (deletedAt) {
@@ -60,7 +65,13 @@ function PublishingInfo({
         archived <Time dateTime={archivedAt} /> ago
       </span>
     );
-  } else if (publishedAt && (neverUpdated || showPublished)) {
+  } else if (createdAt === updatedAt) {
+    content = (
+      <span>
+        created <Time dateTime={updatedAt} /> ago
+      </span>
+    );
+  } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
     content = (
       <span>
         published <Time dateTime={publishedAt} /> ago
@@ -81,10 +92,11 @@ function PublishingInfo({
   }
 
   const collection = collections.get(document.collectionId);
+  const updatedByMe = auth.user && auth.user.id === updatedBy.id;
 
   return (
-    <Container align="center">
-      {updatedBy.name}&nbsp;
+    <Container align="center" {...rest}>
+      {updatedByMe ? 'You' : updatedBy.name}&nbsp;
       {content}
       {showCollection &&
         collection && (
@@ -95,8 +107,9 @@ function PublishingInfo({
             </strong>
           </span>
         )}
+      {children}
     </Container>
   );
 }
 
-export default inject('collections')(PublishingInfo);
+export default inject('collections', 'auth')(observer(PublishingInfo));