> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor

> The Editor class is the core of Tiptap. It manages the editor state, view, and provides the API for content manipulation.

## Constructor

Create a new editor instance.

```typescript theme={null}
const editor = new Editor(options: Partial<EditorOptions>)
```

<ParamField path="options" type="Partial<EditorOptions>">
  Configuration options for the editor.

  <Expandable title="properties">
    <ParamField path="element" type="Element | { mount: HTMLElement } | ((editor: HTMLElement) => void) | null">
      The DOM element to mount the editor to. If `null`, the editor won't be mounted automatically.
    </ParamField>

    <ParamField path="content" type="Content" default="''">
      The initial content of the editor (HTML, JSON, or a JSON array).
    </ParamField>

    <ParamField path="extensions" type="Extensions" default="[]">
      Array of Tiptap extensions to use.
    </ParamField>

    <ParamField path="editable" type="boolean" default="true">
      Whether the editor is editable.
    </ParamField>

    <ParamField path="autofocus" type="FocusPosition" default="false">
      The editor's initial focus position. Can be `true`, `false`, `'start'`, `'end'`, a number, or `'all'`.
    </ParamField>

    <ParamField path="injectCSS" type="boolean" default="true">
      Whether to inject base CSS styles.
    </ParamField>

    <ParamField path="injectNonce" type="string | undefined">
      A nonce to use for CSP while injecting styles.
    </ParamField>

    <ParamField path="textDirection" type="'ltr' | 'rtl' | 'auto' | undefined">
      The default text direction for all content. When set, all nodes will have the corresponding `dir` attribute.
    </ParamField>

    <ParamField path="editorProps" type="EditorProps" default="{}">
      ProseMirror EditorProps to pass to the view.
    </ParamField>

    <ParamField path="parseOptions" type="ParseOptions" default="{}">
      Options for parsing content.
    </ParamField>

    <ParamField path="enableInputRules" type="EnableRules" default="true">
      Whether to enable input rules.
    </ParamField>

    <ParamField path="enablePasteRules" type="EnableRules" default="true">
      Whether to enable paste rules.
    </ParamField>

    <ParamField path="enableCoreExtensions" type="boolean | Partial<Record<CoreExtensionName, false>>" default="true">
      Whether to enable core extensions. Can be `false` to disable all, or an object to disable specific extensions.
    </ParamField>

    <ParamField path="enableContentCheck" type="boolean" default="false">
      If `true`, the editor will check content for errors on initialization.
    </ParamField>

    <ParamField path="onBeforeCreate" type="(props: { editor: Editor }) => void">
      Called before the editor is constructed.
    </ParamField>

    <ParamField path="onCreate" type="(props: { editor: Editor }) => void">
      Called after the editor is constructed.
    </ParamField>

    <ParamField path="onMount" type="(props: { editor: Editor }) => void">
      Called when the editor is mounted.
    </ParamField>

    <ParamField path="onUnmount" type="(props: { editor: Editor }) => void">
      Called when the editor is unmounted.
    </ParamField>

    <ParamField path="onUpdate" type="(props: { editor: Editor; transaction: Transaction }) => void">
      Called when the editor's content is updated.
    </ParamField>

    <ParamField path="onSelectionUpdate" type="(props: { editor: Editor; transaction: Transaction }) => void">
      Called when the editor's selection is updated.
    </ParamField>

    <ParamField path="onTransaction" type="(props: { editor: Editor; transaction: Transaction }) => void">
      Called after a transaction is applied.
    </ParamField>

    <ParamField path="onFocus" type="(props: { editor: Editor; event: FocusEvent; transaction: Transaction }) => void">
      Called on focus events.
    </ParamField>

    <ParamField path="onBlur" type="(props: { editor: Editor; event: FocusEvent; transaction: Transaction }) => void">
      Called on blur events.
    </ParamField>

    <ParamField path="onDestroy" type="() => void">
      Called when the editor is destroyed.
    </ParamField>

    <ParamField path="onContentError" type="(props: { editor: Editor; error: Error; disableCollaboration: () => void }) => void">
      Called when the editor encounters an error while parsing content.
    </ParamField>
  </Expandable>
