fix some examples

examples/Components/Routes/MarkdownShortcuts/index.vue

@@ -1,26 +1,12 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<editor-content class="editor__content" :editor="editor" />
-
-			<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>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -40,11 +26,12 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 		Icon,
 	},
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new BlockquoteNode(),
 					new BulletListNode(),
@@ -61,7 +48,22 @@ export default {
 					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>

examples/Components/Routes/Placeholder/index.vue

@@ -1,13 +1,11 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<editor-content class="editor__content" :editor="editor" />
-			<div class="editor__content" slot="content" slot-scope="props"></div>
-		</editor>
 	</div>
 </template>
 
 <script>
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	BulletListNode,
 	ListItemNode,
@@ -16,10 +14,11 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 	},
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new BulletListNode(),
 					new ListItemNode(),
@@ -27,8 +26,12 @@ export default {
 						emptyNodeClass: 'is-empty',
 					}),
 				],
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
 

examples/Components/Routes/ReadOnly/index.vue

@@ -1,22 +1,11 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor :editable="false" :extensions="extensions" class="editor">
+		<editor-content class="editor__content" :editor="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>
 </template>
 
 <script>
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	HardBreakNode,
 	HeadingNode,
@@ -28,10 +17,12 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 	},
 	data() {
 		return {
+			editor: new Editor({
+				editable: false,
 				extensions: [
 					new HardBreakNode(),
 					new HeadingNode({ maxLevel: 3 }),
@@ -40,7 +31,19 @@ export default {
 					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>

examples/Components/Routes/TextAlign/index.vue

@@ -1,9 +1,7 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<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"
@@ -29,25 +27,16 @@
 					<icon name="align-right" />
 				</button>
 			
-				</div>
+			</template>
-			</div>
+		</menu-bar>
 
-			<div class="editor__content" slot="content" slot-scope="props">
+		<editor-content class="editor__content" :editor="editor" />
-				<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>
 	</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 {
+			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>
 

examples/Components/Routes/TodoList/index.vue

@@ -1,9 +1,7 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor :extensions="extensions" 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"
@@ -37,10 +35,47 @@
 					<icon name="checklist" />
 				</button>
 
-				</div>
+			</template>
-			</div>
+		</menu-bar>
 
-			<div class="editor__content" slot="content" slot-scope="props">
+		<editor-content class="editor__content" :editor="editor" />
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor, EditorContent, MenuBar } from 'tiptap'
+import {
+	CodeBlockNode,
+	HardBreakNode,
+	HeadingNode,
+	TodoItemNode,
+	TodoListNode,
+	BoldMark,
+	CodeMark,
+	ItalicMark,
+} from 'tiptap-extensions'
+
+export default {
+	components: {
+		EditorContent,
+		MenuBar,
+		Icon,
+	},
+	data() {
+		return {
+			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>
@@ -61,46 +96,13 @@
 							Call mom
 						</li>
 					</ul>
-			</div>
+				`,
-
+			}),
-		</editor>
-	</div>
-</template>
-
-<script>
-import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
-import {
-	CodeBlockNode,
-	HardBreakNode,
-	HeadingNode,
-	TodoItemNode,
-	TodoListNode,
-	BoldMark,
-	CodeMark,
-	ItalicMark,
-} from 'tiptap-extensions'
-
-export default {
-	components: {
-		Editor,
-		Icon,
-	},
-	data() {
-		return {
-			customProp: 2,
-			extensions: [
-				new CodeBlockNode(),
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new TodoItemNode(),
-				new TodoListNode(),
-				new BoldMark(),
-				new CodeMark(),
-				new ItalicMark(),
-			],
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>