pass extension option to plugin

examples/Components/App/style.scss

@@ -169,15 +169,6 @@
   }
 }
 
-.mention {
-  background: rgba($color-black, 0.1);
-  color: rgba($color-black, 0.6);
-  font-size: 0.8rem;
-  font-weight: bold;
-  border-radius: 5px;
-  padding: 0.2rem 0.5rem;
-}
-
 ul[data-type="todo_list"] {
   padding-left: 0;
 }

examples/Components/Routes/Mentions/index.vue

@@ -50,7 +50,17 @@ export default {
 				new HardBreakNode(),
 				new HeadingNode({ maxLevel: 3 }),
 				new ListItemNode(),
-				new MentionNode(),
+				new MentionNode({
+					onEnter(args) {
+						console.log('start', args);
+					},
+					onChange(args) {
+						console.log('change', args);
+					},
+					onExit(args) {
+						console.log('stop', args);
+					},
+				}),
 				new OrderedListNode(),
 				new TodoItemNode(),
 				new TodoListNode(),
@@ -63,4 +73,17 @@ export default {
 		}
 	},
 }
-</script>
+</script>
+
+<style lang="scss">
+@import "~variables";
+
+.mention {
+  background: rgba($color-black, 0.1);
+  color: rgba($color-black, 0.6);
+  font-size: 0.8rem;
+  font-weight: bold;
+  border-radius: 5px;
+  padding: 0.2rem 0.5rem;
+}
+</style>

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

@@ -1,10 +1,10 @@
 import { Node } from 'tiptap'
 import { triggerCharacter, suggestionsPlugin } from '../plugins/suggestions'
 
-export default class BlockquoteNode extends Node {
+export default class MentionNode extends Node {
 
 	get name() {
-		return 'blockquote'
+		return 'mention'
 	}
 
 	get schema() {
@@ -49,19 +49,10 @@ export default class BlockquoteNode extends Node {
 					allowSpaces: true,
 					startOfLine: false,
 				}),
-				onEnter(args) {
-					console.log('start', args);
-				},
-				onChange(args) {
-					console.log('change', args);
-				},
-				onExit(args) {
-					console.log('stop', args);
-				},
-				onKeyDown({ view, event }) {
-					// console.log(event.key);
-					return false;
-				},
+				onEnter: this.options.onEnter,
+				onChange: this.options.onChange,
+				onExit: this.options.onExit,
+				onKeyDown: this.options.onKeyDown,
 			}),
 		]
 	}