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.handleDocumentChange = this.handleDocumentChange.bind(this);
-
+    this.plugins = [
+      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
@@ -178,11 +177,11 @@ class VisualEditor extends React.Component {
   }
 
   /**
- * When clicking a link, if the selection has a link in it, remove the link.
- * Otherwise, add a new link with an href and text.
- *
- * @param {Event} e
- */
+   * When clicking a link, if the selection has a link in it, remove the link.
+   * Otherwise, add a new link with an href and text.
+   *
+   * @param {Event} e
+   */
 
   handleInlineClick(type, isActive) {
     let { state } = this.state;
@@ -212,17 +211,16 @@ class VisualEditor extends React.Component {
     this.setState({ state });
   }
 
-
   handleBlockTypeClick(type) {
     let { state } = this.state;
 
     state = state
-    .transform()
-    .insertBlock({
-      type: type,
-      isVoid: true
-    })
-    .apply();
+      .transform()
+      .insertBlock({
+        type: type,
+        isVoid: true
+      })
+      .apply();
 
     this.setState({ state }, this.focusAndAddParagraph);
   }
@@ -277,18 +275,17 @@ class VisualEditor extends React.Component {
       .apply({
         snapshot: false
       });
-    this.setState({ state:normalized });
+    this.setState({ state: normalized });
   }
 
-
   handleKeyDown(evt) {
     if (evt.shiftKey && evt.key === 'Enter') {
       this.blockEdit = true;
       let { state } = this.state;
       state = state
-      .transform()
-      .insertText('  \n')
-      .apply();
+        .transform()
+        .insertText('  \n')
+        .apply();
 
       this.setState({ state });
     }
@@ -300,12 +297,12 @@ class VisualEditor extends React.Component {
 
     return (
       <BlockTypesMenu
-          isOpen={isOpen}
-          plugins={getPlugins()}
-          position={this.menuPositions.blockTypesMenu}
-          onClickBlock={this.handleBlockTypeClick}
-          onClickPlugin={this.handlePluginClick}
-          onClickImage={this.handleImageClick}
+        isOpen={isOpen}
+        plugins={getPlugins()}
+        position={this.menuPositions.blockTypesMenu}
+        onClickBlock={this.handleBlockTypeClick}
+        onClickPlugin={this.handlePluginClick}
+        onClickImage={this.handleImageClick}
       />
     );
   }
@@ -316,14 +313,14 @@ class VisualEditor extends React.Component {
 
     return (
       <StylesMenu
-          isOpen={isOpen}
-          position={this.menuPositions.stylesMenu}
-          marks={this.state.state.marks}
-          blocks={this.state.state.blocks}
-          inlines={this.state.state.inlines}
-          onClickMark={this.handleMarkStyleClick}
-          onClickInline={this.handleInlineClick}
-          onClickBlock={this.handleBlockStyleClick}
+        isOpen={isOpen}
+        position={this.menuPositions.stylesMenu}
+        marks={this.state.state.marks}
+        blocks={this.state.state.blocks}
+        inlines={this.state.state.inlines}
+        onClickMark={this.handleMarkStyleClick}
+        onClickInline={this.handleInlineClick}
+        onClickBlock={this.handleBlockStyleClick}
       />
     );
   }
@@ -334,12 +331,12 @@ class VisualEditor extends React.Component {
         {this.renderStylesMenu()}
         {this.renderBlockTypesMenu()}
         <Editor
-            placeholder={'Enter some rich text...'}
-            state={this.state.state}
-            schema={SCHEMA}
-            onChange={this.handleChange}
-            onKeyDown={this.handleKeyDown}
-            onDocumentChange={this.handleDocumentChange}
+          placeholder={'Enter some rich text...'}
+          state={this.state.state}
+          schema={SCHEMA}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          onDocumentChange={this.handleDocumentChange}
         />
       </div>
     );
@@ -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,31 +2,32 @@ import React, { PropTypes } from 'react';
 import { getSyntaxes } from './richText';
 import MarkupItReactRenderer from '../MarkupItReactRenderer/index';
 
-const schema = {
-  'mediaproxy': ({ token }) => (
-    <img
-        src={token.getIn(['data', 'src'])}
-        alt={token.getIn(['data', 'alt'])}
-    />
-  )
-};
-
-const MarkdownPreview = ({ value }) => {
+const MarkdownPreview = ({ value, getMedia }) => {
   if (value == null) {
     return null;
   }
 
+  const schema = {
+    'mediaproxy': ({ token }) => ( // eslint-disable-line
+      <img
+        src={getMedia(token.getIn(['data', 'src']))}
+        alt={token.getIn(['data', 'alt'])}
+      />
+    )
+  };
+
   const { markdown } = getSyntaxes();
   return (
     <MarkupItReactRenderer
-        value={value}
-        syntax={markdown}
-        schema={schema}
+      value={value}
+      syntax={markdown}
+      schema={schema}
     />
   );
 };
 
 MarkdownPreview.propTypes = {
+  getMedia: PropTypes.func.isRequired,
   value: PropTypes.string,
 };