prosekit/core

ProseKit extension priority.

default = 2

high = 3

highest = 4

low = 1

lowest = 0

get commands(): ToCommandAction<{[KeyType in string | number | symbol]: UnionToIntersection<ExtractTyping<E>["Commands"] extends undefined ? never : ExtractTyping<E>["Commands"]>[KeyType]}>

All CommandActions defined by the editor.

get focused(): boolean

Whether the editor is focused.

get marks(): ToMarkAction<SimplifyDeeper<{[KeyType in string | number | symbol]: UnionToIntersection<ExtractTyping<E>["Marks"] extends undefined ? never : ExtractTyping<E>["Marks"]>[KeyType]}>>

All MarkActions defined by the editor.

get mounted(): boolean

Whether the editor is mounted.

get nodes(): ToNodeAction<SimplifyDeeper<{[KeyType in string | number | symbol]: UnionToIntersection<ExtractTyping<E>["Nodes"] extends undefined ? never : ExtractTyping<E>["Nodes"]>[KeyType]}>>

All NodeActions defined by the editor.

get schema(): Schema<ExtractNodeNames<E>, ExtractMarkNames<E>>

The editor schema.

get state(): EditorState

The editor’s current state.

get view(): EditorView

The editor view.

blur

Blur the editor.

const blur: () => void

canExec

Check if the given command can be executed. Return true if the command can be executed, otherwise false.

const canExec: (command: Command) => boolean

exec

Execute the given command. Return true if the command was successfully executed, otherwise false.

const exec: (command: Command) => boolean

focus

Focus the editor.

const focus: () => void

getDocHTML

Return a HTML string representing the editor’s current document.

const getDocHTML: (options?: getDocHTMLOptions) => string

getDocJSON

Return a JSON object representing the editor’s current document.

const getDocJSON: () => NodeJSON

mount

Mount the editor to the given HTML element. Pass null or undefined to unmount the editor.

const mount: (place: undefined | null | HTMLElement) => void

setContent

Update the editor’s document and selection.

const setContent: (content: string | ProseMirrorNode | NodeJSON | HTMLElement, selection?: Selection | "start" | SelectionJSON | "end") => void

unmount

Unmount the editor. This is equivalent to mount(null).

const unmount: () => void

updateState

Update the editor’s state.

Remarks

This is an advanced method. Use it only if you have a specific reason to directly manipulate the editor’s state.

const updateState: (state: EditorState) => void

use

Register an extension to the editor. Return a function to unregister the extension.

const use: (extension: Extension) => VoidFunction

attrs?: null | Attrs

The attributes of the mark to add.

from?: number

The start position of the document. By default it will be the start position of current selection.

to?: number

The end position of the document. By default it will be the end position of current selection.

type: string | MarkType

The type of the mark to add.

A function to apply a command to the editor. It will return true if the command was applied, and false otherwise.

It also has a canExec method to check if the command can be applied.

canApply

An alias for canExec.

Deprecated

Use canExec instead.

const canApply: (...args: Args) => boolean

canExec

Check if the current command can be executed. Return true if the command can be executed, otherwise false.

const canExec: (...args: Args) => boolean

defaultContent?: string | NodeJSON | HTMLElement

The starting document to use when creating the editor. It can be a ProseMirror node JSON object, a HTML string, or a HTML element instance.

defaultDoc?: NodeJSON

A JSON object representing the starting document to use when creating the editor.

Deprecated

Use defaultContent instead.

defaultHTML?: string | HTMLElement

A HTML element or a HTML string representing the starting document to use when creating the editor.

Deprecated

Use defaultContent instead.

defaultSelection?: SelectionJSON

A JSON object representing the starting selection to use when creating the editor. It’s only used when defaultContent is also provided.

document?: Document

The Document object to use for DOM operations. If not provided, defaults to the current browser’s document object. Useful for server-side rendering or testing environments.

context?: ResolvedPos

A set of additional nodes to count as context when parsing, above the given top node.

DOMParser?: typeof DOMParser

findPositions?: { node: Node; offset: number; pos?: number }[]

When given, the parser will, beside parsing the content, record the document positions of the given DOM positions. It will do so by writing to the objects, adding a pos property that holds the document position. DOM positions that are not in the parsed content will not be written to.

from?: number

The child node index to start parsing from.

preserveWhitespace?: boolean | "full"

