ProseMirror

https://prosemirror.net/docs/
Admin
ProseMirror is a toolkit for building rich text editors with a focus on modularity, customizability,...
Tokens:130,815
Snippets:1,923
Trust Score:9.3
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### selectTextblockStart: Command

Source: https://prosemirror.net/docs/ref

A command that moves the cursor to the start of the current text block.

```APIDOC
## selectTextblockStart: Command

### Description
Moves the cursor to the start of current text block.
```

--------------------------------

### Token sequence with positions for the example document

Source: https://prosemirror.net/docs/guides/collab

Shows the token sequence with position numbers for the example document. The positions are annotated above the tokens, and the blockquote and paragraph boundaries are marked.

```text
0   1 2 3 4    5
 <p> O n e </p>

5            6   7 8 9 10    11   12            13
 <blockquote> <p> T w o <img> </p> </blockquote>
```

--------------------------------

### Slice example: doc.slice() with open depths

Source: https://prosemirror.net/docs/guides/collab

Shows how to create a slice from a document using the slice method, and how openStart and openEnd reflect whether the slice boundaries are inside nodes.

```javascript
// doc holds two paragraphs, containing text "a" and "b"
let slice1 = doc.slice(0, 3) // The first paragraph
console.log(slice1.openStart, slice1.openEnd) // → 0 0
let slice2 = doc.slice(1, 5) // From start of first paragraph
                             // to end of second
console.log(slice2.openStart, slice2.openEnd) // → 1 1
```

--------------------------------

### Add baseKeymap for basic editing commands

Source: https://prosemirror.net/docs/guides/collab

Extends the previous example by adding the baseKeymap from prosemirror-commands to the plugins array, enabling default keybindings for enter, delete, and other basic editing actions.

```javascript
// (Omitted repeated imports)
import {baseKeymap} from "prosemirror-commands"

let state = EditorState.create({
  schema,
  plugins: [
    history(),
    keymap({"Mod-z": undo, "Mod-y": redo}),
    keymap(baseKeymap)
  ]
})
let view = new EditorView(document.body, {state})

```

--------------------------------

### Create a plugin with a purple inline decoration

Source: https://prosemirror.net/docs/guides/collab

Creates a plugin that returns a decoration set with a single inline decoration covering the entire document, styling all text purple. Use this as a minimal example of the `decorations` prop and `DecorationSet.create`.

```javascript
let purplePlugin = new Plugin({
  props: {
    decorations(state) {
      return DecorationSet.create(state.doc, [
        Decoration.inline(0, state.doc.content.size, {style: "color: purple"})
      ])
    }
  }
})

```

--------------------------------

### Create an EditorState with the basic schema

Source: https://prosemirror.net/docs/guides/collab

Creates an editor state with the basic schema and logs the document and selection properties. The output shows an empty paragraph and a selection start of 1.

```javascript
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"

let state = EditorState.create({schema})
console.log(state.doc.toString()) // An empty paragraph
console.log(state.selection.from) // 1, the start of the paragraph

```

--------------------------------

### Example document in HTML form

Source: https://prosemirror.net/docs/guides/collab

Shows the HTML representation of a document used to illustrate the token sequence and positions. It contains a paragraph with 'One', a blockquote with a paragraph containing 'Two' and an image.

```html
<p>One</p>
<blockquote><p>Two<img src="..."></p></blockquote>
```

--------------------------------

### Pseudocode for simple rebasing

Source: https://prosemirror.net/docs/guides/collab

Pseudocode illustrating the simple rebasing case: two steps starting from the same document, where stepB fails on docA, and rebasing stepB through mapA yields stepB' that applies to docA.

```text
stepA(doc) = docA
stepB(doc) = docB
stepB(docA) = MISMATCH!
rebase(stepB, mapA) = stepB'
stepB'(docA) = docAB

```

--------------------------------

### AllSelection

Source: https://prosemirror.net/docs/ref

A selection type that represents selecting the whole document (which can not necessarily be expressed with a text selection, when there are for example leaf block nodes at the start or end of the document).

```APIDOC
## AllSelection

### Description
A selection type that represents selecting the whole document (which can not necessarily be expressed with a text selection, when there are for example leaf block nodes at the start or end of the document).

### Constructor
`new AllSelection(doc: Node)`

Create an all-selection over the given document.
```

