add isActive function

examples/Components/Routes/Basic/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes, marks, commands }">
+			<template slot-scope="{ nodes, marks, commands, isActive }">
 
 				<button
 					class="menubar__button"
@@ -19,7 +19,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.bold.active() }"
+					:class="{ 'is-active': isActive('bold') }"
 					@click="commands.bold"
 				>
 					<icon name="bold" />
@@ -27,7 +27,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.italic.active() }"
+					:class="{ 'is-active': isActive('italic') }"
 					@click="commands.italic"
 				>
 					<icon name="italic" />
@@ -35,7 +35,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.strike.active() }"
+					:class="{ 'is-active': isActive('strike') }"
 					@click="commands.strike"
 				>
 					<icon name="strike" />
@@ -43,7 +43,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.underline.active() }"
+					:class="{ 'is-active': isActive('underline') }"
 					@click="commands.underline"
 				>
 					<icon name="underline" />
@@ -51,7 +51,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.code.active() }"
+					:class="{ 'is-active': isActive('code') }"
 					@click="commands.code"
 				>
 					<icon name="code" />
@@ -59,7 +59,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.paragraph.active() }"
+					:class="{ 'is-active': isActive('paragraph') }"
 					@click="commands.paragraph"
 				>
 					<icon name="paragraph" />
@@ -67,7 +67,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+					:class="{ 'is-active': isActive('heading', { level: 1 }) }"
 					@click="commands.heading({ level: 1 })"
 				>
 					H1
@@ -75,7 +75,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+					:class="{ 'is-active': isActive('heading', { level: 2 }) }"
 					@click="commands.heading({ level: 2 })"
 				>
 					H2
@@ -83,7 +83,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+					:class="{ 'is-active': isActive('heading', { level: 3 }) }"
 					@click="commands.heading({ level: 3 })"
 				>
 					H3
@@ -91,7 +91,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.bullet_list.active() }"
+					:class="{ 'is-active': isActive('bullet_list') }"
 					@click="commands.bullet_list"
 				>
 					<icon name="ul" />
@@ -99,7 +99,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.ordered_list.active() }"
+					:class="{ 'is-active': isActive('ordered_list') }"
 					@click="commands.ordered_list"
 				>
 					<icon name="ol" />
@@ -107,7 +107,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.blockquote.active() }"
+					:class="{ 'is-active': isActive('blockquote') }"
 					@click="commands.blockquote"
 				>
 					<icon name="quote" />
@@ -115,7 +115,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.code_block.active() }"
+					:class="{ 'is-active': isActive('code_block') }"
 					@click="commands.code_block"
 				>
 					<icon name="code" />

packages/tiptap/src/Components/MenuBar.js

@@ -13,6 +13,7 @@ export default {
 				focused: this.editor.view.focused,
 				focus: this.editor.focus,
 				commands: this.editor.commands,
+				isActive: this.editor.isActive.bind(this.editor),
 			}))
 		}
 	},

packages/tiptap/src/utils/Editor.js

@@ -6,9 +6,9 @@ import { gapCursor } from 'prosemirror-gapcursor'
 import { keymap } from 'prosemirror-keymap'
 import { baseKeymap } from 'prosemirror-commands'
 import { inputRules } from 'prosemirror-inputrules'
+import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
 
 import {
-	buildMenuActions,
 	ExtensionManager,
 	initNodeViews,
 	// menuBubble,
@@ -52,9 +52,7 @@ export default class Editor {
 		this.state = this.createState()
 		this.view = this.createView()
 		this.commands = this.createCommands()
-
-		this.updateMenuActions()
-
+		this.getActiveNodesAndMarks()
 		this.emit('init')
 	}
 
@@ -178,7 +176,7 @@ export default class Editor {
 	dispatchTransaction(transaction) {
 		this.state = this.state.apply(transaction)
 		this.view.updateState(this.state)
-		this.updateMenuActions()
+		this.getActiveNodesAndMarks()
 
 		if (!transaction.docChanged) {
 			return
@@ -233,13 +231,20 @@ export default class Editor {
 		}, emitUpdate)
 	}
 
-	updateMenuActions() {
-		this.menuActions = buildMenuActions({
-			editable: this.options.editable,
-			schema: this.schema,
-			state: this.view.state,
-			commands: this.commands,
-		})
+	getActiveNodesAndMarks() {
+		this.activeMarks = Object
+			.entries(this.schema.marks)
+			.reduce((marks, [name, mark]) => ({
+				...marks,
+				[name]: (attrs = {}) => markIsActive(this.state, mark, attrs),
+			}), {})
+
+		this.activeNodes = Object
+			.entries(this.schema.nodes)
+			.reduce((nodes, [name, node]) => ({
+				...nodes,
+				[name]: (attrs = {}) => nodeIsActive(this.state, node, attrs),
+			}), {})
 	}
 
 	focus() {
@@ -263,6 +268,19 @@ export default class Editor {
 		}
 	}
 
+	isActive(type = null, attrs = {}) {
+		const types = {
+			...this.activeMarks,
+			...this.activeNodes,
+		}
+
+		if (!types[type]) {
+			return false
+		}
+
+		return types[type](attrs)
+	}
+
 	destroy() {
 		this.emit('destroy')
 

packages/tiptap/src/utils/buildMenuActions.js

@@ -1,6 +1,8 @@
 import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
 
-export default function ({ schema, state, commands, editable }) {
+export default function ({
+ schema, state, commands, editable,
+}) {
 
 	const nodes = Object.entries(schema.nodes)
 		.map(([name]) => {
@@ -10,7 +12,7 @@ export default function ({ schema, state, commands, editable }) {
 			return {
 				name,
 				active,
-				command: editable ? command : () => {}
+				command: editable ? command : () => {},
 			}
 		})
 		.reduce((actions, { name, active, command }) => ({
@@ -31,7 +33,7 @@ export default function ({ schema, state, commands, editable }) {
 				name,
 				active,
 				attrs,
-				command: editable ? command : () => {}
+				command: editable ? command : () => {},
 			}
 		})
 		.reduce((actions, {