By default, whitespace is collapsed as per HTML’s rules. Pass true to preserve whitespace, but normalize newlines to spaces, and "full" to preserve whitespace entirely.

to?: number

The child node index to stop parsing at.

topMatch?: ContentMatch

Provide the starting content match that content parsed into the top node is matched against.

topNode?: ProseMirrorNode

By default, the content is parsed into the schema’s default top node type. You can pass this option to use the type and attributes from a different node as the top container.

DOMSerializer?: { fromSchema: (schema: Schema) => DOMSerializer }

defaultContent?: string | NodeJSON | HTMLElement

The starting document to use when creating the editor. It can be a ProseMirror node JSON object, a HTML string, or a HTML element instance.

defaultDoc?: NodeJSON

A JSON object representing the starting document to use when creating the editor.

Deprecated

Use defaultContent instead.

defaultHTML?: string | HTMLElement

A HTML element or a HTML string representing the starting document to use when creating the editor.

Deprecated

Use defaultContent instead.

defaultSelection?: SelectionJSON

A JSON object representing the starting selection to use when creating the editor. It’s only used when defaultContent is also provided.

extension: E

The extension to use when creating the editor.

type: string | MarkType

The type of the mark to expand.

_type?: T

extension: Extension<ExtensionTyping<any, any, any>> | Extension<ExtensionTyping<any, any, any>>[]

priority?: Priority

schema: null | Schema<any, any>

The schema that this extension represents.

depth: number

The depth of the node.

node: ProseMirrorNode

The closest parent node that satisfies the predicate.

pos: number

The position directly before the node.

start: number

The position at the start of the node.

Options for defineHistory.

depth?: number

The amount of history events that are collected before the oldest events are discarded.

Default: 200

newGroupDelay?: number

The delay in milliseconds between changes after which a new group should be started.

Default: 250

pos?: number

The position to insert the node at. By default it will insert after the current selection.

attrs?: Attrs

When type is provided, the attributes of the node to insert.

node?: ProseMirrorNode

The node to insert. Either this or type must be provided.

pos?: number

The position to insert the node at. By default it will be the anchor position of current selection.

type?: string | NodeType

The type of the node to insert. Either this or node must be provided.

schema: Schema

The editor schema to use.

A function for creating a mark with optional attributes and any number of children.

It also has a isActive method for checking if the mark is active in the current editor selection.

isActive: (attrs?: Attrs) => boolean

Checks if the mark is active in the current editor selection. If the optional attrs parameter is provided, it will check if the mark is active with the given attributes.

attr: AttrName

The name of the attribute.

default?: AttrType

The default value for this attribute, to use when no explicit value is provided. Attributes that have no default must be provided whenever a node or mark of a type that has them is created.

parseDOM?: (node: HTMLElement) => AttrType

Parses the attribute value from the DOM.

toDOM?: (value: AttrType) => undefined | null | [key: string, value: string]

Returns the attribute key and value to be set on the HTML element.

If the returned key is "style", the value is a string of CSS properties and will be prepended to the existing style attribute on the DOM node.

type: MarkName

The name of the mark type.

validate?: string | ((value: unknown) => void)

A function or type name used to validate values of this attribute. This will be used when deserializing the attribute from JSON, and when running Node.check. When a function, it should raise an exception if the value isn’t of the expected type or shape. When a string, it should be a |-separated string of primitive types ("number", "string", "boolean", "null", and "undefined"), and the library will raise an error when the value is not one of those types.

attrs?: {[K in string | number | symbol]: AttrSpec<Attrs[K]>}

The attributes that marks of this type get.

code?: boolean

Marks the content of this span as being code, which causes some commands and extensions to treat it differently.

excludes?: string

Determines which other marks this mark can coexist with. Should be a space-separated strings naming other marks or groups of marks. When a mark is added to a set, all marks that it excludes are removed in the process. If the set contains any mark that excludes the new mark but is not, itself, excluded by the new mark, the mark can not be added an the set. You can use the value "_" to indicate that the mark excludes all marks in the schema.

Defaults to only being exclusive with marks of the same type. You can set it to an empty string (or any string not containing the mark’s own name) to allow multiple marks of a given type to coexist (as long as they have different attributes).

group?: string

The group or space-separated groups to which this mark belongs.

inclusive?: boolean

Whether this mark should be active when the cursor is positioned at its end (or at its start when that is also the start of the parent node). Defaults to true.

name: MarkName

The name of the mark type.

parseDOM?: readonly ParseRule[]

