diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js b/src/components/Widgets/MarkdownControlElements/RawEditor/index.js
index 0670e1fe..b6d73067 100644
--- a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js
+++ b/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\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\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,
};
diff --git a/src/components/Widgets/MarkdownControlElements/VisualEditor/index.js b/src/components/Widgets/MarkdownControlElements/VisualEditor/index.js
index 0f9eb696..db455166 100644
--- a/src/components/Widgets/MarkdownControlElements/VisualEditor/index.js
+++ b/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 (
);
}
@@ -316,14 +313,14 @@ class VisualEditor extends React.Component {
return (
);
}
@@ -334,12 +331,12 @@ class VisualEditor extends React.Component {
{this.renderStylesMenu()}
{this.renderBlockTypesMenu()}
);
@@ -352,5 +349,5 @@ VisualEditor.propTypes = {
onChange: PropTypes.func.isRequired,
onAddMedia: PropTypes.func.isRequired,
getMedia: PropTypes.func.isRequired,
- value: PropTypes.node,
+ value: PropTypes.string,
};
diff --git a/src/components/Widgets/MarkdownPreview.js b/src/components/Widgets/MarkdownPreview.js
index b88435b9..3c84d884 100644
--- a/src/components/Widgets/MarkdownPreview.js
+++ b/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 }) => (
-
- )
-};
-
-const MarkdownPreview = ({ value }) => {
+const MarkdownPreview = ({ value, getMedia }) => {
if (value == null) {
return null;
}
+ const schema = {
+ 'mediaproxy': ({ token }) => ( // eslint-disable-line
+
+ )
+ };
+
const { markdown } = getSyntaxes();
return (
);
};
MarkdownPreview.propTypes = {
+ getMedia: PropTypes.func.isRequired,
value: PropTypes.string,
};