diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index ae4add0b..5fb7f557 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -1,9 +1,17 @@
 import { Node } from '@tiptap/core'
 import Suggestion from '@tiptap/suggestion'
 
+export interface MentionOptions {
+  renderer: any,
+}
+
 export const Mention = Node.create({
   name: 'mention',
 
+  defaultOptions: <MentionOptions>{
+    renderer: null,
+  },
+
   group: 'inline',
 
   inline: true,
@@ -37,7 +45,11 @@ export const Mention = Node.create({
 
   addProseMirrorPlugins() {
     return [
-      Suggestion({}),
+      Suggestion({
+        editor: this.editor,
+        char: '@',
+        renderer: this.options.renderer,
+      }),
     ]
   },
 })
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 01b9a2cd..19213137 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -1,29 +1,40 @@
+import { Editor } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
 import { getVirtualNode } from './getVirtualNode'
 
+export interface SuggestionOptions {
+  editor: Editor,
+  char?: string,
+  allowSpaces?: boolean,
+  startOfLine?: boolean,
+  suggestionClass?: string,
+  command?: () => any,
+  items?: (query: string) => any[],
+  onStart?: (props: any) => any,
+  onUpdate?: (props: any) => any,
+  onExit?: (props: any) => any,
+  onKeyDown?: (props: any) => any,
+  renderer?: any,
+}
+
 export function Suggestion({
+  editor,
   char = '@',
   allowSpaces = false,
   startOfLine = false,
-  appendText = null,
   suggestionClass = 'suggestion',
-  command = () => false,
-  items = [],
-  onEnter = (props: any) => false,
-  onUpdate = (props: any) => false,
-  onExit = (props: any) => false,
-  onKeyDown = (props: any) => false,
-  onFilter = (searchItems: any[], query: string) => {
-    if (!query) {
-      return searchItems
-    }
+  command = () => null,
+  items = () => [],
+  onStart = () => null,
+  onUpdate = () => null,
+  onExit = () => null,
+  onKeyDown = () => null,
+  renderer = () => ({}),
+}: SuggestionOptions) {
+  // const testRenderer = renderer()
 
-    return searchItems
-      .filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
-  },
-}) {
   return new Plugin({
     key: new PluginKey('suggestions'),
 
@@ -61,8 +72,7 @@ export function Suggestion({
               ? getVirtualNode(decorationNode)
               : null,
             items: (handleChange || handleStart)
-              // @ts-ignore
-              ? await onFilter(Array.isArray(items) ? items : await items(), state.query)
+              ? await items(state.query)
               : [],
             command: () => {
               console.log('command')
@@ -90,7 +100,7 @@ export function Suggestion({
           }
 
           if (handleStart) {
-            onEnter(props)
+            onStart(props)
           }
         },
       }