Fixes: Image upload. Back to using our own plugin to show progress

app/components/Editor/Editor.js

@@ -75,9 +75,11 @@ class MarkdownEditor extends Component {
   }
 
   onChange = (change: Change) => {
-    // TODO: Lets avoid constantly serializing to Markdown
     if (this.editorValue !== change.value) {
-      this.props.onChange(Markdown.serialize(change.value));
+      const text = Markdown.serialize(change.value);
+      if (text !== this.props.text) {
+        this.props.onChange(text);
+      }
       this.editorValue = change.value;
     }
   };
@@ -104,6 +106,7 @@ class MarkdownEditor extends Component {
       change.call(
         insertImageFile,
         file,
+        this.editor,
         this.props.onImageUploadStart,
         this.props.onImageUploadStop
       )

app/components/Editor/changes.js

@@ -1,5 +1,6 @@
 // @flow
 import { Change } from 'slate';
+import { Editor } from 'slate-react';
 import uuid from 'uuid';
 import EditList from './plugins/EditList';
 import uploadFile from 'utils/uploadFile';
@@ -36,6 +37,7 @@ export function splitAndInsertBlock(change: Change, options: Options) {
 export async function insertImageFile(
   change: Change,
   file: window.File,
+  editor: Editor,
   onImageUploadStart: () => void,
   onImageUploadStop: () => void
 ) {
@@ -47,13 +49,24 @@ export async function insertImageFile(
     const reader = new FileReader();
     reader.addEventListener('load', () => {
       const src = reader.result;
-
-      // insert into document as uploading placeholder
-      change.insertBlock({
+      const node = {
         type: 'image',
         isVoid: true,
         data: { src, id, alt, loading: true },
-      });
+      };
+
+      // insert / replace into document as uploading placeholder replacing
+      // empty paragraphs if available.
+      if (
+        !change.value.startBlock.text &&
+        change.value.startBlock.type === 'paragraph'
+      ) {
+        change.setBlock(node);
+      } else {
+        change.insertBlock(node);
+      }
+
+      editor.onChange(change);
     });
     reader.readAsDataURL(file);
 
@@ -64,13 +77,14 @@ export async function insertImageFile(
     // 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 placeholder = change.value.document.findDescendant(
+    const placeholder = editor.value.document.findDescendant(
       node => node.data && node.data.get('id') === id
     );
 
-    return change.setNodeByKey(placeholder.key, {
+    change.setNodeByKey(placeholder.key, {
       data: { src, alt, loading: false },
     });
+    editor.onChange(change);
   } catch (err) {
     throw err;
   } finally {

app/components/Editor/plugins.js

@@ -1,5 +1,5 @@
 // @flow
-import InsertImages from 'slate-drop-or-paste-images';
+import InsertImages 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';
@@ -25,10 +25,11 @@ const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => {
     }),
     InsertImages({
       extensions: ['png', 'jpg', 'gif', 'webp'],
-      insertImage: (change, file) => {
+      insertImage: async (change, file, editor) => {
         return change.call(
           insertImageFile,
           file,
+          editor,
           onImageUploadStart,
           onImageUploadStop
         );