Nuclear Pumpkin Mocha

    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
    

    Keywords

    none

    Install

    npm i slate-politico-editor

    DownloadsWeekly Downloads

    1

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    4.61 MB

    Total Files

    68

    Last publish

    Collaborators

    • hobbes7878