prosemirror-flat-list

ListDOMSerializer

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

Extends

DOMSerializer (opens in a new tab)

Constructors

new ListDOMSerializer(nodes, marks)

new ListDOMSerializer(nodes: {}, marks: {}): 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.

Parameters

Parameter	Type	Description
`nodes`	`object`	The node serialization functions.
`marks`	`object`	The mark serialization functions.

Returns

ListDOMSerializer

Inherited from

DOMSerializer.constructor

Methods

serializeFragment()

serializeFragment(
   fragment: Fragment, 
   options?: {
  document: Document;
  }, 
   target?: HTMLElement | DocumentFragment): HTMLElement | DocumentFragment

Parameters

Parameter	Type
`fragment`	`Fragment` (opens in a new tab)
`options`?	`object`
`options.document`?	`Document` (opens in a new tab)
`target`?	`HTMLElement` (opens in a new tab) \| `DocumentFragment` (opens in a new tab)

Returns

HTMLElement (opens in a new tab) | DocumentFragment (opens in a new tab)

Overrides

DOMSerializer.serializeFragment

fromSchema()

static fromSchema(schema: Schema<any, any>): ListDOMSerializer

Parameters

Parameter	Type
`schema`	`Schema` (opens in a new tab)<`any`, `any`>

Returns

ListDOMSerializer

Overrides

DOMSerializer.fromSchema

nodesFromSchema()

static nodesFromSchema(schema: Schema<any, any>): {}

Parameters

Parameter	Type
`schema`	`Schema` (opens in a new tab)<`any`, `any`>

Returns

{}

Overrides

DOMSerializer.nodesFromSchema

DedentListOptions

Properties

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

IndentListOptions

Properties

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

ListAttributes

Properties

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

ListToDOMOptions

Properties

Property	Type	Description
`getAttributes?`	(`node`: `Node` (opens in a new tab)) => `Record` (opens in a new tab)<`string`, `undefined` \| `string`>	An optional function to get the attributes added to HTML element.
`getMarkers?`	(`node`: `Node` (opens in a new tab)) => `null` \| `DOMOutputSpec` (opens in a new tab)[]	An optional function to get elements inside `<div class="list-marker">`. Return `null` to hide the marker.
`nativeList?`	`boolean`	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. Default Value `false`
`node`	`Node` (opens in a new tab)	The list node to be rendered.

ProsemirrorNodeJSON

Properties

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

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` (opens in a new tab)) => `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.

ListInputRuleAttributesGetter()<T>

type ListInputRuleAttributesGetter<T>: (options: {
  attributes: T;
  match: RegExpMatchArray;
  }) => T;

A callback function to get the attributes for a list input rule.

Type parameters

Type parameter	Value
`T` extends `ListAttributes`	`ListAttributes`

Parameters

Parameter	Type	Description
`options`	`object`	-
`options.attributes`?	`T`	The previous attributes of the existing list node, if it exists.
`options.match`	`RegExpMatchArray`	The match result of the regular expression.

Returns

T

ListKind

type ListKind: "bullet" | "ordered" | "task" | "toggle";

All default list node kinds.

listInputRules

const listInputRules: InputRule[];

All input rules for lists.

listKeymap

