fix: add pluginKey option to suggestion plugin, fix #1282

docs/src/docPages/api/utilities/suggestion.md

@@ -6,8 +6,9 @@ This utility helps with all kinds of suggestions in the editor. Have a look at t
 
 ## Settings
 | Option          | Type        | Default               | Description                                                 |
-| --------------- | ---------- | -------------- | ----------------------------------------------------------- |
+| --------------- | ----------- | --------------------- | ----------------------------------------------------------- |
 | char            | `String`    | `'@'`                 | The character that triggers the autocomplete popup.         |
+| pluginKey       | `PluginKey` | `SuggestionPluginKey` | A ProseMirror PluginKey.                                    |
 | allowSpaces     | `Boolean`   | `false`               | Allows or disallows spaces in suggested items.              |
 | startOfLine     | `Boolean`   | `false`               | Trigger the autocomplete popup at the start of a line only. |
 | decorationTag   | `String`    | `'span'`              | The HTML tag that should be rendered for the suggestion.    |

packages/extension-mention/package.json

@@ -24,7 +24,9 @@
     "@tiptap/core": "^2.0.0-beta.1"
   },
   "dependencies": {
-    "@tiptap/suggestion": "^2.0.0-beta.62"
+    "@tiptap/suggestion": "^2.0.0-beta.62",
+    "prosemirror-model": "^1.14.3",
+    "prosemirror-state": "^1.3.4"
   },
   "repository": {
     "type": "git",

packages/extension-mention/src/mention.ts

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from '@tiptap/core'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { PluginKey } from 'prosemirror-state'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
 export type MentionOptions = {
@@ -11,6 +12,8 @@ export type MentionOptions = {
   suggestion: Omit<SuggestionOptions, 'editor'>,
 }
 
+export const MentionPluginKey = new PluginKey('mention')
+
 export const Mention = Node.create<MentionOptions>({
   name: 'mention',
 
@@ -21,6 +24,7 @@ export const Mention = Node.create<MentionOptions>({
     },
     suggestion: {
       char: '@',
+      pluginKey: MentionPluginKey,
       command: ({ editor, range, props }) => {
         editor
           .chain()

packages/suggestion/src/suggestion.ts

@@ -4,6 +4,7 @@ import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
 
 export interface SuggestionOptions {
+  pluginKey?: PluginKey,
   editor: Editor,
   char?: string,
   allowSpaces?: boolean,
@@ -45,7 +46,10 @@ export interface SuggestionKeyDownProps {
   range: Range,
 }
 
+export const SuggestionPluginKey = new PluginKey('suggestion')
+
 export function Suggestion({
+  pluginKey = SuggestionPluginKey,
   editor,
   char = '@',
   allowSpaces = false,
@@ -61,7 +65,7 @@ export function Suggestion({
   const renderer = render?.()
 
   return new Plugin({
-    key: new PluginKey('suggestion'),
+    key: pluginKey,
 
     view() {
       return {