--------------------------------

### toJSON

Source: https://prosemirror.net/docs/ref

Method to get a JSON representation of the node.

```APIDOC
## toJSON() → any

### Description
Return a JSON-serializeable representation of this node.

### Returns
- **any** - A JSON-serializeable representation.
```

--------------------------------

### toString

Source: https://prosemirror.net/docs/ref

Method to get a string representation of the node.

```APIDOC
## toString() → string

### Description
Return a string representation of this node for debugging purposes.

### Returns
- **string** - A string representation of the node.
```

--------------------------------

### Create a ProseMirror document with schema.node and schema.text

Source: https://prosemirror.net/docs/guides/collab

Shows how to programmatically create a document using the basic schema. The null arguments are placeholders for attributes. The document contains two paragraphs and a horizontal rule.

```javascript
import {schema} from "prosemirror-schema-basic"

// (The null arguments are where you can specify attributes, if necessary.)
let doc = schema.node("doc", null, [
  schema.node("paragraph", null, [schema.text("One.")]),
  schema.node("horizontal_rule"),
  schema.node("paragraph", null, [schema.text("Two!")])
])
```

--------------------------------

### pcBaseKeymap

Source: https://prosemirror.net/docs/ref

A basic keymap containing bindings not specific to any schema. Binds the following keys (when multiple commands are listed, they are chained with `chainCommands`):
- **Enter** to `newlineInCode`, `createParagraphNear`, `liftEmptyBlock`, `splitBlock`
- **Mod-Enter** to `exitCode`
- **Backspace** and **Mod-Backspace** to `deleteSelection`, `joinBackward`, `selectNodeBackward`
- **Delete** and **Mod-Delete** to `deleteSelection`, `joinForward`, `selectNodeForward`
- **Mod-Delete** to `deleteSelection`, `joinForward`, `selectNodeForward`
- **Mod-a** to `selectAll`

```APIDOC
## pcBaseKeymap

### Description
A basic keymap containing bindings not specific to any schema. Binds the following keys (when multiple commands are listed, they are chained with `chainCommands`):
- **Enter** to `newlineInCode`, `createParagraphNear`, `liftEmptyBlock`, `splitBlock`
- **Mod-Enter** to `exitCode`
- **Backspace** and **Mod-Backspace** to `deleteSelection`, `joinBackward`, `selectNodeBackward`
- **Delete** and **Mod-Delete** to `deleteSelection`, `joinForward`, `selectNodeForward`
- **Mod-Delete** to `deleteSelection`, `joinForward`, `selectNodeForward`
- **Mod-a** to `selectAll`

### Type
Object<Command>
```

--------------------------------

### contentMatchAt

Source: https://prosemirror.net/docs/ref

Method to get the content match at a given index.

```APIDOC
## contentMatchAt(index: number) → ContentMatch

### Description
Get the content match in this node at the given index.

### Parameters
- **index** (number) - Required - The index to get the content match at.

### Returns
- **ContentMatch** - The content match at the given index.
```

--------------------------------

### keymap(bindings: Object<Command>) → Plugin

Source: https://prosemirror.net/docs/ref

Creates a keymap plugin for the given set of bindings.

```APIDOC
## keymap(bindings: Object<Command>) → Plugin

### Description
Create a keymap plugin for the given set of bindings. Bindings should map key names to command-style functions, which will be called with `(EditorState, dispatch, EditorView)` arguments, and should return true when they've handled the key. The view argument isn't part of the command protocol, but can be used as an escape hatch if a binding needs to directly interact with the UI.

### Parameters
- **bindings** (Object<Command>) - Required - An object mapping key names to command functions.

### Returns
- **Plugin** - A ProseMirror plugin that handles the given key bindings.

### Key Name Syntax
Key names may be strings like `"Shift-Ctrl-Enter"`—a key identifier prefixed with zero or more modifiers. Key identifiers are based on the strings that can appear in `KeyEvent.key`. Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `"Space"` as an alias for the `" "` name.

Modifiers can be given in any order. `Shift-` (or `s-`), `Alt-` (or `a-`), `Ctrl-` (or `c-` or `Control-`) and `Cmd-` (or `m-` or `Meta-`) are recognized. For characters that are created by holding shift, the `Shift-` prefix is implied, and should not be added explicitly.

You can use `Mod-` as a shorthand for `Cmd-` on Mac and `Ctrl-` on other platforms.

You can add multiple keymap plugins to an editor. The order in which they appear determines their precedence (the ones early in the array get to dispatch first).
```

