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![${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, }; 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 }) => ( - {token.getIn(['data', - ) -}; - -const MarkdownPreview = ({ value }) => { +const MarkdownPreview = ({ value, getMedia }) => { if (value == null) { return null; } + const schema = { + 'mediaproxy': ({ token }) => ( // eslint-disable-line + {token.getIn(['data', + ) + }; + const { markdown } = getSyntaxes(); return ( ); }; MarkdownPreview.propTypes = { + getMedia: PropTypes.func.isRequired, value: PropTypes.string, };