diff --git a/examples/Components/Routes/Mentions/index.vue b/examples/Components/Routes/Mentions/index.vue index d620aaca..72ed73ee 100644 --- a/examples/Components/Routes/Mentions/index.vue +++ b/examples/Components/Routes/Mentions/index.vue @@ -1,6 +1,6 @@ @@ -51,14 +57,14 @@ export default { new HeadingNode({ maxLevel: 3 }), new ListItemNode(), new MentionNode({ - onEnter(args) { - console.log('start', args); + onEnter: args => { + console.log('start', args) }, - onChange(args) { - console.log('change', args); + onChange: args => { + console.log('change', args) }, - onExit(args) { - console.log('stop', args); + onExit: 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, + }) + }, + }, } @@ -86,4 +111,9 @@ export default { border-radius: 5px; padding: 0.2rem 0.5rem; } + +.suggestions { + max-width: 30rem; + margin: 0 auto 2rem auto; +} diff --git a/packages/tiptap-commands/src/commands/setInlineBlockType.js b/packages/tiptap-commands/src/commands/setInlineBlockType.js new file mode 100644 index 00000000..4030f2be --- /dev/null +++ b/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 + } +} diff --git a/packages/tiptap-commands/src/index.js b/packages/tiptap-commands/src/index.js index 5738c992..020df252 100644 --- a/packages/tiptap-commands/src/index.js +++ b/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, diff --git a/packages/tiptap-extensions/src/nodes/Mention.js b/packages/tiptap-extensions/src/nodes/Mention.js index c0647b07..67f913a2 100644 --- a/packages/tiptap-extensions/src/nodes/Mention.js +++ b/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({