Document Viewers (#79)

* Recording document views

* Add 'views' to document response

* Basic displaying of document views, probably want it more sublte than this? But hey, lets get it in there

* Bigly improves. RESTful > RPC

* Display of who's viewed doc

* Add Popover, add Scrollable, move views store

* Working server tests 💁

* Document Stars (#81)

* Added: Starred documents

* UI is dumb but functionality works

* Star now displayed inline in title

* Optimistic rendering

* Documents Endpoints (#85)

* More seeds, documents.list endpoint

* Upgrade deprecated middleware

* document.viewers, specs

* Add documents.starred
Add request specs for star / unstar endpoints

* Basic /starred page

* Remove comment

* Fixed double layout

frontend/components/Editor/Editor.js

@@ -1,13 +1,14 @@
 // @flow
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 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 ClickablePadding from './components/ClickablePadding';
 import Toolbar from './components/Toolbar';
-import schema from './schema';
 import Markdown from './serializer';
+import createSchema from './schema';
 import createPlugins from './plugins';
 import styles from './Editor.scss';
 
@@ -18,8 +19,11 @@ type Props = {
   onChange: Function,
   onSave: Function,
   onCancel: Function,
+  onStar: Function,
+  onUnstar: Function,
   onImageUploadStart: Function,
   onImageUploadStop: Function,
+  starred: boolean,
   readOnly: boolean,
 };
 
@@ -28,10 +32,10 @@ type KeyData = {
   key: string,
 };
 
-@observer
-export default class MarkdownEditor extends Component {
+@observer class MarkdownEditor extends Component {
   props: Props;
   editor: EditorType;
+  schema: Object;
   plugins: Array<Object>;
 
   state: {
@@ -41,6 +45,10 @@ export default class MarkdownEditor extends Component {
   constructor(props: Props) {
     super(props);
 
+    this.schema = createSchema({
+      onStar: props.onStar,
+      onUnstar: props.onUnstar,
+    });
     this.plugins = createPlugins({
       onImageUploadStart: props.onImageUploadStart,
       onImageUploadStop: props.onImageUploadStop,
@@ -53,6 +61,10 @@ export default class MarkdownEditor extends Component {
     }
   }
 
+  getChildContext() {
+    return { starred: this.props.starred };
+  }
+
   onChange = (state: State) => {
     this.setState({ state });
   };
@@ -103,10 +115,11 @@ export default class MarkdownEditor extends Component {
           <ClickablePadding onClick={this.focusAtStart} />}
         <Toolbar state={this.state.state} onChange={this.onChange} />
         <Editor
+          key={this.props.starred}
           ref={ref => (this.editor = ref)}
           placeholder="Start with a title…"
           className={cx(styles.editor, { readOnly: this.props.readOnly })}
-          schema={schema}
+          schema={this.schema}
           plugins={this.plugins}
           state={this.state.state}
           onChange={this.onChange}
@@ -121,3 +134,9 @@ export default class MarkdownEditor extends Component {
     );
   };
 }
+
+MarkdownEditor.childContextTypes = {
+  starred: PropTypes.bool,
+};
+
+export default MarkdownEditor;