diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue index c48104fd..ff08520e 100644 --- a/docs/src/demos/Nodes/Mention/MentionList.vue +++ b/docs/src/demos/Nodes/Mention/MentionList.vue @@ -94,6 +94,7 @@ export default { 0px 10px 20px rgba(0, 0, 0, 0.1), ; } + .item { display: block; width: 100%; diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts index a7412c2c..c5e2cd94 100644 --- a/packages/extension-mention/src/mention.ts +++ b/packages/extension-mention/src/mention.ts @@ -15,6 +15,14 @@ export const Mention = Node.create({ HTMLAttributes: {}, suggestionOptions: { char: '@', + command: ({ editor, range, attributes }) => { + editor + .chain() + .focus() + .replace(range, 'mention', attributes) + .insertText(' ') + .run() + }, }, }, @@ -69,14 +77,6 @@ export const Mention = Node.create({ Suggestion({ editor: this.editor, ...this.options.suggestionOptions, - command: ({ range, attributes }) => { - this.editor - .chain() - .focus() - .replace(range, 'mention', attributes) - .insertText(' ') - .run() - }, }), ] }, diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts index 685bf898..4a04b524 100644 --- a/packages/suggestion/src/suggestion.ts +++ b/packages/suggestion/src/suggestion.ts @@ -8,8 +8,13 @@ export interface SuggestionOptions { char?: string, allowSpaces?: boolean, startOfLine?: boolean, - suggestionClass?: string, - command?: (props: { range: Range, attributes: AnyObject }) => void, + decorationTag?: string, + decorationClass?: string, + command?: (props: { + editor: Editor, + range: Range, + attributes: AnyObject + }) => void, items?: (query: string) => any[], render?: () => { onStart?: (props: SuggestionProps) => void, @@ -41,7 +46,8 @@ export function Suggestion({ char = '@', allowSpaces = false, startOfLine = false, - suggestionClass = 'suggestion', + decorationTag = 'span', + decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), @@ -83,7 +89,11 @@ export function Suggestion({ ? await items(state.query) : [], command: attributes => { - command({ range: state.range, attributes }) + command({ + editor, + range: state.range, + attributes, + }) }, decorationNode, // virtual node for popper.js or tippy.js @@ -186,8 +196,8 @@ export function Suggestion({ return DecorationSet.create(state.doc, [ Decoration.inline(range.from, range.to, { - nodeName: 'span', - class: suggestionClass, + nodeName: decorationTag, + class: decorationClass, 'data-decoration-id': decorationId, }), ])