mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-01-31 02:39:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-10-10 01:35:14 +05:30
committed by GitHub
parent 5d161f671d
commit d8c1dff34f
6 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
View File

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

10
packages/editor/src/core/extensions/emoji/suggestion.ts
View File

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

1
packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
View File

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

7
packages/editor/src/core/extensions/mentions/utils.ts
View File

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

7
packages/editor/src/core/extensions/slash-commands/command-menu.tsx
View File

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

7
packages/editor/src/core/extensions/slash-commands/root.tsx
View File

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