@techstacker/tse-list-plugin

@slate-editor/list-plugin

SlateJS 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:

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

const plugins = [
  ListPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <ListButtonBar />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

Keyboard Shortcut

OS	Action	Shortcut
	Unordered List	^ + shift + l
	Ordered List	^ + shift + n
	Unordered List	alt + shift + l
	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