add watcher for doc, add setContent function

examples/Components/Routes/Export/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions" @update="onUpdate" ref="editor">
 
 			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">
@@ -99,6 +99,15 @@
 
 		</editor>
 
+		<div class="actions">
+			<button class="button" @click="clearContent">
+				Clear Content
+			</button>
+			<button class="button" @click="setContent">
+				Set Content
+			</button>
+		</div>
+
 		<div class="export">
 			<h3>JSON</h3>
 			<pre><code v-html="json"></code></pre>
@@ -161,6 +170,25 @@ export default {
 			this.json = getJSON()
 			this.html = getHTML()
 		},
+		clearContent() {
+			this.$refs.editor.clearContent()
+			this.$refs.editor.focus()
+		},
+		setContent() {
+			this.$refs.editor.setContent({
+				type: 'doc',
+				content: [{
+					type: 'paragraph',
+					content: [
+						{
+							type: 'text',
+							text: 'This is some inserted text. 👋',
+						},
+					],
+				}],
+			})
+			this.$refs.editor.focus()
+		},
 	},
 }
 </script>
@@ -168,10 +196,15 @@ export default {
 <style lang="scss" scoped>
 @import "~variables";
 
+.actions {
+	max-width: 30rem;
+	margin: 0 auto 2rem auto;
+}
+
 .export {
 
 	max-width: 30rem;
-	margin: 0 auto 5rem auto;
+	margin: 0 auto 2rem auto;
 
 	pre {
 		padding: 1rem;

examples/assets/sass/main.scss

@@ -61,6 +61,19 @@ h3 {
 	line-height: 1.3;
 }
 
+.button {
+	font-weight: bold;
+	display: inline-flex;
+	background: transparent;
+	border: 0;
+	color: $color-black;
+	padding: 0.2rem 0.5rem;
+	margin-right: 0.2rem;
+	border-radius: 3px;
+	cursor: pointer;
+	background-color: rgba($color-black, 0.1);
+}
+
 @import "./editor";
 @import "./menubar";
 @import "./menububble";

packages/tiptap/src/components/editor.js

@@ -56,6 +56,17 @@ export default {
 		}
 	},
 
+	watch: {
+
+		doc: {
+			deep: true,
+			handler() {
+				this.setContent(this.doc, true)
+			},
+		},
+
+	},
+
 	render(createElement) {
 		const slots = []
 
@@ -70,7 +81,7 @@ export default {
 						nodes: this.menuActions ? this.menuActions.nodes : null,
 						marks: this.menuActions ? this.menuActions.marks : null,
 						focused: this.view ? this.view.focused : false,
-						focus: () => this.view.focus(),
+						focus: this.focus,
 					})
 					slots.push(this.menubarNode)
 				} else if (name === 'menububble') {
@@ -78,7 +89,7 @@ export default {
 						nodes: this.menuActions ? this.menuActions.nodes : null,
 						marks: this.menuActions ? this.menuActions.marks : null,
 						focused: this.view ? this.view.focused : false,
-						focus: () => this.view.focus(),
+						focus: this.focus,
 					})
 					slots.push(this.menububbleNode)
 				}
@@ -218,11 +229,7 @@ export default {
 				return
 			}
 
-			this.$emit('update', {
-				getHTML: this.getHTML,
-				getJSON: this.getJSON,
-				state: this.state,
-			})
+			this.emitUpdate()
 		},
 
 		getHTML() {
@@ -240,19 +247,39 @@ export default {
 			return this.state.doc.toJSON()
 		},
 
-		clearContent() {
+		emitUpdate() {
+			this.$emit('update', {
+				getHTML: this.getHTML,
+				getJSON: this.getJSON,
+				state: this.state,
+			})
+		},
+
+		setContent(content = {}, emitUpdate = true) {
 			this.state = EditorState.create({
 				schema: this.state.schema,
-				doc: this.state.schema.nodeFromJSON({
-					type: 'doc',
-					content: [{
-						type: 'paragraph',
-					}],
-				}),
+				doc: this.schema.nodeFromJSON(content),
 				plugins: this.state.plugins,
 			})
 
 			this.view.updateState(this.state)
+
+			if (emitUpdate) {
+				this.emitUpdate()
+			}
+		},
+
+		clearContent(emitUpdate = true) {
+			this.setContent({
+				type: 'doc',
+				content: [{
+					type: 'paragraph',
+				}],
+			}, emitUpdate)
+		},
+
+		focus() {
+			this.view.focus()
 		},
 
 	},