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";