@slate-editor/list-plugin

Installation

The @slate-editor/list-plugin is available as an npm package.

``
yarn add @slate-editor/list-plugin
`

Usage

Here is a quick example to get you started:

`js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { ListPlugin, ListButtonBar } from '@slate-editor/list-plugin'

const plugins = [
ListPlugin()
]

const SlateRichTextEditor = () => (







)

export default SlateRichTextEditor
`

Keyboard Shortcut

| OS | Action | Shortcut |
|--------------------------|----------------|---------------------------------------------------|
| ![Apple Logo][apple] | Unordered List | ^ + shift + l |
| ![Apple Logo][apple] | Ordered List | ^ + shift + n |
| ![Windows Logo][windows] | Unordered List | alt + shift + l |
| ![Windows Logo][windows] | Ordered List | alt + shift + n |

API

| Name | Description |
|----------------------|---------------------------------------------------------------------------|
| ListNode | Component that holds the html that will wrap the content with list style. |
| ListKeyboardShortcut | Keyboard shortcut file that manipulates onKeyDown` event inside SlateJS. |
| ListUtils | Generic file that holds the util common functions. |
| ListButtonBar | Component that holds all action buttons to handle list behaviours. |
| UnorderedListButton | Component that render ordered list button to handle its behaviour. |
| OrderedListButton | Component that render unordered list button to handle its behaviour. |

TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png