slate-politico-editor v0.0.10

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