Migration Guide

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor')!,
  extensions: [StarterKit],
  content: '<p>Hello</p>',
})

editor.commands.toggleBold()

import { defineBasicExtensionfunction defineBasicExtension(): BasicExtension
Define a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public } from 'prosekit/basic'
import { createEditorfunction createEditor<E extends Extension>(options: EditorOptions<E>): Editor<E>
@public } from 'prosekit/core'

const editorconst editor: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>
@public({
  extensionEditorOptions<BasicExtension>.extension: BasicExtension
The extension to use when creating the editor.: defineBasicExtensionfunction defineBasicExtension(): BasicExtension
Define a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public(),
  defaultContentEditorOptions<E extends Extension>.defaultContent?: string | NodeJSON | Element | undefined
The starting document to use when creating the editor. It can be a
ProseMirror node JSON object, an HTML string, or a DOM element instance.: '<p>Hello</p>',
})

const rootconst root: Element | null = documentvar document: Document
**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document).querySelectorParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)
Returns the first element that is a descendant of node that matches selectors.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelector)('#editor')
if (rootconst root: Element | null) editorconst editor: Editor<BasicExtension>.mountEditor<BasicExtension>.mount: (place: HTMLElement | null | undefined) => void | VoidFunction
Mount the editor to the given HTML element. Pass `null` or `undefined` to
unmount the editor. When an element is passed, this method returns a
function to unmount the editor.(rootconst root: Element as HTMLElement)

editorconst editor: Editor<BasicExtension>.commands
Editor<BasicExtension>.commands: ToCommandAction<{
    setParagraph: [];
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
    dedentList: [options?: DedentListOptions];
    indentList: [options?: IndentListOptions];
    moveList: [direction: "up" | "down"];
    splitList: [];
    toggleCollapsed: [options?: ToggleCollapsedOptions];
    ... 58 more ...;
    redo: [];
}>
All 
{@link 
CommandAction
}
s defined by the editor..toggleBold
toggleBold: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

import 'remirror/styles/all.css'

import { Remirror, useRemirror } from '@remirror/react'
import { BoldExtension, ItalicExtension, UnderlineExtension } from 'remirror/extensions'

function extensions () {
  return [
  new BoldExtension(),
  new ItalicExtension(),
  new UnderlineExtension(),
]
}

export function Editor() {
  const { manager, state } = useRemirror({
    extensions,
    content: '<p>Hello</p>',
    stringHandler: 'html',
  })

  return <Remirror manager={manager} initialContent={state} />
}

'use client'

import 'prosekit/basic/style.css'

import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

export function Editor() {
  const editor = useMemo(() => {
    return createEditor({
      extension: defineBasicExtension(),
      defaultContent: '<p>Hello</p>',
    })
  }, [])

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} />
    </ProseKit>
  )
}

