From d8c1dff34f18e537bef2cdbb83fdc401a38bf993 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 10 Oct 2025 01:35:14 +0530
Subject: [PATCH] [WIKI-725] regression: editor floaters propagation #7938

---
 .../extensions/emoji/components/emojis-list.tsx     | 13 ++++++-------
 .../editor/src/core/extensions/emoji/suggestion.ts  | 10 ++++++++--
 .../extensions/mentions/mentions-list-dropdown.tsx  |  1 -
 .../editor/src/core/extensions/mentions/utils.ts    |  7 ++++++-
 .../core/extensions/slash-commands/command-menu.tsx |  7 ++++++-
 .../src/core/extensions/slash-commands/root.tsx     |  7 ++++++-
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
index 87a505ba43..39867662cc 100644
--- a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
+++ b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
@@ -44,25 +44,18 @@ export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownPro
       if (query.length <= 0) {
         return false;
       }
-      if (event.key === "Escape") {
-        event.preventDefault();
-        return true;
-      }
 
       if (event.key === "ArrowUp") {
-        event.preventDefault();
         setSelectedIndex((prev) => (prev + items.length - 1) % items.length);
         return true;
       }
 
       if (event.key === "ArrowDown") {
-        event.preventDefault();
         setSelectedIndex((prev) => (prev + 1) % items.length);
         return true;
       }
 
       if (event.key === "Enter") {
-        event.preventDefault();
         selectItem(selectedIndex);
         return true;
       }
@@ -130,6 +123,12 @@ export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownPro
         style={{
           zIndex: 100,
         }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
       >
         {items.length ? (
           items.map((item, index) => {
diff --git a/packages/editor/src/core/extensions/emoji/suggestion.ts b/packages/editor/src/core/extensions/emoji/suggestion.ts
index 0ad7f558a1..83847d8d50 100644
--- a/packages/editor/src/core/extensions/emoji/suggestion.ts
+++ b/packages/editor/src/core/extensions/emoji/suggestion.ts
@@ -4,7 +4,7 @@ import { ReactRenderer, type Editor } from "@tiptap/react";
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { updateFloatingUIFloaterPosition } from "@/helpers/floating-ui";
-import { CommandListInstance } from "@/helpers/tippy";
+import { CommandListInstance, DROPDOWN_NAVIGATION_KEYS } from "@/helpers/tippy";
 // local imports
 import { type EmojiItem, EmojisListDropdown, EmojisListDropdownProps } from "./components/emojis-list";
 
@@ -82,11 +82,17 @@ export const emojiSuggestion: EmojiOptions["suggestion"] = {
         cleanup = updateFloatingUIFloaterPosition(props.editor, component.element).cleanup;
       },
       onKeyDown: ({ event }) => {
+        if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
         if (event.key === "Escape") {
           handleClose();
           return true;
         }
-        return component?.ref?.onKeyDown({ event }) || false;
+
+        return component?.ref?.onKeyDown({ event }) ?? false;
       },
 
       onExit: ({ editor }) => {
diff --git a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
index b670b94abd..51881098c5 100644
--- a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -50,7 +50,6 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }: { event: KeyboardEvent }) => {
       if (!DROPDOWN_NAVIGATION_KEYS.includes(event.key)) return false;
-      event.preventDefault();
 
       if (event.key === "Enter") {
         selectItem(selectedIndex.section, selectedIndex.item);
diff --git a/packages/editor/src/core/extensions/mentions/utils.ts b/packages/editor/src/core/extensions/mentions/utils.ts
index 73ea3d8293..96854fd26d 100644
--- a/packages/editor/src/core/extensions/mentions/utils.ts
+++ b/packages/editor/src/core/extensions/mentions/utils.ts
@@ -4,7 +4,7 @@ import type { SuggestionOptions } from "@tiptap/suggestion";
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { updateFloatingUIFloaterPosition } from "@/helpers/floating-ui";
-import { CommandListInstance } from "@/helpers/tippy";
+import { CommandListInstance, DROPDOWN_NAVIGATION_KEYS } from "@/helpers/tippy";
 // types
 import { TMentionHandler } from "@/types";
 // local components
@@ -51,6 +51,11 @@ export const renderMentionsDropdown =
         cleanup = updateFloatingUIFloaterPosition(props.editor, component.element).cleanup;
       },
       onKeyDown: ({ event }) => {
+        if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
         if (event.key === "Escape") {
           handleClose();
           return true;
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
index 757d1f2e02..9b680cd56a 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -93,7 +93,6 @@ export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref)
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }: { event: KeyboardEvent }) => {
       if (!DROPDOWN_NAVIGATION_KEYS.includes(event.key)) return false;
-      event.preventDefault();
 
       if (event.key === "Enter") {
         selectItem(selectedIndex.section, selectedIndex.item);
@@ -136,6 +135,12 @@ export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref)
         style={{
           zIndex: 100,
         }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
       >
         {sections.map((section, sectionIndex) => (
           <div key={section.key} className="space-y-2">
diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 3f0375ae58..61ebaea395 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -5,7 +5,7 @@ import Suggestion, { type SuggestionOptions } from "@tiptap/suggestion";
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { updateFloatingUIFloaterPosition } from "@/helpers/floating-ui";
-import { CommandListInstance } from "@/helpers/tippy";
+import { CommandListInstance, DROPDOWN_NAVIGATION_KEYS } from "@/helpers/tippy";
 // types
 import { IEditorProps, ISlashCommandItem, TEditorCommands, TSlashCommandSectionKeys } from "@/types";
 // components
@@ -88,6 +88,11 @@ const Command = Extension.create<SlashCommandOptions>({
             },
 
             onKeyDown: ({ event }) => {
+              if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+
               if (event.key === "Escape") {
                 handleClose(this.editor);
                 return true;