vhad/plane
1
0
Fork 0
mirror of https://github.com/gosticks/plane.git synced 2025-10-16 12:45:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[WIKI-705] regression: mentions dropdown selection across editors #7901

Browse Source
This commit is contained in:
Aaryan Khandelwal 2025-10-03 15:53:35 +05:30 committed by GitHub
parent 3c389e2e50
commit 269fc0d9e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,49 +11,44 @@ import { TMentionHandler } from "@/types";
import { MentionsListDropdown, MentionsListDropdownProps } from "./mentions-list-dropdown"; import { MentionsListDropdown, MentionsListDropdownProps } from "./mentions-list-dropdown";
export const renderMentionsDropdown = export const renderMentionsDropdown =
(props: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] => (args: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
// @ts-expect-error - Tiptap types are incorrect
() => { () => {
const { searchCallback } = props; const { searchCallback } = args;
let component: ReactRenderer<CommandListInstance, MentionsListDropdownProps> | null = null; let component: ReactRenderer<CommandListInstance, MentionsListDropdownProps> | null = null;
return { return {
onStart: ({ clientRect, editor }) => { onStart: (props) => {
if (!searchCallback) return; if (!searchCallback) return;
if (!clientRect) return; if (!props.clientRect) return;
component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, { component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
props: { props: {
...props, ...props,
searchCallback, searchCallback,
}, },
editor: editor, editor: props.editor,
}); });
editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION); props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
const element = component.element as HTMLElement; const element = component.element as HTMLElement;
element.style.position = "absolute"; element.style.position = "absolute";
element.style.zIndex = "100";
document.body.appendChild(element); document.body.appendChild(element);
updateFloatingUIFloaterPosition(editor, element); updateFloatingUIFloaterPosition(props.editor, element);
}, },
onUpdate: ({ clientRect, editor }) => { onUpdate: (props) => {
component?.updateProps(props); component?.updateProps(props);
if (!clientRect) return; if (!props.clientRect) return;
if (component?.element) { if (component?.element) {
updateFloatingUIFloaterPosition(editor, component?.element as HTMLElement); updateFloatingUIFloaterPosition(props.editor, component?.element as HTMLElement);
} }
}, },
onKeyDown: ({ event }) => { onKeyDown: ({ event }) => {
if (event.key === "Escape") { if (event.key === "Escape") {
component?.destroy(); component?.destroy();
component = null;
return true; return true;
} }
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"]; return component?.ref?.onKeyDown({ event }) ?? false;
if (navigationKeys.includes(event.key)) {
event?.stopPropagation();
return component?.ref?.onKeyDown({ event });
}
return component?.ref?.onKeyDown({ event });
}, },
onExit: ({ editor }) => { onExit: ({ editor }) => {
editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.MENTION); editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.MENTION);

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

@ -32,9 +32,8 @@ export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref)
); );
// handle arrow key navigation // handle arrow key navigation
useEffect(() => { useEffect(() => {
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
const onKeyDown = (e: KeyboardEvent) => { const onKeyDown = (e: KeyboardEvent) => {
if (navigationKeys.includes(e.key)) { if (DROPDOWN_NAVIGATION_KEYS.includes(e.key)) {
e.preventDefault(); e.preventDefault();
const currentSection = selectedIndex.section; const currentSection = selectedIndex.section;
const currentItem = selectedIndex.item; const currentItem = selectedIndex.item;