import { definePlugin
function definePlugin(plugin: Plugin | Plugin[] | ((context: {
    schema: Schema;
}) => Plugin | Plugin[])): PlainExtension
Adds a ProseMirror plugin to the editor.
@paramplugin - The ProseMirror plugin to add, or an array of plugins, or a
function that returns one or multiple plugins.@public } from 'prosekit/core'
import { Pluginclass Plugin<PluginState = any>
Plugins bundle functionality that can be added to an editor.
They are part of the [editor state](https://prosemirror.net/docs/ref/#state.EditorState) and
may influence that state and the view that contains it., PluginKeyclass PluginKey<PluginState = any>
A key is used to [tag](https://prosemirror.net/docs/ref/#state.PluginSpec.key) plugins in a way
that makes it possible to find them, given an editor state.
Assigning a key does mean only one plugin of that type can be
active in a state. } from 'prosekit/pm/state'

const myPluginconst myPlugin: PlainExtension = definePlugin
function definePlugin(plugin: Plugin | Plugin[] | ((context: {
    schema: Schema;
}) => Plugin | Plugin[])): PlainExtension
Adds a ProseMirror plugin to the editor.
@paramplugin - The ProseMirror plugin to add, or an array of plugins, or a
function that returns one or multiple plugins.@public(
  new Pluginnew Plugin<number>(spec: PluginSpec<number>): Plugin<number>
Create a plugin.({
    keyPluginSpec<PluginState>.key?: PluginKey<any> | undefined
Can be used to make this a keyed plugin. You can have only one
plugin with a given key in a given state, but it is possible to
access the plugin's configuration and state through the key,
without having access to the plugin instance object.: new PluginKeynew PluginKey<any>(name?: string): PluginKey<any>
Create a plugin key.('my-plugin'),
    statePluginSpec<number>.state?: StateField<number> | undefined
Allows a plugin to define a [state field](https://prosemirror.net/docs/ref/#state.StateField), an
extra slot in the state object in which it can keep its own data.: {
      initStateField<number>.init: (config: EditorStateConfig, instance: EditorState) => number
Initialize the value of the field. `config` will be the object
passed to [`EditorState.create`](https://prosemirror.net/docs/ref/#state.EditorState^create). Note
that `instance` is a half-initialized state instance, and will
not have values for plugin fields initialized after this one.: () => 0,
      applyStateField<number>.apply: (tr: Transaction, value: number, oldState: EditorState, newState: EditorState) => number
Apply the given transaction to this state field, producing a new
field value. Note that the `newState` argument is again a partially
constructed state does not yet contain the state from plugins
coming after this one.: (__: Transaction, valuevalue: number) => valuevalue: number + 1,
    },
  }),
)

import { defineNodeSpec
function defineNodeSpec<Node extends string, Attrs extends AnyAttrs = Attrs>(options: NodeSpecOptions<Node, Attrs>): Extension<{
    Nodes: { [K in Node]: Attrs; };
}>
Defines a node type into the editor schema.
@public@example```ts
const extension = defineNodeSpec({
  name: 'fancyParagraph',
  content: 'inline*',
  group: 'block',
  parseDOM: [{ tag: 'p.fancy' }],
  toDOM() {
    return ['p', { 'class': 'fancy' }, 0]
  },
})
``` } from 'prosekit/core'

const fancyParagraph
const fancyParagraph: Extension<{
    Nodes: {
        fancyParagraph: Attrs;
    };
}> = defineNodeSpec
defineNodeSpec<"fancyParagraph", Attrs>(options: NodeSpecOptions<"fancyParagraph", Attrs>): Extension<{
    Nodes: {
        fancyParagraph: Attrs;
    };
}>
Defines a node type into the editor schema.
@public@example```ts
const extension = defineNodeSpec({
  name: 'fancyParagraph',
  content: 'inline*',
  group: 'block',
  parseDOM: [{ tag: 'p.fancy' }],
  toDOM() {
    return ['p', { 'class': 'fancy' }, 0]
  },
})
```({
  nameNodeSpecOptions<"fancyParagraph", Attrs>.name: "fancyParagraph"
The name of the node type.: 'fancyParagraph',
  contentNodeSpec.content?: string | undefined
The content expression for this node, as described in the [schema
guide](https://prosemirror.net/docs/guide/#schema.content_expressions). When not given,
the node does not allow any content.: 'inline*',
  groupNodeSpec.group?: string | undefined
The group or space-separated groups to which this node belongs,
which can be referred to in the content expressions for the
schema.: 'block',
  parseDOMNodeSpec.parseDOM?: readonly TagParseRule[] | undefined
Associates DOM parser information with this node, which can be
used by [`DOMParser.fromSchema`](https://prosemirror.net/docs/ref/#model.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.: [{ tagTagParseRule.tag: string
A CSS selector describing the kind of DOM elements to match.: 'p.fancy' }],
  toDOMNodeSpec.toDOM?: ((node: Node) => DOMOutputSpec) | undefined
Defines the default way a node of this type should be serialized
to DOM/HTML (as used by
[`DOMSerializer.fromSchema`](https://prosemirror.net/docs/ref/#model.DOMSerializer^fromSchema)).
Should return a DOM node or an [array
structure](https://prosemirror.net/docs/ref/#model.DOMOutputSpec) 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.: () => ['p', { classclass: string: 'fancy' }, 0],
})

import { defineBasicExtensionfunction defineBasicExtension(): BasicExtension
Define a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public } from 'prosekit/basic'
import { createEditorfunction createEditor<E extends Extension>(options: EditorOptions<E>): Editor<E>
@public } from 'prosekit/core'
import type { Commandtype Command = (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean
Commands are functions that take a state and a an optional
transaction dispatch function and...

- determine whether they apply to this state
- if not, return false
- if `dispatch` was passed, perform their effect, possibly by
passing a transaction to `dispatch`
- return true

In some cases, the editor view is passed as a third argument. } from 'prosekit/pm/state'

declare const myExistingCommandconst myExistingCommand: Command: Commandtype Command = (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean
Commands are functions that take a state and a an optional
transaction dispatch function and...

- determine whether they apply to this state
- if not, return false
- if `dispatch` was passed, perform their effect, possibly by
passing a transaction to `dispatch`
- return true

In some cases, the editor view is passed as a third argument.

const editorconst editor: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>
@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtension
The extension to use when creating the editor.: defineBasicExtensionfunction defineBasicExtension(): BasicExtension
Define a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public() })
editorconst editor: Editor<BasicExtension>.execEditor<BasicExtension>.exec: (command: Command) => boolean
Execute the given command. Return `true` if the command was successfully
executed, otherwise `false`.(myExistingCommandconst myExistingCommand: Command)

import { defineCommands
function defineCommands<T extends Record<string, CommandCreator> = Record<string, CommandCreator>>(commands: T): Extension<{
    Commands: { [K in keyof T]: Parameters<T[K]>; };
}> } from 'prosekit/core'
import type { Commandtype Command = (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean
Commands are functions that take a state and a an optional
transaction dispatch function and...

- determine whether they apply to this state
- if not, return false
- if `dispatch` was passed, perform their effect, possibly by
passing a transaction to `dispatch`
- return true

In some cases, the editor view is passed as a third argument. } from 'prosekit/pm/state'
declare const myExistingCommandconst myExistingCommand: Command: Commandtype Command = (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean
Commands are functions that take a state and a an optional
transaction dispatch function and...

- determine whether they apply to this state
- if not, return false
- if `dispatch` was passed, perform their effect, possibly by
passing a transaction to `dispatch`
- return true

In some cases, the editor view is passed as a third argument.

defineCommands
defineCommands<{
    myThing: () => Command;
}>(commands: {
    myThing: () => Command;
}): Extension<{
    Commands: {
        myThing: [];
    };
}>({
  myThingmyThing: () => Command: () => myExistingCommandconst myExistingCommand: Command,
})