Moving previews to client side rendering for consistency

frontend/components/DocumentPreview/DocumentPreview.js

@@ -2,43 +2,41 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { Link } from 'react-router-dom';
-
-import styles from './DocumentPreview.scss';
-
+import type { Document } from 'types';
+import styled from 'styled-components';
 import PublishingInfo from 'components/PublishingInfo';
+import Markdown from 'components/Markdown';
 
-class Document extends React.Component {
-  static propTypes = {
-    document: React.PropTypes.object.isRequired,
-  };
+type Props = {
+  document: Document,
+};
 
-  render() {
-    return (
-      <div className={styles.container}>
-        <PublishingInfo
-          createdAt={this.props.document.createdAt}
-          createdBy={this.props.document.createdBy}
-          updatedAt={this.props.document.updatedAt}
-          updatedBy={this.props.document.updatedBy}
-          collaborators={toJS(this.props.document.collaborators)}
-        />
+const Container = styled.div`
+  width: 100%;
+  padding: 20px 0;
+`;
 
-        <Link to={this.props.document.url} className={styles.title}>
-          <h2>{this.props.document.title}</h2>
+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
-          dangerouslySetInnerHTML={{ __html: this.props.document.preview }}
-        />
-
-        <div>
-          <Link to={this.props.document.url} className={styles.continueLink}>
-            Continue reading...
-          </Link>
-        </div>
       </div>
-    );
-  }
-}
+    </Container>
+  );
+};
 
-export default Document;
+export default DocumentPreview;

frontend/components/DocumentPreview/DocumentPreview.scss

@@ -1,20 +0,0 @@
-@import '~styles/constants.scss';
-
-
-.container {
-  width: 100%;
-  padding: 20px 0;
-}
-
-.title {
-  color: $textColor;
-  text-decoration: none;
-
-  h2 {
-    font-size: 1.3em;
-  }
-}
-
-.continueLink {
-  text-decoration: none;
-}

frontend/components/Editor/plugins.js

@@ -15,7 +15,10 @@ const onlyInCode = node => node.type === 'code';
 const createPlugins = ({
   onImageUploadStart,
   onImageUploadStop,
-}: { onImageUploadStart: Function, onImageUploadStop: Function }) => {
+}: {
+  onImageUploadStart: Function,
+  onImageUploadStop: Function,
+}) => {
   return [
     PasteLinkify({
       type: 'link',

frontend/components/Markdown/Markdown.js

@@ -0,0 +1,35 @@
+// @flow
+import React, { Component } from 'react';
+import { Editor } from 'slate';
+import MarkdownSerializer from '../Editor/serializer';
+import type { State } from '../Editor/types';
+import schema from '../Editor/schema';
+import styles from '../Editor/Editor.scss';
+
+type Props = {
+  text: string,
+};
+
+export default class MarkdownEditor extends Component {
+  props: Props;
+
+  state: {
+    state: State,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { state: MarkdownSerializer.deserialize(props.text) };
+  }
+
+  render = () => {
+    return (
+      <Editor
+        className={styles.editor}
+        schema={schema}
+        state={this.state.state}
+        readOnly
+      />
+    );
+  };
+}

frontend/components/Markdown/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Markdown from './Markdown';
+export default Markdown;

frontend/scenes/Document/Document.js

@@ -7,8 +7,8 @@ import { Flex } from 'reflexbox';
 
 import DocumentStore from './DocumentStore';
 import Breadcrumbs from './components/Breadcrumbs';
-import Editor from './components/Editor';
 import Menu from './components/Menu';
+import Editor from 'components/Editor';
 import Layout, { HeaderAction, SaveAction } from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';