const listKeymap: {
  Backspace: backspaceCommand;
  Delete: deleteCommand;
  Enter: enterCommand;
  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.

Type declaration

Member	Type	Value
`Backspace`	`Command` (opens in a new tab)	backspaceCommand
`Delete`	`Command` (opens in a new tab)	deleteCommand
`Enter`	`Command` (opens in a new tab)	enterCommand
`Mod-[`	`Command` (opens in a new tab)	-
`Mod-]`	`Command` (opens in a new tab)	-

backspaceCommand()

backspaceCommand(
   state: EditorState, 
   dispatch?: (tr: Transaction) => void, 
   view?: EditorView): boolean

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

Parameters

Parameter	Type
`state`	`EditorState` (opens in a new tab)
`dispatch`?	(`tr`: `Transaction` (opens in a new tab)) => `void`
`view`?	`EditorView` (opens in a new tab)

Returns

boolean

createDedentListCommand()

createDedentListCommand(options?: DedentListOptions): Command

Returns a command function that decreases the indentation of selected list nodes.

Parameters

Parameter	Type
`options`?	`DedentListOptions`

Returns

Command (opens in a new tab)

createIndentListCommand()

createIndentListCommand(options?: IndentListOptions): Command

Returns a command function that increases the indentation of selected list nodes.

Parameters

Parameter	Type
`options`?	`IndentListOptions`

Returns

Command (opens in a new tab)

createListClipboardPlugin()

createListClipboardPlugin(schema: Schema<any, any>): Plugin

Serialize list nodes into native HTML list elements (i.e. <ul>, <ol>) to clipboard. See ListDOMSerializer.

Parameters

Parameter	Type
`schema`	`Schema` (opens in a new tab)<`any`, `any`>

Returns

Plugin (opens in a new tab)

createListEventPlugin()

createListEventPlugin(): Plugin

Handle DOM events for list.

Returns

Plugin (opens in a new tab)

createListNodeView()

createListNodeView(
   node: Node, 
   view: EditorView, 
   getPos: () => undefined | number, 
   decorations: readonly Decoration[], 
   innerDecorations: DecorationSource): NodeView

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.

Parameters

Parameter	Type
`node`	`Node` (opens in a new tab)
`view`	`EditorView` (opens in a new tab)
`getPos`	() => `undefined` \| `number`
`decorations`	readonly `Decoration` (opens in a new tab)[]
`innerDecorations`	`DecorationSource` (opens in a new tab)

Returns

NodeView (opens in a new tab)

createListPlugins()

createListPlugins(__namedParameters: {
  schema: Schema<any, any>;
  }): Plugin[]

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.

Parameters

Parameter	Type
`__namedParameters`	`object`
`__namedParameters.schema`	`Schema` (opens in a new tab)<`any`, `any`>

Returns

Plugin (opens in a new tab)[]

createListRenderingPlugin()

createListRenderingPlugin(): Plugin

Handle the list node rendering.

Returns

Plugin (opens in a new tab)

createListSpec()

createListSpec(): NodeSpec

Return the spec for list node.

Returns

NodeSpec (opens in a new tab)

createMoveListCommand()

createMoveListCommand(direction: "up" | "down"): Command

Returns a command function that moves up or down selected list nodes.

Parameters

Parameter	Type
`direction`	`"up"` \| `"down"`

Returns

Command (opens in a new tab)

createParseDomRules()

createParseDomRules(): readonly ParseRule[]

Returns a set of rules for parsing HTML into ProseMirror list nodes.

Returns

readonly ParseRule (opens in a new tab)[]

createSafariInputMethodWorkaroundPlugin()

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.

Returns

Plugin (opens in a new tab)

createSplitListCommand()

createSplitListCommand(): Command

Returns a command that split the current list node.

Returns

Command (opens in a new tab)

createToggleCollapsedCommand()

createToggleCollapsedCommand(__namedParameters: ToggleCollapsedOptions): Command

Return a command function that toggle the collapsed attribute of the list node.

Parameters

Parameter	Type
`__namedParameters`	`ToggleCollapsedOptions`

Returns

Command (opens in a new tab)

createToggleListCommand()

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.

Type parameters

Type parameter	Value
`T` extends `ListAttributes`	`ListAttributes`

Parameters

Parameter	Type	Description
`attrs`	`T`	The list node attributes to toggle.

Returns

Command (opens in a new tab)

createUnwrapListCommand()

createUnwrapListCommand(options?: UnwrapListOptions): Command

Returns a command function that unwraps the list around the selection.

Parameters

Parameter	Type
`options`?	`UnwrapListOptions`

Returns

Command (opens in a new tab)

createWrapInListCommand()

createWrapInListCommand<T>(getAttrs: T | (range: NodeRange) => null | T): Command

Returns a command function that wraps the selection in a list with the given type and attributes.

Type parameters

Type parameter	Value
`T` extends `ListAttributes`	`ListAttributes`

Parameters

Parameter	Type	Description
`getAttrs`	`T` \| (`range`: `NodeRange` (opens in a new tab)) => `null` \| `T`	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.

Returns

Command (opens in a new tab)

deleteCommand()

deleteCommand(
   state: EditorState, 
   dispatch?: (tr: Transaction) => void, 
   view?: EditorView): boolean

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

Parameters

Parameter	Type
`state`	`EditorState` (opens in a new tab)
`dispatch`?	(`tr`: `Transaction` (opens in a new tab)) => `void`
`view`?	`EditorView` (opens in a new tab)

Returns

boolean

enterCommand()

enterCommand(
   state: EditorState, 
   dispatch?: (tr: Transaction) => void, 
   view?: EditorView): boolean

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

Parameters

Parameter	Type
`state`	`EditorState` (opens in a new tab)
`dispatch`?	(`tr`: `Transaction` (opens in a new tab)) => `void`
`view`?	`EditorView` (opens in a new tab)

Returns

boolean

findListsRange()

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.

Parameters

Parameter	Type	Default value
`$from`	`ResolvedPos` (opens in a new tab)	`undefined`
`$to`	`ResolvedPos` (opens in a new tab)	`$from`

Returns

NodeRange (opens in a new tab) | null

isListNode()

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

Parameters

Parameter	Type
`node`	`undefined` \| `null` \| `Node` (opens in a new tab)

Returns

boolean

isListType()

isListType(type: NodeType): boolean

Parameters

Parameter	Type
`type`	`NodeType` (opens in a new tab)

Returns

boolean

joinCollapsedListBackward()

joinCollapsedListBackward(
   state: EditorState, 
   dispatch?: (tr: Transaction) => void, 
   view?: EditorView): boolean

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).

