0
# Core Editor API
1

2
Complete tiptap core functionality re-exported by @tiptap/vue-3, providing the full editor API for content manipulation, state management, and extension development.
3

4
## Capabilities
5

6
### Extension System
7

8
Base classes for creating custom extensions, nodes, and marks.
9

10
```typescript { .api }
11
/**
12
 * Base class for creating extensions
13
 */
14
class Extension<Options = any, Storage = any> {
15
  constructor(options?: Partial<Options>);
16
  static create<O = any, S = any>(config?: ExtensionConfig<O, S>): Extension<O, S>;
17
  configure(options?: Partial<Options>): Extension<Options, Storage>;
18
}
19

20
/**
21
 * Base class for creating node extensions
22
 */
23
class Node<Options = any, Storage = any> extends Extension<Options, Storage> {
24
  static create<O = any, S = any>(config?: NodeConfig<O, S>): Node<O, S>;
25
}
26

27
/**
28
 * Base class for creating mark extensions
29
 */
30
class Mark<Options = any, Storage = any> extends Extension<Options, Storage> {
31
  static create<O = any, S = any>(config?: MarkConfig<O, S>): Mark<O, S>;
32
}
33

34
interface ExtensionConfig<Options = any, Storage = any> {
35
  name: string;
36
  priority?: number;
37
  defaultOptions?: Options;
38
  addOptions?: () => Options;
39
  addStorage?: () => Storage;
40
  addCommands?: () => Commands;
41
  addKeyboardShortcuts?: () => Record<string, Command>;
42
  addInputRules?: () => InputRule[];
43
  addPasteRules?: () => PasteRule[];
44
  addGlobalAttributes?: () => GlobalAttributes;
45
  onCreate?: (this: { editor: Editor; options: Options }) => void;
46
  onUpdate?: (this: { editor: Editor; options: Options }) => void;
47
  onDestroy?: (this: { editor: Editor; options: Options }) => void;
48
}
49
```
50

51
### Commands API
52

53
Comprehensive command system for manipulating editor content and state.
54

55
```typescript { .api }
56
// Content manipulation commands
57
function insertContent(content: Content): Command;
58
function insertContentAt(position: number | Range, content: Content): Command;
59
function setContent(content: Content, emitUpdate?: boolean): Command;
60
function clearContent(emitUpdate?: boolean): Command;
61

62
// Selection commands
63
function blur(): Command;
64
function focus(position?: FocusPosition): Command;
65
function selectAll(): Command;
66
function selectParentNode(): Command;
67
function selectTextblockStart(): Command;
68
function selectTextblockEnd(): Command;
69
function setTextSelection(position: number | { from: number; to?: number }): Command;
70

71
// Formatting commands
72
function toggleMark(typeOrName: string | MarkType, attributes?: Record<string, any>): Command;
73
function setMark(typeOrName: string | MarkType, attributes?: Record<string, any>): Command;
74
function unsetMark(typeOrName: string | MarkType): Command;
75
function extendMarkRange(typeOrName: string | MarkType): Command;
76

77
function toggleNode(typeOrName: string | NodeType, toggleTypeOrName?: string | NodeType, attributes?: Record<string, any>): Command;
78
function setNode(typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
79
function replaceRange(range: Range, typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
80

81
// List and wrapping commands
82
function toggleWrap(typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
83
function wrapIn(typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
84
function lift(typeOrName?: string | NodeType): Command;
85
function liftEmptyBlock(): Command;
86
function liftListItem(typeOrName: string | NodeType): Command;
87

88
// Structure commands
89
function joinUp(): Command;
90
function joinDown(): Command;
91
function joinBackward(): Command;
92
function joinForward(): Command;
93
function joinItemBackward(): Command;
94
function joinItemForward(): Command;
95
function joinTextblockBackward(): Command;
96
function joinTextblockForward(): Command;
97

98
function splitBlock(): Command;
99
function splitListItem(typeOrName: string | NodeType): Command;
100

101
// History commands
102
function undo(): Command;
103
function redo(): Command;
104
function clearHistory(): Command;
105

106
// Deletion commands
107
function deleteSelection(): Command;
108
function deleteRange(range: Range): Command;
109
function deleteCurrentNode(): Command;
110
function deleteNode(typeOrName: string | NodeType): Command;
111

112
// Utility commands
113
function scrollIntoView(): Command;
114
function keyboardShortcut(name: string): Command;
115
function createParagraphNear(): Command;
116
function cut(originRange: Range, targetPos: number): Command;
117
function enter(): Command;
118
function exitCode(): Command;
119
function newlineInCode(): Command;
120

121
// Attribute commands
122
function resetAttributes(typeOrName: string | NodeType | MarkType, attributes: string | string[]): Command;
123
function updateAttributes(typeOrName: string | NodeType | MarkType, attributes: Record<string, any>): Command;
124

125
type Command = (props: CommandProps) => boolean;
126
type CommandProps = { tr: Transaction; state: EditorState; dispatch?: (tr: Transaction) => void; view?: EditorView; editor: Editor };
127
```
128

