From a84e71cc2a5b80e2a7ed8c829174b49d1c73d4e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 23 Oct 2018 23:16:51 +0200
Subject: [PATCH] fix suggestions example

---
 .../Components/Routes/Suggestions/index.vue   | 191 +++++++++---------
 1 file changed, 96 insertions(+), 95 deletions(-)

diff --git a/examples/Components/Routes/Suggestions/index.vue b/examples/Components/Routes/Suggestions/index.vue
index 497d78e38..2fcbd168d 100644
--- a/examples/Components/Routes/Suggestions/index.vue
+++ b/examples/Components/Routes/Suggestions/index.vue
@@ -1,19 +1,9 @@
 <template>
 	<div>
 
-		<editor class="editor" :extensions="extensions" ref="editor">
-			<div class="editor__content" slot="content" slot-scope="props">
-				<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="editor">
+			<editor-content class="editor__content" :editor="editor" />
+		</div>
 
 		<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 } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	HardBreakNode,
 	HeadingNode,
@@ -52,92 +41,104 @@ import {
 export default {
 
 	components: {
-		Editor,
-		Icon,
+		EditorContent,
 	},
 
 	data() {
 		return {
-			extensions: [
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new MentionNode({
-					// a list of all suggested items
-					items: [
-						{ id: 1, name: 'Philipp Kühn' },
-						{ id: 2, name: 'Hans Pagel' },
-						{ id: 3, name: 'Kris Siepert' },
-						{ id: 4, name: 'Justin Schueler' },
-					],
-					// is called when a suggestion starts
-					onEnter: ({ items, query, range, command, virtualNode }) => {
-						this.query = query
-						this.filteredUsers = items
-						this.suggestionRange = range
-						this.renderPopup(virtualNode)
-						// we save the command for inserting a selected mention
-						// this allows us to call it inside of our custom popup
-						// via keyboard navigation and on click
-						this.insertMention = command
-					},
-					// is called when a suggestion has changed
-					onChange: ({ items, query, range, virtualNode }) => {
-						this.query = query
-						this.filteredUsers = items
-						this.suggestionRange = range
-						this.navigatedUserIndex = 0
-						this.renderPopup(virtualNode)
-					},
-					// is called when a suggestion is cancelled
-					onExit: () => {
-						// reset all saved values
-						this.query = null
-						this.filteredUsers = []
-						this.suggestionRange = null
-						this.navigatedUserIndex = 0
-						this.destroyPopup()
-					},
-					// is called on every keyDown event while a suggestion is active
-					onKeyDown: ({ event }) => {
-						// pressing up arrow
-						if (event.keyCode === 38) {
-							this.upHandler()
-							return true
-						}
-						// pressing down arrow
-						if (event.keyCode === 40) {
-							this.downHandler()
-							return true
-						}
-						// pressing enter
-						if (event.keyCode === 13) {
-							this.enterHandler()
-							return true
-						}
+			editor: new Editor({
+				extensions: [
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new MentionNode({
+						// a list of all suggested items
+						items: [
+							{ id: 1, name: 'Philipp Kühn' },
+							{ id: 2, name: 'Hans Pagel' },
+							{ id: 3, name: 'Kris Siepert' },
+							{ id: 4, name: 'Justin Schueler' },
+						],
+						// is called when a suggestion starts
+						onEnter: ({ items, query, range, command, virtualNode }) => {
+							this.query = query
+							this.filteredUsers = items
+							this.suggestionRange = range
+							this.renderPopup(virtualNode)
+							// we save the command for inserting a selected mention
+							// this allows us to call it inside of our custom popup
+							// via keyboard navigation and on click
+							this.insertMention = command
+						},
+						// is called when a suggestion has changed
+						onChange: ({ items, query, range, virtualNode }) => {
+							this.query = query
+							this.filteredUsers = items
+							this.suggestionRange = range
+							this.navigatedUserIndex = 0
+							this.renderPopup(virtualNode)
+						},
+						// is called when a suggestion is cancelled
+						onExit: () => {
+							// reset all saved values
+							this.query = null
+							this.filteredUsers = []
+							this.suggestionRange = null
+							this.navigatedUserIndex = 0
+							this.destroyPopup()
+						},
+						// is called on every keyDown event while a suggestion is active
+						onKeyDown: ({ event }) => {
+							// pressing up arrow
+							if (event.keyCode === 38) {
+								this.upHandler()
+								return true
+							}
+							// pressing down arrow
+							if (event.keyCode === 40) {
+								this.downHandler()
+								return true
+							}
+							// pressing enter
+							if (event.keyCode === 13) {
+								this.enterHandler()
+								return true
+							}
 
-						return false
-					},
-					// is called when a suggestion has changed
-					// this function is optional because there is basic filtering built-in
-					// you can overwrite it if you prefer your own filtering
-					// in this example we use fuse.js with support for fuzzy search
-					onFilter: (items, query) => {
-						if (!query) {
-							return items
-						}
+							return false
+						},
+						// is called when a suggestion has changed
+						// this function is optional because there is basic filtering built-in
+						// you can overwrite it if you prefer your own filtering
+						// in this example we use fuse.js with support for fuzzy search
+						onFilter: (items, query) => {
+							if (!query) {
+								return items
+							}
 
-						const fuse = new Fuse(items, {
-							threshold: 0.2,
-							keys: ['name'],
-						})
+							const fuse = new Fuse(items, {
+								threshold: 0.2,
+								keys: ['name'],
+							})
 
-						return fuse.search(query)
-					},
-				}),
-				new CodeMark(),
-				new BoldMark(),
-				new ItalicMark(),
-			],
+							return fuse.search(query)
+						},
+					}),
+					new CodeMark(),
+					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