fix menububble example

examples/Components/Routes/MenuBubble/index.vue

@@ -1,9 +1,7 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-
-			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
-				<template v-if="marks">
+	<div class="editor">
+		<menu-bubble class="menubar" :editor="editor">
+			<template slot-scope="{ nodes, marks }">
 
 				<button
 					class="menububble__button"
@@ -30,24 +28,15 @@
 				</button>
 
 			</template>
-			</div>
+		</menu-bubble>
 
-			<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,16 +51,21 @@ import {
 	CodeMark,
 	ItalicMark,
 	LinkMark,
+	StrikeMark,
+	UnderlineMark,
 	HistoryExtension,
 } from 'tiptap-extensions'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBubble,
 		Icon,
 	},
 	data() {
 		return {
+			editor: new Editor({
+				editable: true,
 				extensions: [
 					new BlockquoteNode(),
 					new BulletListNode(),
@@ -86,8 +80,19 @@ export default {
 					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>
+				`,
+			}),
 		}
 	},
 }

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