draft-js-divider-plugin

DraftJS Divider Plugin

This is a plugin for the draft-js-plugins-editor.

Usage

import createDividerPlugin from 'draft-js-divider-plugin';

const dividerPlugin = createDividerPlugin();

It exposes addDivider function and DividerButton.

You can use this plugin like below.

/* eslint-disable  */

import React, { Component } from 'react';

import 'draft-js/dist/Draft.css';

import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';

import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import BlockTypeSelect from 'draft-js-side-toolbar-plugin/lib/components/BlockTypeSelect';
import 'draft-js-side-toolbar-plugin/lib/plugin.css';

import createDividerPlugin from 'draft-js-divider-plugin';
import 'draft-js-divider-plugin/lib/plugin.css';

const dividerPlugin = createDividerPlugin();

const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
  <BlockTypeSelect
    getEditorState={getEditorState}
    setEditorState={setEditorState}
    theme={theme}
    structure={[dividerPlugin.DividerButton]}
  />
);

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect],
});

import './Editor.css';

const plugins = [sideToolbarPlugin, dividerPlugin];
const { SideToolbar } = sideToolbarPlugin;

class CustomEditor extends Component {
  state = {
    editorState: createEditorStateWithText(''),
  };

  onChange = editorState => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <div className="App">
        <div className="editor">
          <Editor
            placeholder="placeholder ..."
            readOnly={false}
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={element => {
              this.editor = element;
            }}
          />

          <SideToolbar />
        </div>
      </div>
    );
  }
}

export default CustomEditor;

Importing the default styles

The plugin ships with a default styling available at this location in the installed package: draft-js-divider-plugin/lib/plugin.css.

If you want to use the default styles, you can include this stylesheet. Otherwise you can supply your own styles via the theme config option.