129
### Helper Functions
130

131
Utility functions for document manipulation and state inspection.
132

133
```typescript { .api }
134
// Document creation and conversion
135
function createDocument(content: Content, schema: Schema, parseOptions?: ParseOptions): ProseMirrorNode;
136
function generateHTML(doc: JSONContent, extensions: Extensions): string;
137
function generateJSON(html: string, extensions: Extensions): JSONContent;
138
function generateText(doc: JSONContent | ProseMirrorNode, options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string;
139

140
// Content analysis
141
function findChildren(node: ProseMirrorNode, predicate: (node: ProseMirrorNode) => boolean): NodeWithPos[];
142
function findChildrenInRange(node: ProseMirrorNode, range: Range, predicate: (node: ProseMirrorNode) => boolean): NodeWithPos[];
143
function findParentNode(predicate: (node: ProseMirrorNode) => boolean): (selection: Selection) => NodeWithPos | undefined;
144
function findParentNodeClosestToPos($pos: ResolvedPos, predicate: (node: ProseMirrorNode) => boolean): NodeWithPos | undefined;
145

146
// Attribute extraction
147
function getAttributes(state: EditorState, typeOrName: string | NodeType | MarkType): Record<string, any>;
148
function getMarkAttributes(state: EditorState, typeOrName: string | MarkType): Record<string, any>;
149
function getNodeAttributes(state: EditorState, typeOrName: string | NodeType): Record<string, any>;
150

151
// Text extraction
152
function getText(node: ProseMirrorNode, options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string;
153
function getTextBetween(node: ProseMirrorNode, from: number, to: number, options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string;
154
function getTextSerializersFromSchema(schema: Schema): Record<string, TextSerializer>;
155

156
// State checking
157
function isActive(state: EditorState, name: string | null, attributes?: Record<string, any>): boolean;
158
function isMarkActive(state: EditorState, typeOrName: string | MarkType, attributes?: Record<string, any>): boolean;
159
function isNodeActive(state: EditorState, typeOrName: string | NodeType, attributes?: Record<string, any>): boolean;
160
function isNodeEmpty(node: ProseMirrorNode): boolean;
161
function isTextSelection(value: unknown): value is TextSelection;
162
function isNodeSelection(value: unknown): value is NodeSelection;
163

164
// Position and range utilities
165
function getMarkRange($pos?: ResolvedPos, typeOrName?: string | MarkType): Range | undefined;
166
function getMarksBetween(from: number, to: number, doc: ProseMirrorNode): MarkRange[];
167
function getNodeAtPosition(state: EditorState, typeOrName: string | NodeType, pos?: number): NodeWithPos | undefined;
168
function posToDOMRect(view: EditorView, from: number, to: number): DOMRect;
169

170
// Schema utilities
171
function getSchema(extensions: Extensions, editor?: Editor): Schema;
172
function getSchemaByResolvedExtensions(extensions: Extensions, editor?: Editor): Schema;
173
function getSchemaTypeByName(name: string, schema: Schema): NodeType | MarkType | null;
174

175
// Extension utilities
176
function resolveExtensions(extensions: Extensions): Extension[];
177
function flattenExtensions(extensions: Extensions): Extension[];
178
function sortExtensions(extensions: Extension[]): Extension[];
179
function splitExtensions(extensions: Extension[]): { baseExtensions: Extension[]; nodeExtensions: Extension[]; markExtensions: Extension[] };
180
```
181

182
### Input and Paste Rules
183

184
Rule creation utilities for handling user input and pasted content.
185

186
```typescript { .api }
187
// Input rule creators
188
function markInputRule(config: { find: RegExp; type: MarkType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
189
function nodeInputRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
190
function textInputRule(config: { find: RegExp; replace: string }): InputRule;
191
function textblockTypeInputRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
192
function wrappingInputRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
193

194
// Paste rule creators
195
function markPasteRule(config: { find: RegExp; type: MarkType; getAttributes?: (match: RegExpMatchArray, event: ClipboardEvent) => Record<string, any> | false | null }): PasteRule;
196
function nodePasteRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray, event: ClipboardEvent) => Record<string, any> | false | null }): PasteRule;
197
function textPasteRule(config: { find: RegExp; replace: string }): PasteRule;
198

199
class InputRule {
200
  constructor(config: { find: RegExp; handler: (state: EditorState, match: RegExpMatchArray, from: number, to: number) => Transaction | null });
201
}
202

203
class PasteRule {
204
  constructor(config: { find: RegExp; handler: (props: { state: EditorState; range: Range; match: RegExpMatchArray; pasteEvent: ClipboardEvent }) => Transaction | null });
205
}
206
```
207

208
### Built-in Extensions
209

210
Core extensions that provide essential editor functionality.
211

