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:

1. Install the library.

$ yarn add slate-politico-editor

2. 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',
  ],
}

3. Include babel-polyfill in your build process.

4. Add Font Awesome on the page. (Icons on the editor are added by class.)

5. 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

1. Install

$ yarn

2. Develop

$ yarn start

3. Build

$ yarn build

4. Publish 🏁

$ yarn publish