From 3718591d3326725da73d97191b19415748086f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 22 Oct 2018 17:40:55 +0200
Subject: [PATCH] fix menububble example

---
 .../Components/Routes/MenuBubble/index.vue    | 117 +++++++++---------
 packages/tiptap/src/Components/MenuBubble.js  |  16 +++
 packages/tiptap/src/index.js                  |   1 +
 packages/tiptap/src/utils/Editor.js           |  24 ++--
 4 files changed, 95 insertions(+), 63 deletions(-)
 create mode 100644 packages/tiptap/src/Components/MenuBubble.js

diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index fd5e11ef..d2c36fb9 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,53 +1,42 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
+	<div class="editor">
+		<menu-bubble class="menubar" :editor="editor">
+			<template slot-scope="{ nodes, marks }">
 
-			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
-				<template v-if="marks">
+				<button
+					class="menububble__button"
+					:class="{ 'is-active': marks.bold.active() }"
+					@click="marks.bold.command"
+				>
+					<icon name="bold" />
+				</button>
 
-					<button
-						class="menububble__button"
-						:class="{ 'is-active': marks.bold.active() }"
-						@click="marks.bold.command"
-					>
-						<icon name="bold" />
-					</button>
+				<button
+					class="menububble__button"
+					:class="{ 'is-active': marks.italic.active() }"
+					@click="marks.italic.command"
+				>
+					<icon name="italic" />
+				</button>
 
-					<button
-						class="menububble__button"
-						:class="{ 'is-active': marks.italic.active() }"
-						@click="marks.italic.command"
-					>
-						<icon name="italic" />
-					</button>
+				<button
+					class="menububble__button"
+					:class="{ 'is-active': marks.code.active() }"
+					@click="marks.code.command"
+				>
+					<icon name="code" />
+				</button>
 
-					<button
-						class="menububble__button"
-						:class="{ 'is-active': marks.code.active() }"
-						@click="marks.code.command"
-					>
-						<icon name="code" />
-					</button>
+			</template>
+		</menu-bubble>
 
-				</template>
-			</div>
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Menu Bubble
-				</h2>
-				<p>
-					Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
-				</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, MenuBubble } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -62,32 +51,48 @@ import {
 	CodeMark,
 	ItalicMark,
 	LinkMark,
+	StrikeMark,
+	UnderlineMark,
 	HistoryExtension,
 } from 'tiptap-extensions'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBubble,
 		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({
+				editable: true,
+				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 StrikeMark(),
+					new UnderlineMark(),
+					new HistoryExtension(),
+				],
+				content: `
+					<h2>
+						Menu Bubble
+					</h2>
+					<p>
+						Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
+					</p>
+				`,
+			}),
 		}
 	},
 }
diff --git a/packages/tiptap/src/Components/MenuBubble.js b/packages/tiptap/src/Components/MenuBubble.js
new file mode 100644
index 00000000..6a6dd9b3
--- /dev/null
+++ b/packages/tiptap/src/Components/MenuBubble.js
@@ -0,0 +1,16 @@
+export default {
+	props: {
+		editor: {
+			default: null,
+			type: Object,
+		},
+	},
+	render(createElement) {
+		if (this.editor) {
+			return createElement('div', this.$scopedSlots.default({
+				nodes: this.editor.menuActions.nodes,
+				marks: this.editor.menuActions.marks,
+			}))
+		}
+	},
+}
\ No newline at end of file
diff --git a/packages/tiptap/src/index.js b/packages/tiptap/src/index.js
index b587ada5..de8e08f7 100644
--- a/packages/tiptap/src/index.js
+++ b/packages/tiptap/src/index.js
@@ -1,6 +1,7 @@
 export { default as Editor } from './Utils/Editor'
 export { default as EditorContent } from './Components/EditorContent'
 export { default as MenuBar } from './Components/MenuBar'
+export { default as MenuBubble } from './Components/MenuBubble'
 
 export { default as Extension } from './Utils/Extension'
 export { default as Node } from './Utils/Node'
diff --git a/packages/tiptap/src/utils/Editor.js b/packages/tiptap/src/utils/Editor.js
index 8825a5ff..ff4623f8 100644
--- a/packages/tiptap/src/utils/Editor.js
+++ b/packages/tiptap/src/utils/Editor.js
@@ -21,10 +21,21 @@ import builtInNodes from '../Nodes'
 export default class Editor {
 
 	constructor(options = {}) {
+
+		const defaultOptions = {
+			content: '',
+			on: {
+				update: () => {},
+			},
+		}
+
 		this.element = document.createElement('div')
 		this.bus = new Vue()
 
-		this.options = options
+		this.options = {
+			...defaultOptions,
+			...options,
+		}
 		this.extensions = this.createExtensions()
 		this.nodes = this.createNodes()
 		this.marks = this.createMarks()
@@ -171,12 +182,11 @@ export default class Editor {
 	}
 
 	emitUpdate() {
-		console.log(this.getHTML())
-		// this.$emit('update', {
-		// 	getHTML: this.getHTML,
-		// 	getJSON: this.getJSON,
-		// 	state: this.state,
-		// })
+		this.emit('update', {
+			getHTML: this.getHTML,
+			getJSON: this.getJSON,
+			state: this.state,
+		})
 	}
 
 	getHTML() {