Flowtyping

app/components/Editor/components/BlockInsert.js

@@ -13,10 +13,10 @@ type Props = {
   editor: Editor,
 };
 
-function findClosestRootNode(state, ev) {
+function findClosestRootNode(value, ev) {
   let previous;
 
-  for (const node of state.document.nodes) {
+  for (const node of value.document.nodes) {
     const element = findDOMNode(node);
     const bounds = element.getBoundingClientRect();
     if (bounds.top > ev.clientY) return previous;

app/components/Editor/components/Code.js

@@ -1,11 +1,16 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import type { props } from 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 import CopyButton from './CopyButton';
 import { color } from 'shared/styles/constants';
 
-export default function Code({ children, node, readOnly, attributes }: props) {
+export default function Code({
+  children,
+  node,
+  readOnly,
+  attributes,
+}: SlateNodeProps) {
   const language = node.data.get('language') || 'javascript';
 
   return (

app/components/Editor/components/Contents.js

@@ -3,7 +3,7 @@ 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 { Block } from 'slate';
 import { List } from 'immutable';
 import { color } from 'shared/styles/constants';
 import headingToSlug from '../headingToSlug';
@@ -54,10 +54,10 @@ class Contents extends Component {
     return elements;
   }
 
-  get headings(): List<block> {
+  get headings(): List<Block> {
     const { editor } = this.props;
 
-    return editor.value.document.nodes.filter((node: block) => {
+    return editor.value.document.nodes.filter((node: Block) => {
       if (!node.text) return false;
       return node.type.match(/^heading/);
     });

app/components/Editor/components/Heading.js

@@ -1,22 +1,15 @@
 // @flow
 import React from 'react';
 import { Document } from 'slate';
-import { Editor } from 'slate-react';
+import type { SlateNodeProps } from '../types';
 import styled from 'styled-components';
-import type { node } from 'slate-prop-types';
 import headingToSlug from '../headingToSlug';
 import Placeholder from './Placeholder';
 
-type Props = {
-  children: React$Element<*>,
-  placeholder?: boolean,
-  parent: node,
-  node: node,
-  editor: Editor,
-  readOnly: boolean,
-  component?: string,
-  attributes: Object,
-  className?: string,
+type Props = SlateNodeProps & {
+  component: string,
+  className: string,
+  placeholder: string,
 };
 
 function Heading(props: Props) {
@@ -61,7 +54,7 @@ function Heading(props: Props) {
 
 const Wrapper = styled.div`
   display: inline;
-  margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)};
+  margin-left: ${(props: SlateNodeProps) => (props.hasEmoji ? '-1.2em' : 0)};
 `;
 
 const Anchor = styled.a`
@@ -84,21 +77,21 @@ export const StyledHeading = styled(Heading)`
     }
   }
 `;
-export const Heading1 = (props: Props) => (
+export const Heading1 = (props: SlateNodeProps) => (
   <StyledHeading component="h1" {...props} />
 );
-export const Heading2 = (props: Props) => (
+export const Heading2 = (props: SlateNodeProps) => (
   <StyledHeading component="h2" {...props} />
 );
-export const Heading3 = (props: Props) => (
+export const Heading3 = (props: SlateNodeProps) => (
   <StyledHeading component="h3" {...props} />
 );
-export const Heading4 = (props: Props) => (
+export const Heading4 = (props: SlateNodeProps) => (
   <StyledHeading component="h4" {...props} />
 );
-export const Heading5 = (props: Props) => (
+export const Heading5 = (props: SlateNodeProps) => (
   <StyledHeading component="h5" {...props} />
 );
-export const Heading6 = (props: Props) => (
+export const Heading6 = (props: SlateNodeProps) => (
   <StyledHeading component="h6" {...props} />
 );

app/components/Editor/components/HorizontalRule.js

@@ -1,12 +1,13 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import type { props } from 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 import { color } from 'shared/styles/constants';
 
-function HorizontalRule(props: props) {
-  const { state, node, attributes } = props;
-  const active = state.isFocused && state.selection.hasEdgeIn(node);
+function HorizontalRule(props: SlateNodeProps) {
+  const { editor, node, attributes } = props;
+  const active =
+    editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
   return <StyledHr active={active} {...attributes} />;
 }
 

app/components/Editor/components/Image.js

@@ -2,11 +2,11 @@
 import React, { Component } from 'react';
 import ImageZoom from 'react-medium-image-zoom';
 import styled from 'styled-components';
-import type { props } from 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 import { color } from 'shared/styles/constants';
 
 class Image extends Component {
-  props: props;
+  props: SlateNodeProps;
 
   handleChange = (ev: SyntheticInputEvent) => {
     const alt = ev.target.value;
@@ -26,11 +26,12 @@ class Image extends Component {
   };
 
   render() {
-    const { attributes, state, node, readOnly } = this.props;
+    const { attributes, editor, node, readOnly } = this.props;
     const loading = node.data.get('loading');
     const caption = node.data.get('alt');
     const src = node.data.get('src');
-    const active = state.isFocused && state.selection.hasEdgeIn(node);
+    const active =
+      editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
     const showCaption = !readOnly || caption;
 
     return (

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 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 
 function getPathFromUrl(href: string) {
   if (href[0] === '/') return href;
@@ -26,7 +26,12 @@ function isInternalUrl(href: string) {
   }
 }
 
-export default function Link({ attributes, node, children, readOnly }: props) {
+export default function Link({
+  attributes,
+  node,
+  children,
+  readOnly,
+}: SlateNodeProps) {
   const href = node.data.get('href');
   const path = getPathFromUrl(href);
 

app/components/Editor/components/ListItem.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import type { props } from 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 import TodoItem from './TodoItem';
 
 export default function ListItem({
@@ -8,7 +8,7 @@ export default function ListItem({
   node,
   attributes,
   ...props
-}: props) {
+}: SlateNodeProps) {
   const checked = node.data.get('checked');
 
   if (checked !== undefined) {

app/components/Editor/components/Paragraph.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { Document } from 'slate';
-import type { props } from 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 import Placeholder from './Placeholder';
 
 export default function Link({
@@ -11,7 +11,7 @@ export default function Link({
   parent,
   children,
   readOnly,
-}: props) {
+}: SlateNodeProps) {
   const parentIsDocument = parent instanceof Document;
   const firstParagraph = parent && parent.nodes.get(1) === node;
   const lastParagraph = parent && parent.nodes.last() === node;

app/components/Editor/components/TodoItem.js

@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
-import type { props } from 'slate-prop-types';
+import type { SlateNodeProps } from '../types';
 
 export default class TodoItem extends Component {
-  props: props & { checked: boolean };
+  props: SlateNodeProps & { checked: boolean };
 
   handleChange = (ev: SyntheticInputEvent) => {
     const checked = ev.target.checked;

app/components/Editor/components/Toolbar/BlockToolbar.js

@@ -13,14 +13,13 @@ 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 } from 'slate-prop-types';
+import type { SlateNodeProps } from '../../types';
 import { color } from 'shared/styles/constants';
 import { fadeIn } from 'shared/styles/animations';
 import { splitAndInsertBlock } from '../../transforms';
 
-type Props = props & {
-  onInsertImage: Function,
-  onChange: Function,
+type Props = SlateNodeProps & {
+  onInsertImage: *,
 };
 
 type Options = {

app/components/Editor/components/Toolbar/Toolbar.js

@@ -4,7 +4,7 @@ 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 { Value } from 'slate';
 import styled from 'styled-components';
 import _ from 'lodash';
 import FormattingToolbar from './components/FormattingToolbar';
@@ -20,7 +20,7 @@ export default class Toolbar extends Component {
 
   props: {
     editor: Editor,
-    value: value,
+    value: Value,
   };
 
   menu: HTMLElement;

app/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -4,10 +4,10 @@ import ReactDOM from 'react-dom';
 import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { withRouter } from 'react-router-dom';
+import { Change } from 'slate';
 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 DocumentsStore from 'stores/DocumentsStore';
@@ -28,7 +28,7 @@ class LinkToolbar extends Component {
     link: Object,
     documents: DocumentsStore,
     onBlur: () => void,
-    onChange: change => *,
+    onChange: Change => *,
   };
 
   @observable isEditing: boolean = false;