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";
export const renderMentionsDropdown =
(props: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
// @ts-expect-error - Tiptap types are incorrect
(args: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
() => {
const { searchCallback } = props;
const { searchCallback } = args;
let component: ReactRenderer<CommandListInstance, MentionsListDropdownProps> | null = null;
return {
onStart: ({ clientRect, editor }) => {
onStart: (props) => {
if (!searchCallback) return;
if (!clientRect) return;
if (!props.clientRect) return;
component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
props: {
...props,
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;
element.style.position = "absolute";
element.style.zIndex = "100";
document.body.appendChild(element);
updateFloatingUIFloaterPosition(editor, element);
updateFloatingUIFloaterPosition(props.editor, element);
},
onUpdate: ({ clientRect, editor }) => {
onUpdate: (props) => {
component?.updateProps(props);
if (!clientRect) return;
if (!props.clientRect) return;
if (component?.element) {
updateFloatingUIFloaterPosition(editor, component?.element as HTMLElement);
updateFloatingUIFloaterPosition(props.editor, component?.element as HTMLElement);
}
},
onKeyDown: ({ event }) => {
if (event.key === "Escape") {
component?.destroy();
component = null;
return true;
}
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
if (navigationKeys.includes(event.key)) {
event?.stopPropagation();
return component?.ref?.onKeyDown({ event });
}
return component?.ref?.onKeyDown({ event });
return component?.ref?.onKeyDown({ event }) ?? false;
},
onExit: ({ editor }) => {
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
useEffect(() => {
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
const onKeyDown = (e: KeyboardEvent) => {
if (navigationKeys.includes(e.key)) {
if (DROPDOWN_NAVIGATION_KEYS.includes(e.key)) {
e.preventDefault();
const currentSection = selectedIndex.section;
const currentItem = selectedIndex.item;