Parameters

Parameter	Type
`state`	`EditorState` (opens in a new tab)
`dispatch`?	(`tr`: `Transaction` (opens in a new tab)) => `void`
`view`?	`EditorView` (opens in a new tab)

Returns

boolean

joinListElements()

joinListElements<T>(parent: T): T

Merge adjacent

<ol>

Type parameters

Type parameter
`T` extends `Element` (opens in a new tab) \| `DocumentFragment` (opens in a new tab)

Parameters

Parameter	Type
`parent`	`T`

Returns

T

joinListUp()

joinListUp(
   state: EditorState, 
   dispatch?: (tr: Transaction) => void, 
   view?: EditorView): boolean

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.

Parameters

Parameter	Type
`state`	`EditorState` (opens in a new tab)
`dispatch`?	(`tr`: `Transaction` (opens in a new tab)) => `void`
`view`?	`EditorView` (opens in a new tab)

Returns

boolean

listToDOM()

listToDOM(__namedParameters: ListToDOMOptions): DOMOutputSpec

Renders a list node to DOM output spec.

Parameters

Parameter	Type
`__namedParameters`	`ListToDOMOptions`

Returns

DOMOutputSpec (opens in a new tab)

migrateDocJSON()

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.

Parameters

Parameter	Type
`docJSON`	`ProsemirrorNodeJSON`

Returns

ProsemirrorNodeJSON | null

protectCollapsed()

protectCollapsed(
   state: EditorState, 
   dispatch?: (tr: Transaction) => void, 
   view?: EditorView): boolean

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.

Parameters

Parameter	Type
`state`	`EditorState` (opens in a new tab)
`dispatch`?	(`tr`: `Transaction` (opens in a new tab)) => `void`
`view`?	`EditorView` (opens in a new tab)

Returns

boolean

wrappingListInputRule()

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.

Type parameters

Type parameter	Value
`T` extends `ListAttributes`	`ListAttributes`

Parameters

Parameter	Type
`regexp`	`RegExp` (opens in a new tab)
`getAttrs`	`T` \| `ListInputRuleAttributesGetter`<`T`>

Returns

InputRule (opens in a new tab)