add menubar component

packages/tiptap/src/Components/MenuBar.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,5 +1,6 @@
 export { default as Editor } from './Utils/Editor'
 export { default as EditorContent } from './Components/EditorContent'
+export { default as MenuBar } from './Components/MenuBar'
 
 export { default as Extension } from './Utils/Extension'
 export { default as Node } from './Utils/Node'

packages/tiptap/src/utils/Editor.js

@@ -8,7 +8,7 @@ import { baseKeymap } from 'prosemirror-commands'
 import { inputRules } from 'prosemirror-inputrules'
 
 import {
-	// buildMenuActions,
+	buildMenuActions,
 	ExtensionManager,
 	initNodeViews,
 	// menuBubble,
@@ -36,6 +36,7 @@ export default class Editor {
 		this.state = this.createState()
 		this.view = this.createView()
 		this.commands = this.createCommands()
+		this.updateMenuActions()
 
 		this.emit('init')
 	}
@@ -151,7 +152,7 @@ export default class Editor {
 	dispatchTransaction(transaction) {
 		this.state = this.state.apply(transaction)
 		this.view.updateState(this.state)
-		// this.updateMenuActions()
+		this.updateMenuActions()
 
 		if (!transaction.docChanged) {
 			return
@@ -222,6 +223,14 @@ export default class Editor {
 		}, emitUpdate)
 	}
 
+	updateMenuActions() {
+		this.menuActions = buildMenuActions({
+			schema: this.schema,
+			state: this.view.state,
+			commands: this.commands,
+		})
+	}
+
 	focus() {
 		this.view.focus()
 	}

packages/tiptap/src/utils/buildMenuActions.js

@@ -0,0 +1,47 @@
+import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
+
+export default function ({ schema, state, commands }) {
+
+	const nodes = Object.entries(schema.nodes)
+		.map(([name]) => {
+			const active = (attrs = {}) => nodeIsActive(state, schema.nodes[name], attrs)
+			const command = commands[name] ? commands[name] : () => {}
+			return { name, active, command }
+		})
+		.reduce((actions, { name, active, command }) => ({
+			...actions,
+			[name]: {
+				active,
+				command,
+			},
+		}), {})
+
+	const marks = Object.entries(schema.marks)
+		.map(([name]) => {
+			const active = () => markIsActive(state, schema.marks[name])
+			const attrs = getMarkAttrs(state, schema.marks[name])
+			const command = commands[name] ? commands[name] : () => {}
+			return {
+				name,
+				active,
+				attrs,
+				command,
+			}
+		})
+		.reduce((actions, {
+ name, active, attrs, command,
+}) => ({
+			...actions,
+			[name]: {
+				active,
+				attrs,
+				command,
+			},
+		}), {})
+
+	return {
+		nodes,
+		marks,
+	}
+
+}

packages/tiptap/src/utils/index.js

@@ -1,4 +1,4 @@
-// export { default as buildMenuActions } from './buildMenuActions'
+export { default as buildMenuActions } from './buildMenuActions'
 export { default as builtInKeymap } from './builtInKeymap'
 export { default as ComponentView } from './ComponentView'
 export { default as initNodeViews } from './initNodeViews'