2016-06-16 19:20:36 -03:00
|
|
|
import React, { PropTypes } from 'react';
|
2016-09-12 11:14:21 +02:00
|
|
|
import registry from '../../lib/registry';
|
2016-08-11 18:21:32 -03:00
|
|
|
import RawEditor from './MarkdownControlElements/RawEditor';
|
2016-08-11 11:27:09 -03:00
|
|
|
import VisualEditor from './MarkdownControlElements/VisualEditor';
|
2016-08-18 10:51:38 -03:00
|
|
|
import { processEditorPlugins } from './richText';
|
2016-08-03 10:30:42 -03:00
|
|
|
|
2016-12-27 23:17:33 -08:00
|
|
|
const MODE_STORAGE_KEY = 'cms.md-mode';
|
|
|
|
|
2017-03-17 23:17:14 -04:00
|
|
|
export default class MarkdownControl extends React.Component {
|
2016-10-03 14:33:48 +02:00
|
|
|
static propTypes = {
|
|
|
|
onChange: PropTypes.func.isRequired,
|
2017-01-10 22:23:22 -02:00
|
|
|
onAddAsset: PropTypes.func.isRequired,
|
2017-03-17 23:17:14 -04:00
|
|
|
onRemoveAsset: PropTypes.func.isRequired,
|
2017-01-10 22:23:22 -02:00
|
|
|
getAsset: PropTypes.func.isRequired,
|
2016-10-03 14:33:48 +02:00
|
|
|
value: PropTypes.node,
|
|
|
|
};
|
2016-08-11 18:21:32 -03:00
|
|
|
|
2016-11-01 16:55:21 -07:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2016-12-27 23:17:33 -08:00
|
|
|
this.state = { mode: localStorage.getItem(MODE_STORAGE_KEY) || 'visual' };
|
2016-11-01 16:55:21 -07:00
|
|
|
}
|
|
|
|
|
2016-08-18 10:51:38 -03:00
|
|
|
componentWillMount() {
|
2016-09-12 11:14:21 +02:00
|
|
|
processEditorPlugins(registry.getEditorComponents());
|
2016-08-18 10:51:38 -03:00
|
|
|
}
|
|
|
|
|
2016-11-01 16:55:21 -07:00
|
|
|
handleMode = (mode) => {
|
|
|
|
this.setState({ mode });
|
2016-12-27 23:17:33 -08:00
|
|
|
localStorage.setItem(MODE_STORAGE_KEY, mode);
|
2016-10-03 14:25:27 +02:00
|
|
|
};
|
2016-08-11 18:21:32 -03:00
|
|
|
|
2016-09-27 13:07:52 +02:00
|
|
|
render() {
|
2017-01-10 22:23:22 -02:00
|
|
|
const { onChange, onAddAsset, onRemoveAsset, getAsset, value } = this.props;
|
2016-11-01 16:55:21 -07:00
|
|
|
const { mode } = this.state;
|
|
|
|
if (mode === 'visual') {
|
2016-08-11 18:21:32 -03:00
|
|
|
return (
|
2017-03-21 14:52:33 -04:00
|
|
|
<div className="cms-editor-visual stickyContainer">
|
2016-08-11 18:21:32 -03:00
|
|
|
<VisualEditor
|
2016-10-03 16:57:48 +02:00
|
|
|
onChange={onChange}
|
2017-01-10 22:23:22 -02:00
|
|
|
onAddAsset={onAddAsset}
|
|
|
|
onRemoveAsset={onRemoveAsset}
|
2016-11-01 16:55:21 -07:00
|
|
|
onMode={this.handleMode}
|
2017-01-10 22:23:22 -02:00
|
|
|
getAsset={getAsset}
|
2016-10-03 16:57:48 +02:00
|
|
|
value={value}
|
2016-08-11 18:21:32 -03:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-11-01 16:55:21 -07:00
|
|
|
|
|
|
|
return (
|
2017-03-21 14:52:33 -04:00
|
|
|
<div className="cms-editor-raw stickyContainer">
|
2016-11-01 16:55:21 -07:00
|
|
|
<RawEditor
|
|
|
|
onChange={onChange}
|
2017-01-10 22:23:22 -02:00
|
|
|
onAddAsset={onAddAsset}
|
|
|
|
onRemoveAsset={onRemoveAsset}
|
2016-11-01 16:55:21 -07:00
|
|
|
onMode={this.handleMode}
|
2017-03-17 23:17:14 -04:00
|
|
|
rawMode
|
2017-01-10 22:23:22 -02:00
|
|
|
getAsset={getAsset}
|
2016-11-01 16:55:21 -07:00
|
|
|
value={value}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
2016-08-11 18:21:32 -03:00
|
|
|
}
|
2016-05-30 16:55:32 -07:00
|
|
|
}
|