Improves

frontend/components/DocumentPreview/DocumentPreview.js

@@ -5,8 +5,8 @@ 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';
+import PublishingInfo from 'components/PublishingInfo';
 
 type Props = {
   document: Document,
@@ -32,7 +32,7 @@ const DocumentLink = styled(Link)`
   }
 `;
 
-const StyledMarkdown = styled(Markdown)`
+const TruncatedMarkdown = styled(Markdown)`
   pointer-events: none;
 `;
 
@@ -47,7 +47,7 @@ const DocumentPreview = ({ document }: Props) => {
           updatedBy={document.updatedBy}
           collaborators={toJS(document.collaborators)}
         />
-        <StyledMarkdown text={document.text} limit={150} />
+        <TruncatedMarkdown text={document.text} limit={150} />
       </DocumentLink>
     </Container>
   );

frontend/components/Markdown/Markdown.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import React from 'react';
 import { State, Document, Editor } from 'slate';
 import MarkdownSerializer from '../Editor/serializer';
 import type { State as StateType } from '../Editor/types';
@@ -12,14 +12,15 @@ type Props = {
   limit: number,
 };
 
-function filterDocument({ document, characterLimit, nodeLimit }) {
+function filterDocumentState({ state, characterLimit, nodeLimit }) {
+  const { document } = state;
   if (document.text.length <= characterLimit) {
-    return document;
+    return state;
   }
 
   let totalCharacters = 0;
   let totalNodes = 0;
-  const newNodes = document.nodes.filter(childNode => {
+  const nodes = document.nodes.filter(childNode => {
     if (childNode.text.length + totalCharacters <= characterLimit) {
       totalCharacters += childNode.text.length;
 
@@ -30,9 +31,11 @@ function filterDocument({ document, characterLimit, nodeLimit }) {
     return false;
   });
 
-  return Document.create({
-    ...document,
-    nodes: newNodes,
+  return State.create({
+    document: Document.create({
+      ...document,
+      nodes: nodes,
+    }),
   });
 }
 
@@ -46,19 +49,18 @@ class Markdown extends React.Component {
   constructor(props: Props) {
     super(props);
     const state = MarkdownSerializer.deserialize(props.text);
+    const options = {
+      state,
+      characterLimit: props.limit,
+      nodeLimit: 5,
+    };
 
     this.state = {
-      state: State.create({
-        document: filterDocument({
-          document: state.document,
-          characterLimit: props.limit,
-          nodeLimit: 5,
-        }),
-      }),
+      state: filterDocumentState(options),
     };
   }
 
-  render = () => {
+  render() {
     return (
       <span className={this.props.className}>
         <Editor
@@ -69,7 +71,7 @@ class Markdown extends React.Component {
         />
       </span>
     );
-  };
+  }
 }
 
 export default Markdown;