add basic new commands

examples/Components/Routes/Basic/index.vue

@@ -1,7 +1,39 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes, marks }">
+			<template slot-scope="{ nodes, marks, newCommands }">
+
+				<button
+					class="menubar__button"
+					@click="newCommands.history"
+					v-if="newCommands.history"
+				>
+					⬅
+				</button>
+
+				<button
+					class="menubar__button"
+					@click="newCommands.undo"
+					v-if="newCommands.undo"
+				>
+					⬅
+				</button>
+
+				<button
+					class="menubar__button"
+					@click="newCommands.redo"
+					v-if="newCommands.redo"
+				>
+					➡
+				</button>
+
+				<button
+					class="menubar__button"
+					@click="newCommands.undoRedo"
+					v-if="newCommands.undoRedo"
+				>
+					undoredo
+				</button>
 
 				<button
 					class="menubar__button"

packages/tiptap-extensions/src/extensions/History.js

@@ -1,5 +1,6 @@
 import { Extension } from 'tiptap'
 import { history, undo, redo } from 'prosemirror-history'
+import { setBlockType, textblockTypeInputRule, toggleBlockType } from 'tiptap-commands'
 
 export default class History extends Extension {
 
@@ -27,4 +28,11 @@ export default class History extends Extension {
 		]
 	}
 
+	commands() {
+		return {
+			undo: () => undo,
+			redo: () => redo,
+		}
+	}
+
 }

packages/tiptap/src/Components/MenuBar.js

@@ -12,7 +12,8 @@ export default {
 				marks: this.editor.menuActions.marks,
 				focused: this.editor.view.focused,
 				focus: this.editor.focus,
+				newCommands: this.editor.newCommands,
 			}))
 		}
 	},
-}
+}

packages/tiptap/src/utils/Editor.js

@@ -14,7 +14,7 @@ import {
 	// menuBubble,
 	// floatingMenu,
 	builtInKeymap,
-} from '../Utils'
+} from '.'
 
 import builtInNodes from '../Nodes'
 
@@ -52,10 +52,18 @@ export default class Editor {
 		this.state = this.createState()
 		this.view = this.createView()
 		this.commands = this.createCommands()
+
+		this.newCommands = this.extensions.newCommands({
+			schema: this.schema,
+			view: this.view,
+		})
+
+		console.log(this.newCommands)
+
 		this.updateMenuActions()
 
 		this.emit('init')
-	} 
+	}
 
 	createExtensions() {
 		return new ExtensionManager([
@@ -270,4 +278,4 @@ export default class Editor {
 		}
 	}
 
-}
+}

packages/tiptap/src/utils/ExtensionManager.js

@@ -107,4 +107,40 @@ export default class ExtensionManager {
 			}), {})
 	}
 
+	newCommands({ schema, view }) {
+		return this.extensions
+			.filter(extension => extension.commands)
+			.reduce((allCommands, { name, type, commands: provider }) => {
+
+				const commands = {}
+				const value = provider({
+					schema,
+					...['node', 'mark'].includes(type) ? {
+						type: schema[`${type}s`][name],
+					} : {},
+				})
+
+				if (Array.isArray(value)) {
+					commands[name] = attrs => value
+						.forEach(callback => callback(attrs)(view.state, view.dispatch, view))
+				} else if (typeof value === 'function') {
+					commands[name] = attrs => value(attrs)(view.state, view.dispatch, view)
+				} else if (typeof value === 'object') {
+					Object.entries(value).forEach(([commandName, commandValue]) => {
+						if (Array.isArray(commandValue)) {
+							commands[commandName] = attrs => commandValue
+								.forEach(callback => callback(attrs)(view.state, view.dispatch, view))
+						} else {
+							commands[commandName] = attrs => commandValue(attrs)(view.state, view.dispatch, view)
+						}
+					})
+				}
+
+				return {
+					...allCommands,
+					...commands,
+				}
+			}, {})
+	}
+
 }