From 2b5a987945eb8b0371be973781261e47753d837b Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrej.okonetschnikow@gmail.com>
Date: Wed, 28 Sep 2016 11:05:11 +0200
Subject: [PATCH] WIP on drag'n'drop image uploading

---
 package.json                                     |  3 ++-
 .../MarkdownControlElements/RawEditor/index.css  |  0
 .../MarkdownControlElements/RawEditor/index.js   | 16 ++++++++++++----
 3 files changed, 14 insertions(+), 5 deletions(-)
 delete mode 100644 src/components/Widgets/MarkdownControlElements/RawEditor/index.css

diff --git a/package.json b/package.json
index fe2099a5..4d467f39 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.css b/src/components/Widgets/MarkdownControlElements/RawEditor/index.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js b/src/components/Widgets/MarkdownControlElements/RawEditor/index.js
index 660ab4bd..c9e640c0 100644
--- a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js
+++ b/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}
       />
     );
   }