diff --git a/docs/src/docPages/api/utilities/suggestion.md b/docs/src/docPages/api/utilities/suggestion.md index 79671ef3..e963df0d 100644 --- a/docs/src/docPages/api/utilities/suggestion.md +++ b/docs/src/docPages/api/utilities/suggestion.md @@ -5,16 +5,17 @@ This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention), [`Hashtag`](/api/nodes/hashtag) or [`Emoji`](/api/nodes/emoji) node to see it in action. ## Settings -| Option | Type | Default | Description | -| --------------- | ---------- | -------------- | ----------------------------------------------------------- | -| char | `String` | `'@'` | The character that triggers the autocomplete popup. | -| 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. | -| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. | -| command | `Function` | `() => {}'` | Executed when a suggestion is selected. | -| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. | -| render | `Function` | `() => ({})` | A render function for the autocomplete popup. | +| 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. | +| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. | +| command | `Function` | `() => {}'` | Executed when a suggestion is selected. | +| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. | +| render | `Function` | `() => ({})` | A render function for the autocomplete popup. | ## Source code [packages/suggestion/](https://github.com/ueberdosis/tiptap/blob/main/packages/suggestion/) diff --git a/packages/extension-mention/package.json b/packages/extension-mention/package.json index 0532de89..e917a5ae 100644 --- a/packages/extension-mention/package.json +++ b/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", diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts index f01378bc..0189b5f9 100644 --- a/packages/extension-mention/src/mention.ts +++ b/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, } +export const MentionPluginKey = new PluginKey('mention') + export const Mention = Node.create({ name: 'mention', @@ -21,6 +24,7 @@ export const Mention = Node.create({ }, suggestion: { char: '@', + pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { editor .chain() diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts index 78ca77ae..6fd508a2 100644 --- a/packages/suggestion/src/suggestion.ts +++ b/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 {