add menubar component

examples/Components/Routes/Basic/index.vue

@@ -2,6 +2,117 @@
 	<div>
 
 		<div class="editor">
+
+			<menu-bar class="menubar" :editor="editor">
+				<template slot-scope="{ nodes, marks }">
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.bold.active() }"
+						@click="marks.bold.command"
+					>
+						<icon name="bold" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.italic.active() }"
+						@click="marks.italic.command"
+					>
+						<icon name="italic" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.strike.active() }"
+						@click="marks.strike.command"
+					>
+						<icon name="strike" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.underline.active() }"
+						@click="marks.underline.command"
+					>
+						<icon name="underline" />
+					</button>
+
+					<button
+						class="menubar__button"
+						@click="marks.code.command"
+						:class="{ 'is-active': marks.code.active() }
+					">
+						<icon name="code" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.paragraph.active() }"
+						@click="nodes.paragraph.command"
+					>
+						<icon name="paragraph" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+						@click="nodes.heading.command({ level: 1 })"
+					>
+						H1
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+						@click="nodes.heading.command({ level: 2 })"
+					>
+						H2
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+						@click="nodes.heading.command({ level: 3 })"
+					>
+						H3
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.bullet_list.active() }"
+						@click="nodes.bullet_list.command"
+					>
+						<icon name="ul" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.ordered_list.active() }"
+						@click="nodes.ordered_list.command"
+					>
+						<icon name="ol" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.blockquote.active() }"
+						@click="nodes.blockquote.command"
+					>
+						<icon name="quote" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.code_block.active() }"
+						@click="nodes.code_block.command"
+					>
+						<icon name="code" />
+					</button>
+
+				</template>
+			</menu-bar>
+
 			<editor-content class="editor__content" :editor="editor" />
 		</div>
 
@@ -146,7 +257,7 @@
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor, EditorContent } from 'tiptap'
+import { Editor, EditorContent, MenuBar } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -169,6 +280,7 @@ import {
 export default {
 	components: {
 		EditorContent,
+		MenuBar,
 		Icon,
 	},
 	data() {

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'