Skip to main content

​
Overview

The createEditor function is the primary entry point for creating a ProseKit editor. It takes an extension and optional configuration, returning an Editor instance that can be mounted to the DOM.

​
Function Signature

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

​
Parameters

​
options
EditorOptions<E>
required
Configuration options for the editor
​
options.extension
Extension
required
The extension to use when creating the editor. This defines the schema, commands, nodes, and marks available in the editor.
​
options.defaultContent
NodeJSON | string | Element
The starting document to use when creating the editor. Can be:
  • A ProseMirror node JSON object
  • An HTML string
  • A DOM element instance
​
options.defaultSelection
SelectionJSON
A JSON object representing the starting selection. Only used when defaultContent is also provided.

​
Return Value

​
editor
Editor<E>
An Editor instance with the following key properties and methods:
​
mounted
boolean
Whether the editor is currently mounted to the DOM
​
view
EditorView
The underlying ProseMirror EditorView instance
​
schema
Schema
The editor’s ProseMirror schema
​
state
EditorState
The editor’s current state
​
focused
boolean
Whether the editor is currently focused
​
commands
ExtractCommandActions<E>
All command actions defined by the editor’s extension
​
nodes
ExtractNodeActions<E>
All node actions defined by the editor’s extension
​
marks
ExtractMarkActions<E>
All mark actions defined by the editor’s extension

​
Editor Methods

​
mount()

mount(place: HTMLElement | null | undefined): void | VoidFunction
Mount the editor to the given HTML element. When an element is passed, returns a function to unmount the editor. Pass null or undefined to unmount.

​
unmount()

unmount(): void
Unmount the editor. Equivalent to mount(null).

​
focus()

focus(): void
Focus the editor.

​
blur()

blur(): void
Blur the editor.

​
use()

use(extension: Extension): VoidFunction
Register an extension to the editor. Returns a function to unregister the extension.

​
setContent()

setContent(
  content: ProseMirrorNode | NodeJSON | string | Element,
  selection?: SelectionJSON | Selection | 'start' | 'end'
): void
Update the editor’s document and selection.

​
getDocJSON()

getDocJSON(): NodeJSON
Return a JSON object representing the editor’s current document.

​
getDocHTML()

getDocHTML(options?: getDocHTMLOptions): string
Return an HTML string representing the editor’s current document.

​
exec()

exec(command: Command): boolean
Execute the given command. Returns true if successfully executed, otherwise false.

​
canExec()

canExec(command: Command): boolean
Check if the given command can be executed. Returns true if it can be executed, otherwise false.

​
Examples

​
Basic Usage

import { createEditor } from 'prosekit/core'
import { defineBasicExtension } from 'prosekit/basic'

const editor = createEditor({
  extension: defineBasicExtension()
})

// Mount to DOM
const element = document.getElementById('editor')
editor.mount(element)

​
With Default Content

import { createEditor } from 'prosekit/core'
import { defineBasicExtension } from 'prosekit/basic'

const editor = createEditor({
  extension: defineBasicExtension(),
  defaultContent: '<p>Hello, world!</p>',
  defaultSelection: { type: 'text', anchor: 1, head: 1 }
})

​
Using Multiple Extensions

import { createEditor, union } from 'prosekit/core'
import { defineBold, defineItalic } from 'prosekit/extensions/mark'
import { defineParagraph, defineDoc } from 'prosekit/extensions/node'

const extension = union([
  defineDoc(),
  defineParagraph(),
  defineBold(),
  defineItalic()
])

const editor = createEditor({ extension })

​
Accessing Editor State

const editor = createEditor({ extension })

// Check if mounted
if (editor.mounted) {
  console.log('Editor is mounted')
}

// Get current document
const json = editor.getDocJSON()
const html = editor.getDocHTML()

// Execute commands
editor.commands.toggleBold?.()

​
Type Safety

The createEditor function is fully type-safe. The returned Editor instance will have properly typed commands, nodes, and marks based on the extension you provide. 
import { createEditor } from 'prosekit/core'
import { defineBold } from 'prosekit/extensions/mark'

const editor = createEditor({
  extension: defineBold()
})

// TypeScript knows this command exists
editor.commands.toggleBold()

// TypeScript will error on non-existent commands
// editor.commands.toggleItalic() // Error!

​
See Also