212
```typescript { .api }
213
// Available built-in extensions
214
const extensions: {
215
  ClipboardTextSerializer: Extension;
216
  Commands: Extension;
217
  Delete: Extension;
218
  Drop: Extension;
219
  Editable: Extension;
220
  FocusEvents: Extension;
221
  Keymap: Extension;
222
  Paste: Extension;
223
  Tabindex: Extension;
224
};
225

226
// Focus events plugin key for accessing plugin state
227
const focusEventsPluginKey: PluginKey;
228
```
229

230
### Utility Functions
231

232
Miscellaneous utility functions for type checking, object manipulation, and DOM operations.
233

234
```typescript { .api }
235
// Type checking utilities
236
function isFunction(value: unknown): value is Function;
237
function isNumber(value: unknown): value is number;
238
function isString(value: unknown): value is string;
239
function isRegExp(value: unknown): value is RegExp;
240
function isPlainObject(value: unknown): value is Record<string, any>;
241
function isEmptyObject(value: unknown): boolean;
242

243
// Platform detection
244
function isAndroid(): boolean;
245
function isiOS(): boolean;
246
function isMacOS(): boolean;
247

248
// Object manipulation
249
function mergeAttributes(...objects: Record<string, any>[]): Record<string, any>;
250
function mergeDeep(target: Record<string, any>, source: Record<string, any>): Record<string, any>;
251
function deleteProps(obj: Record<string, any>, propOrProps: string | string[]): Record<string, any>;
252
function objectIncludes(object: Record<string, any>, searchObject: Record<string, any>): boolean;
253

254
// Array utilities
255
function findDuplicates<T>(items: T[]): T[];
256
function removeDuplicates<T>(array: T[], by?: (item: T) => any): T[];
257
function minMax(value: number, min: number, max: number): number;
258

259
// String utilities
260
function escapeForRegEx(string: string): string;
261
function fromString(value: any, fallback?: string, delimiter?: string): string;
262

263
// DOM utilities
264
function elementFromString(value: string): HTMLElement;
265
function createStyleTag(style: string, nonce?: string, suffix?: string): HTMLStyleElement;
266
function canInsertNode(state: EditorState, node: ProseMirrorNode): boolean;
267

268
// Functional utilities
269
function callOrReturn<T>(value: T | ((args?: any) => T), context?: any, ...props: any[]): T;
270
```
271

272
## Types
273

274
```typescript { .api }
275
// Core content types
276
type Content = string | JSONContent | HTMLContent | ProseMirrorNode | ProseMirrorNode[] | null;
277
type JSONContent = { type?: string; attrs?: Record<string, any>; content?: JSONContent[]; marks?: { type: string; attrs?: Record<string, any> }[]; text?: string };
278
type HTMLContent = string;
279

280
// Extension and configuration types
281
type Extensions = (Extension | Node | Mark)[];
282
type AnyExtension = Extension | Node | Mark;
283
type ExtensionConfig<Options = any, Storage = any> = Partial<{ name: string; priority: number; /* ... other config properties */ }>;
284

285
// Command types
286
type Commands<ReturnType = any> = Record<string, (...args: any[]) => ReturnType>;
287
type RawCommands = Record<string, (...args: any[]) => Command>;
288
type SingleCommands = Record<string, (...args: any[]) => boolean>;
289
type ChainedCommands = Record<string, (...args: any[]) => ChainedCommands> & { run: () => boolean };
290
type CanCommands = Record<string, (...args: any[]) => boolean>;
291

292
// Range and selection types
293
type Range = { from: number; to: number };
294
type NodeRange = Range & { node: ProseMirrorNode };
295
type MarkRange = Range & { mark: ProseMirrorMark };
296
type FocusPosition = 'start' | 'end' | 'all' | number | boolean | null;
297

298
// Node and attribute types
299
type NodeWithPos = { node: ProseMirrorNode; pos: number };
300
type Attribute = { default?: any; rendered?: boolean; renderHTML?: (attributes: Record<string, any>) => Record<string, any> | null; parseHTML?: (element: HTMLElement) => any | null; keepOnSplit?: boolean; isRequired?: boolean };
301
type Attributes = Record<string, Attribute>;
302
type GlobalAttributes = { types: string[]; attributes: Record<string, Attribute> }[];
303

304
// Text serialization
305
type TextSerializer = (props: { node: ProseMirrorNode; pos: number; parent: ProseMirrorNode; index: number; range: Range }) => string;
306

307
// View renderers
308
type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
309
type MarkViewRenderer = (props: MarkViewRendererProps) => MarkView;
310

311
// Editor events
312
interface EditorEvents {
313
  beforeCreate: { editor: Editor };
314
  create: { editor: Editor };
315
  update: { editor: Editor; transaction: Transaction };
316
  selectionUpdate: { editor: Editor; transaction: Transaction };
317
  transaction: { editor: Editor; transaction: Transaction };
318
  focus: { editor: Editor; event: FocusEvent; transaction: Transaction };
319
  blur: { editor: Editor; event: FocusEvent; transaction: Transaction };
320
  destroy: void;
321
}
322
```