From b7e915015c381edf3c11f097b8f3ba68c657fb6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 23 Oct 2018 22:50:12 +0200
Subject: [PATCH] fix some examples

---
 .../Routes/MarkdownShortcuts/index.vue        |  70 +++++----
 .../Components/Routes/Placeholder/index.vue   |  29 ++--
 examples/Components/Routes/ReadOnly/index.vue |  49 +++---
 .../Components/Routes/TextAlign/index.vue     |  95 ++++++------
 examples/Components/Routes/TodoList/index.vue | 146 +++++++++---------
 5 files changed, 201 insertions(+), 188 deletions(-)

diff --git a/examples/Components/Routes/MarkdownShortcuts/index.vue b/examples/Components/Routes/MarkdownShortcuts/index.vue
index 31666bf1..181d3fc3 100644
--- a/examples/Components/Routes/MarkdownShortcuts/index.vue
+++ b/examples/Components/Routes/MarkdownShortcuts/index.vue
@@ -1,26 +1,12 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Markdown Shortcuts
-				</h2>
-				<p>
-					Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
-				</p>
-				<p>
-					This feature is called <strong>input rules</strong>. There are some of these shortcuts for the most basic nodes enabled by default. Try <code>#, ##, ###, …</code> for headlines, <code>></code> for blockquotes, <code>- or +</code> for bullet lists. And of course you can add your own input rules.
-				</p>
-			</div>
-
-		</editor>
+	<div class="editor">
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -40,28 +26,44 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 		Icon,
 	},
 	data() {
 		return {
-			extensions: [
-				new BlockquoteNode(),
-				new BulletListNode(),
-				new CodeBlockNode(),
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new ListItemNode(),
-				new OrderedListNode(),
-				new TodoItemNode(),
-				new TodoListNode(),
-				new BoldMark(),
-				new CodeMark(),
-				new ItalicMark(),
-				new LinkMark(),
-				new HistoryExtension(),
-			],
+			editor: new Editor({
+				extensions: [
+					new BlockquoteNode(),
+					new BulletListNode(),
+					new CodeBlockNode(),
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new ListItemNode(),
+					new OrderedListNode(),
+					new TodoItemNode(),
+					new TodoListNode(),
+					new BoldMark(),
+					new CodeMark(),
+					new ItalicMark(),
+					new LinkMark(),
+					new HistoryExtension(),
+				],
+				content: `
+					<h2>
+						Markdown Shortcuts
+					</h2>
+					<p>
+						Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
+					</p>
+					<p>
+						This feature is called <strong>input rules</strong>. There are some of these shortcuts for the most basic nodes enabled by default. Try <code>#, ##, ###, …</code> for headlines, <code>></code> for blockquotes, <code>- or +</code> for bullet lists. And of course you can add your own input rules.
+					</p>
+				`,
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/Placeholder/index.vue b/examples/Components/Routes/Placeholder/index.vue
index 39f55bf9..e02ebbb5 100644
--- a/examples/Components/Routes/Placeholder/index.vue
+++ b/examples/Components/Routes/Placeholder/index.vue
@@ -1,13 +1,11 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-			<div class="editor__content" slot="content" slot-scope="props"></div>
-		</editor>
+	<div class="editor">
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	BulletListNode,
 	ListItemNode,
@@ -16,19 +14,24 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 	},
 	data() {
 		return {
-			extensions: [
-				new BulletListNode(),
-				new ListItemNode(),
-				new PlaceholderExtension({
-					emptyNodeClass: 'is-empty',
-				}),
-			],
+			editor: new Editor({
+				extensions: [
+					new BulletListNode(),
+					new ListItemNode(),
+					new PlaceholderExtension({
+						emptyNodeClass: 'is-empty',
+					}),
+				],
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
 
diff --git a/examples/Components/Routes/ReadOnly/index.vue b/examples/Components/Routes/ReadOnly/index.vue
index 1897a306..7272a081 100644
--- a/examples/Components/Routes/ReadOnly/index.vue
+++ b/examples/Components/Routes/ReadOnly/index.vue
@@ -1,22 +1,11 @@
 <template>
-	<div>
-		<editor :editable="false" :extensions="extensions" class="editor">
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Read-Only
-				</h2>
-				<p>
-					This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
-				</p>
-			</div>
-
-		</editor>
+	<div class="editor">
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	HardBreakNode,
 	HeadingNode,
@@ -28,19 +17,33 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 	},
 	data() {
 		return {
-			extensions: [
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new BoldMark(),
-				new CodeMark(),
-				new ItalicMark(),
-				new LinkMark(),
-			],
+			editor: new Editor({
+				editable: false,
+				extensions: [
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new BoldMark(),
+					new CodeMark(),
+					new ItalicMark(),
+					new LinkMark(),
+				],
+				content: `
+					<h2>
+						Read-Only
+					</h2>
+					<p>
+						This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
+					</p>
+				`,
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/TextAlign/index.vue b/examples/Components/Routes/TextAlign/index.vue
index 64317196..7d977cfe 100644
--- a/examples/Components/Routes/TextAlign/index.vue
+++ b/examples/Components/Routes/TextAlign/index.vue
@@ -1,53 +1,42 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
+	<div class="editor">
+		<menu-bar class="menubar" :editor="editor">
+			<template slot-scope="{ nodes, marks }">
 
-			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
-				<div v-if="nodes && marks">
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
+					@click="nodes.paragraph.command({ textAlign: 'left' })"
+				>
+					<icon name="align-left" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
-						@click="nodes.paragraph.command({ textAlign: 'left' })"
-					>
-						<icon name="align-left" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
+					@click="nodes.paragraph.command({ textAlign: 'center' })"
+				>
+					<icon name="align-center" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
-						@click="nodes.paragraph.command({ textAlign: 'center' })"
-					>
-						<icon name="align-center" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
+					@click="nodes.paragraph.command({ textAlign: 'right' })"
+				>
+					<icon name="align-right" />
+				</button>
+			
+			</template>
+		</menu-bar>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
-						@click="nodes.paragraph.command({ textAlign: 'right' })"
-					>
-						<icon name="align-right" />
-					</button>
-
-				</div>
-			</div>
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<p style="text-align: left">
-					Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
-				</p>
-				<p style="text-align: right">
-					Have fun! 🙌
-				</p>
-			</div>
-
-		</editor>
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, MenuBar } from 'tiptap'
 import {
 	HardBreakNode,
 	CodeMark,
@@ -56,18 +45,32 @@ import ParagraphAlignmentNode from './Paragraph.js'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBar,
 		Icon,
 	},
 	data() {
 		return {
-			extensions: [
-				new HardBreakNode(),
-				new CodeMark(),
-				new ParagraphAlignmentNode(),
-			],
+			editor: new Editor({
+				extensions: [
+					new HardBreakNode(),
+					new CodeMark(),
+					new ParagraphAlignmentNode(),
+				],
+				content: `
+					<p style="text-align: left">
+						Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
+					</p>
+					<p style="text-align: right">
+						Have fun! 🙌
+					</p>
+				`,
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
 
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index 8a086ce2..1b1d932f 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -1,75 +1,50 @@
 <template>
-	<div>
-		<editor :extensions="extensions" class="editor">
+	<div class="editor">
+		<menu-bar class="menubar" :editor="editor">
+			<template slot-scope="{ nodes, marks }">
 
-			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
-				<div v-if="nodes && marks">
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': marks.bold.active() }"
+					@click="marks.bold.command"
+				>
+					<icon name="bold" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': marks.bold.active() }"
-						@click="marks.bold.command"
-					>
-						<icon name="bold" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': marks.italic.active() }"
+					@click="marks.italic.command"
+				>
+					<icon name="italic" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': marks.italic.active() }"
-						@click="marks.italic.command"
-					>
-						<icon name="italic" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': marks.code.active() }"
+					@click="marks.code.command"
+				>
+					<icon name="code" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': marks.code.active() }"
-						@click="marks.code.command"
-					>
-						<icon name="code" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.todo_list.active() }"
+					@click="nodes.todo_list.command"
+				>
+					<icon name="checklist" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.todo_list.active() }"
-						@click="nodes.todo_list.command"
-					>
-						<icon name="checklist" />
-					</button>
+			</template>
+		</menu-bar>
 
-				</div>
-			</div>
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Todo List
-				</h2>
-				<p>
-					There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
-				</p>
-				<ul data-type="todo_list">
-					<li data-type="todo_item" data-done="true">
-						Buy beer
-					</li>
-					<li data-type="todo_item" data-done="true">
-						Buy meat
-					</li>
-					<li data-type="todo_item" data-done="true">
-						Buy milk
-					</li>
-					<li data-type="todo_item" data-done="false">
-						Call mom
-					</li>
-				</ul>
-			</div>
-
-		</editor>
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, MenuBar } from 'tiptap'
 import {
 	CodeBlockNode,
 	HardBreakNode,
@@ -83,24 +58,51 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBar,
 		Icon,
 	},
 	data() {
 		return {
-			customProp: 2,
-			extensions: [
-				new CodeBlockNode(),
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new TodoItemNode(),
-				new TodoListNode(),
-				new BoldMark(),
-				new CodeMark(),
-				new ItalicMark(),
-			],
+			editor: new Editor({
+				extensions: [
+					new CodeBlockNode(),
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new TodoItemNode(),
+					new TodoListNode(),
+					new BoldMark(),
+					new CodeMark(),
+					new ItalicMark(),
+				],
+				content: `
+					<h2>
+						Todo List
+					</h2>
+					<p>
+						There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
+					</p>
+					<ul data-type="todo_list">
+						<li data-type="todo_item" data-done="true">
+							Buy beer
+						</li>
+						<li data-type="todo_item" data-done="true">
+							Buy meat
+						</li>
+						<li data-type="todo_item" data-done="true">
+							Buy milk
+						</li>
+						<li data-type="todo_item" data-done="false">
+							Call mom
+						</li>
+					</ul>
+				`,
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>