Update to use dev branch

frontend/components/Editor/Editor.js

@@ -6,13 +6,13 @@ import keydown from 'react-keydown';
 import classnames from 'classnames/bind';
 import type { Document, State, Editor as EditorType } from './types';
 import getDataTransferFiles from 'utils/getDataTransferFiles';
-import uploadFile from 'utils/uploadFile';
 import Flex from 'components/Flex';
 import ClickablePadding from './components/ClickablePadding';
 import Toolbar from './components/Toolbar';
 import Markdown from './serializer';
 import createSchema from './schema';
 import createPlugins from './plugins';
+import insertImage from './insertImage';
 import styled from 'styled-components';
 import styles from './Editor.scss';
 
@@ -95,23 +95,22 @@ type KeyData = {
 
     const files = getDataTransferFiles(ev);
     for (const file of files) {
-      await this.insertFile(file);
+      await this.insertImageFile(file);
     }
   };
 
-  insertFile = async (file: Object) => {
-    this.props.onImageUploadStart();
-    const asset = await uploadFile(file);
+  insertImageFile = async (file: window.File) => {
     const state = this.editor.getState();
-    const transform = state.transform();
-    transform.collapseToEndOf(state.document);
-    transform.insertBlock({
-      type: 'image',
-      isVoid: true,
-      data: { src: asset.url, alt: file.name },
-    });
-    this.props.onImageUploadStop();
-    this.setState({ state: transform.apply() });
+    let transform = state.transform();
+
+    transform = await insertImage(
+      transform,
+      file,
+      this.editor,
+      this.props.onImageUploadStart,
+      this.props.onImageUploadStop
+    );
+    this.editor.onChange(transform.apply());
   };
 
   cancelEvent = (ev: SyntheticEvent) => {

frontend/components/Editor/insertImage.js

@@ -0,0 +1,56 @@
+// @flow
+import uuid from 'uuid';
+import uploadFile from 'utils/uploadFile';
+import type { Editor, Transform } from './types';
+
+export default async function insertImageFile(
+  transform: Transform,
+  file: window.File,
+  editor: Editor,
+  onImageUploadStart: () => void,
+  onImageUploadStop: () => void
+) {
+  onImageUploadStart();
+
+  try {
+    // load the file as a data URL
+    const id = uuid.v4();
+    const alt = file.name;
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      const src = reader.result;
+
+      // insert into document as uploading placeholder
+      const state = transform
+        .insertBlock({
+          type: 'image',
+          isVoid: true,
+          data: { src, alt, id, loading: true },
+        })
+        .apply();
+      editor.onChange(state);
+    });
+    reader.readAsDataURL(file);
+
+    // now we have a placeholder, start the upload
+    const asset = await uploadFile(file);
+    const src = asset.url;
+
+    // we dont use the original transform 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 placeholder = state.document.findDescendant(
+      node => node.data && node.data.get('id') === id
+    );
+
+    return finalTransform.setNodeByKey(placeholder.key, {
+      data: { src, alt, loading: false },
+    });
+  } catch (err) {
+    throw err;
+  } finally {
+    onImageUploadStop();
+  }
+}

frontend/components/Editor/plugins.js

@@ -1,4 +1,5 @@
 // @flow
+import DropOrPasteImages from 'slate-drop-or-paste-images';
 import PasteLinkify from 'slate-paste-linkify';
 import EditList from 'slate-edit-list';
 import CollapseOnEscape from 'slate-collapse-on-escape';
@@ -7,7 +8,7 @@ import EditCode from 'slate-edit-code';
 import Prism from 'slate-prism';
 import KeyboardShortcuts from './plugins/KeyboardShortcuts';
 import MarkdownShortcuts from './plugins/MarkdownShortcuts';
-import ImageUploads from './plugins/ImageUploads';
+import insertImage from './insertImage';
 
 const onlyInCode = node => node.type === 'code';
 
@@ -16,13 +17,24 @@ type Options = {
   onImageUploadStop: Function,
 };
 
-const createPlugins = (options: Options) => {
+const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
   return [
     PasteLinkify({
       type: 'link',
       collapseTo: 'end',
     }),
-    ImageUploads(options),
+    DropOrPasteImages({
+      extensions: ['png', 'jpg', 'gif'],
+      applyTransform: (transform, editor, file) => {
+        return insertImage(
+          transform,
+          file,
+          editor,
+          onImageUploadStart,
+          onImageUploadStop
+        );
+      },
+    }),
     EditList({
       types: ['ordered-list', 'bulleted-list', 'todo-list'],
       typeItem: 'list-item',

frontend/components/Editor/plugins/ImageUploads.js

@@ -1,63 +0,0 @@
-// @flow
-import uuid from 'uuid';
-import DropOrPasteImages from 'slate-drop-or-paste-images';
-import uploadFile from 'utils/uploadFile';
-
-type Options = {
-  onImageUploadStart: Function,
-  onImageUploadStop: Function,
-};
-
-export default function ImageUploads({
-  onImageUploadStart,
-  onImageUploadStop,
-}: Options) {
-  return DropOrPasteImages({
-    extensions: ['png', 'jpg', 'gif'],
-    applyTransform: async (transform, editor, file) => {
-      onImageUploadStart();
-
-      // load the file as a data URL
-      const id = uuid.v4();
-      const alt = file.name;
-      const reader = new FileReader();
-      reader.addEventListener('load', () => {
-        const src = reader.result;
-
-        // insert into document as uploading placeholder
-        const state = transform
-          .insertBlock({
-            type: 'image',
-            isVoid: true,
-            data: { src, alt, id, loading: true },
-          })
-          .apply();
-        editor.onChange(state);
-      });
-      reader.readAsDataURL(file);
-
-      // now we have a placeholder, start the upload
-      try {
-        const asset = await uploadFile(file);
-        const src = asset.url;
-
-        // we dont use the original transform 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 transform = state.transform();
-        const placeholder = state.document.findDescendant(
-          node => node.data && node.data.get('id') === id
-        );
-        return transform.setNodeByKey(placeholder.key, {
-          data: { src, alt, loading: false },
-        });
-      } catch (err) {
-        // TODO: Show a failure alert
-        console.error(err);
-      } finally {
-        onImageUploadStop();
-      }
-    },
-  });
-}