https://github.com/samuelmeuli/draft-js-list-plugin

📝 Better lists for Draft.js
https://github.com/samuelmeuli/draft-js-list-plugin

draft-js draft-js-plugins react text-editor

Last synced: 3 months ago
JSON representation

📝 Better lists for Draft.js

• Host: GitHub
• URL: https://github.com/samuelmeuli/draft-js-list-plugin
• Owner: samuelmeuli
• License: mit
• Created: 2019-08-25T18:55:11.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-07-18T03:47:04.000Z (almost 4 years ago)
• Last Synced: 2024-03-25T22:02:57.134Z (3 months ago)
• Topics: draft-js, draft-js-plugins, react, text-editor
• Language: TypeScript
• Homepage: https://draft-js-list-plugin.samuelmeuli.com
• Size: 1.31 MB
• Stars: 14
• Watchers: 3
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-draft-js - List - Automatic list creation, nested lists (Plugins and Decorators Built for Draft.js)
• awesome-draft-js - List - Automatic list creation, nested lists (Plugins and Decorators Built for Draft.js)

README

        
# 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](https://draft-js-list-plugin.samuelmeuli.com)**



## Usage

This plugin requires you to have [`draft-js-plugins`](https://github.com/draft-js-plugins/draft-js-plugins) set up in your project.

Install the plugin using NPM:

```sh

npm install draft-js-list-plugin

```

Import the list plugin in your Editor component:

```jsx

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 (

			

		);

	}

}

```

See [Editor.tsx](./demo/src/Editor.tsx) for a full example.

## Configuration

You can pass options to the plugin the following way:

```jsx

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.