Added: Placeholder when uploading images

frontend/components/Editor/plugins.js

@@ -1,14 +1,13 @@
 // @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';
 import TrailingBlock from 'slate-trailing-block';
 import EditCode from 'slate-edit-code';
 import Prism from 'slate-prism';
-import uploadFile from 'utils/uploadFile';
 import KeyboardShortcuts from './plugins/KeyboardShortcuts';
 import MarkdownShortcuts from './plugins/MarkdownShortcuts';
+import ImageUploads from './plugins/ImageUploads';
 
 const onlyInCode = node => node.type === 'code';
 
@@ -17,34 +16,13 @@ type Options = {
   onImageUploadStop: Function,
 };
 
-const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
+const createPlugins = (options: Options) => {
   return [
     PasteLinkify({
       type: 'link',
       collapseTo: 'end',
     }),
-    DropOrPasteImages({
-      extensions: ['png', 'jpg', 'gif'],
-      applyTransform: async (transform, file) => {
-        onImageUploadStart();
-        try {
-          const asset = await uploadFile(file);
-          const alt = file.name;
-          const src = asset.url;
-
-          return transform.insertBlock({
-            type: 'image',
-            isVoid: true,
-            data: { src, alt },
-          });
-        } catch (err) {
-          // TODO: Show a failure alert
-          console.error(err);
-        } finally {
-          onImageUploadStop();
-        }
-      },
-    }),
+    ImageUploads(options),
     EditList({
       types: ['ordered-list', 'bulleted-list', 'todo-list'],
       typeItem: 'list-item',