[WIKI-725] regression: editor floaters propagation #7938

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) => {

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 }) => {

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);

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;

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">

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;