API reference

prosemirror-flat-list

Functions

findListsRange()

function findListsRange($from: ResolvedPos, $to: ResolvedPos): NodeRange | null: Returns a minimal block range that includes the given two positions and represents one or multiple sibling list nodes.

isListNode()

function isListNode(node: | Node | null | undefined): boolean

isListType()

function isListType(type: NodeType): boolean

joinListElements()

function joinListElements<T>(parent: T): T

Merge adjacent

migrateDocJSON()

function migrateDocJSON(docJSON: ProsemirrorNodeJSON): ProsemirrorNodeJSON | null: Migrate a ProseMirror document JSON object from the old list structure to the new. A new document JSON object is returned if the document is updated, otherwise null is returned.

Commands

DedentListOptions

Properties

Property	Type	Default value	Description
`from?`	`number`	`state.selection.from`	A optional from position to indent.
`to?`	`number`	`state.selection.to`	A optional to position to indent.

IndentListOptions

Properties

Property	Type	Default value	Description
`from?`	`number`	`state.selection.from`	A optional from position to indent.
`to?`	`number`	`state.selection.to`	A optional to position to indent.

ToggleCollapsedOptions

Properties

Property	Type	Description
`collapsed?`	`boolean`	If this value exists, the command will set the `collapsed` attribute to this value instead of toggle it.
`isToggleable?`	(`node`: `Node`) => `boolean`	An optional function to accept a list node and return whether or not this node can toggle its `collapsed` attribute.

UnwrapListOptions

Properties

Property	Type	Description
`kind?`	`string`	If given, only this kind of list will be unwrap.

WrapInListGetAttrs

type WrapInListGetAttrs<T> = | T | (range: NodeRange) => T | null: The list node attributes or a callback function to take the current selection block range and return list node attributes. If this callback function returns null, the command won’t do anything.

backspaceCommand

const backspaceCommand: Command

Keybinding for Backspace. It’s chained with following commands:

deleteCommand

const deleteCommand: Command

Keybinding for Delete. It’s chained with following commands:

enterCommand

const enterCommand: Command

Keybinding for Enter. It’s chained with following commands:

protectCollapsed
createSplitListCommand

joinCollapsedListBackward

const joinCollapsedListBackward: Command: If the selection is empty and at the start of a block, and there is a collapsed list node right before the cursor, move current block and append it to the first child of the collapsed list node (i.e. skip the hidden content).

joinListUp

const joinListUp: Command: If the text cursor is at the start of the first child of a list node, lift all content inside the list. If the text cursor is at the start of the last child of a list node, lift this child.

listKeymap

const listKeymap: { Backspace: Command; Delete: Command; Enter: Command; Mod-[: Command; Mod-]: Command; }

Returns an object containing the keymap for the list commands.

Enter: See enterCommand.
Backspace: See backspaceCommand.
Delete: See deleteCommand.
Mod-[: Decrease indentation. See createDedentListCommand.
Mod-]: Increase indentation. See createIndentListCommand.

protectCollapsed

const protectCollapsed: Command

This command will protect the collapsed items from being deleted.

If current selection contains a collapsed item, we don’t want the user to delete this selection by pressing Backspace or Delete, because this could be unintentional.

In such case, we will stop the delete action and expand the collapsed items instead. Therefore the user can clearly know what content he is trying to delete.

createDedentListCommand()

function createDedentListCommand(options?: DedentListOptions): Command: Returns a command function that decreases the indentation of selected list nodes.

createIndentListCommand()

function createIndentListCommand(options?: IndentListOptions): Command: Returns a command function that increases the indentation of selected list nodes.

createMoveListCommand()

function createMoveListCommand(direction: "up" | "down"): Command: Returns a command function that moves up or down selected list nodes.

createSplitListCommand()

function createSplitListCommand(): Command: Returns a command that split the current list node.

createToggleCollapsedCommand()

function createToggleCollapsedCommand(options: ToggleCollapsedOptions): Command: Return a command function that toggle the collapsed attribute of the list node.

createToggleListCommand()

function createToggleListCommand<T>(attrs: T): Command: Returns a command function that wraps the selection in a list with the given type and attributes, or change the list kind if the selection is already in another kind of list, or unwrap the selected list if otherwise.

createUnwrapListCommand()

function createUnwrapListCommand(options?: UnwrapListOptions): Command: Returns a command function that unwraps the list around the selection.

createWrapInListCommand()

function createWrapInListCommand<T>(getAttrs: WrapInListGetAttrs<T>): Command: Returns a command function that wraps the selection in a list with the given type and attributes.

Input Rules

ListInputRuleAttributesGetter()

