0
# Editor Management
1
2
Core editor functionality with Vue 3 reactive state integration for building rich text editors.
3
4
## Capabilities
5
6
### Editor Class
7
8
The Vue 3-specific editor class that extends the core tiptap editor with reactive state management.
9
10
```typescript { .api }
11
/**
12
* Vue 3 editor class with reactive state management
13
* Extends the core tiptap editor with Vue-specific features
14
*/
15
class Editor extends CoreEditor {
16
constructor(options?: Partial<EditorOptions>);
17
18
/** Get the current reactive editor state */
19
get state(): EditorState;
20
21
/** Get the reactive extension storage */
22
get storage(): Storage;
23
24
/** Vue content component reference */
25
contentComponent: ContentComponent | null;
26
27
/** Vue app context for provide/inject */
28
appContext: AppContext | null;
29
30
/**
31
* Register a ProseMirror plugin with reactive state updates
32
* @param plugin - The plugin to register
33
* @param handlePlugins - Optional plugin handling function
34
* @returns Updated editor state
35
*/
36
registerPlugin(
37
plugin: Plugin,
38
handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]
39
): EditorState;
40
41
/**
42
* Unregister a ProseMirror plugin with reactive state updates
43
* @param nameOrPluginKey - Plugin name or key to unregister
44
* @returns Updated editor state or undefined
45
*/
46
unregisterPlugin(nameOrPluginKey: string | PluginKey): EditorState | undefined;
47
}
48
49
interface ContentComponent {
50
ctx: ComponentPublicInstance;
51
}
52
```
53
54
**Key Features:**
55
- Reactive state using Vue's debounced ref system
56
- Automatic Vue app context integration
57
- Plugin registration with reactive updates
58
- markRaw wrapping for performance optimization
59
60
**Usage Examples:**
61
62
```typescript
63
import { Editor } from "@tiptap/vue-3";
64
import StarterKit from "@tiptap/starter-kit";
65
66
// Create editor instance
67
const editor = new Editor({
68
content: '<p>Hello World!</p>',
69
extensions: [StarterKit],
70
onUpdate: ({ editor }) => {
71
console.log('Content updated:', editor.getHTML());
72
},
73
});
74
75
// Access reactive state
76
console.log(editor.state.doc.textContent);
77
78
// Register plugins dynamically
79
import { Plugin } from "@tiptap/pm/state";
80
81
const customPlugin = new Plugin({
82
key: new PluginKey('custom'),
83
// plugin implementation
84
});
85
86
editor.registerPlugin(customPlugin);
87
```
88
89
### useEditor Composable
90
91
Vue 3 composition API hook for creating and managing editor instances with automatic lifecycle management.
92
93
```typescript { .api }
94
/**
95
* Vue 3 composable for creating and managing editor instances
96
* Handles mounting, unmounting, and cleanup automatically
97
* @param options - Editor configuration options
98
* @returns Reactive reference to editor instance
99
*/
100
function useEditor(options?: Partial<EditorOptions>): Ref<Editor | undefined>;
101
```
102
103
**Lifecycle Management:**
104
- Creates editor instance on component mount
105
- Clones DOM content before cleanup to prevent data loss
106
- Destroys editor instance on component unmount
107
- Returns reactive reference that updates with editor state
108
109
**Usage Examples:**
110
111
```typescript
112
<template>
113
<div v-if="editor">
114
<EditorContent :editor="editor" />
115
</div>
116
</template>
117
118
<script setup>
119
import { useEditor, EditorContent } from "@tiptap/vue-3";
120
import StarterKit from "@tiptap/starter-kit";
121
122
// Basic usage
123
const editor = useEditor({
124
content: '<p>Initial content</p>',
125
extensions: [StarterKit],
126
});
127
128
// With reactive options
129
import { ref, watch } from 'vue';
130
131
const content = ref('<p>Dynamic content</p>');
132
const editable = ref(true);
133
134
const editor = useEditor({
135
content: content.value,
136
editable: editable.value,
137
extensions: [StarterKit],
138
onUpdate: ({ editor }) => {
139
content.value = editor.getHTML();
140
},
141
});
142
143
// Watch for option changes
144
watch([content, editable], ([newContent, newEditable]) => {
145
if (editor.value) {
146
editor.value.commands.setContent(newContent);
147
editor.value.setEditable(newEditable);
148
}
149
});
150
</script>
151
```
152
153
### Editor Configuration
154
155
```typescript { .api }
156
interface EditorOptions {
157
/** Initial content as HTML string, JSON object, or Node */
158
content?: Content;
159
160
/** Array of extensions to use */
161
extensions?: Extensions;
162
163
/** Whether the editor is editable */
164
editable?: boolean;
165
166
/** Auto-focus behavior */
167
autofocus?: FocusPosition | boolean;
168
169
/** Enable input rules */
170
enableInputRules?: boolean;
171
172
/** Enable paste rules */
173
enablePasteRules?: boolean;
174
175
/** Enable content parse */
176
enableContentCheck?: boolean;
177
178
/** Event callbacks */
179
onCreate?: (props: EditorEvents['create']) => void;
180
onUpdate?: (props: EditorEvents['update']) => void;
181
onSelectionUpdate?: (props: EditorEvents['selectionUpdate']) => void;
182
onTransaction?: (props: EditorEvents['transaction']) => void;
183
onFocus?: (props: EditorEvents['focus']) => void;
184
onBlur?: (props: EditorEvents['blur']) => void;
185
onDestroy?: () => void;
186
187
/** DOM element to mount to */
188
element?: Element;
189
190
/** Enable drop cursor */
191
enableDropCursor?: boolean;
192
193
/** Enable gap cursor */
194
enableGapCursor?: boolean;
195
196
/** Injectable items for dependency injection */
197
injectCSS?: boolean;
198
199
/** Transform pasted content */
200
transformPastedText?: (text: string) => string;
201
transformPastedHTML?: (html: string) => string;
202
transformClipboardText?: (text: string) => string;
203
}
204
205
type Content = string | JSONContent | HTMLContent | null;
206
type Extensions = Extension[];
207
type FocusPosition = 'start' | 'end' | 'all' | number | boolean | null;
208
```