diff --git a/stories/typist-editor/extensions/hashtag-suggestion.ts b/stories/typist-editor/extensions/hashtag-suggestion.ts index b3bf3b5b..dcdfa61c 100644 --- a/stories/typist-editor/extensions/hashtag-suggestion.ts +++ b/stories/typist-editor/extensions/hashtag-suggestion.ts @@ -44,8 +44,10 @@ const HashtagSuggestion: SuggestionExtensionResult = // These flag variables control when the renderer functions are allowed to be called, // and they are needed to work around a few issues with Tiptap's suggestion utility: + // * https://github.com/ueberdosis/tiptap/issues/214 // * https://github.com/ueberdosis/tiptap/issues/2547 // * https://github.com/ueberdosis/tiptap/issues/2592 + let isDropdownHidden = false let isDropdownInitialized = false let wasDropdownDestroyed = false @@ -71,6 +73,12 @@ const HashtagSuggestion: SuggestionExtensionResult = getReferenceClientRect() { return props.clientRect?.() || DOM_RECT_FALLBACK }, + onHide() { + isDropdownHidden = true + }, + onShow() { + isDropdownHidden = false + }, content: reactRenderer.element, duration: [150, 200], interactive: true, @@ -124,13 +132,12 @@ const HashtagSuggestion: SuggestionExtensionResult = }) }, onKeyDown(props) { - if (!isDropdownInitialized) { + if (!isDropdownInitialized || isDropdownHidden) { return false } if (props.event.key === 'Escape') { - dropdown[0].destroy() - reactRenderer.destroy() + dropdown[0].hide() return true } diff --git a/stories/typist-editor/extensions/mention-suggestion.ts b/stories/typist-editor/extensions/mention-suggestion.ts index a618f206..542ec5ed 100644 --- a/stories/typist-editor/extensions/mention-suggestion.ts +++ b/stories/typist-editor/extensions/mention-suggestion.ts @@ -40,8 +40,10 @@ const MentionSuggestion: SuggestionExtensionResult = // These flag variables control when the renderer functions are allowed to be called, // and they are needed to work around a few issues with Tiptap's suggestion utility: + // * https://github.com/ueberdosis/tiptap/issues/214 // * https://github.com/ueberdosis/tiptap/issues/2547 // * https://github.com/ueberdosis/tiptap/issues/2592 + let isDropdownHidden = false let isDropdownInitialized = false let wasDropdownDestroyed = false @@ -64,6 +66,12 @@ const MentionSuggestion: SuggestionExtensionResult = getReferenceClientRect() { return props.clientRect?.() || DOM_RECT_FALLBACK }, + onHide() { + isDropdownHidden = true + }, + onShow() { + isDropdownHidden = false + }, content: reactRenderer.element, duration: [150, 200], interactive: true, @@ -88,7 +96,7 @@ const MentionSuggestion: SuggestionExtensionResult = }) }, onKeyDown(props) { - if (!isDropdownInitialized) { + if (!isDropdownInitialized || isDropdownHidden) { return false }