diff --git a/examples/Components/App/style.scss b/examples/Components/App/style.scss index 5fe96941..60a7335c 100644 --- a/examples/Components/App/style.scss +++ b/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; } diff --git a/examples/Components/Routes/Mentions/index.vue b/examples/Components/Routes/Mentions/index.vue index a81db4b3..d620aaca 100644 --- a/examples/Components/Routes/Mentions/index.vue +++ b/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 { } }, } - \ No newline at end of file + + + diff --git a/packages/tiptap-extensions/src/nodes/Mention.js b/packages/tiptap-extensions/src/nodes/Mention.js index 0e9a1cd8..c0647b07 100644 --- a/packages/tiptap-extensions/src/nodes/Mention.js +++ b/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, }), ] }