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>