Skip to content

samuelmeuli/draft-js-list-plugin

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

Plugin 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";

// Make sure to import `Draft.css` somewhere
import "draft-js/dist/Draft.css";

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.