chore(storybook): Prevent keyDown propagation with hidden suggestio…

…n dropdown
Doist · Sep 30, 2024 · 983b772 · 983b772
1 parent f1367f7
commit 983b772
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/stories/typist-editor/extensions/hashtag-suggestion.ts b/stories/typist-editor/extensions/hashtag-suggestion.ts
@@ -44,8 +44,10 @@ const HashtagSuggestion: SuggestionExtensionResult<HashtagSuggestionItem> =
 
             // 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<HashtagSuggestionItem> =
                         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<HashtagSuggestionItem> =
                     })
                 },
                 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
@@ -40,8 +40,10 @@ const MentionSuggestion: SuggestionExtensionResult<MentionSuggestionItem> =
 
             // 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<MentionSuggestionItem> =
                         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<MentionSuggestionItem> =
                     })
                 },
                 onKeyDown(props) {
-                    if (!isDropdownInitialized) {
+                    if (!isDropdownInitialized || isDropdownHidden) {
                         return false
                     }