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
         );

package.json

@@ -61,6 +61,7 @@
     "url": "git+ssh://git@github.com/outline/outline.git"
   },
   "dependencies": {
+    "@tommoor/slate-drop-or-paste-images": "^0.8.1",
     "aws-sdk": "^2.135.0",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
@@ -162,7 +163,6 @@
     "sequelize-encrypted": "0.1.0",
     "slate": "^0.29.0",
     "slate-collapse-on-escape": "^0.6.0",
-    "slate-drop-or-paste-images": "^0.8.0",
     "slate-edit-code": "^0.13.2",
     "slate-edit-list": "^0.10.1",
     "slate-md-serializer": "^1.0.4",

yarn.lock

@@ -2,6 +2,18 @@
 # yarn lockfile v1
 
 
+"@tommoor/slate-drop-or-paste-images@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/@tommoor/slate-drop-or-paste-images/-/slate-drop-or-paste-images-0.8.1.tgz#4d94b5c1dd2de109546ee1f38a1e4a18df078c1e"
+  dependencies:
+    es6-promise "^4.0.5"
+    image-to-data-uri "^1.0.0"
+    is-data-uri "^0.1.0"
+    is-image "^1.0.1"
+    is-url "^1.2.2"
+    mime-types "^2.1.11"
+    slate-dev-logger "^0.1.0"
+
 "@types/geojson@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.3.tgz#fbcf7fa5eb6dd108d51385cc6987ec1f24214523"
@@ -8205,18 +8217,6 @@ slate-dev-logger@^0.1.0, slate-dev-logger@^0.1.25, slate-dev-logger@^0.1.36:
   version "0.1.36"
   resolved "https://registry.npmjs.org/slate-dev-logger/-/slate-dev-logger-0.1.36.tgz#ecdb37dbf944dfc742bab23b6a20d5a0472db95e"
 
-slate-drop-or-paste-images@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/slate-drop-or-paste-images/-/slate-drop-or-paste-images-0.8.0.tgz#2c363a117688c1b57517ab9cd468c4060e09824e"
-  dependencies:
-    es6-promise "^4.0.5"
-    image-to-data-uri "^1.0.0"
-    is-data-uri "^0.1.0"
-    is-image "^1.0.1"
-    is-url "^1.2.2"
-    mime-types "^2.1.11"
-    slate-dev-logger "^0.1.0"
-
 slate-edit-code@^0.13.2:
   version "0.13.2"
   resolved "https://registry.npmjs.org/slate-edit-code/-/slate-edit-code-0.13.2.tgz#682a7640da076906e5b4a4c73ec0e46d31d92c62"