Slate Edit List

A Slate plugin to handle keyboard events in lists.
Alternatives To Slate Edit List
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Tiptap19,140136a day ago198September 20, 2022242mitTypeScript
The headless editor framework for web artisans.
React Page9,186189 days ago304September 21, 20228mitTypeScript
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.
Vditor6,29911172 days ago310August 04, 202279mitTypeScript
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
React Draft Wysiwyg6,0317863372 months ago131July 17, 2022695mitJavaScript
A Wysiwyg editor build on top of ReactJS and DraftJS.
Craft.js5,806184 days ago70August 30, 2022161mitTypeScript
🚀 A React Framework for building extensible drag and drop page editors
Builder5,0954382 days ago634September 23, 202298mitTypeScript
Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more
Blocks4,677511a month ago17July 18, 201965mitJavaScript
A JSX-based page builder for creating beautiful websites without writing code
Braft Editor4,297122187a year ago148February 28, 2020384mitJavaScript
18 hours ago36mitTypeScript
Visual page builder and web design tool for any website or web app tech stack
Remirror2,25011043 days ago286September 28, 2022133mitTypeScript
ProseMirror toolkit for React 🎉
Alternatives To Slate Edit List
Select To Compare

Alternative Project Comparisons

⚠️ This repository is archived and has moved to GitBook's fork of ianstormtaylor/slate. Previous versions are still available on NPM All the versions using GitBook's fork of slate are now published under the @gitbook NPM scope. To learn more about why we forked Slate, read our manifest


NPM version Linux Build Status

A Slate plugin to handle keyboard events in lists. List items can contain blocks.



npm install slate-edit-list


Natural keybindings:

  • Pressing Enter insert a new list item
  • Pressing Shift+Enter split the block in the list item
  • Pressing Tab increase the depth of the item (creates a sub-list)
  • Pressing Shift+Tab decrease the depth of the item
  • Pressing Delete (OSX) or Backspace at the start, remove the list item (or the list)

Simple validation/normalization (see assumptions about the schema):

  • Lists can contain only list items, and at least one.
  • List items can only be the direct children of a list.
  • List items must always contain blocks.

Useful transforms: see Utilities and Transform.

Simple Usage

import EditList from 'slate-edit-list'

const plugins = [


This plugin accepts options to redefine the following block types:

  • types: string = ["ol_list", "ul_list"] — the array of possible types for list containers. First value will be used as default.
  • typeItem: string = "list_item" — type for list items.
  • typeDefault: string = "paragraph" — type for default block in list items.
  • canMerge: (Node, Node) => boolean — controls which list can be merged automatically (for example when they are adjacent). Defaults to merging list with identical types

Assumption about the schema

You can use this plugins with custom list block types (using plugin arguments). But your lists structure should still conform to a few rules. These rules are implemented as schema.

Here is what a minimal list would look like:

    - kind: block
      type: ul_list # Default type for bulleted lists container
          - kind: block
            type: list_item # List containers can only contain list items
              # List items contain blocks. They cannot be the direct container of text.
              - kind: block
                type: paragraph # Default type of blocks in a list item
                  - kind: text
                    text: Hello World

And here is an example of a multi-level list:

  - kind: block
    type: ol_list
      - kind: block
        type: list_item
          - kind: block
            type: paragraph
              - kind: text
                text: Item 1
          - kind: block
            type: ol_list
              - kind: block
                type: list_item
                  - kind: block
                    type: paragraph
                      - kind: text
                        text: Item 1.1
              - kind: block
                type: list_item
                  - kind: block
                    type: paragraph
                      - kind: text
                        text: Item 1.2

Utilities and Transform

slate-edit-list exports utilities and transforms:

plugin.utils.isSelectionInList(value: Value, type?: string) => Boolean

Return true if selection is inside a list (and it can be unwrap). Optional param type can be supplied to deduce whether list is of specified type.

plugin.utils.isList(node: Node) => Boolean

Return true if the node is one of the list type.

plugin.utils.getItemDepth(value: Value, block: Block?) => Number

Returns the depth of the current item (or the depth of the given block) in a list. 0 means not in a list.

plugin.utils.getCurrentItem(value: Value, block: Block?) => Block || Void

Returns the current item at selection (or at the given block).

plugin.utils.getCurrentList(value: Value, block: Block?) => Block || Void

Returns the current list at selection (or at the given block).

plugin.utils.getItemsAtRange(value: Value, range: Selection?) => List<Node>

Return the list of items at the given range. The returned items are the highest list of of successive items that cover the given range.

The returned list is empty if no such list can be found.

plugin.changes.increaseItemDepth(change: Change) => Transform

Increase the depth of the current item.

plugin.changes.decreaseItemDepth(change: Change) => Transform

Decrease the depth of the current item.

plugin.changes.wrapInList(change: Change, type: String?, data: Object|Data?) => Transform

Wrap the current blocks in list items of a list container of the given type. You can pass optional data for the created list container.

plugin.changes.unwrapList(change: Change) => Transform

Unwrap all items at range from their list.

plugin.changes.splitListItem(change: Change) => Transform

Split current block into a new list item.

Popular Reactjs Projects
Popular Wysiwyg Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Rich Text Editor