Implement image uploading for the raw editor

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

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { Editor, Plain, Mark } from 'slate';
 import Prism from 'prismjs';
 import PluginDropImages from 'slate-drop-or-paste-images';
+import MediaProxy from '../../../../valueObjects/MediaProxy';
 import marks from './prismMarkdown';
 import styles from './index.css';
 
@@ -71,16 +72,6 @@ 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) {
@@ -92,9 +83,18 @@ class RawEditor extends React.Component {
       state: content
     };
 
-    this.handleChange = this.handleChange.bind(this);
+    this.plugins = [
-    this.handleDocumentChange = this.handleDocumentChange.bind(this);
+      PluginDropImages({
-
+        applyTransform: (transform, file) => {
+          const mediaProxy = new MediaProxy(file.name, file);
+          console.log(mediaProxy);
+          const state = Plain.deserialize(`\n\n![${file.name}](${mediaProxy.public_path})\n\n`);
+          props.onAddMedia(mediaProxy);
+          return transform
+            .insertFragment(state.get('document'));
+        }
+      })
+    ];
   }
 
   /**
@@ -103,11 +103,11 @@ class RawEditor extends React.Component {
    * It also have an onDocumentChange, that get's dispatched only when the actual
    * content changes
    */
-  handleChange(state) {
+  handleChange = state => {
     this.setState({ state });
   }
 
-  handleDocumentChange(document, state) {
+  handleDocumentChange = (document, state) => {
     const content = Plain.serialize(state, { terse: true });
     this.props.onChange(content);
   }
@@ -121,7 +121,7 @@ class RawEditor extends React.Component {
         schema={SCHEMA}
         onChange={this.handleChange}
         onDocumentChange={this.handleDocumentChange}
-        plugins={plugins}
+        plugins={this.plugins}
       />
     );
   }
@@ -130,6 +130,8 @@ class RawEditor extends React.Component {
 export default RawEditor;
 
 RawEditor.propTypes = {
+  onAddMedia: PropTypes.func.isRequired,
+  getMedia: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.node,
+  value: PropTypes.string,
 };

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

@@ -8,7 +8,6 @@ import { DEFAULT_NODE, SCHEMA } from './schema';
 import { getNodes, getSyntaxes, getPlugins } from '../../richText';
 import StylesMenu from './StylesMenu';
 import BlockTypesMenu from './BlockTypesMenu';
-import styles from './index.css';
 
 /**
  * Slate Render Configuration
@@ -212,7 +211,6 @@ class VisualEditor extends React.Component {
     this.setState({ state });
   }
 
-
   handleBlockTypeClick(type) {
     let { state } = this.state;
 
@@ -280,7 +278,6 @@ class VisualEditor extends React.Component {
     this.setState({ state: normalized });
   }
 
-
   handleKeyDown(evt) {
     if (evt.shiftKey && evt.key === 'Enter') {
       this.blockEdit = true;
@@ -352,5 +349,5 @@ VisualEditor.propTypes = {
   onChange: PropTypes.func.isRequired,
   onAddMedia: PropTypes.func.isRequired,
   getMedia: PropTypes.func.isRequired,
-  value: PropTypes.node,
+  value: PropTypes.string,
 };

src/components/Widgets/MarkdownPreview.js

@@ -2,20 +2,20 @@ import React, { PropTypes } from 'react';
 import { getSyntaxes } from './richText';
 import MarkupItReactRenderer from '../MarkupItReactRenderer/index';
 
+const MarkdownPreview = ({ value, getMedia }) => {
+  if (value == null) {
+    return null;
+  }
+
   const schema = {
-  'mediaproxy': ({ token }) => (
+    'mediaproxy': ({ token }) => ( // eslint-disable-line
       <img
-        src={token.getIn(['data', 'src'])}
+        src={getMedia(token.getIn(['data', 'src']))}
         alt={token.getIn(['data', 'alt'])}
       />
     )
   };
 
-const MarkdownPreview = ({ value }) => {
-  if (value == null) {
-    return null;
-  }
-
   const { markdown } = getSyntaxes();
   return (
     <MarkupItReactRenderer
@@ -27,6 +27,7 @@ const MarkdownPreview = ({ value }) => {
 };
 
 MarkdownPreview.propTypes = {
+  getMedia: PropTypes.func.isRequired,
   value: PropTypes.string,
 };