slate-politico-editor

0.0.10 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i slate-politico-editor

Weekly Downloads

3

Version

0.0.10

License

MIT

Unpacked Size

4.61 MB

Total Files

68

Last publish

Collaborators

  • hobbes7878