fix menububble example

examples/Components/Routes/MenuBubble/index.vue

@@ -1,53 +1,42 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<menu-bubble class="menubar" :editor="editor">
+			<template slot-scope="{ nodes, marks }">
 
-			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
+				<button
-				<template v-if="marks">
+					class="menububble__button"
+					:class="{ 'is-active': marks.bold.active() }"
+					@click="marks.bold.command"
+				>
+					<icon name="bold" />
+				</button>
 
-					<button
+				<button
-						class="menububble__button"
+					class="menububble__button"
-						:class="{ 'is-active': marks.bold.active() }"
+					:class="{ 'is-active': marks.italic.active() }"
-						@click="marks.bold.command"
+					@click="marks.italic.command"
-					>
+				>
-						<icon name="bold" />
+					<icon name="italic" />
-					</button>
+				</button>
 
-					<button
+				<button
-						class="menububble__button"
+					class="menububble__button"
-						:class="{ 'is-active': marks.italic.active() }"
+					:class="{ 'is-active': marks.code.active() }"
-						@click="marks.italic.command"
+					@click="marks.code.command"
-					>
+				>
-						<icon name="italic" />
+					<icon name="code" />
-					</button>
+				</button>
 
-					<button
+			</template>
-						class="menububble__button"
+		</menu-bubble>
-						:class="{ 'is-active': marks.code.active() }"
-						@click="marks.code.command"
-					>
-						<icon name="code" />
-					</button>
 
-				</template>
+		<editor-content class="editor__content" :editor="editor" />
-			</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>
 	</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: [
+			editor: new Editor({
-				new BlockquoteNode(),
+				editable: true,
-				new BulletListNode(),
+				extensions: [
-				new CodeBlockNode(),
+					new BlockquoteNode(),
-				new HardBreakNode(),
+					new BulletListNode(),
-				new HeadingNode({ maxLevel: 3 }),
+					new CodeBlockNode(),
-				new ListItemNode(),
+					new HardBreakNode(),
-				new OrderedListNode(),
+					new HeadingNode({ maxLevel: 3 }),
-				new TodoItemNode(),
+					new ListItemNode(),
-				new TodoListNode(),
+					new OrderedListNode(),
-				new BoldMark(),
+					new TodoItemNode(),
-				new CodeMark(),
+					new TodoListNode(),
-				new ItalicMark(),
+					new BoldMark(),
-				new LinkMark(),
+					new CodeMark(),
-				new HistoryExtension(),
+					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>
+				`,
+			}),
 		}
 	},
 }

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,
+			}))
+		}
+	},
+}

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'

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', {
-		// this.$emit('update', {
+			getHTML: this.getHTML,
-		// 	getHTML: this.getHTML,
+			getJSON: this.getJSON,
-		// 	getJSON: this.getJSON,
+			state: this.state,
-		// 	state: this.state,
+		})
-		// })
 	}
 
 	getHTML() {