Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
README.md
package.json
postcss.config.js
webpack.config.js
yarn-error.log
yarn.lock

README.md

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.

You can’t perform that action at this time.