Associates DOM parser information with this mark (see the corresponding node spec field). The mark field in the rules is implied.

spanning?: boolean

Determines whether marks of this type can span multiple adjacent nodes when serialized to DOM/HTML. Defaults to true.

toDOM?: (mark: Mark, inline: boolean) => DOMOutputSpec

Defines the default way marks of this type should be serialized to DOM/HTML. When the resulting spec contains a hole, that is where the marked content is placed. Otherwise, it is appended to the top node.

constructor: MarkViewConstructor

name: string

A function for creating a node with optional attributes and any number of children.

It also has a isActive method for checking if the node is active in the current editor selection.

isActive: (attrs?: Attrs) => boolean

Checks if the node is active in the current editor selection. If the optional attrs parameter is provided, it will check if the node is active with the given attributes.

attr: AttrName

The name of the attribute.

default?: AttrType

The default value for this attribute, to use when no explicit value is provided. Attributes that have no default must be provided whenever a node or mark of a type that has them is created.

parseDOM?: (node: HTMLElement) => AttrType

Parses the attribute value from the DOM.

splittable?: boolean

Whether the attribute should be kept when the node is split. Set it to true if you want to inherit the attribute from the previous node when splitting the node by pressing Enter.

Default: undefined

toDOM?: (value: AttrType) => undefined | null | [key: string, value: string]

Returns the attribute key and value to be set on the HTML element.

If the returned key is "style", the value is a string of CSS properties and will be prepended to the existing style attribute on the DOM node.

type: NodeName

The name of the node type.

validate?: string | ((value: unknown) => void)

A function or type name used to validate values of this attribute. This will be used when deserializing the attribute from JSON, and when running Node.check. When a function, it should raise an exception if the value isn’t of the expected type or shape. When a string, it should be a |-separated string of primitive types ("number", "string", "boolean", "null", and "undefined"), and the library will raise an error when the value is not one of those types.

A JSON representation of the prosemirror node.

attrs?: Record<string, any>

content?: NodeJSON[]

marks?: { attrs?: Record<string, any>; type: string }[]

text?: string

type: string

atom?: boolean

Can be set to true to indicate that, though this isn’t a leaf node, it doesn’t have directly editable content and should be treated as a single unit in the view.

attrs?: {[key in string | number | symbol]: AttrSpec<Attrs[key]>}

The attributes that nodes of this type get.

code?: boolean

Can be used to indicate that this node contains code, which causes some commands to behave differently.

content?: string

The content expression for this node, as described in the schema guide. When not given, the node does not allow any content.

defining?: boolean

When enabled, enables both definingAsContext and definingForContent.

definingAsContext?: boolean

Determines whether this node is considered an important parent node during replace operations (such as paste). Non-defining (the default) nodes get dropped when their entire content is replaced, whereas defining nodes persist and wrap the inserted content.

definingForContent?: boolean

In inserted content the defining parents of the content are preserved when possible. Typically, non-default-paragraph textblock types, and possibly list items, are marked as defining.

disableDropCursor?: boolean | ((view: EditorView, pos: { inside: number; pos: number }, event: DragEvent) => boolean)

draggable?: boolean

Determines whether nodes of this type can be dragged without being selected. Defaults to false.

group?: string

The group or space-separated groups to which this node belongs, which can be referred to in the content expressions for the schema.

inline?: boolean

Should be set to true for inline nodes. (Implied for text nodes.)

isolating?: boolean

When enabled (default is false), the sides of nodes of this type count as boundaries that regular editing operations, like backspacing or lifting, won’t cross. An example of a node that should probably have this enabled is a table cell.

leafText?: (node: ProseMirrorNode) => string

Defines the default way a leaf node of this type should be serialized to a string (as used by Node.textBetween and Node.textContent).

linebreakReplacement?: boolean

A single inline node in a schema can be set to be a linebreak equivalent. When converting between block types that support the node and block types that don’t but have whitespace set to "pre", setBlockType will convert between newline characters to or from linebreak nodes as appropriate.

marks?: string

The marks that are allowed inside of this node. May be a space-separated string referring to mark names or groups, "_" to explicitly allow all marks, or "" to disallow marks. When not given, nodes with inline content default to allowing all marks, other nodes default to not allowing marks.

name: NodeName

The name of the node type.

parseDOM?: readonly TagParseRule[]

