Slate editor (#38)

* WIP: Slate editor

* WIP

* Focus at start / end working

* ah ha

* Super basic floating toolbar

* Nested list editing

* Pulling more logic into plugins

* inline code markdown

* Backspace at end of code block should remove mark

* Ensure there is always an empty line at editor end

* Add keyboard shortcuts for bold, italic, underline

* Add strikethrough shortcode and toolbar

* Toolbar to declarative
Fixed paragraph styling
Removed unused stuffs

* Super basic link editing

* Split Toolbar, now possible to edit and remove links

* Add new link to selection from toolbar working

* Ensure toolbar doesn't extend off screen

* Fix minor js issues, disable formatting of document title

* Boom, icons

* Remove codemirror, fix MD parsing issues

* CMD+S now saves inplace

* Add --- shortcut for horizontal rule

* Improved styling for link editor

* Add header anchors in readOnly

* More readable core text color

* Restored image file uploading 🎉

* Add support for inline md syntax, ** __ etc

* Centered

* Flooooow

* Checklist support

* Upgrade edit list plugin

* Finally. Allow keydown within rich textarea

* Update Markdown serializer

* Cleanup, remove async editor loading

* Editor > MarkdownEditor
Fixed unsaved changes warning triggered when all changes are saved

* MOAR typing

* Combine edit and view

* Fixed checkboxes still editable in readOnly

* wip

* Breadcrumb
Restored scroll

* Move document scene actions to menu

* Added: Support for code blocks, syntax highlighting

* Cleanup

*  > styled component

* Prevent CMD+Enter from adding linebreak

* Show image uploading in layout activity indicator

* Upgrade editor deps

* Improve link toolbar. Only one scenario where it's not working now

frontend/scenes/Document/components/Editor/Editor.js

@@ -0,0 +1,121 @@
+// @flow
+import React, { Component } from 'react';
+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 createPlugins from './plugins';
+import styles from './Editor.scss';
+
+const cx = classnames.bind(styles);
+
+type Props = {
+  text: string,
+  onChange: Function,
+  onSave: Function,
+  onCancel: Function,
+  onImageUploadStart: Function,
+  onImageUploadStop: Function,
+  readOnly: boolean,
+};
+
+type KeyData = {
+  isMeta: boolean,
+  key: string,
+};
+
+@observer
+export default class MarkdownEditor extends Component {
+  props: Props;
+  editor: EditorType;
+  plugins: Array<Object>;
+
+  state: {
+    state: State,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.plugins = createPlugins({
+      onImageUploadStart: props.onImageUploadStart,
+      onImageUploadStop: props.onImageUploadStop,
+    });
+
+    if (props.text) {
+      this.state = { state: Markdown.deserialize(props.text) };
+    } else {
+      this.state = { state: Plain.deserialize('') };
+    }
+  }
+
+  onChange = (state: State) => {
+    this.setState({ state });
+  };
+
+  onDocumentChange = (document: Document, state: State) => {
+    this.props.onChange(Markdown.serialize(state));
+  };
+
+  onKeyDown = (ev: SyntheticKeyboardEvent, data: KeyData, state: State) => {
+    if (!data.isMeta) return;
+
+    switch (data.key) {
+      case 's':
+        ev.preventDefault();
+        ev.stopPropagation();
+        return this.props.onSave({ redirect: false });
+      case 'enter':
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onSave();
+        return state;
+      case 'escape':
+        return this.props.onCancel();
+      default:
+    }
+  };
+
+  focusAtStart = () => {
+    const state = this.editor.getState();
+    const transform = state.transform();
+    transform.collapseToStartOf(state.document);
+    transform.focus();
+    this.setState({ state: transform.apply() });
+  };
+
+  focusAtEnd = () => {
+    const state = this.editor.getState();
+    const transform = state.transform();
+    transform.collapseToEndOf(state.document);
+    transform.focus();
+    this.setState({ state: transform.apply() });
+  };
+
+  render = () => {
+    return (
+      <span className={styles.container}>
+        <ClickablePadding onClick={this.focusAtStart} />
+        <Toolbar state={this.state.state} onChange={this.onChange} />
+        <Editor
+          ref={ref => (this.editor = ref)}
+          placeholder="Start with a title…"
+          className={cx(styles.editor, { readOnly: this.props.readOnly })}
+          schema={schema}
+          plugins={this.plugins}
+          state={this.state.state}
+          onChange={this.onChange}
+          onDocumentChange={this.onDocumentChange}
+          onKeyDown={this.onKeyDown}
+          onSave={this.props.onSave}
+          readOnly={this.props.readOnly}
+        />
+        <ClickablePadding onClick={this.focusAtEnd} grow />
+      </span>
+    );
+  };
+}