The Editor

The Editor is the central object you'll interact with at runtime. It wraps a ProseMirror EditorView and exposes typed shortcuts for the schema, commands, nodes, and marks contributed by your extensions.

Creating an editor

import { defineBasicExtensionfunction defineBasicExtension(): BasicExtensionDefine 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, unionfunction union<const E extends readonly Extension[]>(...exts: E): Union<E> (+1 overload)Merges multiple extensions into one. You can pass multiple extensions as
arguments or a single array containing multiple extensions.
@throwsIf no extensions are provided.@example```ts
function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}
```@example```ts
function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}
```@public } from 'prosekit/core'

const extensionconst extension: BasicExtension = defineBasicExtensionfunction defineBasicExtension(): BasicExtensionDefine 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()
const editorconst editor: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtensionThe extension to use when creating the editor. })

createEditor accepts:

Option	Type	Notes
`extension`	`Extension`	Required. Usually a `union(...)` of `define*` calls.
`defaultContent`	`NodeJSON \| string \| Element`	Optional initial document. It can be a ProseMirror node JSON object, an HTML string, or a DOM element instance.
`defaultSelection`	`SelectionJSON`	Optional initial selection (only used when `defaultContent` is set).

Mounting and unmounting

The editor doesn't render anything until you mount it on a DOM element.

editorconst editor: Editor<BasicExtension>.mountEditor<BasicExtension>.mount: (place: HTMLElement | null | undefined) => void | VoidFunctionMount 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.(elementconst element: HTMLElement)
// later:
editorconst editor: Editor<BasicExtension>.unmountEditor<BasicExtension>.unmount: () => voidUnmount the editor. This is equivalent to `mount(null)`.()

Framework integrations call mount/unmount for you. See Frameworks.

Live properties

Property	Type	What it gives you
`mounted`	`boolean`	Whether the editor is currently attached to the DOM.
`view`	`EditorView`	Underlying ProseMirror view (only valid after `mount`).
`state`	`EditorState`	The current ProseMirror state.
`schema`	`Schema`	The merged schema, narrowed to the union of nodes/marks you defined.
`focused`	`boolean`	Whether the editor currently has focus.
`commands`	`CommandActions`	Typed command actions, keyed by every defined command.
`nodes`	`NodeActions`	Typed node creators (also exposes `.isActive(attrs?)`).
`marks`	`MarkActions`	Typed mark creators (also exposes `.isActive(attrs?)`).

if (editorconst editor: Editor<BasicExtension>.commandsEditor<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..toggleBoldtoggleBold: CommandAction<[]>.canExecCommandAction<[]>.canExec(): booleanCheck if the current command can be executed. Return `true` if the command
can be executed, otherwise `false`.()) {
  // Toggle the "bold" mark on the current selected text.
  editorconst editor: Editor<BasicExtension>.commandsEditor<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..toggleBoldtoggleBold: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()
}

const isH1const isH1: boolean = editorconst editor: Editor<BasicExtension>.nodesEditor<BasicExtension>.nodes: ToNodeAction<SimplifyDeeper<{
    doc: {
        readonly [x: string]: any;
    };
    text: {
        readonly [x: string]: any;
    };
    paragraph: {
        readonly [x: string]: any;
    };
    heading: {
        level: number;
    };
    list: {
        kind?: "bullet" | "ordered" | "task" | "toggle" | undefined;
        order?: number | null | undefined;
        checked?: boolean | undefined;
        collapsed?: boolean | undefined;
    };
    blockquote: {
        readonly [x: string]: any;
    };
    image: {
        src?: string | null | undefined;
        width?: number | null | undefined;
        height?: number | null | undefined;
    };
    horizontalRule: {
        readonly [x: string]: any;
    };
    hardBreak: {
        readonly [x: string]: any;
    };
    table: {
        readonly [x: string]: any;
    };
    tableRow: {
        readonly [x: string]: any;
    };
    tableCell: {
        colspan?: number | undefined;
        rowspan?: number | undefined;
        colwidth?: number[] | null | undefined;
    };
    tableHeaderCell: {
        colspan?: number | undefined;
        rowspan?: number | undefined;
        colwidth?: number[] | null | undefined;
    };
    codeBlock: {
        ...;
    };
}>>All 
{@link 
NodeAction
}
s defined by the editor..headingheading: NodeAction<{
    level: number;
}>.isActiveNodeAction<{ level: number; }>.isActive: (attrs?: {
    level: number;
} | undefined) => booleanChecks 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.({ levellevel: number: 1 })
const isBoldconst isBold: boolean = editorconst editor: Editor<BasicExtension>.marksEditor<BasicExtension>.marks: ToMarkAction<SimplifyDeeper<{
    italic: {
        readonly [x: string]: any;
    };
    bold: {
        readonly [x: string]: any;
    };
    underline: {
        readonly [x: string]: any;
    };
    strike: {
        readonly [x: string]: any;
    };
    code: {
        readonly [x: string]: any;
    };
    link: {
        href: string;
        target?: string | null | undefined;
        rel?: string | null | undefined;
    };
}>>All 
{@link 
MarkAction
}
s defined by the editor..boldbold: MarkAction<{
    readonly [x: string]: any;
}>.isActiveMarkAction<{ readonly [x: string]: any; }>.isActive: (attrs?: {
    readonly [x: string]: any;
} | undefined) => booleanChecks 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.()

Methods

Method	Purpose
`setContent(content, sel?)`	Replace the document. `content` is `NodeJSON \| string \| Element`.
`getDocJSON()`	Return the current document as JSON.
`getDocHTML(options?)`	Render the document as an HTML string.
`exec(command)`	Run a raw ProseMirror `Command`. Returns `true` on success.
`canExec(command)`	Test whether a raw command would succeed without running it.
`use(extension)`	Hot-add an extension at runtime. Returns a function that removes it.
`focus()` / `blur()`	Imperatively change focus.
`mount(el)` / `unmount()`	Attach / detach from the DOM.

commands.<name>.canExec() is typically what you want for toolbar buttons. It returns true when the command would apply, which is the right signal for "is this button enabled?".

Hot-replacing extensions

editor.use registers an extension after the editor has been created. Use it for features that depend on runtime state (e.g., a search panel that's only active while open).

const saveExtensionconst saveExtension: Extension<ExtensionTyping<any, any, any>>: Extensioninterface Extension<T extends ExtensionTyping<any, any, any> = ExtensionTyping<any, any, any>>@public = defineKeymapfunction defineKeymap(keymap: Keymap): PlainExtensionAdds a set of keybindings to the editor. Please read the
[documentation](https://prosemirror.net/docs/ref/#keymap) for more details.
@public({
  'Mod-s': () => {
    saveDocumentfunction saveDocument(json: unknown): void(editorconst editor: Editor<BasicExtension>.getDocJSONEditor<BasicExtension>.getDocJSON: () => NodeJSONReturn a JSON object representing the editor's current document.())
    return true
  },
})
const disposeconst dispose: VoidFunction = editorconst editor: Editor<BasicExtension>.useEditor<BasicExtension>.use: (extension: Extension) => VoidFunctionRegister an extension to the editor. Return a function to unregister the
extension.(saveExtensionconst saveExtension: Extension<ExtensionTyping<any, any, any>>)

// later, when you no longer want the binding:
disposeconst dispose: VoidFunction
() => void()