From 373cc2ebd406038cacd97a440b17753245fab12d Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 19 Jan 2021 19:43:23 +0100
Subject: [PATCH 01/28] fix minor styling issue with the navigation

---
 docs/src/layouts/App/style.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index fd6c98d3..765e174e 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -256,8 +256,6 @@ $menuBreakPoint: 800px;
     }
 
     &--sponsor {
-      color: $colorWhite;
-
       &::after {
         content: '💖';
         font-family: 'JetBrainsMono', monospace;

From 230a0a13ac22c3f27b526ccdb8dcded0537356ce Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 09:18:33 +0100
Subject: [PATCH 02/28] clean up page navigation

---
 docs/src/links.yaml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 6fbf3c01..4ce8a96b 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -35,9 +35,6 @@
       link: /examples/drawing
     - title: Multiple editors
       link: /examples/multiple-editors
-    - title: Comments
-      link: /examples/comments
-      draft: true
 
 
 - title: Guide

From 28422177814a3df3b160376d1968c13f83abf5f5 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 09:20:03 +0100
Subject: [PATCH 03/28] fix navigation link type

---
 docs/src/links.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 4ce8a96b..80e4f834 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -157,7 +157,7 @@
       items:
         - title: Annotation
           link: /api/extensions/annotation
-          draft: true
+          type: draft
         - title: Collaboration
           link: /api/extensions/collaboration
           type: pro

From 72b4eb17bdb7216d64b0f4924653f6d0a5161ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 16 Dec 2020 17:47:17 +0100
Subject: [PATCH 04/28] add basic suggestions package

---
 packages/suggestions/README.md          |  14 ++
 packages/suggestions/package.json       |  30 +++
 packages/suggestions/src/index.ts       |   5 +
 packages/suggestions/src/suggestions.ts | 254 ++++++++++++++++++++++++
 4 files changed, 303 insertions(+)
 create mode 100644 packages/suggestions/README.md
 create mode 100644 packages/suggestions/package.json
 create mode 100644 packages/suggestions/src/index.ts
 create mode 100644 packages/suggestions/src/suggestions.ts

diff --git a/packages/suggestions/README.md b/packages/suggestions/README.md
new file mode 100644
index 00000000..22c4be68
--- /dev/null
+++ b/packages/suggestions/README.md
@@ -0,0 +1,14 @@
+# @tiptap/suggestions
+[![Version](https://img.shields.io/npm/v/@tiptap/suggestions.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestions)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestions.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/suggestions.svg)](https://www.npmjs.com/package/@tiptap/suggestions)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
diff --git a/packages/suggestions/package.json b/packages/suggestions/package.json
new file mode 100644
index 00000000..2f7b0f62
--- /dev/null
+++ b/packages/suggestions/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@tiptap/suggestions",
+  "description": "suggestions",
+  "version": "2.0.0-alpha.0",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap utility"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-suggestions.cjs.js",
+  "umd": "dist/tiptap-suggestions.umd.js",
+  "module": "dist/tiptap-suggestions.esm.js",
+  "unpkg": "dist/tiptap-suggestions.bundle.umd.min.js",
+  "types": "dist/packages/suggestions/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@tiptap/core": "^2.0.0-alpha.7",
+    "prosemirror-state": "^1.3.3",
+    "prosemirror-view": "^1.16.3",
+    "prosemirror-model": "^1.12.0"
+  }
+}
diff --git a/packages/suggestions/src/index.ts b/packages/suggestions/src/index.ts
new file mode 100644
index 00000000..69d382d8
--- /dev/null
+++ b/packages/suggestions/src/index.ts
@@ -0,0 +1,5 @@
+import { Suggestions } from './suggestions'
+
+export * from './suggestions'
+
+export default Suggestions
diff --git a/packages/suggestions/src/suggestions.ts b/packages/suggestions/src/suggestions.ts
new file mode 100644
index 00000000..7577673c
--- /dev/null
+++ b/packages/suggestions/src/suggestions.ts
@@ -0,0 +1,254 @@
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { ResolvedPos } from 'prosemirror-model'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+// Create a matcher that matches when a specific character is typed. Useful for @mentions and #tags.
+function triggerCharacter({
+  char = '@',
+  allowSpaces = false,
+  startOfLine = false,
+}) {
+
+  return ($position: ResolvedPos) => {
+    // cancel if top level node
+    if ($position.depth <= 0) {
+      return false
+    }
+
+    // Matching expressions used for later
+    const escapedChar = `\\${char}`
+    const suffix = new RegExp(`\\s${escapedChar}$`)
+    const prefix = startOfLine ? '^' : ''
+    const regexp = allowSpaces
+      ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
+      : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm')
+
+    // Lookup the boundaries of the current node
+    const textFrom = $position.before()
+    const textTo = $position.end()
+    const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
+
+    let match = regexp.exec(text)
+    let position
+
+    while (match !== null) {
+      // JavaScript doesn't have lookbehinds; this hacks a check that first character is " "
+      // or the line beginning
+      const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index)
+
+      if (/^[\s\0]?$/.test(matchPrefix)) {
+        // The absolute position of the match in the document
+        const from = match.index + $position.start()
+        let to = from + match[0].length
+
+        // Edge case handling; if spaces are allowed and we're directly in between
+        // two triggers
+        if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+          match[0] += ' '
+          to += 1
+        }
+
+        // If the $position is located within the matched substring, return that range
+        if (from < $position.pos && to >= $position.pos) {
+          position = {
+            range: {
+              from,
+              to,
+            },
+            query: match[0].slice(char.length),
+            text: match[0],
+          }
+        }
+      }
+
+      match = regexp.exec(text)
+    }
+
+    return position
+  }
+}
+
+export function Suggestions({
+  matcher = {
+    char: '@',
+    allowSpaces: false,
+    startOfLine: false,
+  },
+  appendText = null,
+  suggestionClass = 'suggestion',
+  command = () => false,
+  items = [],
+  onEnter = (props: any) => false,
+  onChange = (props: any) => false,
+  onExit = (props: any) => false,
+  onKeyDown = (props: any) => false,
+  onFilter = (searchItems: any[], query: string) => {
+    if (!query) {
+      return searchItems
+    }
+
+    return searchItems
+      .filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
+  },
+}) {
+  return new Plugin({
+    key: new PluginKey('suggestions'),
+
+    view() {
+      return {
+        update: async (view, prevState) => {
+          const prev = this.key?.getState(prevState)
+          const next = this.key?.getState(view.state)
+
+          // See how the state changed
+          const moved = prev.active && next.active && prev.range.from !== next.range.from
+          const started = !prev.active && next.active
+          const stopped = prev.active && !next.active
+          const changed = !started && !stopped && prev.query !== next.query
+          const handleStart = started || moved
+          const handleChange = changed && !moved
+          const handleExit = stopped || moved
+
+          // Cancel when suggestion isn't active
+          if (!handleStart && !handleChange && !handleExit) {
+            return
+          }
+
+          const state = handleExit ? prev : next
+          const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
+
+          // build a virtual node for popper.js or tippy.js
+          // this can be used for building popups without a DOM node
+          const virtualNode = decorationNode ? {
+            getBoundingClientRect() {
+              return decorationNode.getBoundingClientRect()
+            },
+            clientWidth: decorationNode.clientWidth,
+            clientHeight: decorationNode.clientHeight,
+          } : null
+
+          const props = {
+            view,
+            range: state.range,
+            query: state.query,
+            text: state.text,
+            decorationNode,
+            virtualNode,
+            items: (handleChange || handleStart)
+              // @ts-ignore
+              ? await onFilter(Array.isArray(items) ? items : 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)
+          }
+
+          if (handleChange) {
+            onChange(props)
+          }
+
+          if (handleStart) {
+            onEnter(props)
+          }
+        },
+      }
+    },
+
+    state: {
+
+      // Initialize the plugin's internal state.
+      init() {
+        return {
+          active: false,
+          range: {},
+          query: null,
+          text: null,
+        }
+      },
+
+      // Apply changes to the plugin state from a view transaction.
+      apply(tr, prev) {
+        const { selection } = tr
+        const next = { ...prev }
+
+        // We can only be suggesting if there is no selection
+        if (selection.from === selection.to) {
+          // Reset active state if we just left the previous suggestion range
+          if (selection.from < prev.range.from || selection.from > prev.range.to) {
+            next.active = false
+          }
+
+          // Try to match against where our cursor currently is
+          const $position = selection.$from
+          const match = triggerCharacter(matcher)($position)
+          const decorationId = (Math.random() + 1).toString(36).substr(2, 5)
+
+          // If we found a match, update the current state to show it
+          if (match) {
+            next.active = true
+            next.decorationId = prev.decorationId ? prev.decorationId : decorationId
+            next.range = match.range
+            next.query = match.query
+            next.text = match.text
+          } else {
+            next.active = false
+          }
+        } else {
+          next.active = false
+        }
+
+        // Make sure to empty the range if suggestion is inactive
+        if (!next.active) {
+          next.decorationId = null
+          next.range = {}
+          next.query = null
+          next.text = null
+        }
+
+        return next
+      },
+    },
+
+    props: {
+      // Call the keydown hook if suggestion is active.
+      handleKeyDown(view, event) {
+        const { active, range } = this.getState(view.state)
+
+        if (!active) return false
+
+        return onKeyDown({ view, event, range })
+      },
+
+      // Setup decorator on the currently active suggestion.
+      decorations(editorState) {
+        const { active, range, decorationId } = this.getState(editorState)
+
+        if (!active) return null
+
+        return DecorationSet.create(editorState.doc, [
+          Decoration.inline(range.from, range.to, {
+            nodeName: 'span',
+            class: suggestionClass,
+            'data-decoration-id': decorationId,
+          }),
+        ])
+      },
+    },
+  })
+}

From eb695878a0a2b706298c3311f10b2fa2efb9177c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 17 Dec 2020 17:13:35 +0100
Subject: [PATCH 05/28] add basic mention extension

