72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import registry from '../../lib/registry';
|
|
import RawEditor from './MarkdownControlElements/RawEditor';
|
|
import VisualEditor from './MarkdownControlElements/VisualEditor';
|
|
import { processEditorPlugins } from './richText';
|
|
import { connect } from 'react-redux';
|
|
import { switchVisualMode } from '../../actions/editor';
|
|
|
|
const MODE_STORAGE_KEY = 'cms.md-mode';
|
|
|
|
class MarkdownControl extends React.Component {
|
|
static propTypes = {
|
|
editor: PropTypes.object.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
onAddAsset: PropTypes.func.isRequired,
|
|
getAsset: PropTypes.func.isRequired,
|
|
switchVisualMode: PropTypes.func.isRequired,
|
|
value: PropTypes.node,
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { mode: localStorage.getItem(MODE_STORAGE_KEY) || 'visual' };
|
|
}
|
|
|
|
componentWillMount() {
|
|
processEditorPlugins(registry.getEditorComponents());
|
|
}
|
|
|
|
handleMode = (mode) => {
|
|
this.setState({ mode });
|
|
localStorage.setItem(MODE_STORAGE_KEY, mode);
|
|
};
|
|
|
|
render() {
|
|
const { onChange, onAddAsset, onRemoveAsset, getAsset, value } = this.props;
|
|
const { mode } = this.state;
|
|
if (mode === 'visual') {
|
|
return (
|
|
<div className="cms-editor-visual">
|
|
<VisualEditor
|
|
onChange={onChange}
|
|
onAddAsset={onAddAsset}
|
|
onRemoveAsset={onRemoveAsset}
|
|
onMode={this.handleMode}
|
|
getAsset={getAsset}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="cms-editor-raw">
|
|
<RawEditor
|
|
onChange={onChange}
|
|
onAddAsset={onAddAsset}
|
|
onRemoveAsset={onRemoveAsset}
|
|
onMode={this.handleMode}
|
|
getAsset={getAsset}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
state => ({ editor: state.editor }),
|
|
{ switchVisualMode }
|
|
)(MarkdownControl);
|