Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 16 days 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 (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-18T03:47:04.000Z (over 4 years ago)
- Last Synced: 2024-04-27T08:53:51.752Z (7 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
Awesome Lists containing this project
- 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.