---
 docs/src/demos/Nodes/Mention/index.spec.js    |  5 ++
 docs/src/demos/Nodes/Mention/index.vue        | 44 +++++++++++++++++
 docs/src/docPages/api/nodes/mention.md        | 17 +++++--
 packages/extension-mention/README.md          | 14 ++++++
 packages/extension-mention/package.json       | 30 ++++++++++++
 packages/extension-mention/src/index.ts       |  5 ++
 packages/extension-mention/src/mention.ts     | 49 +++++++++++++++++++
 .../{suggestions => suggestion}/README.md     |  0
 .../{suggestions => suggestion}/package.json  | 14 +++---
 packages/suggestion/src/index.ts              |  5 ++
 .../src/suggestion.ts}                        |  2 +-
 packages/suggestions/src/index.ts             |  5 --
 12 files changed, 173 insertions(+), 17 deletions(-)
 create mode 100644 docs/src/demos/Nodes/Mention/index.spec.js
 create mode 100644 docs/src/demos/Nodes/Mention/index.vue
 create mode 100644 packages/extension-mention/README.md
 create mode 100644 packages/extension-mention/package.json
 create mode 100644 packages/extension-mention/src/index.ts
 create mode 100644 packages/extension-mention/src/mention.ts
 rename packages/{suggestions => suggestion}/README.md (100%)
 rename packages/{suggestions => suggestion}/package.json (58%)
 create mode 100644 packages/suggestion/src/index.ts
 rename packages/{suggestions/src/suggestions.ts => suggestion/src/suggestion.ts} (99%)
 delete mode 100644 packages/suggestions/src/index.ts

diff --git a/docs/src/demos/Nodes/Mention/index.spec.js b/docs/src/demos/Nodes/Mention/index.spec.js
new file mode 100644
index 00000000..773694f9
--- /dev/null
+++ b/docs/src/demos/Nodes/Mention/index.spec.js
@@ -0,0 +1,5 @@
+context('/api/nodes/mention', () => {
+  before(() => {
+    cy.visit('/api/nodes/mention')
+  })
+})
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
new file mode 100644
index 00000000..a13fd656
--- /dev/null
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Mention from '@tiptap/extension-mention'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Mention,
+      ],
+      content: `
+        <p>text <span data-mention></span></p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md
index e74457ea..3d15ae56 100644
--- a/docs/src/docPages/api/nodes/mention.md
+++ b/docs/src/docPages/api/nodes/mention.md
@@ -1,7 +1,16 @@
 # Mention
 
-:::pro Fund the development 💖
-We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
-:::
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-mention
 
-TODO
+# with Yarn
+yarn add @tiptap/extension-mention
+```
+
+## Source code
+[packages/extension-mention/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)
+
+## Usage
+<demo name="Nodes/Mention" />
diff --git a/packages/extension-mention/README.md b/packages/extension-mention/README.md
new file mode 100644
index 00000000..e4452298
--- /dev/null
+++ b/packages/extension-mention/README.md
@@ -0,0 +1,14 @@
+# @tiptap/extension-mention
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-mention.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-mention)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-mention.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-mention.svg)](https://www.npmjs.com/package/@tiptap/extension-mention)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
diff --git a/packages/extension-mention/package.json b/packages/extension-mention/package.json
new file mode 100644
index 00000000..355fb52f
--- /dev/null
+++ b/packages/extension-mention/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@tiptap/extension-mention",
+  "description": "mention extension for tiptap",
+  "version": "2.0.0-alpha.0",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-mention.cjs.js",
+  "umd": "dist/tiptap-extension-mention.umd.js",
+  "module": "dist/tiptap-extension-mention.esm.js",
+  "unpkg": "dist/tiptap-extension-mention.bundle.umd.min.js",
+  "types": "dist/packages/extension-mention/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6"
+  },
+  "dependencies": {
+    "@tiptap/suggestion": "^2.0.0-alpha.0"
+  }
+}
diff --git a/packages/extension-mention/src/index.ts b/packages/extension-mention/src/index.ts
new file mode 100644
index 00000000..0c1654ac
--- /dev/null
+++ b/packages/extension-mention/src/index.ts
@@ -0,0 +1,5 @@
+import { Mention } from './mention'
+
+export * from './mention'
+
+export default Mention
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
new file mode 100644
index 00000000..ae4add0b
--- /dev/null
+++ b/packages/extension-mention/src/mention.ts
@@ -0,0 +1,49 @@
+import { Node } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+
+export const Mention = Node.create({
+  name: 'mention',
+
+  group: 'inline',
+
+  inline: true,
+
+  selectable: false,
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+      },
+      label: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-mention]',
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return ['span', HTMLAttributes, `@${node.attrs.label}`]
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({}),
+    ]
+  },
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    Mention: typeof Mention,
+  }
+}
diff --git a/packages/suggestions/README.md b/packages/suggestion/README.md
similarity index 100%
rename from packages/suggestions/README.md
rename to packages/suggestion/README.md
diff --git a/packages/suggestions/package.json b/packages/suggestion/package.json
similarity index 58%
rename from packages/suggestions/package.json
rename to packages/suggestion/package.json
index 2f7b0f62..a47cccf6 100644
--- a/packages/suggestions/package.json
+++ b/packages/suggestion/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@tiptap/suggestions",
-  "description": "suggestions",
+  "name": "@tiptap/suggestion",
+  "description": "suggestion plugin for tiptap",
   "version": "2.0.0-alpha.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
