fix suggestions example

examples/Components/Routes/Suggestions/index.vue

@@ -1,19 +1,9 @@
 <template>
 	<div>
 
-		<editor class="editor" :extensions="extensions" ref="editor">
+		<div class="editor">
-			<div class="editor__content" slot="content" slot-scope="props">
+			<editor-content class="editor__content" :editor="editor" />
-				<h2>
-					Suggestions
-				</h2>
-				<p>
-					Sometimes it's useful to <strong>mention</strong> someone. That's a feature we're very used to. Under the hood this technique can also be used for other features likes <strong>hashtags</strong> and <strong>commands</strong> – lets call it <em>suggestions</em>.
-				</p>
-				<p>
-					This is an example how to mention some users like <span data-mention-id="1">Philipp Kühn</span> or <span data-mention-id="2">Hans Pagel</span>. Try to type <code>@</code> and a popup (rendered with tippy.js) will appear. You can navigate with arrow keys through a list of suggestions.
-				</p>
 		</div>
-		</editor>
 
 		<div class="suggestion-list" v-show="showSuggestions" ref="suggestions">
 			<template v-if="hasResults">
@@ -38,8 +28,7 @@
 <script>
 import Fuse from 'fuse.js'
 import tippy from 'tippy.js'
-import Icon from 'Components/Icon'
+import { Editor, EditorContent } from 'tiptap'
-import { Editor } from 'tiptap'
 import {
 	HardBreakNode,
 	HeadingNode,
@@ -52,12 +41,12 @@ import {
 export default {
 
 	components: {
-		Editor,
+		EditorContent,
-		Icon,
 	},
 
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new HardBreakNode(),
 					new HeadingNode({ maxLevel: 3 }),
@@ -138,6 +127,18 @@ export default {
 					new BoldMark(),
 					new ItalicMark(),
 				],
+				content: `
+					<h2>
+						Suggestions
+					</h2>
+					<p>
+						Sometimes it's useful to <strong>mention</strong> someone. That's a feature we're very used to. Under the hood this technique can also be used for other features likes <strong>hashtags</strong> and <strong>commands</strong> – lets call it <em>suggestions</em>.
+					</p>
+					<p>
+						This is an example how to mention some users like <span data-mention-id="1">Philipp Kühn</span> or <span data-mention-id="2">Hans Pagel</span>. Try to type <code>@</code> and a popup (rendered with tippy.js) will appear. You can navigate with arrow keys through a list of suggestions.
+					</p>
+				`,
+			}),
 			query: null,
 			suggestionRange: null,
 			filteredUsers: [],
@@ -190,7 +191,7 @@ export default {
 					label: user.name,
 				},
 			})
-			this.$refs.editor.focus()
+			this.editor.focus()
 		},
 
 		// renders a popup with suggestions