diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 4587ba05..3c163d17 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import tippy, { sticky } from 'tippy.js'
+import tippy from 'tippy.js'
 import { Editor, EditorContent, VueRenderer } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -34,7 +34,7 @@ export default {
           items: query => {
             return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
           },
-          renderer: () => {
+          render: () => {
             let component
             let popup
 
diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md
index 61131af4..4762e50a 100644
--- a/docs/src/docPages/api/commands.md
+++ b/docs/src/docPages/api/commands.md
@@ -147,6 +147,7 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .lift()                 | Removes an existing wrap.                                 |
 | .liftEmptyBlock()       | Lift block if empty.                                      |
 | .newlineInCode()        | Add a newline character in code.                          |
+| .replace()              | Replaces text with a node within a range.                 |
 | .resetNodeAttributes()  | Resets all node attributes to the default value.          |
 | .selectParentNode()     | Select the parent node.                                   |
 | .setMark()              | Add a mark with new attributes.                           |
diff --git a/packages/core/src/commands/replace.ts b/packages/core/src/commands/replace.ts
new file mode 100644
index 00000000..3ce34450
--- /dev/null
+++ b/packages/core/src/commands/replace.ts
@@ -0,0 +1,29 @@
+import { NodeType } from 'prosemirror-model'
+import getNodeType from '../helpers/getNodeType'
+import { Command } from '../types'
+
+export type Range = {
+  from: number,
+  to: number,
+}
+
+/**
+ * Replaces text with a node within a range.
+ */
+export const replace = (range: Range | null = null, typeOrName: string | NodeType, attrs = {}): Command => ({ tr, state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
+  const { $from, $to } = state.selection
+  const index = $from.index()
+  const from = range ? range.from : $from.pos
+  const to = range ? range.to : $to.pos
+
+  if (!$from.parent.canReplaceWith(index, index, type)) {
+    return false
+  }
+
+  if (dispatch) {
+    tr.replaceWith(from, to, type.create(attrs))
+  }
+
+  return true
+}
diff --git a/packages/core/src/extensions/commands.ts b/packages/core/src/extensions/commands.ts
index a17a13ca..c52f3da1 100644
--- a/packages/core/src/extensions/commands.ts
+++ b/packages/core/src/extensions/commands.ts
@@ -17,6 +17,7 @@ import * as lift from '../commands/lift'
 import * as liftEmptyBlock from '../commands/liftEmptyBlock'
 import * as liftListItem from '../commands/liftListItem'
 import * as newlineInCode from '../commands/newlineInCode'
+import * as replace from '../commands/replace'
 import * as resetNodeAttributes from '../commands/resetNodeAttributes'
 import * as scrollIntoView from '../commands/scrollIntoView'
 import * as selectAll from '../commands/selectAll'
@@ -63,6 +64,7 @@ export const Commands = Extension.create({
       ...liftEmptyBlock,
       ...liftListItem,
       ...newlineInCode,
+      ...replace,
       ...resetNodeAttributes,
       ...scrollIntoView,
       ...selectAll,
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 7ee51c1a..ff8edb96 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -8,7 +8,7 @@ export const Mention = Node.create({
 
   defaultOptions: <MentionOptions>{
     char: '@',
-    renderer: () => ({}),
+    render: () => ({}),
   },
 
   group: 'inline',
@@ -47,6 +47,13 @@ export const Mention = Node.create({
       Suggestion({
         editor: this.editor,
         ...this.options,
+        command: ({ range }) => {
+          this.editor
+            .chain()
+            .replace(range, 'mention')
+            .insertText(' ')
+            .run()
+        },
       }),
     ]
   },
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 9f553606..7cc86058 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -10,9 +10,9 @@ export interface SuggestionOptions {
   allowSpaces?: boolean,
   startOfLine?: boolean,
   suggestionClass?: string,
-  command?: () => any,
+  command?: (props: any) => any,
   items?: (query: string) => any[],
-  renderer?: () => {
+  render?: () => {
     onStart?: (props: any) => void,
     onUpdate?: (props: any) => void,
     onExit?: (props: any) => void,
@@ -21,21 +21,16 @@ export interface SuggestionOptions {
 }
 
 export function Suggestion({
-  editor,
   char = '@',
   allowSpaces = false,
   startOfLine = false,
   suggestionClass = 'suggestion',
   command = () => null,
   items = () => [],
-  // onStart = () => null,
-  // onUpdate = () => null,
-  // onExit = () => null,
-  // onKeyDown = () => null,
-  renderer = () => ({}),
+  render = () => ({}),
 }: SuggestionOptions) {
 
-  const testRenderer = renderer?.()
+  const renderer = render?.()
 
   return new Plugin({
     key: new PluginKey('suggestions'),
@@ -67,45 +62,30 @@ export function Suggestion({
             range: state.range,
             query: state.query,
             text: state.text,
+            items: (handleChange || handleStart)
+              ? await items(state.query)
+              : [],
+            command: () => {
+              command({ range: state.range })
+            },
             decorationNode,
             // build a virtual node for popper.js or tippy.js
             // this can be used for building popups without a DOM node
             virtualNode: decorationNode
               ? getVirtualNode(decorationNode)
               : null,
-            items: (handleChange || handleStart)
-              ? await items(state.query)
-              : [],
-            command: () => {
-              console.log('command')
-            },
-            // command: ({ range, attrs }) => {
-            //   command({
-            //     range,
-            //     attrs,
-            //     schema: view.state.schema,
-            //   })(view.state, view.dispatch, view)
-
-            //   if (appendText) {
-            //     insertText(appendText)(view.state, view.dispatch, view)
-            //   }
-            // },
-          }
-
-          // Trigger the hooks when necessary
-          if (handleExit) {
-            // onExit(props)
-            testRenderer?.onExit?.(props)
-          }
-
-          if (handleChange) {
-            // onUpdate(props)
-            testRenderer?.onUpdate?.(props)
           }
 
           if (handleStart) {
-            // onStart(props)
-            testRenderer?.onStart?.(props)
+            renderer?.onStart?.(props)
+          }
+
+          if (handleChange) {
+            renderer?.onUpdate?.(props)
+          }
+
+          if (handleExit) {
+            renderer?.onExit?.(props)
           }
         },
       }
@@ -123,8 +103,8 @@ export function Suggestion({
       },
 
       // Apply changes to the plugin state from a view transaction.
-      apply(tr, prev) {
-        const { selection } = tr
+      apply(transaction, prev) {
+        const { selection } = transaction
         const next = { ...prev }
 
         // We can only be suggesting if there is no selection
@@ -178,7 +158,7 @@ export function Suggestion({
           return false
         }
 
-        return testRenderer?.onKeyDown?.({ view, event, range }) || false
+        return renderer?.onKeyDown?.({ view, event, range }) || false
       },
 
       // Setup decorator on the currently active suggestion.