Truncated previews now rendered on client

frontend/components/DocumentPreview/DocumentPreview.js

@@ -4,6 +4,7 @@ import { toJS } from 'mobx';
 import { Link } from 'react-router-dom';
 import type { Document } from 'types';
 import styled from 'styled-components';
+import { color } from 'styles/constants';
 import PublishingInfo from 'components/PublishingInfo';
 import Markdown from 'components/Markdown';
 
@@ -16,25 +17,38 @@ const Container = styled.div`
   padding: 20px 0;
 `;
 
+const DocumentLink = styled(Link)`
+  display: block;
+  margin: -16px;
+  padding: 16px;
+  border-radius: 8px;
+
+  h1 {
+    margin-top: 0;
+  }
+
+  &:hover {
+    background: ${color.smokeLight};
+  }
+`;
+
+const StyledMarkdown = styled(Markdown)`
+  pointer-events: none;
+`;
+
 const DocumentPreview = ({ document }: Props) => {
   return (
     <Container>
-      <PublishingInfo
-        createdAt={document.createdAt}
-        createdBy={document.createdBy}
-        updatedAt={document.updatedAt}
-        updatedBy={document.updatedBy}
-        collaborators={toJS(document.collaborators)}
-      />
-      <Link to={document.url}>
-        <h2>{document.title}</h2>
-      </Link>
-      <Markdown text={document.text.substring(0, 300)} />
-      <div>
-        <Link to={document.url}>
-          Continue reading…
-        </Link>
-      </div>
+      <DocumentLink to={document.url}>
+        <PublishingInfo
+          createdAt={document.createdAt}
+          createdBy={document.createdBy}
+          updatedAt={document.updatedAt}
+          updatedBy={document.updatedBy}
+          collaborators={toJS(document.collaborators)}
+        />
+        <StyledMarkdown text={document.text} limit={150} />
+      </DocumentLink>
     </Container>
   );
 };

frontend/components/Editor/Editor.scss

@@ -12,7 +12,6 @@
 }
 
 .editor {
-  background: #fff;
   color: #1b2631;
   height: auto;
   width: 100%;

frontend/components/Markdown/Markdown.js

@@ -1,35 +1,75 @@
 // @flow
 import React, { Component } from 'react';
-import { Editor } from 'slate';
+import { State, Document, Editor } from 'slate';
 import MarkdownSerializer from '../Editor/serializer';
-import type { State } from '../Editor/types';
+import type { State as StateType } from '../Editor/types';
 import schema from '../Editor/schema';
 import styles from '../Editor/Editor.scss';
 
 type Props = {
   text: string,
+  className: string,
+  limit: number,
 };
 
-export default class MarkdownEditor extends Component {
+function filterDocument({ document, characterLimit, nodeLimit }) {
+  if (document.text.length <= characterLimit) {
+    return document;
+  }
+
+  let totalCharacters = 0;
+  let totalNodes = 0;
+  const newNodes = document.nodes.filter(childNode => {
+    if (childNode.text.length + totalCharacters <= characterLimit) {
+      totalCharacters += childNode.text.length;
+
+      if (totalNodes++ <= nodeLimit) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  return Document.create({
+    ...document,
+    nodes: newNodes,
+  });
+}
+
+class Markdown extends React.Component {
   props: Props;
 
   state: {
-    state: State,
+    state: StateType,
   };
 
   constructor(props: Props) {
     super(props);
-    this.state = { state: MarkdownSerializer.deserialize(props.text) };
+    const state = MarkdownSerializer.deserialize(props.text);
+
+    this.state = {
+      state: State.create({
+        document: filterDocument({
+          document: state.document,
+          characterLimit: props.limit,
+          nodeLimit: 5,
+        }),
+      }),
+    };
   }
 
   render = () => {
     return (
-      <Editor
-        className={styles.editor}
-        schema={schema}
-        state={this.state.state}
-        readOnly
-      />
+      <span className={this.props.className}>
+        <Editor
+          className={styles.editor}
+          schema={schema}
+          state={this.state.state}
+          readOnly
+        />
+      </span>
     );
   };
 }
+
+export default Markdown;