</ParamField>

## Properties

### schema

```typescript theme={null}
editor.schema: Schema
```

The ProseMirror schema used by the editor.

### view

```typescript theme={null}
editor.view: EditorView
```

The ProseMirror EditorView instance.

### state

```typescript theme={null}
editor.state: EditorState
```

The current ProseMirror EditorState.

### commands

```typescript theme={null}
editor.commands: SingleCommands
```

An object of all registered commands. Each command returns a boolean indicating success.

### storage

```typescript theme={null}
editor.storage: Storage
```

The editor storage object. Extensions can store data here.

### isEditable

```typescript theme={null}
editor.isEditable: boolean
```

Whether the editor is currently editable.

### isFocused

```typescript theme={null}
editor.isFocused: boolean
```

Whether the editor is currently focused.

### isEmpty

```typescript theme={null}
editor.isEmpty: boolean
```

Whether the editor content is empty.

### isDestroyed

```typescript theme={null}
editor.isDestroyed: boolean
```

Whether the editor has been destroyed.

### isInitialized

```typescript theme={null}
editor.isInitialized: boolean
```

Whether the editor is initialized (after the `create` event has been emitted).

### instanceId

```typescript theme={null}
editor.instanceId: string
```

A unique ID for this editor instance.

## Methods

### chain()

Create a command chain to call multiple commands at once.

```typescript theme={null}
editor.chain(): ChainedCommands
```

<ResponseField name="return" type="ChainedCommands">
  A chainable command object. End with `.run()` to execute.
</ResponseField>

**Example**

```typescript theme={null}
editor.chain().focus().toggleBold().run()
```

### can()

Check if a command or command chain can be executed without actually executing it.

```typescript theme={null}
editor.can(): CanCommands
```

<ResponseField name="return" type="CanCommands">
  An object with the same commands as `editor.commands`, but they return `true`/`false` instead of executing.
</ResponseField>

**Example**

```typescript theme={null}
if (editor.can().toggleBold()) {
  // Bold can be toggled
}
```

### setOptions()

Update editor options.

```typescript theme={null}
editor.setOptions(options: Partial<EditorOptions>): void
```

<ParamField path="options" type="Partial<EditorOptions>" required>
  Options to update.
</ParamField>

**Example**

```typescript theme={null}
editor.setOptions({
  editable: false,
  editorProps: {
    attributes: {
      class: 'readonly-editor',
    },
  },
})
```

### setEditable()

Update the editable state of the editor.

```typescript theme={null}
editor.setEditable(editable: boolean, emitUpdate?: boolean): void
```

<ParamField path="editable" type="boolean" required>
  Whether the editor should be editable.
</ParamField>

<ParamField path="emitUpdate" type="boolean" default="true">
  Whether to emit an update event.
</ParamField>

**Example**

```typescript theme={null}
editor.setEditable(false)
```

### mount()

Attach the editor to a DOM element.

```typescript theme={null}
editor.mount(element: Element): void
```

<ParamField path="element" type="Element" required>
  The DOM element to mount the editor to.
</ParamField>

**Example**

```typescript theme={null}
const editor = new Editor({ element: null })
editor.mount(document.querySelector('#editor'))
```

### unmount()

Remove the editor from the DOM, but allow remounting later.

```typescript theme={null}
editor.unmount(): void
```

**Example**

```typescript theme={null}
editor.unmount()
```

### destroy()

Destroy the editor instance and cleanup.

```typescript theme={null}
editor.destroy(): void
```

**Example**

```typescript theme={null}
editor.destroy()
```

### getJSON()

Get the document as JSON.

```typescript theme={null}
editor.getJSON(): JSONContent
```

<ResponseField name="return" type="JSONContent">
  The editor content as a JSON object.
</ResponseField>

**Example**

```typescript theme={null}
const json = editor.getJSON()
console.log(json)
// { type: 'doc', content: [...] }
```

