main
Walkthroughs
Concepts
Transforms
Transforms are helper functions operating on the document. They can be used in defining your own commands.
Node options
All transforms support a parameter
options. This includes options specific to the transform, and general NodeOptions to specify which Nodes in the document that the transform is applied to.1
interface NodeOptions {
2
at?: Location
3
match?: (node: Node, path: Location) => boolean
4
mode?: 'highest' | 'lowest'
5
voids?: boolean
6
}
Copied!
- The
atoption selects a Location in the editor. It defaults to the user's current selection. Learn more about theatoption​ - The
matchoption filters the set of Nodes with a custom function. Learn more about thematchoption​ - The
modeoption also filters the set of nodes.
Static methods
Node transforms
Transforms that operate on nodes.
Transforms.insertFragment(editor: Editor, fragment: Node[], options?)
Transforms.insertFragment(editor: Editor, fragment: Node[], options?)Insert of fragment of nodes at the specified location in the document. If no location is specified, insert at the current selection.
Options:
{at?: Location, hanging?: boolean, voids?: boolean}Transforms.insertNodes(editor: Editor, nodes: Node | Node[], options?)
Transforms.insertNodes(editor: Editor, nodes: Node | Node[], options?)Atomically inserts
nodes at the specified location in the document. If no location is specified, inserts at the current selection. If there is no selection, inserts at the end of the document.Options supported:
NodeOptions & {hanging?: boolean, select?: boolean}.For example, to insert at the very end, without replacing the current selection and regardless of block nesting, use
1
Transforms.insertNodes(
2
editor,
3
{ type: targetType, children: [{ text: '' }] },
4
{ at: [editor.children.length] }
5
)
Copied!
Transforms.removeNodes(editor: Editor, options?)
Transforms.removeNodes(editor: Editor, options?)Remove nodes at the specified location in the document. If no location is specified, remove the nodes in the selection.
Options supported:
NodeOptions & {hanging?: boolean}Transforms.mergeNodes(editor: Editor, options?)
Transforms.mergeNodes(editor: Editor, options?)Merge a node at the specified location with the previous node at the same depth. If no location is specified, use the selection. Resulting empty container nodes are removed.
Options supported:
NodeOptions & {hanging?: boolean}Transforms.splitNodes(editor: Editor, options?)
Transforms.splitNodes(editor: Editor, options?)Split nodes at the specified location. If no location is specified, split the selection.
Options supported:
NodeOptions & {height?: number, always?: boolean}Transforms.wrapNodes(editor: Editor, element: Element, options?)
Transforms.wrapNodes(editor: Editor, element: Element, options?)Wrap nodes at the specified location in the
element container. If no location is specified, wrap the selection.Options supported:
NodeOptions & {split?: boolean}.options.mode:'all'is also supported.options.splitindicates that it's okay to split a node in order to wrap the location. For example, ifipsumwas selected in aTextnode withlorem ipsum dolar,split: truewould wrap the wordipsumonly, resulting in splitting theTextnode. Ifsplit: false, the entireTextnodelorem ipsum dolarwould be wrapped.
Transforms.unwrapNodes(editor: Editor, options?)
Transforms.unwrapNodes(editor: Editor, options?)Unwrap nodes at the specified location. If necessary, the parent node is split. If no location is specified, use the selection.
Options supported:
NodeOptions & {split?: boolean}. For options.mode, 'all' is also supported.Transforms.setNodes(editor: Editor, props: Partial<Node>, options?)
Transforms.setNodes(editor: Editor, props: Partial<Node>, options?)Set properties of nodes at the specified location. If no location is specified, use the selection.
Options supported:
NodeOptions & {hanging?: boolean, split?: boolean}. For options.mode, 'all' is also supported.Transforms.unsetNodes(editor: Editor, props: string | string[], options?)
Transforms.unsetNodes(editor: Editor, props: string | string[], options?)Unset properties of nodes at the specified location. If no location is specified, use the selection.
Options supported:
NodeOptions & {split?: boolean}. For options.mode, 'all' is also supported.Transforms.liftNodes(editor: Editor, options?)
Transforms.liftNodes(editor: Editor, options?)Lift nodes at the specified location upwards in the document tree. If necessary, the parent node is split. If no location is specified, use the selection.
Options supported:
NodeOptions. For options.mode, 'all' is also supported.Transforms.moveNodes(editor: Editor, options)
Transforms.moveNodes(editor: Editor, options)Move the nodes from an origin to a destination. A destination must be specified in the
options. If no origin is specified, move the selection.Options supported:
NodeOptions & {to: Path}. For options.mode, 'all' is also supported.Selection transforms
Transforms that operate on the document's selection.
Transforms.collapse(editor: Editor, options?)
Transforms.collapse(editor: Editor, options?)Collapse the selection to a single point.
Options:
{edge?: 'anchor' | 'focus' | 'start' | 'end'}Transforms.select(editor: Editor, target: Location)
Transforms.select(editor: Editor, target: Location)Set the selection to a new value specified by
target. When a selection already exists, this method is just a proxy for setSelection and will update the existing value.For example, to set the selection to the entire contents of the editor:
1
Transforms.select(editor, {
2
anchor: Editor.start(editor, []),
3
focus: Editor.end(editor, []),
4
})
Copied!
Transforms.deselect(editor: Editor)
Transforms.deselect(editor: Editor)Unset the selection.
Transforms.move(editor: Editor, options?)
Transforms.move(editor: Editor, options?)Move the selection's point forward or backward.
Options:
{distance?: number, unit?: 'offset' | 'character' | 'word' | 'line', reverse?: boolean, edge?: 'anchor' | 'focus' | 'start' | 'end'}Transforms.setPoint(editor: Editor, props: Partial<Point>, options?)
Transforms.setPoint(editor: Editor, props: Partial<Point>, options?)Set new properties on one of the selection's points.
Options:
{edge?: 'anchor' | 'focus' | 'start' | 'end'}Transforms.setSelection(editor: Editor, props: Partial<Range>)
Transforms.setSelection(editor: Editor, props: Partial<Range>)Set new properties on an active selection. Since the value is a
Partial<Range>, this method can only handle updates to an existing selection. If there is no active selection the operation will be void. Use select if you'd like to create a selection when there is none.Text transforms
Transforms that operate on text.
Transforms.delete(editor: Editor, options?)
Transforms.delete(editor: Editor, options?)Delete text in the document.
Options:
{at?: Location, distance?: number, unit?: 'character' | 'word' | 'line' | 'block', reverse?: boolean, hanging?: boolean, voids?: boolean}Transforms.insertText(editor: Editor, text: string, options?)
Transforms.insertText(editor: Editor, text: string, options?)Insert a string of text at the specified location in the document. If no location is specified, insert at the current selection.
Options:
{at?: Location, voids?: boolean}Editor transforms
Transforms.transform(editor: Editor, transform: Transform)
Transforms.transform(editor: Editor, transform: Transform)Transform the
editor by an operation.Last modified 1mo ago