Associates DOM parser information with this node, which can be used by DOMParser.fromSchema to automatically derive a parser. The node field in the rules is implied (the name of this node will be filled in automatically). If you supply your own parser, you do not need to also specify parsing rules in your schema.

selectable?: boolean

Controls whether nodes of this type can be selected as a node selection. Defaults to true for non-text nodes.

toDebugString?: (node: ProseMirrorNode) => string

Defines the default way a node of this type should be serialized to a string representation for debugging (e.g. in error messages).

toDOM?: (node: ProseMirrorNode) => DOMOutputSpec

Defines the default way a node of this type should be serialized to DOM/HTML (as used by DOMSerializer.fromSchema). Should return a DOM node or an array structure that describes one, with an optional number zero (“hole”) in it to indicate where the node’s content should be inserted.

For text nodes, the default is to create a text DOM node. Though it is possible to create a serializer where text is rendered differently, this is not supported inside the editor, so you shouldn’t override that in your text node spec.

topNode?: boolean

Whether this is the top-level node type. Only one node type can be the top-level node type in a schema.

whitespace?: "pre" | "normal"

Controls way whitespace in this a node is parsed. The default is "normal", which causes the DOM parser to collapse whitespace in normal mode, and normalize it (replacing newlines and such with spaces) otherwise. "pre" causes the parser to preserve spaces inside the node. When this option isn’t given, but code is true, whitespace will default to "pre". Note that this option doesn’t influence the way the node is rendered—that should be handled by toDOM and/or styling.

constructor: NodeViewConstructor

name: string

attrs?: null | Attrs

If attrs is given, remove precisely the mark with the given attrs. Otherwise, remove all marks of the given type.

from?: number

The start position of the document. By default it will be the start position of current selection.

to?: number

The end position of the document. By default it will be the end position of current selection.

type: string | MarkType

The type of the mark to remove.

pos?: number

The document position to start searching node. By default it will be the anchor position of current selection.

type: string | NodeType

The type of the node to remove.

A JSON representation of the prosemirror selection.

anchor: number

head: number

type: string

attrs?: null | Attrs

from?: number

to?: number

type: string | NodeType

attrs: Attrs

The attributes to set.

pos?: number

The position of the node. Defaults to the position of the wrapping node containing the current selection.

type: string | NodeType | string[] | NodeType[]

The type of node to set the attributes of.

If current node is not of this type, the command will do nothing.

A JSON representation of the prosemirror state.

doc: NodeJSON

The main ProseMirror doc.

selection: SelectionJSON

The current selection.

A JSON representation of the prosemirror step.

stepType: string

The type of the step.

attrs?: null | Attrs

The optional attributes to set on the mark.

enterInlineAtoms?: boolean

Whether the command should act on the content of inline nodes marked as atoms that are completely covered by a selection range.

Default: true

removeWhenPresent?: boolean

Controls whether, when part of the selected range has the mark already and part doesn’t, the mark is removed (true) or added (false).

Default: false

type: string | MarkType

The mark type to toggle.

attrs?: null | Attrs

The attributes of the node to toggle.

type: string | NodeType

The type of the node to toggle.

attrs?: null | Attrs

The attributes of the node to toggle.

type: string | NodeType

The type of the node to toggle.

from?: number

The start position of the document. By default it will be the start position of current selection.

to?: number

The end position of the document. By default it will be the end position of current selection.

from?: number

The start position of the document. By default it will be the start position of current selection.

to?: number

The end position of the document. By default it will be the end position of current selection.

attrs?: null | Attrs

Optional attributes to apply to the node.

nodeType?: NodeType

Deprecated

Use nodeSpec instead.

type: string | NodeType

The node type to wrap the selected textblock with.

An object holding the attributes of a node.

Type: Attrs

Type: { default?: AttrType; validate?: string | ((value: unknown) => void) }

Type: (view: EditorView, pos: number, event: MouseEvent) => boolean | void