### getHTML()

Get the document as HTML.

```typescript theme={null}
editor.getHTML(): string
```

<ResponseField name="return" type="string">
  The editor content as an HTML string.
</ResponseField>

**Example**

```typescript theme={null}
const html = editor.getHTML()
console.log(html)
// '<p>Hello world</p>'
```

### getText()

Get the document as plain text.

```typescript theme={null}
editor.getText(options?: {
  blockSeparator?: string
  textSerializers?: Record<string, TextSerializer>
}): string
```

<ParamField path="options" type="object">
  <Expandable title="properties">
    <ParamField path="blockSeparator" type="string" default="'\\n\\n'">
      The string to use between block nodes.
    </ParamField>

    <ParamField path="textSerializers" type="Record<string, TextSerializer>" default="{}">
      Custom text serializers for specific node types.
    </ParamField>
  </Expandable>
</ParamField>

<ResponseField name="return" type="string">
  The editor content as plain text.
</ResponseField>

**Example**

```typescript theme={null}
const text = editor.getText()
console.log(text)
// 'Hello world'

const textWithCustomSeparator = editor.getText({ blockSeparator: ' ' })
```

### getAttributes()

Get attributes of the currently selected node or mark.

```typescript theme={null}
editor.getAttributes(nameOrType: string | NodeType | MarkType): Record<string, any>
```

<ParamField path="nameOrType" type="string | NodeType | MarkType" required>
  The name or type of the node or mark.
</ParamField>

<ResponseField name="return" type="Record<string, any>">
  The attributes of the node or mark.
</ResponseField>

**Example**

```typescript theme={null}
const linkAttrs = editor.getAttributes('link')
console.log(linkAttrs.href)
```

### isActive()

Check if a node or mark is active at the current selection.

```typescript theme={null}
editor.isActive(name: string, attributes?: Record<string, any>): boolean
editor.isActive(attributes: Record<string, any>): boolean
```

<ParamField path="name" type="string">
  The name of the node or mark.
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Optional attributes to match.
</ParamField>

<ResponseField name="return" type="boolean">
  Whether the node or mark is active.
</ResponseField>

**Example**

```typescript theme={null}
if (editor.isActive('bold')) {
  console.log('Bold is active')
}

if (editor.isActive('link', { href: 'https://example.com' })) {
  console.log('Link with this href is active')
}

if (editor.isActive({ textAlign: 'center' })) {
  console.log('Text is centered')
}
```

### registerPlugin()

Register a ProseMirror plugin.

```typescript theme={null}
editor.registerPlugin(
  plugin: Plugin,
  handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]
): EditorState
```

<ParamField path="plugin" type="Plugin" required>
  The ProseMirror plugin to register.
</ParamField>

<ParamField path="handlePlugins" type="(newPlugin: Plugin, plugins: Plugin[]) => Plugin[]">
  Optional function to control how the plugin is merged into existing plugins.
</ParamField>

<ResponseField name="return" type="EditorState">
  The new editor state.
</ResponseField>

**Example**

```typescript theme={null}
import { Plugin } from '@tiptap/pm/state'

const customPlugin = new Plugin({
  // plugin configuration
})

editor.registerPlugin(customPlugin)
```

### unregisterPlugin()

Unregister a ProseMirror plugin.

```typescript theme={null}
editor.unregisterPlugin(
  nameOrPluginKey: string | PluginKey | (string | PluginKey)[]
): EditorState | undefined
```

<ParamField path="nameOrPluginKey" type="string | PluginKey | (string | PluginKey)[]" required>
  The plugin name or PluginKey to remove.
</ParamField>

<ResponseField name="return" type="EditorState | undefined">
  The new editor state, or `undefined` if the plugin wasn't found.
</ResponseField>

**Example**

```typescript theme={null}
editor.unregisterPlugin('myPlugin')
```

### \$node()

Query for a single node using a CSS-like selector.

```typescript theme={null}
editor.$node(selector: string, attributes?: Record<string, any>): NodePos | null
```

