Slate 30

2017-12-02 23:14:27 -08:00
parent 5da809c4ab
commit 15e8e50601
29 changed files with 617 additions and 610 deletions
--- a/app/components/Collaborators/Collaborators.js
+++ b/app/components/Collaborators/Collaborators.js
@@ -29,8 +29,8 @@ const Collaborators = ({ document }: Props) => {
    <Avatars>
      <StyledTooltip tooltip={tooltip} placement="bottom">
        {collaborators.map(user => (
-          <AvatarWrapper>
-            <Avatar key={user.id} src={user.avatarUrl} />
+          <AvatarWrapper key={user.id}>
+            <Avatar src={user.avatarUrl} />
          </AvatarWrapper>
        ))}
      </StyledTooltip>
--- a/app/components/Editor/Editor.js
+++ b/app/components/Editor/Editor.js
@@ -2,9 +2,10 @@
 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { Editor, Plain } from 'slate';
+import { Editor } from 'slate-react';
+import type { state, props, change } from 'slate-prop-types';
+import Plain from 'slate-plain-serializer';
 import keydown from 'react-keydown';
-import type { State, Editor as EditorType } from './types';
 import getDataTransferFiles from 'utils/getDataTransferFiles';
 import Flex from 'shared/components/Flex';
 import ClickablePadding from './components/ClickablePadding';
@@ -13,18 +14,19 @@ import BlockInsert from './components/BlockInsert';
 import Placeholder from './components/Placeholder';
 import Contents from './components/Contents';
 import Markdown from './serializer';
-import createSchema from './schema';
 import createPlugins from './plugins';
 import insertImage from './insertImage';
+import renderMark from './marks';
+import createRenderNode from './nodes';
 import styled from 'styled-components';

 type Props = {
  text: string,
-  onChange: Function,
-  onSave: Function,
-  onCancel: Function,
-  onImageUploadStart: Function,
-  onImageUploadStop: Function,
+  onChange: change => *,
+  onSave: (redirect?: boolean) => *,
+  onCancel: () => void,
+  onImageUploadStart: () => void,
+  onImageUploadStop: () => void,
  emoji?: string,
  readOnly: boolean,
 };
@@ -37,15 +39,15 @@ type KeyData = {
@observer
 class MarkdownEditor extends Component {
  props: Props;
-  editor: EditorType;
-  schema: Object;
-  plugins: Array<Object>;
-  @observable editorState: State;
+  editor: Editor;
+  renderNode: props => *;
+  plugins: Object[];
+  @observable editorValue: state;

  constructor(props: Props) {
    super(props);

-    this.schema = createSchema({
+    this.renderNode = createRenderNode({
      onInsertImage: this.insertImageFile,
      onChange: this.onChange,
    });
@@ -55,9 +57,9 @@ class MarkdownEditor extends Component {
    });

    if (props.text.trim().length) {
-      this.editorState = Markdown.deserialize(props.text);
+      this.editorValue = Markdown.deserialize(props.text);
    } else {
-      this.editorState = Plain.deserialize('');
+      this.editorValue = Plain.deserialize('');
    }
  }

@@ -77,12 +79,11 @@ class MarkdownEditor extends Component {
    }
  }

-  onChange = (editorState: State) => {
-    if (this.editorState !== editorState) {
-      this.props.onChange(Markdown.serialize(editorState));
+  onChange = (change: change) => {
+    if (this.editorValue !== change.value) {
+      this.props.onChange(Markdown.serialize(change.value));
    }
-
-    this.editorState = editorState;
+    this.editorValue = change.value;
  };

  handleDrop = async (ev: SyntheticEvent) => {
@@ -103,17 +104,16 @@ class MarkdownEditor extends Component {
  };

  insertImageFile = async (file: window.File) => {
-    const state = this.editor.getState();
-    let transform = state.transform();
-
-    transform = await insertImage(
-      transform,
-      file,
-      this.editor,
-      this.props.onImageUploadStart,
-      this.props.onImageUploadStop
+    this.editor.change(
+      async change =>
+        await insertImage(
+          change,
+          file,
+          this.editor,
+          this.props.onImageUploadStart,
+          this.props.onImageUploadStop
+        )
    );
-    this.editor.onChange(transform.apply());
  };

  cancelEvent = (ev: SyntheticEvent) => {
@@ -136,7 +136,7 @@ class MarkdownEditor extends Component {

    ev.preventDefault();
    ev.stopPropagation();
-    this.props.onSave({ redirect: false });
+    this.props.onSave(true);
  }

  @keydown('esc')
@@ -146,37 +146,33 @@ class MarkdownEditor extends Component {
  }

  // Handling of keyboard shortcuts within editor focus
-  onKeyDown = (ev: SyntheticKeyboardEvent, data: KeyData, state: State) => {
+  onKeyDown = (ev: SyntheticKeyboardEvent, data: KeyData, change: change) => {
    if (!data.isMeta) return;

    switch (data.key) {
      case 's':
        this.onSave(ev);
-        return state;
+        return change;
      case 'enter':
        this.onSaveAndExit(ev);
-        return state;
+        return change;
      case 'escape':
        this.onCancel();
-        return state;
+        return change;
      default:
    }
  };

  focusAtStart = () => {
-    const state = this.editor.getState();
-    const transform = state.transform();
-    transform.collapseToStartOf(state.document);
-    transform.focus();
-    this.editorState = transform.apply();
+    this.editor.change(change =>
+      change.collapseToStartOf(change.value.document).focus()
+    );
  };

  focusAtEnd = () => {
-    const state = this.editor.getState();
-    const transform = state.transform();
-    transform.collapseToEndOf(state.document);
-    transform.focus();
-    this.editorState = transform.apply();
+    this.editor.change(change =>
+      change.collapseToEndOf(change.value.document).focus()
+    );
  };

  render = () => {
@@ -193,25 +189,27 @@ class MarkdownEditor extends Component {
      >
        <MaxWidth column auto>
          <Header onClick={this.focusAtStart} readOnly={readOnly} />
-          {readOnly && <Contents state={this.editorState} />}
-          {!readOnly && (
-            <Toolbar state={this.editorState} onChange={this.onChange} />
-          )}
-          {!readOnly && (
-            <BlockInsert
-              state={this.editorState}
-              onChange={this.onChange}
-              onInsertImage={this.insertImageFile}
-            />
-          )}
+          {readOnly && this.editor && <Contents editor={this.editor} />}
+          {!readOnly &&
+            this.editor && (
+              <Toolbar value={this.editorValue} editor={this.editor} />
+            )}
+          {!readOnly &&
+            this.editor && (
+              <BlockInsert
+                editor={this.editor}
+                onInsertImage={this.insertImageFile}
+              />
+            )}
          <StyledEditor
            innerRef={ref => (this.editor = ref)}
            placeholder="Start with a title…"
            bodyPlaceholder="…the rest is your canvas"
-            schema={this.schema}
            plugins={this.plugins}
            emoji={emoji}
-            state={this.editorState}
+            value={this.editorValue}
+            renderNode={this.renderNode}
+            renderMark={renderMark}
            onKeyDown={this.onKeyDown}
            onChange={this.onChange}
            onSave={onSave}
--- a/app/components/Editor/components/BlockInsert.js
+++ b/app/components/Editor/components/BlockInsert.js
@@ -1,18 +1,16 @@
 // @flow
 import React, { Component } from 'react';
 import { Portal } from 'react-portal';
-import { findDOMNode, Node } from 'slate';
+import { Node } from 'slate';
+import { Editor, findDOMNode } from 'slate-react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 import PlusIcon from 'components/Icon/PlusIcon';
-import type { State } from '../types';

 type Props = {
-  state: State,
-  onChange: Function,
-  onInsertImage: File => Promise<*>,
+  editor: Editor,
 };

 function findClosestRootNode(state, ev) {
@@ -53,7 +51,7 @@ export default class BlockInsert extends Component {

  handleMouseMove = (ev: SyntheticMouseEvent) => {
    const windowWidth = window.innerWidth / 2.5;
-    const result = findClosestRootNode(this.props.state, ev);
+    const result = findClosestRootNode(this.props.editor.value, ev);
    const movementThreshold = 200;

    this.mouseMovementSinceClick +=
@@ -70,7 +68,7 @@ export default class BlockInsert extends Component {
      this.closestRootNode = result.node;

      // do not show block menu on title heading or editor
-      const firstNode = this.props.state.document.nodes.first();
+      const firstNode = this.props.editor.value.document.nodes.first();
      if (result.node === firstNode || result.node.type === 'block-toolbar') {
        this.left = -1000;
      } else {
@@ -89,23 +87,22 @@ export default class BlockInsert extends Component {
    this.mouseMovementSinceClick = 0;
    this.active = false;

-    const { state } = this.props;
+    const { editor } = this.props;
    const type = { type: 'block-toolbar', isVoid: true };
-    let transform = state.transform();

-    // remove any existing toolbars in the document as a fail safe
-    state.document.nodes.forEach(node => {
-      if (node.type === 'block-toolbar') {
-        transform.removeNodeByKey(node.key);
-      }
+    editor.change(change => {
+      // remove any existing toolbars in the document as a fail safe
+      editor.value.document.nodes.forEach(node => {
+        if (node.type === 'block-toolbar') {
+          change.removeNodeByKey(node.key);
+        }
+      });
+
+      change
+        .collapseToStartOf(this.closestRootNode)
+        .collapseToEndOfPreviousBlock()
+        .insertBlock(type);
    });
-
-    transform
-      .collapseToStartOf(this.closestRootNode)
-      .collapseToEndOfPreviousBlock()
-      .insertBlock(type);
-
-    this.props.onChange(transform.apply());
  };

  render() {
--- a/app/components/Editor/components/Code.js
+++ b/app/components/Editor/components/Code.js
@@ -1,11 +1,11 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import type { props } from 'slate-prop-types';
 import CopyButton from './CopyButton';
 import { color } from 'shared/styles/constants';
-import type { Props } from '../types';

-export default function Code({ children, node, readOnly, attributes }: Props) {
+export default function Code({ children, node, readOnly, attributes }: props) {
  const language = node.data.get('language') || 'javascript';

  return (
--- a/app/components/Editor/components/Contents.js
+++ b/app/components/Editor/components/Contents.js
@@ -2,14 +2,15 @@
 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { Editor } from 'slate-react';
+import type { state, block } from 'slate-prop-types';
 import { List } from 'immutable';
 import { color } from 'shared/styles/constants';
 import headingToSlug from '../headingToSlug';
-import type { State, Block } from '../types';
 import styled from 'styled-components';

 type Props = {
-  state: State,
+  editor: Editor,
 };

@observer
@@ -53,10 +54,10 @@ class Contents extends Component {
    return elements;
  }

-  get headings(): List<Block> {
-    const { state } = this.props;
+  get headings(): List<block> {
+    const { editor } = this.props;

-    return state.document.nodes.filter((node: Block) => {
+    return editor.value.document.nodes.filter((node: block) => {
      if (!node.text) return false;
      return node.type.match(/^heading/);
    });
@@ -74,7 +75,7 @@ class Contents extends Component {
            const active = this.activeHeading === slug;

            return (
-              <ListItem type={heading.type} active={active}>
+              <ListItem type={heading.type} active={active} key={slug}>
                <Anchor href={`#${slug}`} active={active}>
                  {heading.text}
                </Anchor>
--- a/app/components/Editor/components/Heading.js
+++ b/app/components/Editor/components/Heading.js
@@ -1,16 +1,17 @@
 // @flow
 import React from 'react';
 import { Document } from 'slate';
+import { Editor } from 'slate-react';
 import styled from 'styled-components';
+import type { node } from 'slate-prop-types';
 import headingToSlug from '../headingToSlug';
-import type { Node, Editor } from '../types';
 import Placeholder from './Placeholder';

 type Props = {
  children: React$Element<*>,
  placeholder?: boolean,
-  parent: Node,
-  node: Node,
+  parent: node,
+  node: node,
  editor: Editor,
  readOnly: boolean,
  component?: string,
--- a/app/components/Editor/components/HorizontalRule.js
+++ b/app/components/Editor/components/HorizontalRule.js
@@ -1,10 +1,10 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import type { Props } from '../types';
+import type { props } from 'slate-prop-types';
 import { color } from 'shared/styles/constants';

-function HorizontalRule(props: Props) {
+function HorizontalRule(props: props) {
  const { state, node, attributes } = props;
  const active = state.isFocused && state.selection.hasEdgeIn(node);
  return <StyledHr active={active} {...attributes} />;
--- a/app/components/Editor/components/Image.js
+++ b/app/components/Editor/components/Image.js
@@ -2,23 +2,23 @@
 import React, { Component } from 'react';
 import ImageZoom from 'react-medium-image-zoom';
 import styled from 'styled-components';
-import type { Props } from '../types';
+import type { props } from 'slate-prop-types';
 import { color } from 'shared/styles/constants';

 class Image extends Component {
-  props: Props;
+  props: props;

  handleChange = (ev: SyntheticInputEvent) => {
    const alt = ev.target.value;
    const { editor, node } = this.props;
    const data = node.data.toObject();
-    const state = editor
-      .getState()
-      .transform()
-      .setNodeByKey(node.key, { data: { ...data, alt } })
-      .apply();

-    editor.onChange(state);
+    editor.onChange(
+      editor
+        .getState()
+        .change()
+        .setNodeByKey(node.key, { data: { ...data, alt } })
+    );
  };

  handleClick = (ev: SyntheticInputEvent) => {
--- a/app/components/Editor/components/Link.js
+++ b/app/components/Editor/components/Link.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { Link as InternalLink } from 'react-router-dom';
-import type { Props } from '../types';
+import type { props } from 'slate-prop-types';

 function getPathFromUrl(href: string) {
  if (href[0] === '/') return href;
@@ -14,7 +14,7 @@ function getPathFromUrl(href: string) {
  }
 }

-function isOutlineUrl(href: string) {
+function isInternalUrl(href: string) {
  if (href[0] === '/') return true;

  try {
@@ -26,11 +26,11 @@ function isOutlineUrl(href: string) {
  }
 }

-export default function Link({ attributes, node, children, readOnly }: Props) {
+export default function Link({ attributes, node, children, readOnly }: props) {
  const href = node.data.get('href');
  const path = getPathFromUrl(href);

-  if (isOutlineUrl(href) && readOnly) {
+  if (isInternalUrl(href) && readOnly) {
    return (
      <InternalLink {...attributes} to={path}>
        {children}
--- a/app/components/Editor/components/ListItem.js
+++ b/app/components/Editor/components/ListItem.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import type { Props } from '../types';
+import type { props } from 'slate-prop-types';
 import TodoItem from './TodoItem';

 export default function ListItem({
@@ -8,7 +8,7 @@ export default function ListItem({
  node,
  attributes,
  ...props
-}: Props) {
+}: props) {
  const checked = node.data.get('checked');

  if (checked !== undefined) {
--- a/app/components/Editor/components/Paragraph.js
+++ b/app/components/Editor/components/Paragraph.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { Document } from 'slate';
-import type { Props } from '../types';
+import type { props } from 'slate-prop-types';
 import Placeholder from './Placeholder';

 export default function Link({
@@ -11,7 +11,7 @@ export default function Link({
  parent,
  children,
  readOnly,
-}: Props) {
+}: props) {
  const parentIsDocument = parent instanceof Document;
  const firstParagraph = parent && parent.nodes.get(1) === node;
  const lastParagraph = parent && parent.nodes.last() === node;
--- a/app/components/Editor/components/TodoItem.js
+++ b/app/components/Editor/components/TodoItem.js
@@ -2,21 +2,20 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
-import type { Props } from '../types';
+import type { props } from 'slate-prop-types';

 export default class TodoItem extends Component {
-  props: Props & { checked: boolean };
+  props: props & { checked: boolean };

  handleChange = (ev: SyntheticInputEvent) => {
    const checked = ev.target.checked;
    const { editor, node } = this.props;
-    const state = editor
+    const change = editor
      .getState()
-      .transform()
-      .setNodeByKey(node.key, { data: { checked } })
-      .apply();
+      .change()
+      .setNodeByKey(node.key, { data: { checked } });

-    editor.onChange(state);
+    editor.onChange(change);
  };

  render() {
--- a/app/components/Editor/components/Toolbar/BlockToolbar.js
+++ b/app/components/Editor/components/Toolbar/BlockToolbar.js
@@ -13,12 +13,12 @@ import HorizontalRuleIcon from 'components/Icon/HorizontalRuleIcon';
 import TodoListIcon from 'components/Icon/TodoListIcon';
 import Flex from 'shared/components/Flex';
 import ToolbarButton from './components/ToolbarButton';
-import type { Props as BaseProps } from '../../types';
+import type { props } from 'slate-prop-types';
 import { color } from 'shared/styles/constants';
 import { fadeIn } from 'shared/styles/animations';
 import { splitAndInsertBlock } from '../../transforms';

-type Props = BaseProps & {
+type Props = props & {
  onInsertImage: Function,
  onChange: Function,
 };
@@ -34,16 +34,15 @@ class BlockToolbar extends Component {
  file: HTMLInputElement;

  componentWillReceiveProps(nextProps: Props) {
-    const wasActive = this.props.state.selection.hasEdgeIn(this.props.node);
-    const isActive = nextProps.state.selection.hasEdgeIn(nextProps.node);
+    const { editor } = this.props;
+    const wasActive = editor.value.selection.hasEdgeIn(this.props.node);
+    const isActive = nextProps.editor.value.selection.hasEdgeIn(nextProps.node);
    const becameInactive = !isActive && wasActive;

    if (becameInactive) {
-      const state = nextProps.state
-        .transform()
-        .removeNodeByKey(nextProps.node.key)
-        .apply();
-      this.props.onChange(state);
+      nextProps.editor.change(change =>
+        change.removeNodeByKey(nextProps.node.key)
+      );
    }
  }

@@ -52,24 +51,25 @@ class BlockToolbar extends Component {
    ev.preventDefault();
    ev.stopPropagation();

-    const state = this.props.state
-      .transform()
-      .removeNodeByKey(this.props.node.key)
-      .apply();
-    this.props.onChange(state);
+    this.props.editor.change(change =>
+      change.removeNodeByKey(this.props.node.key)
+    );
  }

  insertBlock = (options: Options) => {
-    const { state } = this.props;
-    let transform = splitAndInsertBlock(state.transform(), state, options);
+    const { editor } = this.props;

-    state.document.nodes.forEach(node => {
-      if (node.type === 'block-toolbar') {
-        transform.removeNodeByKey(node.key);
-      }
+    editor.change(change => {
+      splitAndInsertBlock(change, options);
+
+      change.value.document.nodes.forEach(node => {
+        if (node.type === 'block-toolbar') {
+          change.removeNodeByKey(node.key);
+        }
+      });
+
+      change.focus();
    });
-
-    this.props.onChange(transform.focus().apply());
  };

  handleClickBlock = (ev: SyntheticEvent, type: string) => {
@@ -126,8 +126,9 @@ class BlockToolbar extends Component {
  };

  render() {
-    const { state, attributes, node } = this.props;
-    const active = state.isFocused && state.selection.hasEdgeIn(node);
+    const { editor, attributes, node } = this.props;
+    const active =
+      editor.value.isFocused && editor.value.selection.hasEdgeIn(node);

    return (
      <Bar active={active} {...attributes}>
--- a/app/components/Editor/components/Toolbar/Toolbar.js
+++ b/app/components/Editor/components/Toolbar/Toolbar.js
@@ -3,9 +3,10 @@ import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Portal } from 'react-portal';
+import { Editor } from 'slate-react';
+import type { value } from 'slate-prop-types';
 import styled from 'styled-components';
 import _ from 'lodash';
-import type { State } from '../../types';
 import FormattingToolbar from './components/FormattingToolbar';
 import LinkToolbar from './components/LinkToolbar';

@@ -18,8 +19,8 @@ export default class Toolbar extends Component {
  @observable left: string = '';

  props: {
-    state: State,
-    onChange: (state: State) => void,
+    editor: Editor,
+    value: value,
  };

  menu: HTMLElement;
@@ -41,11 +42,11 @@ export default class Toolbar extends Component {
  };

  get linkInSelection(): any {
-    const { state } = this.props;
+    const { value } = this.props;

    try {
-      const selectedLinks = state.startBlock
-        .getInlinesAtRange(state.selection)
+      const selectedLinks = value.startBlock
+        .getInlinesAtRange(value.selection)
        .filter(node => node.type === 'link');
      if (selectedLinks.size) {
        return selectedLinks.first();
@@ -56,10 +57,10 @@ export default class Toolbar extends Component {
  }

  update = () => {
-    const { state } = this.props;
+    const { value } = this.props;
    const link = this.linkInSelection;

-    if (state.isBlurred || (state.isCollapsed && !link)) {
+    if (value.isBlurred || (value.isCollapsed && !link)) {
      if (this.active && !this.focused) {
        this.active = false;
        this.link = undefined;
@@ -70,11 +71,11 @@ export default class Toolbar extends Component {
    }

    // don't display toolbar for document title
-    const firstNode = state.document.nodes.first();
-    if (firstNode === state.startBlock) return;
+    const firstNode = value.document.nodes.first();
+    if (firstNode === value.startBlock) return;

    // don't display toolbar for code blocks
-    if (state.startBlock.type === 'code') return;
+    if (value.startBlock.type === 'code') return;

    this.active = true;
    this.focused = !!link;
--- a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js
+++ b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js
@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import type { State } from '../../../types';
+import { Editor } from 'slate-react';
 import ToolbarButton from './ToolbarButton';
 import BoldIcon from 'components/Icon/BoldIcon';
 import CodeIcon from 'components/Icon/CodeIcon';
@@ -13,8 +13,7 @@ import StrikethroughIcon from 'components/Icon/StrikethroughIcon';

 class FormattingToolbar extends Component {
  props: {
-    state: State,
-    onChange: Function,
+    editor: Editor,
    onCreateLink: Function,
  };

@@ -25,11 +24,11 @@ class FormattingToolbar extends Component {
   * @return {Boolean}
   */
  hasMark = (type: string) => {
-    return this.props.state.marks.some(mark => mark.type === type);
+    return this.props.editor.value.marks.some(mark => mark.type === type);
  };

  isBlock = (type: string) => {
-    return this.props.state.startBlock.type === type;
+    return this.props.editor.value.startBlock.type === type;
  };

  /**
@@ -40,37 +39,23 @@ class FormattingToolbar extends Component {
   */
  onClickMark = (ev: SyntheticEvent, type: string) => {
    ev.preventDefault();
-    let { state } = this.props;
-
-    state = state
-      .transform()
-      .toggleMark(type)
-      .apply();
-    this.props.onChange(state);
+    this.props.editor.change(change => change.toggleMark(type));
  };

  onClickBlock = (ev: SyntheticEvent, type: string) => {
    ev.preventDefault();
-    let { state } = this.props;
-
-    state = state
-      .transform()
-      .setBlock(type)
-      .apply();
-    this.props.onChange(state);
+    this.props.editor.change(change => change.setBlock(type));
  };

  onCreateLink = (ev: SyntheticEvent) => {
    ev.preventDefault();
    ev.stopPropagation();
-    let { state } = this.props;
+
    const data = { href: '' };
-    state = state
-      .transform()
-      .wrapInline({ type: 'link', data })
-      .apply();
-    this.props.onChange(state);
-    this.props.onCreateLink();
+    this.props.editor.change(change => {
+      change.wrapInline({ type: 'link', data });
+      this.props.onCreateLink();
+    });
  };

  renderMarkButton = (type: string, IconClass: Function) => {
--- a/app/components/Editor/components/Toolbar/components/LinkToolbar.js
+++ b/app/components/Editor/components/Toolbar/components/LinkToolbar.js
@@ -4,11 +4,12 @@ import ReactDOM from 'react-dom';
 import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { withRouter } from 'react-router-dom';
+import { Editor } from 'slate-react';
 import styled from 'styled-components';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
+import type { change } from 'slate-prop-types';
 import ToolbarButton from './ToolbarButton';
 import DocumentResult from './DocumentResult';
-import type { State } from '../../../types';
 import DocumentsStore from 'stores/DocumentsStore';
 import keydown from 'react-keydown';
 import CloseIcon from 'components/Icon/CloseIcon';
@@ -23,11 +24,11 @@ class LinkToolbar extends Component {
  firstDocument: HTMLElement;

  props: {
-    state: State,
+    editor: Editor,
    link: Object,
    documents: DocumentsStore,
    onBlur: () => void,
-    onChange: State => void,
+    onChange: change => *,
  };

  @observable isEditing: boolean = false;
@@ -112,17 +113,14 @@ class LinkToolbar extends Component {

  save = (href: string) => {
    href = href.trim();
-    const { state } = this.props;
-    const transform = state.transform();
-
-    if (href) {
-      transform.setInline({ type: 'link', data: { href } });
-    } else {
-      transform.unwrapInline('link');
-    }
-
-    this.props.onChange(transform.apply());
-    this.props.onBlur();
+    this.props.editor.change(change => {
+      if (href) {
+        change.setInline({ type: 'link', data: { href } });
+      } else {
+        change.unwrapInline('link');
+      }
+      this.props.onBlur();
+    });
  };

  setFirstDocumentRef = ref => {
--- a/app/components/Editor/headingToSlug.js
+++ b/app/components/Editor/headingToSlug.js
@@ -1,9 +1,9 @@
 // @flow
 import { escape } from 'lodash';
-import type { Node } from './types';
+import type { node } from 'slate-prop-types';
 import slug from 'slug';

-export default function headingToSlug(node: Node) {
+export default function headingToSlug(node: node) {
  const level = node.type.replace('heading', 'h');
  return escape(`${level}-${slug(node.text)}-${node.key}`);
 }
--- a/app/components/Editor/insertImage.js
+++ b/app/components/Editor/insertImage.js
@@ -1,10 +1,11 @@
 // @flow
 import uuid from 'uuid';
 import uploadFile from 'utils/uploadFile';
-import type { Editor, Transform } from './types';
+import { Editor } from 'slate-react';
+import type { change } from 'slate-prop-types';

 export default async function insertImageFile(
-  transform: Transform,
+  change: change,
  file: window.File,
  editor: Editor,
  onImageUploadStart: () => void,
@@ -21,7 +22,7 @@ export default async function insertImageFile(
      const src = reader.result;

      // insert into document as uploading placeholder
-      const state = transform
+      const state = change
        .insertBlock({
          type: 'image',
          isVoid: true,
@@ -36,11 +37,11 @@ export default async function insertImageFile(
    const asset = await uploadFile(file);
    const src = asset.url;

-    // we dont use the original transform provided to the callback here
+    // we dont use the original change provided to the callback here
    // as the state may have changed significantly in the time it took to
    // upload the file.
    const state = editor.getState();
-    const finalTransform = state.transform();
+    const finalTransform = state.change();
    const placeholder = state.document.findDescendant(
      node => node.data && node.data.get('id') === id
    );
--- a/app/components/Editor/marks.js
+++ b/app/components/Editor/marks.js
@@ -0,0 +1,22 @@
+// @flow
+import React from 'react';
+import InlineCode from './components/InlineCode';
+import type { props } from 'slate-prop-types';
+
+export default function renderMark(props: props) {
+  switch (props.mark.type) {
+    case 'bold':
+      return <strong>{props.children}</strong>;
+    case 'code':
+      return <InlineCode>{props.children}</InlineCode>;
+    case 'italic':
+      return <em>{props.children}</em>;
+    case 'underlined':
+      return <u>{props.children}</u>;
+    case 'deleted':
+      return <del>{props.children}</del>;
+    case 'added':
+      return <mark>{props.children}</mark>;
+    default:
+  }
+}
--- a/app/components/Editor/nodes.js
+++ b/app/components/Editor/nodes.js
@@ -0,0 +1,75 @@
+// @flow
+import React from 'react';
+import Code from './components/Code';
+import BlockToolbar from './components/Toolbar/BlockToolbar';
+import HorizontalRule from './components/HorizontalRule';
+import Image from './components/Image';
+import Link from './components/Link';
+import ListItem from './components/ListItem';
+import TodoList from './components/TodoList';
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+} from './components/Heading';
+import Paragraph from './components/Paragraph';
+import type { props } from 'slate-prop-types';
+
+type Options = {
+  onInsertImage: *,
+};
+
+export default function createRenderNode({ onChange, onInsertImage }: Options) {
+  return function renderNode(props: props) {
+    const { attributes } = props;
+
+    switch (props.node.type) {
+      case 'paragraph':
+        return <Paragraph {...props} />;
+      case 'block-toolbar':
+        return <BlockToolbar onInsertImage={onInsertImage} {...props} />;
+      case 'block-quote':
+        return <blockquote {...attributes}>{props.children}</blockquote>;
+      case 'bulleted-list':
+        return <ul {...attributes}>{props.children}</ul>;
+      case 'ordered-list':
+        return <ol {...attributes}>{props.children}</ol>;
+      case 'todo-list':
+        return <TodoList {...attributes}>{props.children}</TodoList>;
+      case 'table':
+        return <table {...attributes}>{props.children}</table>;
+      case 'table-row':
+        return <tr {...attributes}>{props.children}</tr>;
+      case 'table-head':
+        return <th {...attributes}>{props.children}</th>;
+      case 'table-cell':
+        return <td {...attributes}>{props.children}</td>;
+      case 'list-item':
+        return <ListItem {...props} />;
+      case 'horizontal-rule':
+        return <HorizontalRule {...props} />;
+      case 'code':
+        return <Code {...props} />;
+      case 'image':
+        return <Image {...props} />;
+      case 'link':
+        return <Link {...props} />;
+      case 'heading1':
+        return <Heading1 placeholder {...props} />;
+      case 'heading2':
+        return <Heading2 {...props} />;
+      case 'heading3':
+        return <Heading3 {...props} />;
+      case 'heading4':
+        return <Heading4 {...props} />;
+      case 'heading5':
+        return <Heading5 {...props} />;
+      case 'heading6':
+        return <Heading6 {...props} />;
+      default:
+    }
+  };
+}
--- a/app/components/Editor/plugins.js
+++ b/app/components/Editor/plugins.js
@@ -1,5 +1,5 @@
 // @flow
-import DropOrPasteImages from '@tommoor/slate-drop-or-paste-images';
+// import DropOrPasteImages from '@tommoor/slate-drop-or-paste-images';
 import PasteLinkify from 'slate-paste-linkify';
 import CollapseOnEscape from 'slate-collapse-on-escape';
 import TrailingBlock from 'slate-trailing-block';
@@ -8,7 +8,7 @@ import Prism from 'slate-prism';
 import EditList from './plugins/EditList';
 import KeyboardShortcuts from './plugins/KeyboardShortcuts';
 import MarkdownShortcuts from './plugins/MarkdownShortcuts';
-import insertImage from './insertImage';
+// import insertImage from './insertImage';

 const onlyInCode = node => node.type === 'code';

@@ -23,18 +23,18 @@ const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
      type: 'link',
      collapseTo: 'end',
    }),
-    DropOrPasteImages({
-      extensions: ['png', 'jpg', 'gif'],
-      applyTransform: (transform, file, editor) => {
-        return insertImage(
-          transform,
-          file,
-          editor,
-          onImageUploadStart,
-          onImageUploadStop
-        );
-      },
-    }),
+    // DropOrPasteImages({
+    //   extensions: ['png', 'jpg', 'gif'],
+    //   applyTransform: (transform, file, editor) => {
+    //     return insertImage(
+    //       transform,
+    //       file,
+    //       editor,
+    //       onImageUploadStart,
+    //       onImageUploadStop
+    //     );
+    //   },
+    // }),
    EditList,
    EditCode({
      onlyIn: onlyInCode,
--- a/app/components/Editor/plugins/KeyboardShortcuts.js
+++ b/app/components/Editor/plugins/KeyboardShortcuts.js
@@ -1,4 +1,5 @@
 // @flow
+import type { change } from 'slate-prop-types';

 export default function KeyboardShortcuts() {
  return {
@@ -10,38 +11,32 @@ export default function KeyboardShortcuts() {
     * @param {State} state
     * @return {State or Null} state
     */
-    onKeyDown(ev: SyntheticEvent, data: Object, state: Object) {
+    onKeyDown(ev: SyntheticEvent, data: Object, change: change) {
      if (!data.isMeta) return null;

      switch (data.key) {
        case 'b':
-          return this.toggleMark(state, 'bold');
+          return this.toggleMark(change, 'bold');
        case 'i':
-          return this.toggleMark(state, 'italic');
+          return this.toggleMark(change, 'italic');
        case 'u':
-          return this.toggleMark(state, 'underlined');
+          return this.toggleMark(change, 'underlined');
        case 'd':
-          return this.toggleMark(state, 'deleted');
+          return this.toggleMark(change, 'deleted');
        case 'k':
-          return state
-            .transform()
-            .wrapInline({ type: 'link', data: { href: '' } })
-            .apply();
+          return change.wrapInline({ type: 'link', data: { href: '' } });
        default:
          return null;
      }
    },

-    toggleMark(state: Object, type: string) {
+    toggleMark(change: change, type: string) {
+      const { state } = change;
      // don't allow formatting of document title
      const firstNode = state.document.nodes.first();
      if (firstNode === state.startBlock) return;

-      state = state
-        .transform()
-        .toggleMark(type)
-        .apply();
-      return state;
+      return state.change().toggleMark(type);
    },
  };
 }
--- a/app/components/Editor/plugins/MarkdownShortcuts.js
+++ b/app/components/Editor/plugins/MarkdownShortcuts.js
@@ -1,4 +1,11 @@
 // @flow
+import type { change } from 'slate-prop-types';
+
+type KeyData = {
+  isMeta: boolean,
+  key: string,
+};
+
 const inlineShortcuts = [
  { mark: 'bold', shortcut: '**' },
  { mark: 'bold', shortcut: '__' },
@@ -14,20 +21,20 @@ export default function MarkdownShortcuts() {
    /**
     * On key down, check for our specific key shortcuts.
     */
-    onKeyDown(ev: SyntheticEvent, data: Object, state: Object) {
+    onKeyDown(ev: SyntheticEvent, data: KeyData, change: change) {
      switch (data.key) {
        case '-':
-          return this.onDash(ev, state);
+          return this.onDash(ev, change);
        case '`':
-          return this.onBacktick(ev, state);
+          return this.onBacktick(ev, change);
        case 'tab':
-          return this.onTab(ev, state);
+          return this.onTab(ev, change);
        case 'space':
-          return this.onSpace(ev, state);
+          return this.onSpace(ev, change);
        case 'backspace':
-          return this.onBackspace(ev, state);
+          return this.onBackspace(ev, change);
        case 'enter':
-          return this.onEnter(ev, state);
+          return this.onEnter(ev, change);
        default:
          return null;
      }
@@ -37,7 +44,8 @@ export default function MarkdownShortcuts() {
     * On space, if it was after an auto-markdown shortcut, convert the current
     * node into the shortcut's corresponding type.
     */
-    onSpace(ev: SyntheticEvent, state: Object) {
+    onSpace(ev: SyntheticEvent, change: change) {
+      const { state } = change;
      if (state.isExpanded) return;
      const { startBlock, startOffset } = state;
      const chars = startBlock.text.slice(0, startOffset).trim();
@@ -50,25 +58,19 @@ export default function MarkdownShortcuts() {
        let checked;
        if (chars === '[x]') checked = true;
        if (chars === '[ ]') checked = false;
-        const transform = state
-          .transform()
-          .setBlock({ type, data: { checked } });
+        const change = state.change().setBlock({ type, data: { checked } });

        if (type === 'list-item') {
          if (checked !== undefined) {
-            transform.wrapBlock('todo-list');
+            change.wrapBlock('todo-list');
          } else if (chars === '1.') {
-            transform.wrapBlock('ordered-list');
+            change.wrapBlock('ordered-list');
          } else {
-            transform.wrapBlock('bulleted-list');
+            change.wrapBlock('bulleted-list');
          }
        }

-        state = transform
-          .extendToStartOf(startBlock)
-          .delete()
-          .apply();
-        return state;
+        return change.extendToStartOf(startBlock).delete();
      }

      for (const key of inlineShortcuts) {
@@ -97,35 +99,32 @@ export default function MarkdownShortcuts() {

        // if we have multiple tags then mark the text between as inline code
        if (inlineTags.length > 1) {
-          const transform = state.transform();
+          const change = state.change();
          const firstText = startBlock.getFirstText();
          const firstCodeTagIndex = inlineTags[0];
          const lastCodeTagIndex = inlineTags[inlineTags.length - 1];
-          transform.removeTextByKey(
+          change.removeTextByKey(
            firstText.key,
            lastCodeTagIndex,
            shortcut.length
          );
-          transform.removeTextByKey(
+          change.removeTextByKey(
            firstText.key,
            firstCodeTagIndex,
            shortcut.length
          );
-          transform.moveOffsetsTo(
+          change.moveOffsetsTo(
            firstCodeTagIndex,
            lastCodeTagIndex - shortcut.length
          );
-          transform.addMark(mark);
-          state = transform
-            .collapseToEnd()
-            .removeMark(mark)
-            .apply();
-          return state;
+          change.addMark(mark);
+          return change.collapseToEnd().removeMark(mark);
        }
      }
    },

-    onDash(ev: SyntheticEvent, state: Object) {
+    onDash(ev: SyntheticEvent, change: change) {
+      const { state } = change;
      if (state.isExpanded) return;
      const { startBlock, startOffset } = state;
      const chars = startBlock.text.slice(0, startOffset).replace(/\s*/g, '');
@@ -133,7 +132,7 @@ export default function MarkdownShortcuts() {
      if (chars === '--') {
        ev.preventDefault();
        return state
-          .transform()
+          .change()
          .extendToStartOf(startBlock)
          .delete()
          .setBlock({
@@ -141,12 +140,12 @@ export default function MarkdownShortcuts() {
            isVoid: true,
          })
          .collapseToStartOfNextBlock()
-          .insertBlock('paragraph')
-          .apply();
+          .insertBlock('paragraph');
      }
    },

-    onBacktick(ev: SyntheticEvent, state: Object) {
+    onBacktick(ev: SyntheticEvent, change: change) {
+      const { state } = change;
      if (state.isExpanded) return;
      const { startBlock, startOffset } = state;
      const chars = startBlock.text.slice(0, startOffset).replace(/\s*/g, '');
@@ -154,18 +153,18 @@ export default function MarkdownShortcuts() {
      if (chars === '``') {
        ev.preventDefault();
        return state
-          .transform()
+          .change()
          .extendToStartOf(startBlock)
          .delete()
          .setBlock({
            type: 'code',
-          })
-          .apply();
+          });
      }
    },

-    onBackspace(ev: SyntheticEvent, state: Object) {
-      if (state.isExpanded) return;
+    onBackspace(ev: SyntheticEvent, change: change) {
+      const { state } = change;
+      if (change.isExpanded) return;
      const { startBlock, selection, startOffset } = state;

      // If at the start of a non-paragraph, convert it back into a paragraph
@@ -173,13 +172,11 @@ export default function MarkdownShortcuts() {
        if (startBlock.type === 'paragraph') return;
        ev.preventDefault();

-        const transform = state.transform().setBlock('paragraph');
+        const change = state.change().setBlock('paragraph');

        if (startBlock.type === 'list-item')
-          transform.unwrapBlock('bulleted-list');
-
-        state = transform.apply();
-        return state;
+          change.unwrapBlock('bulleted-list');
+        return change;
      }

      // If at the end of a code mark hitting backspace should remove the mark
@@ -198,15 +195,14 @@ export default function MarkdownShortcuts() {
            .reverse()
            .takeUntil((v, k) => !v.marks.some(mark => mark.type === 'code'));

-          const transform = state.transform();
-          transform.removeMarkByKey(
-            textNode.key,
-            state.startOffset - charsInCodeBlock.size,
-            state.startOffset,
-            'code'
-          );
-          state = transform.apply();
-          return state;
+          return state
+            .change()
+            .removeMarkByKey(
+              textNode.key,
+              change.startOffset - charsInCodeBlock.size,
+              change.startOffset,
+              'code'
+            );
        }
      }
    },
@@ -215,14 +211,15 @@ export default function MarkdownShortcuts() {
     * On tab, if at the end of the heading jump to the main body content
     * as if it is another input field (act the same as enter).
     */
-    onTab(ev: SyntheticEvent, state: Object) {
+    onTab(ev: SyntheticEvent, change: change) {
+      const { state } = change;
+
      if (state.startBlock.type === 'heading1') {
        ev.preventDefault();
        return state
-          .transform()
+          .change()
          .splitBlock()
-          .setBlock('paragraph')
-          .apply();
+          .setBlock('paragraph');
      }
    },

@@ -230,11 +227,12 @@ export default function MarkdownShortcuts() {
     * On return, if at the end of a node type that should not be extended,
     * create a new paragraph below it.
     */
-    onEnter(ev: SyntheticEvent, state: Object) {
+    onEnter(ev: SyntheticEvent, change: change) {
+      const { state } = change;
      if (state.isExpanded) return;
      const { startBlock, startOffset, endOffset } = state;
      if (startOffset === 0 && startBlock.length === 0)
-        return this.onBackspace(ev, state);
+        return this.onBackspace(ev, change);
      if (endOffset !== startBlock.length) return;

      // Hitting enter while an image is selected should jump caret below and
@@ -242,10 +240,9 @@ export default function MarkdownShortcuts() {
      if (startBlock.type === 'image') {
        ev.preventDefault();
        return state
-          .transform()
+          .change()
          .collapseToEnd()
-          .insertBlock('paragraph')
-          .apply();
+          .insertBlock('paragraph');
      }

      // Hitting enter in a heading or blockquote will split the node at that
@@ -264,10 +261,9 @@ export default function MarkdownShortcuts() {

      ev.preventDefault();
      return state
-        .transform()
+        .change()
        .splitBlock()
-        .setBlock('paragraph')
-        .apply();
+        .setBlock('paragraph');
    },

    /**
--- a/app/components/Editor/schema.js
+++ b/app/components/Editor/schema.js
@@ -1,133 +1,133 @@
-// @flow
-import React from 'react';
-import Code from './components/Code';
-import HorizontalRule from './components/HorizontalRule';
-import InlineCode from './components/InlineCode';
-import Image from './components/Image';
-import Link from './components/Link';
-import ListItem from './components/ListItem';
-import TodoList from './components/TodoList';
-import {
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-} from './components/Heading';
-import Paragraph from './components/Paragraph';
-import BlockToolbar from './components/Toolbar/BlockToolbar';
-import type { Props, Node, Transform } from './types';
-
-type Options = {
-  onInsertImage: Function,
-  onChange: Function,
-};
-
-const createSchema = ({ onInsertImage, onChange }: Options) => {
-  return {
-    marks: {
-      bold: (props: Props) => <strong>{props.children}</strong>,
-      code: (props: Props) => <InlineCode>{props.children}</InlineCode>,
-      italic: (props: Props) => <em>{props.children}</em>,
-      underlined: (props: Props) => <u>{props.children}</u>,
-      deleted: (props: Props) => <del>{props.children}</del>,
-      added: (props: Props) => <mark>{props.children}</mark>,
-    },
-
-    nodes: {
-      'block-toolbar': (props: Props) => (
-        <BlockToolbar
-          onChange={onChange}
-          onInsertImage={onInsertImage}
-          {...props}
-        />
-      ),
-      paragraph: (props: Props) => <Paragraph {...props} />,
-      'block-quote': (props: Props) => (
-        <blockquote {...props.attributes}>{props.children}</blockquote>
-      ),
-      'horizontal-rule': HorizontalRule,
-      'bulleted-list': (props: Props) => (
-        <ul {...props.attributes}>{props.children}</ul>
-      ),
-      'ordered-list': (props: Props) => (
-        <ol {...props.attributes}>{props.children}</ol>
-      ),
-      'todo-list': (props: Props) => (
-        <TodoList {...props.attributes}>{props.children}</TodoList>
-      ),
-      table: (props: Props) => (
-        <table {...props.attributes}>{props.children}</table>
-      ),
-      'table-row': (props: Props) => (
-        <tr {...props.attributes}>{props.children}</tr>
-      ),
-      'table-head': (props: Props) => (
-        <th {...props.attributes}>{props.children}</th>
-      ),
-      'table-cell': (props: Props) => (
-        <td {...props.attributes}>{props.children}</td>
-      ),
-      code: Code,
-      image: Image,
-      link: Link,
-      'list-item': ListItem,
-      heading1: (props: Props) => <Heading1 placeholder {...props} />,
-      heading2: (props: Props) => <Heading2 {...props} />,
-      heading3: (props: Props) => <Heading3 {...props} />,
-      heading4: (props: Props) => <Heading4 {...props} />,
-      heading5: (props: Props) => <Heading5 {...props} />,
-      heading6: (props: Props) => <Heading6 {...props} />,
-    },
-
-    rules: [
-      // ensure first node is always a heading
-      {
-        match: (node: Node) => {
-          return node.kind === 'document';
-        },
-        validate: (document: Node) => {
-          const firstNode = document.nodes.first();
-          return firstNode && firstNode.type === 'heading1' ? null : firstNode;
-        },
-        normalize: (transform: Transform, document: Node, firstNode: Node) => {
-          transform.setBlock({ type: 'heading1' });
-        },
-      },
-
-      // automatically removes any marks in first heading
-      {
-        match: (node: Node) => {
-          return node.kind === 'heading1';
-        },
-        validate: (heading: Node) => {
-          const hasMarks = heading.getMarks().isEmpty();
-          const hasInlines = heading.getInlines().isEmpty();
-
-          return !(hasMarks && hasInlines);
-        },
-        normalize: (transform: Transform, heading: Node) => {
-          transform.unwrapInlineByKey(heading.key);
-
-          heading.getMarks().forEach(mark => {
-            heading.nodes.forEach(textNode => {
-              if (textNode.kind === 'text') {
-                transform.removeMarkByKey(
-                  textNode.key,
-                  0,
-                  textNode.text.length,
-                  mark
-                );
-              }
-            });
-          });
-
-          return transform;
-        },
-      },
-    ],
-  };
-};
-
-export default createSchema;
+// // @flow
+// import React from 'react';
+// import Code from './components/Code';
+// import HorizontalRule from './components/HorizontalRule';
+// import InlineCode from './components/InlineCode';
+// import Image from './components/Image';
+// import Link from './components/Link';
+// import ListItem from './components/ListItem';
+// import TodoList from './components/TodoList';
+// import {
+//   Heading1,
+//   Heading2,
+//   Heading3,
+//   Heading4,
+//   Heading5,
+//   Heading6,
+// } from './components/Heading';
+// import Paragraph from './components/Paragraph';
+// import BlockToolbar from './components/Toolbar/BlockToolbar';
+// import type { Props, Node, Transform } from './types';
+//
+// type Options = {
+//   onInsertImage: Function,
+//   onChange: Function,
+// };
+//
+// const createSchema = ({ onInsertImage, onChange }: Options) => {
+//   return {
+//     marks: {
+//       bold: (props: Props) => <strong>{props.children}</strong>,
+//       code: (props: Props) => <InlineCode>{props.children}</InlineCode>,
+//       italic: (props: Props) => <em>{props.children}</em>,
+//       underlined: (props: Props) => <u>{props.children}</u>,
+//       deleted: (props: Props) => <del>{props.children}</del>,
+//       added: (props: Props) => <mark>{props.children}</mark>,
+//     },
+//
+//     nodes: {
+//       'block-toolbar': (props: Props) => (
+//         <BlockToolbar
+//           onChange={onChange}
+//           onInsertImage={onInsertImage}
+//           {...props}
+//         />
+//       ),
+//       paragraph: (props: Props) => <Paragraph {...props} />,
+//       'block-quote': (props: Props) => (
+//         <blockquote {...props.attributes}>{props.children}</blockquote>
+//       ),
+//       'horizontal-rule': HorizontalRule,
+//       'bulleted-list': (props: Props) => (
+//         <ul {...props.attributes}>{props.children}</ul>
+//       ),
+//       'ordered-list': (props: Props) => (
+//         <ol {...props.attributes}>{props.children}</ol>
+//       ),
+//       'todo-list': (props: Props) => (
+//         <TodoList {...props.attributes}>{props.children}</TodoList>
+//       ),
+//       table: (props: Props) => (
+//         <table {...props.attributes}>{props.children}</table>
+//       ),
+//       'table-row': (props: Props) => (
+//         <tr {...props.attributes}>{props.children}</tr>
+//       ),
+//       'table-head': (props: Props) => (
+//         <th {...props.attributes}>{props.children}</th>
+//       ),
+//       'table-cell': (props: Props) => (
+//         <td {...props.attributes}>{props.children}</td>
+//       ),
+//       code: Code,
+//       image: Image,
+//       link: Link,
+//       'list-item': ListItem,
+//       heading1: (props: Props) => <Heading1 placeholder {...props} />,
+//       heading2: (props: Props) => <Heading2 {...props} />,
+//       heading3: (props: Props) => <Heading3 {...props} />,
+//       heading4: (props: Props) => <Heading4 {...props} />,
+//       heading5: (props: Props) => <Heading5 {...props} />,
+//       heading6: (props: Props) => <Heading6 {...props} />,
+//     },
+//
+//     rules: [
+//       // ensure first node is always a heading
+//       {
+//         match: (node: Node) => {
+//           return node.kind === 'document';
+//         },
+//         validate: (document: Node) => {
+//           const firstNode = document.nodes.first();
+//           return firstNode && firstNode.type === 'heading1' ? null : firstNode;
+//         },
+//         normalize: (transform: Transform, document: Node, firstNode: Node) => {
+//           transform.setBlock({ type: 'heading1' });
+//         },
+//       },
+//
+//       // automatically removes any marks in first heading
+//       {
+//         match: (node: Node) => {
+//           return node.kind === 'heading1';
+//         },
+//         validate: (heading: Node) => {
+//           const hasMarks = heading.getMarks().isEmpty();
+//           const hasInlines = heading.getInlines().isEmpty();
+//
+//           return !(hasMarks && hasInlines);
+//         },
+//         normalize: (transform: Transform, heading: Node) => {
+//           transform.unwrapInlineByKey(heading.key);
+//
+//           heading.getMarks().forEach(mark => {
+//             heading.nodes.forEach(textNode => {
+//               if (textNode.kind === 'text') {
+//                 transform.removeMarkByKey(
+//                   textNode.key,
+//                   0,
+//                   textNode.text.length,
+//                   mark
+//                 );
+//               }
+//             });
+//           });
+//
+//           return transform;
+//         },
+//       },
+//     ],
+//   };
+// };
+//
+// export default createSchema;
--- a/app/components/Editor/transforms.js
+++ b/app/components/Editor/transforms.js
@@ -1,6 +1,6 @@
 // @flow
+import type { change } from 'slate-prop-types';
 import EditList from './plugins/EditList';
-import type { State, Transform } from './types';

 const { transforms } = EditList;

@@ -10,28 +10,25 @@ type Options = {
  append?: string | Object,
 };

-export function splitAndInsertBlock(
-  transform: Transform,
-  state: State,
-  options: Options
-) {
+export function splitAndInsertBlock(change: change, options: Options) {
  const { type, wrapper, append } = options;
-  const { document } = state;
-  const parent = document.getParent(state.startBlock.key);
+  const { value } = change;
+  const { document } = value;
+  const parent = document.getParent(value.startBlock.key);

  // lists get some special treatment
  if (parent && parent.type === 'list-item') {
-    transform = transforms.unwrapList(
+    change = transforms.unwrapList(
      transforms
-        .splitListItem(transform.collapseToStart())
+        .splitListItem(change.collapseToStart())
        .collapseToEndOfPreviousBlock()
    );
  }

-  transform = transform.insertBlock(type);
+  change = change.insertBlock(type);

-  if (wrapper) transform = transform.wrapBlock(wrapper);
-  if (append) transform = transform.insertBlock(append);
+  if (wrapper) change = change.wrapBlock(wrapper);
+  if (append) change = change.insertBlock(append);

-  return transform;
+  return change;
 }
--- a/app/components/Editor/types.js
+++ b/app/components/Editor/types.js
@@ -1,118 +0,0 @@
-// @flow
-import { List, Set, Map } from 'immutable';
-import { Selection } from 'slate';
-
-export type NodeTransform = {
-  addMarkByKey: Function,
-  insertNodeByKey: Function,
-  insertTextByKey: Function,
-  moveNodeByKey: Function,
-  removeMarkByKey: Function,
-  removeNodeByKey: Function,
-  removeTextByKey: Function,
-  setMarkByKey: Function,
-  setNodeByKey: Function,
-  splitNodeByKey: Function,
-  unwrapInlineByKey: Function,
-  unwrapBlockByKey: Function,
-  unwrapNodeByKey: Function,
-  wrapBlockByKey: Function,
-  wrapInlineByKey: Function,
-};
-
-export type StateTransform = {
-  deleteBackward: Function,
-  deleteForward: Function,
-  delete: Function,
-  insertBlock: Function,
-  insertFragment: Function,
-  insertInline: Function,
-  insertText: Function,
-  addMark: Function,
-  setBlock: Function,
-  setInline: Function,
-  splitBlock: Function,
-  splitInline: Function,
-  removeMark: Function,
-  toggleMark: Function,
-  unwrapBlock: Function,
-  unwrapInline: Function,
-  wrapBlock: Function,
-  wrapInline: Function,
-  wrapText: Function,
-};
-
-export type SelectionTransform = {
-  collapseToStart: Function,
-  collapseToEnd: Function,
-};
-
-export type Transform = NodeTransform & StateTransform & SelectionTransform;
-
-export type Editor = {
-  props: Object,
-  className: string,
-  onChange: Function,
-  onDocumentChange: Function,
-  onSelectionChange: Function,
-  plugins: Array<Object>,
-  readOnly: boolean,
-  state: Object,
-  style: Object,
-  placeholder?: string,
-  placeholderClassName?: string,
-  placeholderStyle?: string,
-  blur: Function,
-  focus: Function,
-  getSchema: Function,
-  getState: Function,
-};
-
-export type Node = {
-  key: string,
-  kind: string,
-  type: string,
-  length: number,
-  text: string,
-  data: Map<string, any>,
-  nodes: List<Node>,
-  getMarks: Function,
-  getBlocks: Function,
-  getParent: Function,
-  getInlines: Function,
-  getInlinesAtRange: Function,
-  setBlock: Function,
-};
-
-export type Block = Node & {
-  type: string,
-};
-
-export type Document = Node;
-
-export type State = {
-  document: Document,
-  selection: Selection,
-  startBlock: Block,
-  endBlock: Block,
-  startText: Node,
-  endText: Node,
-  marks: Set<*>,
-  blocks: List<Block>,
-  fragment: Document,
-  lines: List<Node>,
-  tests: List<Node>,
-  startBlock: Block,
-  transform: Function,
-  isBlurred: Function,
-};
-
-export type Props = {
-  node: Node,
-  parent?: Node,
-  attributes?: Object,
-  state: State,
-  editor: Editor,
-  readOnly?: boolean,
-  children?: React$Element<any>,
-};