--------------------------------

### joinTextblockBackward: Command

Source: https://prosemirror.net/docs/ref

A command that only tries to join the current textblock with the one before it when the cursor is at the start of a textblock.

```APIDOC
## joinTextblockBackward: Command

### Description
A more limited form of `joinBackward` that only tries to join the current textblock to the one before it, if the cursor is at the start of a textblock.
```

--------------------------------

### Create a minimal ProseMirror editor

Source: https://prosemirror.net/docs/guides/collab

Creates a minimal ProseMirror editor by importing a basic schema, creating an EditorState with that schema, and mounting an EditorView on document.body. Requires a bundler since ProseMirror is not distributed as a single browser-loadable script.

```javascript
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"

let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})

```

--------------------------------

### selectNodeBackward: Command

Source: https://prosemirror.net/docs/ref

A command that selects the node before the current textblock when the selection is empty and at the start of a textblock.

```APIDOC
## selectNodeBackward: Command

### Description
When the selection is empty and at the start of a textblock, select the node before that textblock, if possible. This is intended to be bound to keys like backspace, after `joinBackward` or other deleting commands, as a fall-back behavior when the schema doesn't allow deletion at the selected point.
```

--------------------------------

### getVersion(state: EditorState) → number

Source: https://prosemirror.net/docs/ref

Get the version up to which the collab plugin has synced with the central authority.

```APIDOC
## getVersion(state: EditorState) → number

### Description
Get the version up to which the collab plugin has synced with the central authority.

### Parameters
- **state** (EditorState) - The current editor state.

### Returns
- **number** - The version number.
```

--------------------------------

### DecorationSet.create

Source: https://prosemirror.net/docs/ref

Static method to create a decoration set from a document and decorations array.

```APIDOC
## DecorationSet.create(doc, decorations)

### Description
Creates a set of decorations using the structure of the given document. Consumes the decorations array.

### Method
create (static)

### Parameters
- **doc** (Node) - Required - The document to use for structure.
- **decorations** (Decoration[]) - Required - The decorations to include.

### Returns
- **DecorationSet** - A new decoration set.
```

--------------------------------

### Node.maybeChild(index: number) → Node | null

Source: https://prosemirror.net/docs/ref

Get the child node at the given index, if it exists.

```APIDOC
## Node.maybeChild(index: number) → Node | null

### Description
Get the child node at the given index, if it exists.

### Method
maybeChild

### Parameters
- **index** (number) - Required - The index of the child node to retrieve.

### Returns
- **Node | null** - The child node at the given index, or null if it does not exist.
```

--------------------------------

### selectAll: Command

Source: https://prosemirror.net/docs/ref

A command that selects the entire document.

```APIDOC
## selectAll: Command

### Description
Select the whole document.
```

--------------------------------

### joinBackward: Command

Source: https://prosemirror.net/docs/ref

A command that attempts to join the current textblock with the one before it when the selection is empty and at the start of a textblock.

```APIDOC
## joinBackward: Command

### Description
If the selection is empty and at the start of a textblock, try to reduce the distance between that block and the one before it—if there's a block directly before it that can be joined, join them. If not, try to move the selected block closer to the next one in the document structure by lifting it out of its parent or moving it into a parent of the previous block. Will use the view for accurate (bidi-aware) start-of-textblock detection if given.
```

--------------------------------

### Transaction.setSelection(selection)

Source: https://prosemirror.net/docs/ref

Updates the transaction's current selection. This determines the selection the editor gets when the transaction is applied.

```APIDOC
## setSelection(selection: Selection) → Transaction

### Description
Update the transaction's current selection. Will determine the selection that the editor gets when the transaction is applied.

### Method
setSelection

### Parameters
- **selection** (Selection) - Required - The new selection to set.

### Returns
- **Transaction** - The transaction itself, for chaining.
```

--------------------------------

### Slice

Source: https://prosemirror.net/docs/ref

Documentation for the Slice class, including its constructor, properties, instance methods, and static methods.