<ParamField path="selector" type="string" required>
  A CSS-like selector (e.g., `'paragraph'`, `'heading[level=1]'`).
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Additional attributes to match.
</ParamField>

<ResponseField name="return" type="NodePos | null">
  A NodePos object if found, otherwise `null`.
</ResponseField>

**Example**

```typescript theme={null}
const heading = editor.$node('heading[level=1]')
if (heading) {
  console.log(heading.node.textContent)
}
```

### \$nodes()

Query for multiple nodes using a CSS-like selector.

```typescript theme={null}
editor.$nodes(selector: string, attributes?: Record<string, any>): NodePos[] | null
```

<ParamField path="selector" type="string" required>
  A CSS-like selector.
</ParamField>

<ParamField path="attributes" type="Record<string, any>">
  Additional attributes to match.
</ParamField>

<ResponseField name="return" type="NodePos[] | null">
  An array of NodePos objects if found, otherwise `null`.
</ResponseField>

**Example**

```typescript theme={null}
const paragraphs = editor.$nodes('paragraph')
paragraphs?.forEach(p => console.log(p.node.textContent))
```

### \$pos()

Get a resolved position at the given position.

```typescript theme={null}
editor.$pos(pos: number): NodePos
```

<ParamField path="pos" type="number" required>
  The position in the document.
</ParamField>

<ResponseField name="return" type="NodePos">
  A NodePos object for the given position.
</ResponseField>

**Example**

```typescript theme={null}
const nodePos = editor.$pos(10)
```

### \$doc

Get a NodePos for the document root.

```typescript theme={null}
editor.$doc: NodePos
```

**Example**

```typescript theme={null}
const docNode = editor.$doc
console.log(docNode.node.childCount)
```

## Events

The editor extends EventEmitter and emits the following events:

### beforeCreate

Emitted before the editor is created.

```typescript theme={null}
editor.on('beforeCreate', ({ editor }) => {
  console.log('Before create', editor)
})
```

### create

Emitted when the editor is ready.

```typescript theme={null}
editor.on('create', ({ editor }) => {
  console.log('Editor is ready', editor)
})
```

### mount

Emitted when the editor is mounted.

```typescript theme={null}
editor.on('mount', ({ editor }) => {
  console.log('Editor mounted', editor)
})
```

### unmount

Emitted when the editor is unmounted.

```typescript theme={null}
editor.on('unmount', ({ editor }) => {
  console.log('Editor unmounted', editor)
})
```

### update

Emitted when the content changes.

```typescript theme={null}
editor.on('update', ({ editor, transaction }) => {
  console.log('Content updated', editor, transaction)
})
```

### selectionUpdate

Emitted when the selection changes.

```typescript theme={null}
editor.on('selectionUpdate', ({ editor, transaction }) => {
  console.log('Selection updated', editor, transaction)
})
```

### transaction

Emitted after each transaction.

```typescript theme={null}
editor.on('transaction', ({ editor, transaction }) => {
  console.log('Transaction', editor, transaction)
})
```

### focus

Emitted when the editor gains focus.

```typescript theme={null}
editor.on('focus', ({ editor, event, transaction }) => {
  console.log('Editor focused', editor, event)
})
```

### blur

Emitted when the editor loses focus.

```typescript theme={null}
editor.on('blur', ({ editor, event, transaction }) => {
  console.log('Editor blurred', editor, event)
})
```

### destroy

Emitted when the editor is destroyed.

```typescript theme={null}
editor.on('destroy', () => {
  console.log('Editor destroyed')
})
```

### contentError

Emitted when there's an error parsing content.

```typescript theme={null}
editor.on('contentError', ({ editor, error, disableCollaboration }) => {
  console.error('Content error', error)
})
```

## Example

```typescript theme={null}
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

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

// Use commands
editor.chain().focus().toggleBold().run()

// Get content
const html = editor.getHTML()
const json = editor.getJSON()

// Check state
if (editor.isActive('bold')) {
  console.log('Bold is active')
}

// Cleanup
editor.destroy()
```