@@ -12,11 +12,11 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-suggestions.cjs.js",
-  "umd": "dist/tiptap-suggestions.umd.js",
-  "module": "dist/tiptap-suggestions.esm.js",
-  "unpkg": "dist/tiptap-suggestions.bundle.umd.min.js",
-  "types": "dist/packages/suggestions/src/index.d.ts",
+  "main": "dist/tiptap-suggestion.cjs.js",
+  "umd": "dist/tiptap-suggestion.umd.js",
+  "module": "dist/tiptap-suggestion.esm.js",
+  "unpkg": "dist/tiptap-suggestion.bundle.umd.min.js",
+  "types": "dist/packages/suggestion/src/index.d.ts",
   "files": [
     "src",
     "dist"
diff --git a/packages/suggestion/src/index.ts b/packages/suggestion/src/index.ts
new file mode 100644
index 00000000..43cdefd6
--- /dev/null
+++ b/packages/suggestion/src/index.ts
@@ -0,0 +1,5 @@
+import { Suggestion } from './suggestion'
+
+export * from './suggestion'
+
+export default Suggestion
diff --git a/packages/suggestions/src/suggestions.ts b/packages/suggestion/src/suggestion.ts
similarity index 99%
rename from packages/suggestions/src/suggestions.ts
rename to packages/suggestion/src/suggestion.ts
index 7577673c..142aa97d 100644
--- a/packages/suggestions/src/suggestions.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -68,7 +68,7 @@ function triggerCharacter({
   }
 }
 
-export function Suggestions({
+export function Suggestion({
   matcher = {
     char: '@',
     allowSpaces: false,
diff --git a/packages/suggestions/src/index.ts b/packages/suggestions/src/index.ts
deleted file mode 100644
index 69d382d8..00000000
--- a/packages/suggestions/src/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Suggestions } from './suggestions'
-
-export * from './suggestions'
-
-export default Suggestions

From 44a026416b2ac72bfdace37a8592983e8bc85706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 15 Jan 2021 09:25:50 +0100
Subject: [PATCH 06/28] refactoring

---
 packages/suggestion/src/suggestion.ts | 124 ++++++++++++++------------
 1 file changed, 66 insertions(+), 58 deletions(-)

diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 142aa97d..9300d7c5 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -2,78 +2,80 @@ import { Plugin, PluginKey } from 'prosemirror-state'
 import { ResolvedPos } from 'prosemirror-model'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 
+export interface Trigger {
+  char: string,
+  allowSpaces: boolean,
+  startOfLine: boolean,
+  $position: ResolvedPos,
+}
+
 // Create a matcher that matches when a specific character is typed. Useful for @mentions and #tags.
-function triggerCharacter({
-  char = '@',
-  allowSpaces = false,
-  startOfLine = false,
-}) {
+function triggerCharacter(config: Trigger) {
+  const {
+    char, allowSpaces, startOfLine, $position,
+  } = config
 
-  return ($position: ResolvedPos) => {
-    // cancel if top level node
-    if ($position.depth <= 0) {
-      return false
-    }
+  // cancel if top level node
+  if ($position.depth <= 0) {
+    return false
+  }
 
-    // Matching expressions used for later
-    const escapedChar = `\\${char}`
-    const suffix = new RegExp(`\\s${escapedChar}$`)
-    const prefix = startOfLine ? '^' : ''
-    const regexp = allowSpaces
-      ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
-      : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm')
+  // Matching expressions used for later
+  const escapedChar = `\\${char}`
+  const suffix = new RegExp(`\\s${escapedChar}$`)
+  const prefix = startOfLine ? '^' : ''
+  const regexp = allowSpaces
+    ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
+    : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm')
 
-    // Lookup the boundaries of the current node
-    const textFrom = $position.before()
-    const textTo = $position.end()
-    const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
+  // Lookup the boundaries of the current node
+  const textFrom = $position.before()
+  const textTo = $position.end()
+  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
 
-    let match = regexp.exec(text)
-    let position
+  let match = regexp.exec(text)
+  let position
 
-    while (match !== null) {
-      // JavaScript doesn't have lookbehinds; this hacks a check that first character is " "
-      // or the line beginning
-      const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index)
+  while (match !== null) {
+    // JavaScript doesn't have lookbehinds; this hacks a check that first character is " "
+    // or the line beginning
+    const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index)
 
-      if (/^[\s\0]?$/.test(matchPrefix)) {
-        // The absolute position of the match in the document
-        const from = match.index + $position.start()
-        let to = from + match[0].length
+    if (/^[\s\0]?$/.test(matchPrefix)) {
+      // The absolute position of the match in the document
+      const from = match.index + $position.start()
+      let to = from + match[0].length
 
-        // Edge case handling; if spaces are allowed and we're directly in between
-        // two triggers
-        if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
-          match[0] += ' '
-          to += 1
-        }
-
-        // If the $position is located within the matched substring, return that range
-        if (from < $position.pos && to >= $position.pos) {
-          position = {
-            range: {
-              from,
-              to,
-            },
-            query: match[0].slice(char.length),
-            text: match[0],
-          }
-        }
+      // Edge case handling; if spaces are allowed and we're directly in between
+      // two triggers
+      if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+        match[0] += ' '
+        to += 1
       }
 
-      match = regexp.exec(text)
+      // If the $position is located within the matched substring, return that range
+      if (from < $position.pos && to >= $position.pos) {
+        position = {
+          range: {
+            from,
+            to,
+          },
+          query: match[0].slice(char.length),
+          text: match[0],
+        }
+      }
     }
 
-    return position
+    match = regexp.exec(text)
   }
+
+  return position
 }
 
 export function Suggestion({
-  matcher = {
-    char: '@',
-    allowSpaces: false,
-    startOfLine: false,
-  },
+  char = '@',
+  allowSpaces = false,
+  startOfLine = false,
   appendText = null,
   suggestionClass = 'suggestion',
   command = () => false,
@@ -171,7 +173,6 @@ export function Suggestion({
     },
 
     state: {
-
       // Initialize the plugin's internal state.
       init() {
         return {
@@ -196,9 +197,16 @@ export function Suggestion({
 
           // Try to match against where our cursor currently is
           const $position = selection.$from
-          const match = triggerCharacter(matcher)($position)
+          const match = triggerCharacter({
+            char,
+            allowSpaces,
+            startOfLine,
+            $position,
+          })
           const decorationId = (Math.random() + 1).toString(36).substr(2, 5)
 
+          console.log({ match })
+
           // If we found a match, update the current state to show it
           if (match) {
             next.active = true

From 8e23627f61c80298613d9918f3b23d3a5effe53e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 15 Jan 2021 09:55:15 +0100
Subject: [PATCH 07/28] maybe improve text match

---
 packages/suggestion/src/suggestion.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 9300d7c5..4aa765b5 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -30,7 +30,10 @@ function triggerCharacter(config: Trigger) {
 
   // Lookup the boundaries of the current node
   const textFrom = $position.before()
-  const textTo = $position.end()
+
+  // Only look up to the cursor, old behavior: textTo = $position.end()
+  const textTo = $position.pos
+
   const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
 
   let match = regexp.exec(text)
@@ -196,12 +199,11 @@ export function Suggestion({
           }
 
           // Try to match against where our cursor currently is
-          const $position = selection.$from
           const match = triggerCharacter({
             char,
             allowSpaces,
             startOfLine,
-            $position,
+            $position: selection.$from,
           })
           const decorationId = (Math.random() + 1).toString(36).substr(2, 5)
 

From be9167589eb08b40da13f43c8ef61ebf0328df54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 15 Jan 2021 14:49:28 +0100
Subject: [PATCH 08/28] refactoring

---
 .../suggestion/src/findSuggestionMatch.ts     |  82 ++++++++++++
 packages/suggestion/src/getVirtualNode.ts     |   9 ++
 packages/suggestion/src/suggestion.ts         | 117 +++---------------
 3 files changed, 111 insertions(+), 97 deletions(-)
 create mode 100644 packages/suggestion/src/findSuggestionMatch.ts
 create mode 100644 packages/suggestion/src/getVirtualNode.ts

diff --git a/packages/suggestion/src/findSuggestionMatch.ts b/packages/suggestion/src/findSuggestionMatch.ts
new file mode 100644
index 00000000..23a1c088
--- /dev/null
+++ b/packages/suggestion/src/findSuggestionMatch.ts
@@ -0,0 +1,82 @@
+import { ResolvedPos } from 'prosemirror-model'
+
+export interface Trigger {
+  char: string,
+  allowSpaces: boolean,
+  startOfLine: boolean,
+  $position: ResolvedPos,
+}
+
+export type SuggestionMatch = {
+  range: {
+    from: number,
+    to: number,
+  },
+  query: string,
+  text: string,
+} | null
+
+export function findSuggestionMatch(config: Trigger): SuggestionMatch {
+  const {
+    char, allowSpaces, startOfLine, $position,
+  } = config
+
+  // cancel if top level node
+  if ($position.depth <= 0) {
+    return null
+  }
+
+  // Matching expressions used for later
+  const escapedChar = `\\${char}`
+  const suffix = new RegExp(`\\s${escapedChar}$`)
+  const prefix = startOfLine ? '^' : ''
+  const regexp = allowSpaces
+    ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
+    : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm')
+
+  // Lookup the boundaries of the current node
+  const textFrom = $position.before()
+
+  // Only look up to the cursor, old behavior: textTo = $position.end()
+  const textTo = $position.pos
+
+  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
+
+  let match = regexp.exec(text)
+  let position = null
+
+  while (match !== null) {
+    // JavaScript doesn't have lookbehinds; this hacks a check that first character is " "
+    // or the line beginning
+    const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index)
+
+    if (/^[\s\0]?$/.test(matchPrefix)) {
+      // The absolute position of the match in the document
+      const from = match.index + $position.start()
+      let to = from + match[0].length
+
+      // Edge case handling; if spaces are allowed and we're directly in between
+      // two triggers
+      if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+        match[0] += ' '
+        to += 1
+      }
+
+      // If the $position is located within the matched substring, return that range
+      if (from < $position.pos && to >= $position.pos) {
+        position = {
+          range: {
+            from,
+            to,
+          },
+          query: match[0].slice(char.length),
+          text: match[0],
+        }
+      }
+    }
+
+    match = regexp.exec(text)
+  }
+
+  return position
+}
diff --git a/packages/suggestion/src/getVirtualNode.ts b/packages/suggestion/src/getVirtualNode.ts
new file mode 100644
index 00000000..7f2ca9ab
--- /dev/null
+++ b/packages/suggestion/src/getVirtualNode.ts
@@ -0,0 +1,9 @@
+export function getVirtualNode(node: Element) {
+  return {
+    getBoundingClientRect() {
+      return node.getBoundingClientRect()
+    },
+    clientWidth: node.clientWidth,
+    clientHeight: node.clientHeight,
+  }
+}
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 4aa765b5..01b9a2cd 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -1,79 +1,7 @@
 import { Plugin, PluginKey } from 'prosemirror-state'
-import { ResolvedPos } from 'prosemirror-model'
 import { Decoration, DecorationSet } from 'prosemirror-view'
-
-export interface Trigger {
-  char: string,
-  allowSpaces: boolean,
-  startOfLine: boolean,
-  $position: ResolvedPos,
-}
-
-// Create a matcher that matches when a specific character is typed. Useful for @mentions and #tags.
-function triggerCharacter(config: Trigger) {
-  const {
-    char, allowSpaces, startOfLine, $position,
-  } = config
-
-  // cancel if top level node
-  if ($position.depth <= 0) {
-    return false
-  }
-
-  // Matching expressions used for later
-  const escapedChar = `\\${char}`
-  const suffix = new RegExp(`\\s${escapedChar}$`)
-  const prefix = startOfLine ? '^' : ''
-  const regexp = allowSpaces
-    ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
-    : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm')
-
-  // Lookup the boundaries of the current node
-  const textFrom = $position.before()
-
-  // Only look up to the cursor, old behavior: textTo = $position.end()
-  const textTo = $position.pos
-
-  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
-
-  let match = regexp.exec(text)
-  let position
-
-  while (match !== null) {
-    // JavaScript doesn't have lookbehinds; this hacks a check that first character is " "
-    // or the line beginning
-    const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index)
-
-    if (/^[\s\0]?$/.test(matchPrefix)) {
-      // The absolute position of the match in the document
-      const from = match.index + $position.start()
-      let to = from + match[0].length
-
-      // Edge case handling; if spaces are allowed and we're directly in between
-      // two triggers
-      if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
-        match[0] += ' '
-        to += 1
-      }
-
-      // If the $position is located within the matched substring, return that range
-      if (from < $position.pos && to >= $position.pos) {
-        position = {
-          range: {
-            from,
-            to,
-          },
-          query: match[0].slice(char.length),
-          text: match[0],
-        }
-      }
-    }
-
-    match = regexp.exec(text)
-  }
-
-  return position
-}
+import { findSuggestionMatch } from './findSuggestionMatch'
+import { getVirtualNode } from './getVirtualNode'
 
 export function Suggestion({
   char = '@',
@@ -84,7 +12,7 @@ export function Suggestion({
   command = () => false,
   items = [],
   onEnter = (props: any) => false,
-  onChange = (props: any) => false,
+  onUpdate = (props: any) => false,
   onExit = (props: any) => false,
   onKeyDown = (props: any) => false,
   onFilter = (searchItems: any[], query: string) => {
@@ -121,24 +49,17 @@ export function Suggestion({
 
           const state = handleExit ? prev : next
           const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
-
-          // build a virtual node for popper.js or tippy.js
-          // this can be used for building popups without a DOM node
-          const virtualNode = decorationNode ? {
-            getBoundingClientRect() {
-              return decorationNode.getBoundingClientRect()
-            },
-            clientWidth: decorationNode.clientWidth,
-            clientHeight: decorationNode.clientHeight,
-          } : null
-
           const props = {
             view,
             range: state.range,
             query: state.query,
             text: state.text,
             decorationNode,
-            virtualNode,
+            // 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)
               // @ts-ignore
               ? await onFilter(Array.isArray(items) ? items : await items(), state.query)
@@ -165,7 +86,7 @@ export function Suggestion({
           }
 
           if (handleChange) {
-            onChange(props)
+            onUpdate(props)
           }
 
           if (handleStart) {
@@ -199,15 +120,13 @@ export function Suggestion({
           }
 
           // Try to match against where our cursor currently is
-          const match = triggerCharacter({
+          const match = findSuggestionMatch({
             char,
             allowSpaces,
             startOfLine,
             $position: selection.$from,
           })
-          const decorationId = (Math.random() + 1).toString(36).substr(2, 5)
-
-          console.log({ match })
+          const decorationId = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}`
 
           // If we found a match, update the current state to show it
           if (match) {
@@ -240,18 +159,22 @@ export function Suggestion({
       handleKeyDown(view, event) {
         const { active, range } = this.getState(view.state)
 
-        if (!active) return false
+        if (!active) {
+          return false
+        }
 
         return onKeyDown({ view, event, range })
       },
 
       // Setup decorator on the currently active suggestion.
-      decorations(editorState) {
-        const { active, range, decorationId } = this.getState(editorState)
+      decorations(state) {
+        const { active, range, decorationId } = this.getState(state)
 
-        if (!active) return null
+        if (!active) {
+          return null
+        }
 
-        return DecorationSet.create(editorState.doc, [
+        return DecorationSet.create(state.doc, [
           Decoration.inline(range.from, range.to, {
             nodeName: 'span',
             class: suggestionClass,

From 58b7aa7baaa449aef5752d9c34c0d35c1fa2b42f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 15 Jan 2021 15:58:39 +0100
Subject: [PATCH 09/28] refactoring

---
 packages/extension-mention/src/mention.ts | 14 ++++++-
 packages/suggestion/src/suggestion.ts     | 46 ++++++++++++++---------
 2 files changed, 41 insertions(+), 19 deletions(-)

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)
           }
         },
       }

From 34f6a0d9cec44dcf0fccf814c6828b3ae2f6384f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 12:40:05 +0100
Subject: [PATCH 10/28] rename VueRenderer to VueNodeViewRenderer

---
 .../vue/src/{VueRenderer.ts => VueNodeViewRenderer.ts}    | 8 ++++----
 packages/vue/src/index.ts                                 | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/vue/src/{VueRenderer.ts => VueNodeViewRenderer.ts} (96%)

diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueNodeViewRenderer.ts
similarity index 96%
rename from packages/vue/src/VueRenderer.ts
rename to packages/vue/src/VueNodeViewRenderer.ts
index 4215b9c2..58f70772 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueNodeViewRenderer.ts
@@ -16,7 +16,7 @@ function getComponentFromElement(element: HTMLElement): Vue {
   return element.__vue__
 }
 
-interface VueRendererOptions {
+interface VueNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
 }
@@ -39,12 +39,12 @@ class VueNodeView implements NodeView {
 
   isDragging = false
 
-  options: VueRendererOptions = {
+  options: VueNodeViewRendererOptions = {
     stopEvent: null,
     update: null,
   }
 
-  constructor(component: Vue | VueConstructor, props: NodeViewRendererProps, options?: Partial<VueRendererOptions>) {
+  constructor(component: Vue | VueConstructor, props: NodeViewRendererProps, options?: Partial<VueNodeViewRendererOptions>) {
     this.options = { ...this.options, ...options }
     this.editor = props.editor
     this.extension = props.extension
@@ -314,7 +314,7 @@ class VueNodeView implements NodeView {
 
 }
 
-export default function VueRenderer(component: Vue | VueConstructor, options?: Partial<VueRendererOptions>): NodeViewRenderer {
+export default function VueNodeViewRenderer(component: Vue | VueConstructor, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer {
   return (props: NodeViewRendererProps) => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index d668e82c..9640f8c9 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,3 +1,3 @@
 export * from '@tiptap/core'
-export { default as VueRenderer } from './VueRenderer'
+export { default as VueNodeViewRenderer } from './VueNodeViewRenderer'
 export { default as EditorContent } from './components/EditorContent'

From 18d3cbdef8d2b602318a17a628637c104e72a8d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 12:40:13 +0100
Subject: [PATCH 11/28] add tippy

---
 docs/package.json                         |  1 +
 docs/src/demos/Nodes/Mention/index.vue    | 50 ++++++++++++++++++++++-
 packages/extension-mention/src/mention.ts | 12 +++---
 packages/suggestion/src/suggestion.ts     | 34 ++++++++-------
 yarn.lock                                 | 12 ++++++
 5 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index d456261e..3c850ae1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -25,6 +25,7 @@
     "remark-toc": "^7.0.0",
     "remixicon": "^2.5.0",
     "simplify-js": "^1.2.4",
+    "tippy.js": "^6.2.7",
     "vue-github-button": "^1.1.2",
     "vue-live": "^1.16.0",
     "y-indexeddb": "^9.0.6",
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index a13fd656..5ab67006 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import tippy, { sticky } from 'tippy.js'
 import { Editor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
@@ -29,7 +31,53 @@ export default {
         Document,
         Paragraph,
         Text,
-        Mention,
+        Mention.configure({
+          items: query => {
+            console.log('items', query)
+
+            return [query]
+          },
+          renderer: () => {
+            let popup
+            const Component = new (Vue.extend({
+              template: '<div>YAAAAY</div>',
+            }))().$mount()
+
+            return {
+              onStart(props) {
+                console.log('start')
+
+                popup = tippy('.app', {
+                  getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
+                  appendTo: () => document.body,
+                  interactive: true,
+                  sticky: true, // make sure position of tippy is updated when content changes
+                  plugins: [sticky],
+                  content: Component.$el,
+                  trigger: 'mouseenter', // manual
+                  showOnCreate: true,
+                  theme: 'dark',
+                  placement: 'top-start',
+                  inertia: true,
+                  duration: [400, 200],
+                })
+
+              },
+              onUpdate(props) {
+                console.log('update', props)
+              },
+              onExit(props) {
+                console.log('exit', props)
+
+                if (popup) {
+                  popup[0].destroy()
+                }
+
+                Component.$destroy()
+              },
+            }
+          },
+        }),
       ],
       content: `
         <p>text <span data-mention></span></p>
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 5fb7f557..7ee51c1a 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -1,15 +1,14 @@
 import { Node } from '@tiptap/core'
-import Suggestion from '@tiptap/suggestion'
+import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
-export interface MentionOptions {
-  renderer: any,
-}
+export type MentionOptions = Omit<SuggestionOptions, 'editor'>
 
 export const Mention = Node.create({
   name: 'mention',
 
   defaultOptions: <MentionOptions>{
-    renderer: null,
+    char: '@',
+    renderer: () => ({}),
   },
 
   group: 'inline',
@@ -47,8 +46,7 @@ export const Mention = Node.create({
     return [
       Suggestion({
         editor: this.editor,
-        char: '@',
-        renderer: this.options.renderer,
+        ...this.options,
       }),
     ]
   },
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 19213137..809547af 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -12,11 +12,12 @@ export interface SuggestionOptions {
   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,
+  renderer?: () => {
+    onStart?: (props: any) => any,
+    onUpdate?: (props: any) => any,
+    onExit?: (props: any) => any,
+    onKeyDown?: (props: any) => any,
+  },
 }
 
 export function Suggestion({
@@ -27,13 +28,14 @@ export function Suggestion({
   suggestionClass = 'suggestion',
   command = () => null,
   items = () => [],
-  onStart = () => null,
-  onUpdate = () => null,
-  onExit = () => null,
-  onKeyDown = () => null,
+  // onStart = () => null,
+  // onUpdate = () => null,
+  // onExit = () => null,
+  // onKeyDown = () => null,
   renderer = () => ({}),
 }: SuggestionOptions) {
-  // const testRenderer = renderer()
+
+  const testRenderer = renderer?.()
 
   return new Plugin({
     key: new PluginKey('suggestions'),
@@ -92,15 +94,18 @@ export function Suggestion({
 
           // Trigger the hooks when necessary
           if (handleExit) {
-            onExit(props)
+            // onExit(props)
+            testRenderer?.onExit?.(props)
           }
 
           if (handleChange) {
-            onUpdate(props)
+            // onUpdate(props)
+            testRenderer?.onUpdate?.(props)
           }
 
           if (handleStart) {
-            onStart(props)
+            // onStart(props)
+            testRenderer?.onStart?.(props)
           }
         },
       }
@@ -173,7 +178,8 @@ export function Suggestion({
           return false
         }
 
-        return onKeyDown({ view, event, range })
+        // return onKeyDown({ view, event, range })
+        return testRenderer?.onKeyDown?.({ view, event, range })
       },
 
       // Setup decorator on the currently active suggestion.
diff --git a/yarn.lock b/yarn.lock
index 32538997..b022a841 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2231,6 +2231,11 @@
     "@octokit/openapi-types" "^1.2.0"
     "@types/node" ">= 8"
 
+"@popperjs/core@^2.4.4":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
 "@rollup/plugin-babel@^5.2.1":
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
@@ -14120,6 +14125,13 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tippy.js@^6.2.7:
+  version "6.2.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.7.tgz#62fb34eda23f7d78151ddca922b62818c1ab9869"
+  integrity sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==
+  dependencies:
+    "@popperjs/core" "^2.4.4"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

From 3cb4b0f71f9d522f726a8e46691f4fbc08b55ba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 13:06:56 +0100
Subject: [PATCH 12/28] refactoring

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 22 +++++++++++
 docs/src/demos/Nodes/Mention/index.vue       | 35 ++++++-----------
 packages/vue/src/VueRenderer.ts              | 41 ++++++++++++++++++++
 packages/vue/src/index.ts                    |  1 +
 4 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 docs/src/demos/Nodes/Mention/MentionList.vue
 create mode 100644 packages/vue/src/VueRenderer.ts

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
new file mode 100644
index 00000000..ef9f6b98
--- /dev/null
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div v-for="(item, index) in items" :key="index">
+      {{ item }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 5ab67006..aa9fc9a6 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -5,14 +5,13 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import tippy, { sticky } from 'tippy.js'
-import { Editor } from '@tiptap/core'
-import { EditorContent } from '@tiptap/vue'
+import { Editor, EditorContent, VueRenderer } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Mention from '@tiptap/extension-mention'
+import MentionList from './MentionList'
 
 export default {
   components: {
@@ -33,47 +32,37 @@ export default {
         Text,
         Mention.configure({
           items: query => {
-            console.log('items', query)
-
-            return [query]
+            return ['foo', 'bar']
           },
           renderer: () => {
+            let component
             let popup
-            const Component = new (Vue.extend({
-              template: '<div>YAAAAY</div>',
-            }))().$mount()
 
             return {
               onStart(props) {
-                console.log('start')
+                component = new VueRenderer(MentionList, props)
 
                 popup = tippy('.app', {
                   getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
                   appendTo: () => document.body,
                   interactive: true,
-                  sticky: true, // make sure position of tippy is updated when content changes
+                  sticky: true,
                   plugins: [sticky],
-                  content: Component.$el,
-                  trigger: 'mouseenter', // manual
+                  content: component.element,
+                  trigger: 'mouseenter',
                   showOnCreate: true,
                   theme: 'dark',
                   placement: 'top-start',
                   inertia: true,
                   duration: [400, 200],
                 })
-
               },
               onUpdate(props) {
-                console.log('update', props)
+                component.update(props)
               },
-              onExit(props) {
-                console.log('exit', props)
-
-                if (popup) {
-                  popup[0].destroy()
-                }
-
-                Component.$destroy()
+              onExit() {
+                popup[0].destroy()
+                component.destroy()
               },
             }
           },
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
new file mode 100644
index 00000000..5ccf3cc5
--- /dev/null
+++ b/packages/vue/src/VueRenderer.ts
@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import { VueConstructor } from 'vue/types/umd'
+
+export default class VueRenderer {
+  vm!: Vue
+
+  constructor(component: Vue | VueConstructor, props: any) {
+    const Component = Vue.extend(component)
+
+    this.vm = new Component({
+      // parent,
+      propsData: props,
+    }).$mount()
+  }
+
+  get element() {
+    return this.vm.$el
+  }
+
+  update(data: { [key: string]: any } = {}) {
+    if (!this.vm.$props) {
+      return
+    }
+
+    // prevents `Avoid mutating a prop directly` error message
+    const originalSilent = Vue.config.silent
+    Vue.config.silent = true
+
+    Object
+      .entries(data)
+      .forEach(([key, value]) => {
+        this.vm.$props[key] = value
+      })
+
+    Vue.config.silent = originalSilent
+  }
+
+  destroy() {
+    this.vm.$destroy()
+  }
+}
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 9640f8c9..5b55d288 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,3 +1,4 @@
 export * from '@tiptap/core'
+export { default as VueRenderer } from './VueRenderer'
 export { default as VueNodeViewRenderer } from './VueNodeViewRenderer'
 export { default as EditorContent } from './components/EditorContent'

From 1892b8f893f37a3eeade04561300d32f4b29bd40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 15:34:54 +0100
Subject: [PATCH 13/28] refactoring

---
 docs/src/demos/Nodes/Mention/index.vue | 21 ++++++++++-----------
 packages/vue/src/VueRenderer.ts        |  9 +++------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index aa9fc9a6..48406678 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -32,33 +32,32 @@ export default {
         Text,
         Mention.configure({
           items: query => {
-            return ['foo', 'bar']
+            return ['foo', 'bar'].filter(item => item.startsWith(query))
           },
           renderer: () => {
             let component
             let popup
 
             return {
-              onStart(props) {
-                component = new VueRenderer(MentionList, props)
+              onStart: props => {
+                component = new VueRenderer(MentionList, {
+                  parent: this,
+                  propsData: props,
+                })
 
-                popup = tippy('.app', {
+                popup = tippy('body', {
                   getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
                   appendTo: () => document.body,
-                  interactive: true,
-                  sticky: true,
-                  plugins: [sticky],
                   content: component.element,
-                  trigger: 'mouseenter',
                   showOnCreate: true,
-                  theme: 'dark',
+                  interactive: true,
+                  trigger: 'manual',
                   placement: 'top-start',
-                  inertia: true,
                   duration: [400, 200],
                 })
               },
               onUpdate(props) {
-                component.update(props)
+                component.updateProps(props)
               },
               onExit() {
                 popup[0].destroy()
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index 5ccf3cc5..f7d5c5af 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -7,17 +7,14 @@ export default class VueRenderer {
   constructor(component: Vue | VueConstructor, props: any) {
     const Component = Vue.extend(component)
 
-    this.vm = new Component({
-      // parent,
-      propsData: props,
-    }).$mount()
+    this.vm = new Component(props).$mount()
   }
 
   get element() {
     return this.vm.$el
   }
 
-  update(data: { [key: string]: any } = {}) {
+  updateProps(props: { [key: string]: any } = {}) {
     if (!this.vm.$props) {
       return
     }
@@ -27,7 +24,7 @@ export default class VueRenderer {
     Vue.config.silent = true
 
     Object
-      .entries(data)
+      .entries(props)
       .forEach(([key, value]) => {
         this.vm.$props[key] = value
       })

From b294651c696984eea7bfe4cd6e470d5a5d388de8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 15:38:44 +0100
Subject: [PATCH 14/28] refactoring

---
 docs/src/demos/Nodes/Mention/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 48406678..dd671d14 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -53,7 +53,6 @@ export default {
                   interactive: true,
                   trigger: 'manual',
                   placement: 'top-start',
-                  duration: [400, 200],
                 })
               },
               onUpdate(props) {

From bb71cf597e22fd33fc9408549614e1dd6a5071b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 16:45:49 +0100
Subject: [PATCH 15/28] add basic keyboard navigation

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 71 +++++++++++++++++++-
 docs/src/demos/Nodes/Mention/index.vue       |  3 +
 packages/suggestion/src/suggestion.ts        |  8 +--
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index ef9f6b98..09ae201e 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -1,6 +1,11 @@
 <template>
-  <div>
-    <div v-for="(item, index) in items" :key="index">
+  <div class="items">
+    <div
+      class="item"
+      :class="{ 'is-selected': index === selectedIndex }"
+      v-for="(item, index) in items"
+      :key="index"
+    >
       {{ item }}
     </div>
   </div>
@@ -14,9 +19,69 @@ export default {
       default: () => [],
     },
   },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+
+  watch: {
+    items() {
+      this.selectedIndex = 0
+    },
+  },
+
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === 'ArrowUp') {
+        this.upHandler()
+        return true
+      }
+
+      if (event.key === 'ArrowDown') {
+        this.downHandler()
+        return true
+      }
+
+      if (event.key === 'Enter') {
+        this.enterHandler()
+        return true
+      }
+
+      return false
+    },
+
+    upHandler() {
+      this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length
+    },
+
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+    },
+
+    enterHandler() {
+      const item = this.items[this.selectedIndex]
+
+      if (item) {
+        console.log('select', item)
+      }
+    },
+  },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.items {
+  position: relative;
+}
+.item {
+  background: white;
+  color: black;
+  padding: 0.5rem;
 
+  &.is-selected {
+    background: #ccc;
+  }
+}
 </style>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index dd671d14..de380edc 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -58,6 +58,9 @@ export default {
               onUpdate(props) {
                 component.updateProps(props)
               },
+              onKeyDown(props) {
+                return component.vm.onKeyDown(props)
+              },
               onExit() {
                 popup[0].destroy()
                 component.destroy()
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 809547af..baa0898c 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -13,10 +13,10 @@ export interface SuggestionOptions {
   command?: () => any,
   items?: (query: string) => any[],
   renderer?: () => {
-    onStart?: (props: any) => any,
-    onUpdate?: (props: any) => any,
-    onExit?: (props: any) => any,
-    onKeyDown?: (props: any) => any,
+    onStart?: (props: any) => void,
+    onUpdate?: (props: any) => void,
+    onExit?: (props: any) => void,
+    onKeyDown?: (props: any) => boolean,
   },
 }
 

From a7ac9a7ef439fbc2a753eab90cbf898807b47b34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 16:54:02 +0100
Subject: [PATCH 16/28] improve styling

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 19 ++++++++++++++-----
 docs/src/demos/Nodes/Mention/index.vue       |  2 +-
 packages/suggestion/src/suggestion.ts        |  3 +--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 09ae201e..6812eef2 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -74,14 +74,23 @@ export default {
 <style lang="scss" scoped>
 .items {
   position: relative;
+  border-radius: 0.25rem;
+  background: white;
+  color: rgba(black, 0.8);
+  overflow: hidden;
+  font-size: 0.9rem;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
 }
 .item {
-  background: white;
-  color: black;
-  padding: 0.5rem;
+  padding: 0.2rem 0.5rem;
 
-  &.is-selected {
-    background: #ccc;
+  &.is-selected,
+  &:hover {
+    color: black;
+    background: rgba(black, 0.1);
   }
 }
 </style>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index de380edc..4587ba05 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -32,7 +32,7 @@ export default {
         Text,
         Mention.configure({
           items: query => {
-            return ['foo', 'bar'].filter(item => item.startsWith(query))
+            return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
           },
           renderer: () => {
             let component
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index baa0898c..9f553606 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -178,8 +178,7 @@ export function Suggestion({
           return false
         }
 
-        // return onKeyDown({ view, event, range })
-        return testRenderer?.onKeyDown?.({ view, event, range })
+        return testRenderer?.onKeyDown?.({ view, event, range }) || false
       },
 
       // Setup decorator on the currently active suggestion.

From b4032a17cb924ab5726967542897306d88daf942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 17:02:03 +0100
Subject: [PATCH 17/28] refactoring

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 23 ++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 6812eef2..5a625751 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="items">
-    <div
+    <button
       class="item"
       :class="{ 'is-selected': index === selectedIndex }"
       v-for="(item, index) in items"
       :key="index"
+      @click="selectItem(index)"
     >
       {{ item }}
-    </div>
+    </button>
   </div>
 </template>
 
@@ -18,6 +19,11 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    command: {
+      type: Function,
+      default: () => true,
+    },
   },
 
   data() {
@@ -61,10 +67,14 @@ export default {
     },
 
     enterHandler() {
-      const item = this.items[this.selectedIndex]
+      this.selectItem(this.selectedIndex)
+    },
+
+    selectItem(index) {
+      const item = this.items[index]
 
       if (item) {
-        console.log('select', item)
+        this.command(item)
       }
     },
   },
@@ -85,6 +95,11 @@ export default {
   ;
 }
 .item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
   padding: 0.2rem 0.5rem;
 
   &.is-selected,

From ba5d38a621616877dc1d65168eff83410875f074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 23:41:38 +0100
Subject: [PATCH 18/28] refactoring

---
 docs/src/demos/Nodes/Mention/index.vue    |  4 +-
 docs/src/docPages/api/commands.md         |  1 +
 packages/core/src/commands/replace.ts     | 29 ++++++++++
 packages/core/src/extensions/commands.ts  |  2 +
 packages/extension-mention/src/mention.ts |  9 +++-
 packages/suggestion/src/suggestion.ts     | 64 ++++++++---------------
 6 files changed, 64 insertions(+), 45 deletions(-)
 create mode 100644 packages/core/src/commands/replace.ts

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.

From 9af0d76d679c87bb0aba0979ae427f1b6b9e2dae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 10:09:32 +0100
Subject: [PATCH 19/28] refactoring

---
 packages/core/src/commands/replace.ts         |  7 +---
 packages/core/src/types.ts                    |  5 +++
 packages/extension-mention/src/mention.ts     |  2 +-
 .../suggestion/src/findSuggestionMatch.ts     |  6 +--
 packages/suggestion/src/getVirtualNode.ts     |  8 +++-
 packages/suggestion/src/index.ts              |  2 +
 packages/suggestion/src/suggestion.ts         | 38 ++++++++++++++-----
 7 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/packages/core/src/commands/replace.ts b/packages/core/src/commands/replace.ts
index 3ce34450..92c693a8 100644
--- a/packages/core/src/commands/replace.ts
+++ b/packages/core/src/commands/replace.ts
@@ -1,11 +1,6 @@
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../helpers/getNodeType'
-import { Command } from '../types'
-
-export type Range = {
-  from: number,
-  to: number,
-}
+import { Command, Range } from '../types'
 
 /**
  * Replaces text with a node within a range.
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index b9ff3aaf..4f4fc4eb 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -130,3 +130,8 @@ export type ChainedCommands = {
 export type CanCommands = SingleCommands & { chain: () => ChainedCommands }
 
 export type FocusPosition = 'start' | 'end' | number | boolean | null
+
+export type Range = {
+  from: number,
+  to: number,
+}
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index ff8edb96..d4b7f669 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -8,7 +8,6 @@ export const Mention = Node.create({
 
   defaultOptions: <MentionOptions>{
     char: '@',
-    render: () => ({}),
   },
 
   group: 'inline',
@@ -50,6 +49,7 @@ export const Mention = Node.create({
         command: ({ range }) => {
           this.editor
             .chain()
+            .focus()
             .replace(range, 'mention')
             .insertText(' ')
             .run()
diff --git a/packages/suggestion/src/findSuggestionMatch.ts b/packages/suggestion/src/findSuggestionMatch.ts
index 23a1c088..35dac99f 100644
--- a/packages/suggestion/src/findSuggestionMatch.ts
+++ b/packages/suggestion/src/findSuggestionMatch.ts
@@ -1,3 +1,4 @@
+import { Range } from '@tiptap/core'
 import { ResolvedPos } from 'prosemirror-model'
 
 export interface Trigger {
@@ -8,10 +9,7 @@ export interface Trigger {
 }
 
 export type SuggestionMatch = {
-  range: {
-    from: number,
-    to: number,
-  },
+  range: Range,
   query: string,
   text: string,
 } | null
diff --git a/packages/suggestion/src/getVirtualNode.ts b/packages/suggestion/src/getVirtualNode.ts
index 7f2ca9ab..1b6a5c73 100644
--- a/packages/suggestion/src/getVirtualNode.ts
+++ b/packages/suggestion/src/getVirtualNode.ts
@@ -1,4 +1,10 @@
-export function getVirtualNode(node: Element) {
+export interface VirtualNode {
+  getBoundingClientRect: () => DOMRect,
+  clientWidth: number,
+  clientHeight: number,
+}
+
+export function getVirtualNode(node: Element): VirtualNode {
   return {
     getBoundingClientRect() {
       return node.getBoundingClientRect()
diff --git a/packages/suggestion/src/index.ts b/packages/suggestion/src/index.ts
index 43cdefd6..6a8d7a35 100644
--- a/packages/suggestion/src/index.ts
+++ b/packages/suggestion/src/index.ts
@@ -1,5 +1,7 @@
 import { Suggestion } from './suggestion'
 
+export * from './findSuggestionMatch'
+export * from './getVirtualNode'
 export * from './suggestion'
 
 export default Suggestion
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 7cc86058..37fbf43e 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -1,8 +1,8 @@
-import { Editor } from '@tiptap/core'
+import { Editor, Range } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
-import { getVirtualNode } from './getVirtualNode'
+import { getVirtualNode, VirtualNode } from './getVirtualNode'
 
 export interface SuggestionOptions {
   editor: Editor,
@@ -10,17 +10,35 @@ export interface SuggestionOptions {
   allowSpaces?: boolean,
   startOfLine?: boolean,
   suggestionClass?: string,
-  command?: (props: any) => any,
+  command?: (props: { range: Range }) => void,
   items?: (query: string) => any[],
   render?: () => {
-    onStart?: (props: any) => void,
-    onUpdate?: (props: any) => void,
-    onExit?: (props: any) => void,
-    onKeyDown?: (props: any) => boolean,
+    onStart?: (props: SuggestionProps) => void,
+    onUpdate?: (props: SuggestionProps) => void,
+    onExit?: (props: SuggestionProps) => void,
+    onKeyDown?: (props: SuggestionKeyDownProps) => boolean,
   },
 }
 
+export interface SuggestionProps {
+  editor: Editor,
+  range: Range,
+  query: string,
+  text: string,
+  items: any[],
+  command: () => void,
+  decorationNode: Element | null,
+  virtualNode: VirtualNode | null,
+}
+
+export interface SuggestionKeyDownProps {
+  view: EditorView,
+  event: KeyboardEvent,
+  range: Range,
+}
+
 export function Suggestion({
+  editor,
   char = '@',
   allowSpaces = false,
   startOfLine = false,
@@ -57,8 +75,8 @@ export function Suggestion({
 
           const state = handleExit ? prev : next
           const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
-          const props = {
-            view,
+          const props: SuggestionProps = {
+            editor,
             range: state.range,
             query: state.query,
             text: state.text,

From 953afb7c0dc3f2220d838f832d17f1ffd1ff551c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 12:03:38 +0100
Subject: [PATCH 20/28] fix mention rendering

---
 docs/src/demos/Nodes/Mention/MentionList.vue |  2 +-
 docs/src/demos/Nodes/Mention/index.vue       |  2 +-
 packages/core/src/commands/replace.ts        |  4 ++--
 packages/extension-mention/src/mention.ts    | 14 ++++++++------
 packages/suggestion/src/suggestion.ts        | 10 +++++-----
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 5a625751..bf9b9552 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -74,7 +74,7 @@ export default {
       const item = this.items[index]
 
       if (item) {
-        this.command(item)
+        this.command({ id: item })
       }
     },
   },
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 3c163d17..6cd716f0 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -70,7 +70,7 @@ export default {
         }),
       ],
       content: `
-        <p>text <span data-mention></span></p>
+        <p>text <span data-mention="Philipp"></span></p>
       `,
     })
   },
diff --git a/packages/core/src/commands/replace.ts b/packages/core/src/commands/replace.ts
index 92c693a8..ae29981a 100644
--- a/packages/core/src/commands/replace.ts
+++ b/packages/core/src/commands/replace.ts
@@ -1,11 +1,11 @@
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../helpers/getNodeType'
-import { Command, Range } from '../types'
+import { Command, Range, AnyObject } from '../types'
 
 /**
  * Replaces text with a node within a range.
  */
-export const replace = (range: Range | null = null, typeOrName: string | NodeType, attrs = {}): Command => ({ tr, state, dispatch }) => {
+export const replace = (range: Range | null = null, typeOrName: string | NodeType, attrs: AnyObject = {}): Command => ({ tr, state, dispatch }) => {
   const type = getNodeType(typeOrName, state.schema)
   const { $from, $to } = state.selection
   const index = $from.index()
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index d4b7f669..cae92f99 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -22,9 +22,11 @@ export const Mention = Node.create({
     return {
       id: {
         default: null,
-      },
-      label: {
-        default: null,
+        parseHTML: element => {
+          return {
+            id: element.getAttribute('data-mention'),
+          }
+        },
       },
     }
   },
@@ -38,7 +40,7 @@ export const Mention = Node.create({
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    return ['span', HTMLAttributes, `@${node.attrs.label}`]
+    return ['span', HTMLAttributes, `@${node.attrs.id}`]
   },
 
   addProseMirrorPlugins() {
@@ -46,11 +48,11 @@ export const Mention = Node.create({
       Suggestion({
         editor: this.editor,
         ...this.options,
-        command: ({ range }) => {
+        command: ({ range, attributes }) => {
           this.editor
             .chain()
             .focus()
-            .replace(range, 'mention')
+            .replace(range, 'mention', attributes)
             .insertText(' ')
             .run()
         },
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 37fbf43e..2d73511b 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -1,4 +1,4 @@
-import { Editor, Range } from '@tiptap/core'
+import { Editor, Range, AnyObject } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
@@ -10,7 +10,7 @@ export interface SuggestionOptions {
   allowSpaces?: boolean,
   startOfLine?: boolean,
   suggestionClass?: string,
-  command?: (props: { range: Range }) => void,
+  command?: (props: { range: Range, attributes: AnyObject }) => void,
   items?: (query: string) => any[],
   render?: () => {
     onStart?: (props: SuggestionProps) => void,
@@ -26,7 +26,7 @@ export interface SuggestionProps {
   query: string,
   text: string,
   items: any[],
-  command: () => void,
+  command: (attributes: AnyObject) => void,
   decorationNode: Element | null,
   virtualNode: VirtualNode | null,
 }
@@ -83,8 +83,8 @@ export function Suggestion({
             items: (handleChange || handleStart)
               ? await items(state.query)
               : [],
-            command: () => {
-              command({ range: state.range })
+            command: attributes => {
+              command({ range: state.range, attributes })
             },
             decorationNode,
             // build a virtual node for popper.js or tippy.js

From a97c07dc73097db4a8f676ebf2cbd0212b0fed4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 12:11:43 +0100
Subject: [PATCH 21/28] update tippy position

---
 docs/src/demos/Nodes/Mention/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 6cd716f0..1aafe52d 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -57,6 +57,10 @@ export default {
               },
               onUpdate(props) {
                 component.updateProps(props)
+
+                popup[0].setProps({
+                  getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
+                })
               },
               onKeyDown(props) {
                 return component.vm.onKeyDown(props)

From 19c3599605bb9c52494a010c25323d6488c93999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 12:28:33 +0100
Subject: [PATCH 22/28] refactoring

---
 docs/src/demos/Nodes/Mention/index.vue    |  4 ++--
 packages/suggestion/src/getVirtualNode.ts | 15 ---------------
 packages/suggestion/src/index.ts          |  1 -
 packages/suggestion/src/suggestion.ts     |  9 +++------
 4 files changed, 5 insertions(+), 24 deletions(-)
 delete mode 100644 packages/suggestion/src/getVirtualNode.ts

diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 1aafe52d..2596a9a9 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -46,7 +46,7 @@ export default {
                 })
 
                 popup = tippy('body', {
-                  getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
+                  getReferenceClientRect: () => props.clientRect,
                   appendTo: () => document.body,
                   content: component.element,
                   showOnCreate: true,
@@ -59,7 +59,7 @@ export default {
                 component.updateProps(props)
 
                 popup[0].setProps({
-                  getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
+                  getReferenceClientRect: () => props.clientRect,
                 })
               },
               onKeyDown(props) {
diff --git a/packages/suggestion/src/getVirtualNode.ts b/packages/suggestion/src/getVirtualNode.ts
deleted file mode 100644
index 1b6a5c73..00000000
--- a/packages/suggestion/src/getVirtualNode.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface VirtualNode {
-  getBoundingClientRect: () => DOMRect,
-  clientWidth: number,
-  clientHeight: number,
-}
-
-export function getVirtualNode(node: Element): VirtualNode {
-  return {
-    getBoundingClientRect() {
-      return node.getBoundingClientRect()
-    },
-    clientWidth: node.clientWidth,
-    clientHeight: node.clientHeight,
-  }
-}
diff --git a/packages/suggestion/src/index.ts b/packages/suggestion/src/index.ts
index 6a8d7a35..5e319dd4 100644
--- a/packages/suggestion/src/index.ts
+++ b/packages/suggestion/src/index.ts
@@ -1,7 +1,6 @@
 import { Suggestion } from './suggestion'
 
 export * from './findSuggestionMatch'
-export * from './getVirtualNode'
 export * from './suggestion'
 
 export default Suggestion
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 2d73511b..17c30152 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -2,7 +2,6 @@ import { Editor, Range, AnyObject } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
-import { getVirtualNode, VirtualNode } from './getVirtualNode'
 
 export interface SuggestionOptions {
   editor: Editor,
@@ -28,7 +27,7 @@ export interface SuggestionProps {
   items: any[],
   command: (attributes: AnyObject) => void,
   decorationNode: Element | null,
-  virtualNode: VirtualNode | null,
+  clientRect: DOMRect | null,
 }
 
 export interface SuggestionKeyDownProps {
@@ -87,11 +86,9 @@ export function Suggestion({
               command({ range: state.range, attributes })
             },
             decorationNode,
-            // build a virtual node for popper.js or tippy.js
+            // virtual node for popper.js or tippy.js
             // this can be used for building popups without a DOM node
-            virtualNode: decorationNode
-              ? getVirtualNode(decorationNode)
-              : null,
+            clientRect: decorationNode?.getBoundingClientRect() || null,
           }
 
           if (handleStart) {

From 008fd9b51912033b69f18bfa36fcd182acac4bdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 12:50:09 +0100
Subject: [PATCH 23/28] refactoring

---
 docs/src/demos/Nodes/Mention/index.vue    | 74 ++++++++++++-----------
 packages/extension-mention/src/mention.ts | 23 ++++++-
 2 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 2596a9a9..bdf54159 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -31,45 +31,47 @@ export default {
         Paragraph,
         Text,
         Mention.configure({
-          items: query => {
-            return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
-          },
-          render: () => {
-            let component
-            let popup
+          suggestionOptions: {
+            items: query => {
+              return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
+            },
+            render: () => {
+              let component
+              let popup
 
-            return {
-              onStart: props => {
-                component = new VueRenderer(MentionList, {
-                  parent: this,
-                  propsData: props,
-                })
+              return {
+                onStart: props => {
+                  component = new VueRenderer(MentionList, {
+                    parent: this,
+                    propsData: props,
+                  })
 
-                popup = tippy('body', {
-                  getReferenceClientRect: () => props.clientRect,
-                  appendTo: () => document.body,
-                  content: component.element,
-                  showOnCreate: true,
-                  interactive: true,
-                  trigger: 'manual',
-                  placement: 'top-start',
-                })
-              },
-              onUpdate(props) {
-                component.updateProps(props)
+                  popup = tippy('body', {
+                    getReferenceClientRect: () => props.clientRect,
+                    appendTo: () => document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'top-start',
+                  })
+                },
+                onUpdate(props) {
+                  component.updateProps(props)
 
-                popup[0].setProps({
-                  getReferenceClientRect: () => props.clientRect,
-                })
-              },
-              onKeyDown(props) {
-                return component.vm.onKeyDown(props)
-              },
-              onExit() {
-                popup[0].destroy()
-                component.destroy()
-              },
-            }
+                  popup[0].setProps({
+                    getReferenceClientRect: () => props.clientRect,
+                  })
+                },
+                onKeyDown(props) {
+                  return component.vm.onKeyDown(props)
+                },
+                onExit() {
+                  popup[0].destroy()
+                  component.destroy()
+                },
+              }
+            },
           },
         }),
       ],
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index cae92f99..17e66e28 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -1,13 +1,21 @@
 import { Node } from '@tiptap/core'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
-export type MentionOptions = Omit<SuggestionOptions, 'editor'>
+export type MentionOptions = {
+  HTMLAttributes: {
+    [key: string]: any,
+  },
+  suggestionOptions: Omit<SuggestionOptions, 'editor'>,
+}
 
 export const Mention = Node.create({
   name: 'mention',
 
   defaultOptions: <MentionOptions>{
-    char: '@',
+    HTMLAttributes: {},
+    suggestionOptions: {
+      char: '@',
+    },
   },
 
   group: 'inline',
@@ -27,6 +35,15 @@ export const Mention = Node.create({
             id: element.getAttribute('data-mention'),
           }
         },
+        renderHTML: attributes => {
+          if (!attributes.id) {
+            return {}
+          }
+
+          return {
+            'data-mention': attributes.id,
+          }
+        },
       },
     }
   },
@@ -47,7 +64,7 @@ export const Mention = Node.create({
     return [
       Suggestion({
         editor: this.editor,
-        ...this.options,
+        ...this.options.suggestionOptions,
         command: ({ range, attributes }) => {
           this.editor
             .chain()

From c5caec14d76ca6be5b53682b027ade4645c9ebec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 12:52:31 +0100
Subject: [PATCH 24/28] refactoring

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index bf9b9552..14078872 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -17,12 +17,12 @@ export default {
   props: {
     items: {
       type: Array,
-      default: () => [],
+      required: true,
     },
 
     command: {
       type: Function,
-      default: () => true,
+      required: true,
     },
   },
 

From 8a59f484d0b9ee1e11faddcebdc00fb1458d4944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 20:27:51 +0100
Subject: [PATCH 25/28] fix copying mentions as plain text

---
 docs/src/demos/Examples/Drawing/Paper.js      |  4 +-
 .../NodeViews/DragHandle/DraggableItem.js     |  4 +-
 .../TableOfContents/TableOfContents.js        |  4 +-
 docs/src/docPages/guide/node-views.md         |  6 +-
 packages/core/src/Editor.ts                   |  2 +-
 packages/core/src/ExtensionManager.ts         | 26 ++++++--
 packages/core/src/Node.ts                     | 15 +++++
 .../src/extensions/clipboardTextSerializer.ts | 60 +++++++++++++++++++
 packages/core/src/extensions/index.ts         |  1 +
 packages/extension-mention/src/mention.ts     |  4 ++
 .../suggestion/src/findSuggestionMatch.ts     |  5 +-
 11 files changed, 116 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/extensions/clipboardTextSerializer.ts

diff --git a/docs/src/demos/Examples/Drawing/Paper.js b/docs/src/demos/Examples/Drawing/Paper.js
index 71eab1c3..844459bf 100644
--- a/docs/src/demos/Examples/Drawing/Paper.js
+++ b/docs/src/demos/Examples/Drawing/Paper.js
@@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -30,6 +30,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
diff --git a/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js b/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
index 025cc9be..910c0b2d 100644
--- a/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
+++ b/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
@@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -24,6 +24,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js b/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
index a52a6571..7c0e6092 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
@@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -22,6 +22,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md
index 0d6002c7..e6fb1ee1 100644
--- a/docs/src/docPages/guide/node-views.md
+++ b/docs/src/docPages/guide/node-views.md
@@ -7,7 +7,7 @@ Node views are the best thing since sliced bread, at least if you’re a fan of
 
 <!-- ```js
 import { Node } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -83,12 +83,12 @@ https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item
 
 ```js
 import { Node } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
 ```
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index c1f0ba65..0ee0bc36 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -29,7 +29,7 @@ export class Editor extends EventEmitter {
 
   private commandManager!: CommandManager
 
-  private extensionManager!: ExtensionManager
+  public extensionManager!: ExtensionManager
 
   private css!: HTMLStyleElement
 
diff --git a/packages/core/src/ExtensionManager.ts b/packages/core/src/ExtensionManager.ts
index 9c7cfbb4..82c32088 100644
--- a/packages/core/src/ExtensionManager.ts
+++ b/packages/core/src/ExtensionManager.ts
@@ -6,6 +6,7 @@ import { Editor } from './Editor'
 import { Extensions, NodeViewRenderer } from './types'
 import getSchema from './helpers/getSchema'
 import getSchemaTypeByName from './helpers/getSchemaTypeByName'
+import getNodeType from './helpers/getNodeType'
 import splitExtensions from './helpers/splitExtensions'
 import getAttributesFromExtensions from './helpers/getAttributesFromExtensions'
 import getRenderedAttributes from './helpers/getRenderedAttributes'
@@ -145,11 +146,9 @@ export default class ExtensionManager {
         const context = {
           options: extension.options,
           editor,
-          type: getSchemaTypeByName(extension.config.name, this.schema),
+          type: getNodeType(extension.config.name, this.schema),
         }
-
-        // @ts-ignore
-        const renderer = extension.config.addNodeView?.bind(context)?.() as NodeViewRenderer
+        const renderer = extension.config.addNodeView?.call(context) as NodeViewRenderer
 
         const nodeview = (
           node: ProsemirrorNode,
@@ -173,4 +172,23 @@ export default class ExtensionManager {
       }))
   }
 
+  get textSerializers() {
+    const { editor } = this
+    const { nodeExtensions } = splitExtensions(this.extensions)
+
+    return Object.fromEntries(nodeExtensions
+      .filter(extension => !!extension.config.renderText)
+      .map(extension => {
+        const context = {
+          options: extension.options,
+          editor,
+          type: getNodeType(extension.config.name, this.schema),
+        }
+
+        const textSerializer = (props: { node: ProsemirrorNode }) => extension.config.renderText?.call(context, props)
+
+        return [extension.config.name, textSerializer]
+      }))
+  }
+
 }
diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts
index 802eb41a..44accd6b 100644
--- a/packages/core/src/Node.ts
+++ b/packages/core/src/Node.ts
@@ -88,6 +88,20 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
     }
   ) => DOMOutputSpec) | null,
 
+  /**
+   * Render Text
+   */
+  renderText?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: NodeType,
+    },
+    props: {
+      node: ProseMirrorNode,
+    }
+  ) => string) | null,
+
   /**
    * Add Attributes
    */
@@ -257,6 +271,7 @@ export class Node<Options = any, Commands = {}> {
     isolating: null,
     parseHTML: () => null,
     renderHTML: null,
+    renderText: null,
     addAttributes: () => ({}),
     addNodeView: null,
     onCreate: null,
diff --git a/packages/core/src/extensions/clipboardTextSerializer.ts b/packages/core/src/extensions/clipboardTextSerializer.ts
new file mode 100644
index 00000000..b6bb56be
--- /dev/null
+++ b/packages/core/src/extensions/clipboardTextSerializer.ts
@@ -0,0 +1,60 @@
+import { Editor } from '@tiptap/core'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Extension } from '../Extension'
+
+const textBetween = (
+  editor: Editor,
+  from: number,
+  to: number,
+  blockSeparator?: string,
+  leafText?: string,
+): string => {
+  let text = ''
+  let separated = true
+
+  editor.state.doc.nodesBetween(from, to, (node, pos) => {
+    const textSerializer = editor.extensionManager.textSerializers[node.type.name]
+
+    if (textSerializer) {
+      text += textSerializer({ node })
+      separated = !blockSeparator
+    } else if (node.isText) {
+      text += node?.text?.slice(Math.max(from, pos) - pos, to - pos)
+      separated = !blockSeparator
+    } else if (node.isLeaf && leafText) {
+      text += leafText
+      separated = !blockSeparator
+    } else if (!separated && node.isBlock) {
+      text += blockSeparator
+      separated = true
+    }
+  }, 0)
+
+  return text
+}
+
+export const ClipboardTextSerializer = Extension.create({
+  name: 'editable',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('clipboardTextSerializer'),
+        props: {
+          clipboardTextSerializer: () => {
+            const { editor } = this
+            const { from, to } = editor.state.selection
+
+            return textBetween(editor, from, to, '\n')
+          },
+        },
+      }),
+    ]
+  },
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    ClipboardTextSerializer: typeof ClipboardTextSerializer,
+  }
+}
diff --git a/packages/core/src/extensions/index.ts b/packages/core/src/extensions/index.ts
index e9c6a76d..66302f22 100644
--- a/packages/core/src/extensions/index.ts
+++ b/packages/core/src/extensions/index.ts
@@ -1,3 +1,4 @@
+export { ClipboardTextSerializer } from './clipboardTextSerializer'
 export { Commands } from './commands'
 export { Editable } from './editable'
 export { FocusEvents } from './focusEvents'
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 17e66e28..921b4a94 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -60,6 +60,10 @@ export const Mention = Node.create({
     return ['span', HTMLAttributes, `@${node.attrs.id}`]
   },
 
+  renderText({ node }) {
+    return `@${node.attrs.id}`
+  },
+
   addProseMirrorPlugins() {
     return [
       Suggestion({
diff --git a/packages/suggestion/src/findSuggestionMatch.ts b/packages/suggestion/src/findSuggestionMatch.ts
index 35dac99f..e548a700 100644
--- a/packages/suggestion/src/findSuggestionMatch.ts
+++ b/packages/suggestion/src/findSuggestionMatch.ts
@@ -16,7 +16,10 @@ export type SuggestionMatch = {
 
 export function findSuggestionMatch(config: Trigger): SuggestionMatch {
   const {
-    char, allowSpaces, startOfLine, $position,
+    char,
+    allowSpaces,
+    startOfLine,
+    $position,
   } = config
 
   // cancel if top level node

From 397df8c6737fdac26cc2c6279ee2a5be21611e33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 20:42:15 +0100
Subject: [PATCH 26/28] refactoring

---
 docs/src/demos/Nodes/Mention/MentionList.vue |  4 ++--
 docs/src/demos/Nodes/Mention/index.vue       | 14 +++++++++++++-
 packages/extension-mention/src/mention.ts    |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 14078872..c48104fd 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -104,8 +104,8 @@ export default {
 
   &.is-selected,
   &:hover {
-    color: black;
-    background: rgba(black, 0.1);
+    color: #A975FF;
+    background: rgba(#A975FF, 0.1);
   }
 }
 </style>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index bdf54159..900e9800 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -31,6 +31,9 @@ export default {
         Paragraph,
         Text,
         Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
           suggestionOptions: {
             items: query => {
               return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
@@ -76,7 +79,7 @@ export default {
         }),
       ],
       content: `
-        <p>text <span data-mention="Philipp"></span></p>
+        <p>Hello <span data-mention="Hans"></span> and <span data-mention="Philipp"></span> and <span data-mention="Kris"></span>!</p>
       `,
     })
   },
@@ -86,3 +89,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.mention {
+  color: #A975FF;
+  background-color: rgba(#A975FF, 0.1);
+  border-radius: 0.3rem;
+  padding: 0.1rem 0.3rem;
+}
+</style>
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 921b4a94..a7412c2c 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/core'
+import { Node, mergeAttributes } from '@tiptap/core'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
 export type MentionOptions = {
@@ -57,7 +57,7 @@ export const Mention = Node.create({
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    return ['span', HTMLAttributes, `@${node.attrs.id}`]
+    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), `@${node.attrs.id}`]
   },
 
   renderText({ node }) {

From 3109f119803cb09a11f7ef65a81ffe8ab430ab15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 20:45:18 +0100
Subject: [PATCH 27/28] refactoring

---
 packages/suggestion/src/suggestion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 17c30152..685bf898 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -50,7 +50,7 @@ export function Suggestion({
   const renderer = render?.()
 
   return new Plugin({
-    key: new PluginKey('suggestions'),
+    key: new PluginKey('suggestion'),
 
     view() {
       return {

From ab2d7d56c05e031791540ef91f53ddb12d1b4203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 22:29:46 +0100
Subject: [PATCH 28/28] refactoring

---
 packages/core/src/Extension.ts | 7 ++-----
 packages/core/src/Mark.ts      | 7 ++-----
 packages/core/src/Node.ts      | 7 ++-----
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/Extension.ts b/packages/core/src/Extension.ts
index 3d74cc91..41e29459 100644
--- a/packages/core/src/Extension.ts
+++ b/packages/core/src/Extension.ts
@@ -171,13 +171,10 @@ export class Extension<Options = any, Commands = any> {
     return new Extension<O, C>(config)
   }
 
-  configure(options?: Partial<Options>) {
+  configure(options: Partial<Options> = {}) {
     return Extension
       .create<Options, Commands>(this.config as ExtensionConfig<Options, Commands>)
-      .#configure({
-        ...this.config.defaultOptions,
-        ...options,
-      })
+      .#configure(options)
   }
 
   #configure = (options: Partial<Options>) => {
diff --git a/packages/core/src/Mark.ts b/packages/core/src/Mark.ts
index 857c02fe..230fc643 100644
--- a/packages/core/src/Mark.ts
+++ b/packages/core/src/Mark.ts
@@ -231,13 +231,10 @@ export class Mark<Options = any, Commands = {}> {
     return new Mark<O, C>(config)
   }
 
-  configure(options?: Partial<Options>) {
+  configure(options: Partial<Options> = {}) {
     return Mark
       .create<Options, Commands>(this.config as MarkConfig<Options, Commands>)
-      .#configure({
-        ...this.config.defaultOptions,
-        ...options,
-      })
+      .#configure(options)
   }
 
   #configure = (options: Partial<Options>) => {
diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts
index 44accd6b..b831dfc3 100644
--- a/packages/core/src/Node.ts
+++ b/packages/core/src/Node.ts
@@ -298,13 +298,10 @@ export class Node<Options = any, Commands = {}> {
     return new Node<O, C>(config)
   }
 
-  configure(options?: Partial<Options>) {
+  configure(options: Partial<Options> = {}) {
     return Node
       .create<Options, Commands>(this.config as NodeConfig<Options, Commands>)
-      .#configure({
-        ...this.config.defaultOptions,
-        ...options,
-      })
+      .#configure(options)
   }
 
   #configure = (options: Partial<Options>) => {