Skip to content

samuelmeuli/draft-js-list-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

35 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

About

๐Ÿ“ Better lists for Draft.js

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •  
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy