Implement drag and drup upload support for simple markdown editor

example/example.css

@@ -1,15 +1,21 @@
-html, body {
+html,
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+body {
-  font-size: 14px;
   color: #444;
+  font-size: 14px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
 body {
   padding: 20px;
 }
 
 h1 {
-  font-weight: bold;
-  color: #666;
-  font-size: 32px;
   margin-top: 20px;
+  color: #666;
+  font-weight: bold;
+  font-size: 32px;
+}
+
+img {
+  max-width: 100%;
 }

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

@@ -1,5 +1,7 @@
 import React, { PropTypes } from 'react';
 import Toolbar from './Toolbar';
+import MediaProxy from '../../../../valueObjects/MediaProxy';
+
 
 function processUrl(url) {
   if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
@@ -11,6 +13,10 @@ function processUrl(url) {
   return `/${ url }`;
 }
 
+function preventDefault(e) {
+  e.preventDefault();
+}
+
 export default class RawEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -23,6 +29,16 @@ export default class RawEditor extends React.Component {
   }
   componentDidMount() {
     this.updateHeight();
+    this.element.addEventListener('dragenter', preventDefault, false);
+    this.element.addEventListener('dragover', preventDefault, false);
+    this.element.addEventListener('drop', this.handleDrop, false);
+  }
+
+  componentWillUnmount() {
+    console.log('unmounting');
+    this.element.removeEventListener('dragenter', preventDefault);
+    this.element.removeEventListener('dragover', preventDefault);
+    this.element.removeEventListener('drop', this.handleDrop);
   }
 
   componentDidUpdate() {
@@ -38,6 +54,26 @@ export default class RawEditor extends React.Component {
     this.updateHeight();
   };
 
+  handleDrop = (e) => {
+    e.preventDefault();
+    let data;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length) {
+      data = Array.from(e.dataTransfer.files).map((file) => {
+        const mediaProxy = new MediaProxy(file.name, file);
+        this.props.onAddMedia(mediaProxy);
+        const link = `[${ file.name }](${ mediaProxy.public_path })`;
+        if (file.type.split('/')[0] === 'image') {
+          return `!${ link }`;
+        }
+        return link;
+      }).join('\n\n');
+    } else {
+      data = e.dataTransfer.getData('text/plain');
+    }
+    this.replaceSelection(data);
+  };
+
   updateHeight() {
     if (this.element.scrollHeight > this.element.clientHeight) {
       this.element.style.height = `${ this.element.scrollHeight }px`;
@@ -150,6 +186,7 @@ export default class RawEditor extends React.Component {
 }
 
 RawEditor.propTypes = {
+  onAddMedia: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.node,
 };