slate-politico-editor

A Slate editor in vogue at POLITICO interactives.

Usage no npm install needed!

<script type="module">
  import slatePoliticoEditor from 'https://cdn.skypack.dev/slate-politico-editor';
</script>

README

POLITICO

slate-politico-editor

npm version

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
  1. 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',
  ],
}
  1. Include babel-polyfill in your build process.

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

  3. 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
  1. Develop
$ yarn start
  1. Build
$ yarn build
  1. Publish 🏁
$ yarn publish