add command for mentions

examples/Components/Routes/Mentions/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions">
+		<editor class="editor" :extensions="extensions" ref="editor">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
@@ -12,6 +12,12 @@
 			</div>
 
 		</editor>
+
+		<div class="suggestions">
+			<div v-for="user in users" :key="user.id" @click="selectUser(user)">
+				{{ user.name }}
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -51,14 +57,14 @@ export default {
 				new HeadingNode({ maxLevel: 3 }),
 				new ListItemNode(),
 				new MentionNode({
-					onEnter(args) {
+					onEnter: args => {
-						console.log('start', args);
+						console.log('start', args)
 					},
-					onChange(args) {
+					onChange: args => {
-						console.log('change', args);
+						console.log('change', args)
 					},
-					onExit(args) {
+					onExit: args => {
-						console.log('stop', args);
+						console.log('stop', args)
 					},
 				}),
 				new OrderedListNode(),
@@ -70,8 +76,27 @@ export default {
 				new LinkMark(),
 				new HistoryExtension(),
 			],
+			users: [
+				{
+					name: 'Philipp Kühn',
+					id: 1,
+				},
+				{
+					name: 'Hans Pagel',
+					id: 2,
+				},
+			],
 		}
 	},
+	methods: {
+		selectUser(user) {
+			this.$refs.editor.menuActions.nodes.mention.command({
+				type: 'user',
+				id: user.id,
+				label: user.name,
+			})
+		},
+	},
 }
 </script>
 
@@ -86,4 +111,9 @@ export default {
   border-radius: 5px;
   padding: 0.2rem 0.5rem;
 }
+
+.suggestions {
+	max-width: 30rem;
+	margin: 0 auto 2rem auto;
+}
 </style>

packages/tiptap-commands/src/commands/setInlineBlockType.js

@@ -0,0 +1,16 @@
+export default function (type, attrs = {}) {
+	return (state, dispatch) => {
+		const { $from } = state.selection
+		const index = $from.index()
+
+		if (!$from.parent.canReplaceWith(index, index, type)) {
+			return false
+		}
+
+		if (dispatch) {
+			dispatch(state.tr.replaceSelectionWith(type.create(attrs)))
+		}
+
+		return true
+	}
+}

packages/tiptap-commands/src/index.js

@@ -40,6 +40,7 @@ import {
 
 import markInputRule from './commands/markInputRule'
 import removeMark from './commands/removeMark'
+import setInlineBlockType from './commands/setInlineBlockType'
 import splitToDefaultListItem from './commands/splitToDefaultListItem'
 import toggleBlockType from './commands/toggleBlockType'
 import toggleList from './commands/toggleList'
@@ -86,6 +87,7 @@ export {
 	// custom
 	markInputRule,
 	removeMark,
+	setInlineBlockType,
 	splitToDefaultListItem,
 	toggleBlockType,
 	toggleList,

packages/tiptap-extensions/src/nodes/Mention.js

@@ -1,4 +1,5 @@
 import { Node } from 'tiptap'
+import { setInlineBlockType } from 'tiptap-commands'
 import { triggerCharacter, suggestionsPlugin } from '../plugins/suggestions'
 
 export default class MentionNode extends Node {
@@ -41,6 +42,10 @@ export default class MentionNode extends Node {
 		}
 	}
 
+	command({ type, attrs }) {
+		return setInlineBlockType(type, attrs)
+	}
+
 	get plugins() {
 		return [
 			suggestionsPlugin({