WIP on drag'n'drop image uploading

package.json

@@ -102,6 +102,7 @@
     "react-toolbox": "^1.2.1",
     "selection-position": "^1.0.0",
     "semaphore": "^1.0.5",
-    "slate": "^0.13.6"
+    "slate": "^0.14.14",
+    "slate-drop-or-paste-images": "^0.2.0"
   }
 }

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -1,9 +1,8 @@
 import React, { PropTypes } from 'react';
 import { Editor, Plain, Mark } from 'slate';
 import Prism from 'prismjs';
+import PluginDropImages from 'slate-drop-or-paste-images';
 import marks from './prismMarkdown';
-import styles from './index.css';
-
 
 Prism.languages.markdown = Prism.languages.extend('markup', {});
 Prism.languages.insertBefore('markdown', 'prolog', marks);
@@ -43,7 +42,6 @@ function renderDecorations(text, block) {
   return characters.asImmutable();
 }
 
-
 const SCHEMA = {
   rules: [
     {
@@ -72,6 +70,16 @@ const SCHEMA = {
   }
 };
 
+const plugins = [
+  PluginDropImages({
+    applyTransform: (transform, file) => {
+      const state = Plain.deserialize(`\n\n![${file.name}](${file.name})\n\n`);
+      return transform
+        .insertFragment(state.get('document'));
+    }
+  })
+];
+
 class RawEditor extends React.Component {
 
   constructor(props) {
@@ -111,7 +119,7 @@ class RawEditor extends React.Component {
           schema={SCHEMA}
           onChange={this.handleChange}
           onDocumentChange={this.handleDocumentChange}
-          renderDecorations={this.renderDecorations}
+          plugins={plugins}
       />
     );
   }