README
slate-politico-editor
A Slate.js-based editor we use at POLITICO when we want to create some filthy rich ¢ontent.
Integrates with our oembed and S3 image upload services.
Demo.
Using
The library is packaged as an ES module. To use it:
- Install the library.
$ yarn add slate-politico-editor
- Styles are imported in the module, so be sure your Webpack config includes a CSS loader.
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}
Include babel-polyfill in your build process.
Add Font Awesome on the page. (Icons on the editor are added by class.)
Import and use the component.
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from 'slate-politico-editor';
import { Value } from 'slate';
const initialValue = {
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [{
object: 'text',
leaves: [{ text: 'Your text.'}],
}],
},
],
},
};
const value = Value.fromJSON(initialValue);
class YourApp extends React.Component {
constructor(props) {
super(props);
this.state = { value };
}
render() {
return (
<Editor
value={this.state.value} // Must be a Slate Value
onChange={({ value }) => this.setState({ value })}
oembedAPI={'https://staging.politicoapps.com/api/services/oembed/'}
imageAPI={'https://staging.politicoapps.com/api/services/s3imageservice/'}
authorization={'Token YOUR_TOKEN'}
/>
);
}
}
ReactDOM.render(<YourApp />, document.getElementById('app'));
Developing
- Install
$ yarn
- Develop
$ yarn start
- Build
$ yarn build
- Publish 🏁
$ yarn publish