Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/violet-crabs-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tiptap/suggestion': patch
---

Fix exitSuggestion for one pluginKey can activate another suggestion pluginKey
65 changes: 64 additions & 1 deletion packages/suggestion/src/__tests__/suggestion.test.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Editor, Extension } from '@tiptap/core'
import { PluginKey } from '@tiptap/pm/state'
import StarterKit from '@tiptap/starter-kit'
import { describe, expect, it, vi } from 'vitest'

import { Suggestion } from '../suggestion.js'
import { exitSuggestion, Suggestion } from '../suggestion.js'

describe('suggestion integration', () => {
it('should respect shouldShow returning false', async () => {
Expand Down Expand Up @@ -124,4 +125,66 @@ describe('suggestion integration', () => {

editor.destroy()
})

it('should not activate another suggestion when exitSuggestion is called', async () => {
const pluginKeyA = new PluginKey('suggestionA')
const pluginKeyB = new PluginKey('suggestionB')

const onStartB = vi.fn()

const SuggestionA = Extension.create({
name: 'suggestion-a',
addProseMirrorPlugins() {
return [
Suggestion({
editor: this.editor,
pluginKey: pluginKeyA,
char: '@',
}),
]
},
})

const SuggestionB = Extension.create({
name: 'suggestion-b',
addProseMirrorPlugins() {
return [
Suggestion({
editor: this.editor,
pluginKey: pluginKeyB,
char: '#',
render: () => ({
onStart: onStartB,
}),
}),
]
},
})

const editor = new Editor({
extensions: [StarterKit, SuggestionA, SuggestionB],
content: '<p>#tag</p>',
})

// Place cursor at end of "#tag" — this activates suggestion B
editor.commands.setTextSelection(5)
await Promise.resolve()
expect(pluginKeyB.getState(editor.state).active).toBe(true)

// Exit suggestion B programmatically
exitSuggestion(editor.view, pluginKeyB)
await Promise.resolve()
expect(pluginKeyB.getState(editor.state).active).toBe(false)

onStartB.mockClear()

// Now exit suggestion A (not active) — this should NOT re-activate B
exitSuggestion(editor.view, pluginKeyA)
await Promise.resolve()

expect(pluginKeyB.getState(editor.state).active).toBe(false)
expect(onStartB).not.toHaveBeenCalled()

editor.destroy()
})
})
18 changes: 16 additions & 2 deletions packages/suggestion/src/suggestion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,14 @@ export interface SuggestionKeyDownProps {

export const SuggestionPluginKey = new PluginKey('suggestion')

/**
* Shared meta key used by all Suggestion plugin instances to signal that
* the current transaction is an exit. Other instances skip match logic
* when this meta is present so exiting one suggestion cannot accidentally
* activate another.
*/
const SUGGESTION_EXIT_META = 'suggestionExit'

/**
* This utility allows you to create suggestions.
* @see https://tiptap.dev/api/utilities/suggestion
Expand Down Expand Up @@ -284,7 +292,7 @@ export function Suggestion<I = any, TSelected = any>({
// ignore errors from consumer renderers
}

const tr = view.state.tr.setMeta(pluginKeyRef, { exit: true })
const tr = view.state.tr.setMeta(pluginKeyRef, { exit: true }).setMeta(SUGGESTION_EXIT_META, true)
// Dispatch a metadata-only transaction to signal the plugin to exit
view.dispatch(tr)
}
Expand Down Expand Up @@ -418,6 +426,12 @@ export function Suggestion<I = any, TSelected = any>({
return next
}

// Another suggestion plugin is exiting — keep our current state
// unchanged so we don't accidentally activate from the exit transaction.
if (transaction.getMeta(SUGGESTION_EXIT_META)) {
return prev
Comment on lines +430 to +432
}

next.composing = composing

// We can only be suggesting if the view is editable, and:
Expand Down Expand Up @@ -580,6 +594,6 @@ export function Suggestion<I = any, TSelected = any>({
* decorations without touching the document or causing mapping errors.
*/
export function exitSuggestion(view: EditorView, pluginKeyRef: PluginKey = SuggestionPluginKey) {
const tr = view.state.tr.setMeta(pluginKeyRef, { exit: true })
const tr = view.state.tr.setMeta(pluginKeyRef, { exit: true }).setMeta(SUGGESTION_EXIT_META, true)
view.dispatch(tr)
}
Loading