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 87a505ba4..39867662c 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 (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 { + 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 0ad7f558a..83847d8d5 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 b670b94ab..51881098c 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 73ea3d829..96854fd26 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 757d1f2e0..9b680cd56 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) => (
diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx index 3f0375ae5..61ebaea39 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({ }, onKeyDown: ({ event }) => { + if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) { + event.preventDefault(); + event.stopPropagation(); + } + if (event.key === "Escape") { handleClose(this.editor); return true;