Skip to content
Better lists for Draft.js
TypeScript JavaScript
Branch: master
Clone or download
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.
demo
src
.editorconfig
.gitattributes
.gitignore
LICENSE.md
README.md
package.json
rollup.config.js
tsconfig.json
yarn.lock

README.md

Draft.js List Plugin

Better lists for Draft.js

  • Automatically creates lists when lines begin with *, 1. or similar
  • Allows creating nested lists using the tab key
  • Simple setup
  • TypeScript type definitions

Demo

Usage

This plugin requires you to have draft-js-plugins set up in your project.

Install the plugin using NPM:

npm install draft-js-list-plugin

Import the list plugin in your Editor component:

import React, { Component } from "react";
import PluginEditor from "draft-js-plugins-editor";
import createListPlugin from "draft-js-list-plugin";
// ...

const listPlugin = createListPlugin();
const plugins = [listPlugin];

export default class Editor extends Component {
  // ...

  render() {
    const { editorState } = this.state;

    return (
      <PluginEditor
        // ...
        editorState={editorState}
        plugins={plugins}
      />
    );
  }
}

See Editor.tsx for a full example.

Configuration

You can pass options to the plugin the following way:

const listPlugin = createListPlugin({
  // Your options
});

Supported options:

  • allowNestedLists (boolean): Whether the user should be able to create sublists (nested lists). Default: true
  • maxDepth (number): Allows you to control how deep the list nesting can be. Default: 4
  • olRegex (RegExp): Regular expression for determining whether a numbered list should be started. Default: /\d\./
  • ulChars (string[]): List of characters with which bullet lists can be started. Default: ["-", "–", "*"]

Development

Requirements: Node.js, Yarn

  1. Clone this repository: git clone REPO_URL
  2. Install all dependencies: yarn
  3. Generate the library bundle: yarn start
  4. View the demo on localhost:3000

Suggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.

You can’t perform that action at this time.