```APIDOC
## Slice

### Description
A slice represents a piece cut out of a larger document. It stores not only a fragment, but also the depth up to which nodes on both side are 'open' (cut through).

### Constructor
- **new Slice**(content: Fragment, openStart: number, openEnd: number) - Create a slice. When specifying a non-zero open depth, you must make sure that there are nodes of at least that depth at the appropriate side of the fragment—i.e. if the fragment is an empty paragraph node, `openStart` and `openEnd` can't be greater than 1. It is not necessary for the content of open nodes to conform to the schema's content constraints, though it should be a valid start/end/middle for such a node, depending on which sides are open.

### Properties
- **content**: Fragment - The slice's content.
- **openStart**: number - The open depth at the start of the fragment.
- **openEnd**: number - The open depth at the end.
- **size**: number - The size this slice would add when inserted into a document.

### Methods
- **eq**(other: Slice) → boolean - Tests whether this slice is equal to another slice.
- **toJSON**() → any - Convert a slice to a JSON-serializable representation.

### Static Methods
- **fromJSON**(schema: Schema, json: any) → Slice - Deserialize a slice from its JSON representation.
- **maxOpen**(fragment: Fragment, openIsolating?: boolean = true) → Slice - Create a slice from a fragment by taking the maximum possible open value on both side of the fragment.

### Static Properties
- **empty**: Slice - The empty slice.
```

--------------------------------

### new NodeRange($from, $to, depth)

Source: https://prosemirror.net/docs/ref

Constructor for the NodeRange class, which represents a flat range of content starting and ending in the same node.

```APIDOC
## new NodeRange($from, $to, depth)

### Description
Construct a node range. `$from` and `$to` should point into the same node until at least the given `depth`, since a node range denotes an adjacent set of nodes in a single parent node.

### Parameters
- **$from** (ResolvedPos) - Required - A resolved position along the start of the content. May have a `depth` greater than this object's `depth` property, since these are the positions that were used to compute the range, not re-resolved positions directly at its boundaries.
- **$to** (ResolvedPos) - Required - A position along the end of the content. See caveat for `$from`.
- **depth** (number) - Required - The depth of the node that this range points into.

### Properties
- **$from** (ResolvedPos) - A resolved position along the start of the content.
- **$to** (ResolvedPos) - A position along the end of the content.
- **depth** (number) - The depth of the node that this range points into.
- **start** (number) - The position at the start of the range.
- **end** (number) - The position at the end of the range.
- **parent** (Node) - The parent node that the range points into.
- **startIndex** (number) - The start index of the range in the parent node.
- **endIndex** (number) - The end index of the range in the parent node.
```

--------------------------------

### Create a plugin with props

Source: https://prosemirror.net/docs/guides/collab

Creates a simple plugin that adds a keydown handler to the editor view and includes it in the editor state. The handler logs a message and returns false to indicate it did not handle the event.

```javascript
let myPlugin = new Plugin({
  props: {
    handleKeyDown(view, event) {
      console.log("A key was pressed!")
      return false // We did not handle this
    }
  }
})

let state = EditorState.create({schema, plugins: [myPlugin]})

```

--------------------------------

### Node.child(index: number) → Node

Source: https://prosemirror.net/docs/ref

Get the child node at the given index. Raises an error when the index is out of range.

```APIDOC
## Node.child(index: number) → Node

### Description
Get the child node at the given index. Raises an error when the index is out of range.

### Method
child

### Parameters
- **index** (number) - Required - The index of the child node to retrieve.

### Returns
- **Node** - The child node at the given index.
```

--------------------------------

### PluginKey.getState(state: EditorState) → PluginState | undefined

Source: https://prosemirror.net/docs/ref

Gets the plugin's state from an editor state. Returns undefined if the plugin is not active.

```APIDOC
## [METHOD] PluginKey.getState(state: EditorState) → PluginState | undefined

### Description
Gets the plugin's state from an editor state. Returns undefined if the plugin is not active.

### Method
METHOD

### Endpoint
PluginKey.getState(state: EditorState) → PluginState | undefined

### Parameters
#### Parameters
- **state** (EditorState) - Required - The editor state from which to retrieve the plugin's state.

### Response
#### Success Response
- **PluginState | undefined** - The plugin's state, or undefined if not found.

### Response Example
```json
{
  "state": {}
}
```
```
Tokens:
Raw