type ListInputRuleAttributesGetter<T> = (options: { attributes?: T; match: RegExpMatchArray; }) => T: A callback function to get the attributes for a list input rule.

listInputRules

const listInputRules: InputRule[]: All input rules for lists.

wrappingListInputRule()

function wrappingListInputRule<T>(regexp: RegExp, getAttrs: | T | ListInputRuleAttributesGetter<T>): InputRule: Build an input rule for automatically wrapping a textblock into a list node when a given string is typed.

Plugins

ListDOMSerializer

A custom DOM serializer class that can serialize flat list nodes into native HTML list elements (i.e. <ul> and <ol>).

Constructors

Constructor

new ListDOMSerializer(nodes: { [node: string]: (node: Node) => DOMOutputSpec; }, marks: { [mark: string]: (mark: Mark, inline: boolean) => DOMOutputSpec; }): ListDOMSerializer: Create a serializer. nodes should map node names to functions that take a node and return a description of the corresponding DOM. marks does the same for mark names, but also gets an argument that tells it whether the mark’s content is block or inline content (for typical use, it’ll always be inline). A mark serializer may be null to indicate that marks of that type should not be serialized.

Methods

serializeFragment( fragment: Fragment, options?: { document?: Document; }, target?: | HTMLElement | DocumentFragment): | HTMLElement | DocumentFragment: Serialize the content of this fragment to a DOM fragment. When not in the browser, the document option, containing a DOM document, should be passed so that the serializer can create nodes.

static fromSchema(schema: Schema): ListDOMSerializer: Build a serializer using the toDOM properties in a schema’s node and mark specs.

static nodesFromSchema(schema: Schema): { [node: string]: (node: Node) => DOMOutputSpec; }: Gather the serializers in a schema’s node specs into an object. This can be useful as a base to build a custom serializer from.

createListNodeView

const createListNodeView: NodeViewConstructor: A simple node view that is used to render the list node. It ensures that the list node get updated when its marker styling should changes.

createListClipboardPlugin()

function createListClipboardPlugin(schema: Schema): Plugin: Serialize list nodes into native HTML list elements (i.e. <ul>, <ol>) to clipboard. See ListDOMSerializer.

createListEventPlugin()

function createListEventPlugin(): Plugin: Handle DOM events for list.

createListPlugins()

function createListPlugins(options: { schema: Schema; }): Plugin<any>[]

This function returns an array of plugins that are required for list to work.

The plugins are shown below. You can pick and choose which plugins you want to use if you want to customize some behavior.

createListEventPlugin
createListRenderingPlugin
createListClipboardPlugin
createSafariInputMethodWorkaroundPlugin

createListRenderingPlugin()

function createListRenderingPlugin(): Plugin: Handle the list node rendering.

createSafariInputMethodWorkaroundPlugin()

function createSafariInputMethodWorkaroundPlugin(): Plugin

Return a plugin as a workaround for a bug in Safari that causes the composition based IME to remove the empty HTML element with CSS position: relative.

Schema

ListAttributes

Properties

Property	Type
`checked?`	`boolean`
`collapsed?`	`boolean`
`kind?`	`string`
`order?`	`number` \| `null`

ListToDOMOptions

Properties

Property	Type	Default value	Description
`getAttributes?`	(`node`: `Node`) => `Record`<`string`, `string` \| `undefined`>	`undefined`	An optional function to get the attributes added to HTML element.
`getMarkers?`	(`node`: `Node`) => \| `DOMOutputSpec`[] \| `null`	`undefined`	An optional function to get elements inside `<div class="list-marker">`. Return `null` to hide the marker.
`nativeList?`	`boolean`	`false`	If `true`, the list will be rendered as a native `<ul>` or `<ol>` element. You might want to use joinListElements to join the list elements afterward.
`node`	`Node`	`undefined`	The list node to be rendered.

ProsemirrorNodeJSON

Properties

Property	Type
`attrs?`	`Attrs`
`content?`	`ProsemirrorNodeJSON`[]
`marks?`	( \| `string` \| { `attrs?`: `Attrs`; `type`: `string`; })[]
`text?`	`string`
`type`	`string`

ListKind

type ListKind = "bullet" | "ordered" | "task" | "toggle": All default list node kinds.

createListSpec()

function createListSpec(): NodeSpec: Return the spec for list node.

createParseDomRules()

function createParseDomRules(): readonly TagParseRule[]: Returns a set of rules for parsing HTML into ProseMirror list nodes.

listToDOM()

function listToDOM(options: ListToDOMOptions): DOMOutputSpec: Renders a list node to DOM output spec.