More and more fixes

app/components/Editor/changes.js

@@ -0,0 +1,82 @@
+// @flow
+import { Change } from 'slate';
+import uuid from 'uuid';
+import EditList from './plugins/EditList';
+import uploadFile from 'utils/uploadFile';
+
+const { changes } = EditList;
+
+type Options = {
+  type: string | Object,
+  wrapper?: string | Object,
+  append?: string | Object,
+};
+
+export function splitAndInsertBlock(change: Change, options: Options) {
+  const { type, wrapper, append } = options;
+  const parent = change.value.document.getParent(change.value.startBlock.key);
+
+  // lists get some special treatment
+  if (parent && parent.type === 'list-item') {
+    change = changes.unwrapList(
+      changes
+        .splitListItem(change.collapseToStart())
+        .collapseToEndOfPreviousBlock()
+    );
+  }
+
+  change = change.insertBlock(type);
+
+  if (wrapper) change = change.wrapBlock(wrapper);
+  if (append) change = change.insertBlock(append);
+
+  return change;
+}
+
+export async function insertImageFile(
+  change: Change,
+  file: window.File,
+  onImageUploadStart: () => void,
+  onImageUploadStop: () => void
+) {
+  onImageUploadStart();
+  console.log(file);
+  try {
+    // load the file as a data URL
+    const id = uuid.v4();
+    const alt = '';
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      const src = reader.result;
+
+      // insert into document as uploading placeholder
+      change.insertBlock({
+        type: 'image',
+        isVoid: true,
+        data: { src, id, alt, loading: true },
+      });
+      console.log('insertBlock', change);
+    });
+    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 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(
+      node => node.data && node.data.get('id') === id
+    );
+    console.log('placeholder', placeholder);
+
+    return change.setNodeByKey(placeholder.key, {
+      data: { src, alt, loading: false },
+    });
+  } catch (err) {
+    throw err;
+  } finally {
+    onImageUploadStop();
+  }
+}