Type: (view: EditorView, pos: number, node: ProseMirrorNode, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void

A function that is called when the editor document is changed.

Type: (view: EditorView, prevState: EditorState) => void

A function to handle the events fired on the editable DOM element. Returns true to indicate that it handled the given event. you are responsible for calling preventDefault yourself (or not, if you want to allow the default behavior).

Type: (view: EditorView, event: DOMEventMap[Event]) => boolean | void

Type: (view: EditorView, pos: number, event: MouseEvent) => boolean | void

Type: (view: EditorView, pos: number, node: ProseMirrorNode, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void

Type: (view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void

Extracts the CommandActions from an extension type.

Type: ToCommandAction<ExtractCommands<E>>

Use ExtractCommandActions instead.

Type: ExtractCommandActions<E>

Type: ToCommandCreators<ExtractCommands<E>>

Extracts the MarkActions from an extension type.

Type: ToMarkAction<ExtractMarks<E>>

Type: SimplifyDeeper<SimplifyUnion<ExtractTyping<E>["Marks"]>>

Extracts the NodeActions from an extension type.

Type: ToNodeAction<ExtractNodes<E>>

Type: SimplifyDeeper<SimplifyUnion<ExtractTyping<E>["Nodes"]>>

A function that is called when the editor gains or loses focus.

Type: (hasFocus: boolean) => void

Type: (view: EditorView, event: KeyboardEvent) => boolean | void

Type: (view: EditorView, event: KeyboardEvent) => boolean | void

Use type MarkAction instead.

Type: MarkAction

A function that is called when the editor view is mounted.

Type: (view: EditorView) => void

Use type NodeAction instead.

Type: NodeAction

Available children parameters for NodeAction and MarkAction.

Type: ProseMirrorNode | string | NodeChild[]

Type: ProseMirrorNode | ProseMirrorFragment | NodeContent[]

Type: (view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void

Type: (view: EditorView) => boolean

Type: (view: EditorView, from: number, to: number, text: string) => boolean | void

Type: (view: EditorView, pos: number, event: MouseEvent) => boolean | void

Type: (view: EditorView, pos: number, node: ProseMirrorNode, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void

A function that is called when the editor view is unmounted.

Type: () => void

A function that is called when the editor state is updated.

Type: (view: EditorView, prevState: EditorState) => void

function addMark(options: AddMarkOptions): Command

Returns a command that adds the given mark with the given attributes.

function canUseRegexLookbehind(): boolean

A utility for constructing className strings conditionally.

It is a re-export of clsx/lite with stricter types.

function clsx(...args: (undefined | null | string | boolean)[]): string

function collectChildren(parent: ProseMirrorNode | ProseMirrorFragment): ProseMirrorNode[]

Collects all children of a node or a fragment, and returns them as an array.

function collectNodes(content: NodeContent): ProseMirrorNode[]

Collects all nodes from a given content.

Deprecated

Use collectChildren instead.

function createEditor<E extends Extension<ExtensionTyping<any, any, any>>>(options: EditorOptions<E>): Editor<E>

function defineBaseCommands(): BaseCommandsExtension

Add some base commands

function defineBaseKeymap(options?: { priority?: Priority }): PlainExtension

Defines some basic key bindings.

function defineClickHandler(handler: ClickHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleClick

function defineClickOnHandler(handler: ClickOnHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleClickOn

function defineCommands<T extends Record<string, CommandCreator>>(commands: T): Extension<{ Commands: {[K in string | number | symbol]: Parameters<T[K]>} }>

function defineDefaultState(options: DefaultStateOptions): PlainExtension

Define a default state for the editor.

function defineDoc(): DocExtension

Deprecated

Use the following import instead:

import { defineDoc } from 'prosekit/extensions/doc'

function defineDocChangeHandler(handler: DocChangeHandler): PlainExtension

Registers a event handler that is called when the editor document is changed.

function defineDOMEventHandler<Event extends keyof DOMEventMap>(event: Event, handler: DOMEventHandler<Event>): PlainExtension

Register a new event handler for the given event type.

function defineDoubleClickHandler(handler: DoubleClickHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleDoubleClick

function defineDoubleClickOnHandler(handler: DoubleClickOnHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleDoubleClickOn

function defineDropHandler(handler: DropHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleDrop

function defineFocusChangeHandler(handler: FocusChangeHandler): PlainExtension

Registers a event handler that is called when the editor gains or loses focus.

function defineHistory(options?: HistoryOptions): HistoryExtension

Add undo/redo history to the editor.

function defineKeyDownHandler(handler: KeyDownHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleKeyDown

function defineKeymap(keymap: Keymap): PlainExtension

function defineKeyPressHandler(handler: KeyPressHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleKeyPress

function defineMarkAttr<MarkType extends string, AttrName extends string, AttrType>(options: MarkAttrOptions<MarkType, AttrName, AttrType>): Extension<{ Marks: {[K in string]: AttrType} }>

function defineMarkSpec<Mark extends string, Attrs extends Attrs>(options: MarkSpecOptions<Mark, Attrs>): Extension<{ Marks: {[K in string]: Attrs} }>

function defineMarkView(options: MarkViewOptions): Extension

function defineMountHandler(handler: MountHandler): PlainExtension

Registers a event handler that is called when the editor view is mounted.

function defineNodeAttr<NodeType extends string, AttrName extends string, AttrType>(options: NodeAttrOptions<NodeType, AttrName, AttrType>): Extension<{ Nodes: {[K in string]: {[K in string]: AttrType}} }>

Defines an attribute for a node type.

function defineNodeSpec<Node extends string, Attrs extends Attrs>(options: NodeSpecOptions<Node, Attrs>): Extension<{ Nodes: {[K in string]: Attrs} }>

Defines a node type.

function defineNodeView(options: NodeViewOptions): Extension

function defineParagraph(): ParagraphSpecExtension

Defines a paragraph node spec as the highest priority, because it should be the default block node for most cases.

Deprecated

Use the following import instead:

import { defineParagraph } from 'prosekit/extensions/paragraph'

function definePasteHandler(handler: PasteHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handlePaste

function definePlugin(plugin: ProseMirrorPlugin<any> | ProseMirrorPlugin<any>[] | ((context: { schema: Schema }) => ProseMirrorPlugin<any> | ProseMirrorPlugin<any>[])): PlainExtension

Adds a ProseMirror plugin to the editor.

function defineScrollToSelectionHandler(handler: ScrollToSelectionHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection

function defineText(): TextExtension

Deprecated

Use the following import instead:

import { defineText } from 'prosekit/extensions/text'

function defineTextInputHandler(handler: TextInputHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleTextInput

function defineTripleClickHandler(handler: TripleClickHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleTripleClick

function defineTripleClickOnHandler(handler: TripleClickOnHandler): PlainExtension

See https://prosemirror.net/docs/ref/#view.EditorProps.handleTripleClickOn

function defineUnmountHandler(handler: UnmountHandler): PlainExtension

Registers a event handler that is called when the editor view is unmounted.

function defineUpdateHandler(handler: UpdateHandler): PlainExtension

Registers a event handler that is called when the editor state is updated.

function elementFromJSON(json: NodeJSON, options: JSONParserOptions & DOMSerializerOptions & DOMDocumentOptions): HTMLElement

Parse a ProseMirror document JSON object to a HTML element.

Example

const json = { type: 'doc', content: [{ type: 'paragraph' }] }
const element = elementFromJSON(json, { schema: editor.schema })

function elementFromNode(node: ProseMirrorNode, options?: DOMSerializerOptions & DOMDocumentOptions): HTMLElement

Serialize a ProseMirror node to a HTML element.

Example

const node = editor.state.doc
const element = elementFromNode(node)

function expandMark(options: ExpandMarkOptions): Command

Expands the selection to include the entire mark at the current position.

function findParentNode(predicate: (node: ProseMirrorNode) => boolean, $pos: ResolvedPos): undefined | FindParentNodeResult

Find the closest parent node that satisfies the predicate.

function findParentNodeOfType(type: string | NodeType, $pos: ResolvedPos): undefined | FindParentNodeResult

Finds the closest parent node that matches the given node type.

function htmlFromJSON(json: NodeJSON, options: JSONParserOptions & DOMSerializerOptions & DOMDocumentOptions): string

Parse a ProseMirror document JSON object to a HTML string.

Example

const json = { type: 'doc', content: [{ type: 'paragraph' }] }
const html = htmlFromJSON(json, { schema: editor.schema })

function htmlFromNode(node: ProseMirrorNode, options?: DOMSerializerOptions & DOMDocumentOptions): string

Serialize a ProseMirror node to a HTML string

Example

const node = document.getElementById('content')
const html = htmlFromNode(node)

function insertDefaultBlock(options?: InsertDefaultBlockOptions): Command

Returns a command that inserts a default block after current selection or at the given position.

function insertNode(options: InsertNodeOptions): Command

Returns a command that inserts the given node at the current selection or at the given position.

function isAllSelection(sel: Selection): sel is AllSelection

Checks if the given object is a AllSelection instance.

function isFragment(fragment: unknown): fragment is ProseMirrorFragment

Checks if the given object is a Fragment instance.

function isMark(mark: unknown): mark is Mark

Checks if the given object is a Mark instance.

function isNodeSelection(sel: Selection): sel is NodeSelection

Checks if the given object is a NodeSelection instance.

function isProseMirrorNode(node: unknown): node is ProseMirrorNode

Checks if the given object is a ProseMirrorNode instance.

function isSelection(sel: unknown): sel is Selection

Checks if the given object is a Selection instance.

function isSlice(slice: unknown): slice is Slice

Checks if the given object is a Slice instance.

function isTextSelection(sel: Selection): sel is TextSelection

Checks if the given object is a TextSelection instance.

function jsonFromHTML(html: string, options: DOMDocumentOptions & DOMParserOptions & JSONParserOptions): NodeJSON

Parse a HTML string to a ProseMirror document JSON object.

Example

const html = '<p>Hello, world!</p>'
const json = jsonFromHTML(html, { schema: editor.schema })

function jsonFromNode(node: ProseMirrorNode): NodeJSON

Return a JSON object representing this node.

Example

const node = editor.state.doc
const json = jsonFromNode(node)

function jsonFromState(state: EditorState): StateJSON

Return a JSON object representing this state.

Example

const state = editor.state
const json = jsonFromState(state)

function nodeFromElement(element: Node, options: DOMParserOptions & JSONParserOptions): ProseMirrorNode

Parse a HTML element to a ProseMirror node.

Example

const element = document.getElementById('content')
const node = nodeFromElement(element, { schema: editor.schema })

function nodeFromHTML(html: string, options: DOMParserOptions & JSONParserOptions & DOMDocumentOptions): ProseMirrorNode

Parse a HTML string to a ProseMirror node.

Example

const html = '<p>Hello, world!</p>'
const node = nodeFromHTML(html, { schema: editor.schema })

function nodeFromJSON(json: NodeJSON, options: JSONParserOptions): ProseMirrorNode

Parse a JSON object to a ProseMirror node.

Example

const json = { type: 'doc', content: [{ type: 'paragraph' }] }
const node = nodeFromJSON(json, { schema: editor.schema })

function removeMark(options: RemoveMarkOptions): Command

Returns a command that removes the given mark.

function removeNode(options: RemoveNodeOptions): Command

Returns a command to remove the nearest ancestor node of a specific type from the current position.

function setBlockType(options: SetBlockTypeOptions): Command

Returns a command that tries to set the selected textblocks to the given node type with the given attributes.

function setNodeAttrs(options: SetNodeAttrsOptions): Command

Returns a command that set the attributes of the current node.

function setSelectionAround(tr: Transaction, pos: number): void

function stateFromJSON(json: StateJSON, options: JSONParserOptions): EditorState

Parse a JSON object to a ProseMirror state.

Example

const json = { state: { type: 'doc', content: [{ type: 'paragraph' }], selection: { type: 'text', from: 1, to: 1 } } }
const state = stateFromJSON(json, { schema: editor.schema })

function toggleMark(options: ToggleMarkOptions): Command

Returns a command that toggles the given mark with the given attributes.

function toggleNode(options: ToggleNodeOptions): Command

Returns a command that set the selected textblocks to the given node type with the given attributes.

function toggleWrap(options: ToggleWrapOptions): Command

Toggle between wrapping an inactive node with the provided node type, and lifting it up into it’s parent.

function union<const E extends readonly Extension<ExtensionTyping<any, any, any>>[]>(...exts: E): Union<E>

Merges multiple extensions into one. You can pass multiple extensions as arguments or a single array containing multiple extensions.

Throws

If no extensions are provided.

Example

function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}

Example

function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}

function union<const E extends readonly Extension<ExtensionTyping<any, any, any>>[]>(exts: E): Union<E>

Merges multiple extensions into one. You can pass multiple extensions as arguments or a single array containing multiple extensions.

Throws

If no extensions are provided.

Example

function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}

Example

function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}

function unsetBlockType(options?: UnsetBlockTypeOptions): Command

Returns a command that set the type of all textblocks between the given range to the default type (usually paragraph).

function unsetMark(options?: UnsetMarkOptions): Command

Returns a command that removes all marks.

function withPriority<T extends Extension<ExtensionTyping<any, any, any>>>(extension: T, priority: Priority): T

Return an new extension with the given priority.

Example

import { Priority, withPriority } from 'prosekit/core'

const extension = withPriority(defineMyExtension(), Priority.high)

function wrap(options: WrapOptions): Command

Returns a command that wraps the selected textblock with the given node type.