Documentation Index
Fetch the complete documentation index at: https://mintlify.com/prosekit/prosekit/llms.txt
Use this file to discover all available pages before exploring further.
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
Configuration options for the editorThe 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
A JSON object representing the starting selection. Only used when defaultContent is also provided.
Return Value
An Editor instance with the following key properties and methods:Whether the editor is currently mounted to the DOM
The underlying ProseMirror EditorView instance
The editor’s ProseMirror schema
The editor’s current state
Whether the editor is currently focused
All command actions defined by the editor’s extension
All node actions defined by the editor’s extension
All mark actions defined by the editor’s extension
Editor Methods
mount()
mount(place: HTMLElement | null | undefined): void | VoidFunction
null or undefined to unmount.
unmount()
Unmount the editor. Equivalent to mount(null).
focus()
Focus the editor.
blur()
Blur the editor.
use()
use(extension: Extension): VoidFunction
setContent()
setContent(
content: ProseMirrorNode | NodeJSON | string | Element,
selection?: SelectionJSON | Selection | 'start' | 'end'
): void
getDocJSON()
Return a JSON object representing the editor’s current document.
getDocHTML()
getDocHTML(options?: getDocHTMLOptions): string
exec()
exec(command: Command): boolean
true if successfully executed, otherwise false.
canExec()
canExec(command: Command): boolean
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