diff --git a/src/components/mention-input.tsx b/src/components/mention-input.tsx index 97bad9521..74e45ce09 100644 --- a/src/components/mention-input.tsx +++ b/src/components/mention-input.tsx @@ -184,9 +184,34 @@ export default function MentionInput({ class: "w-full max-h-80 min-h-[2rem] break-words overflow-y-auto resize-none focus:outline-none px-2 py-1 prose prose-sm dark:prose-invert ", }, + handleKeyDown: (view, event) => { + const isSubmit = + !open && + event.key === "Enter" && + view.state.doc.textContent.trim().length > 0 && + !event.shiftKey && + !event.metaKey && + !event.isComposing; + if (isSubmit) { + event.preventDefault(); + onEnter?.(); + if (isMobile) { + view.dom.blur(); + } + return true; + } + }, }, }; - }, [disabled, MentionItem, suggestionChar, onChange]); + }, [ + disabled, + MentionItem, + suggestionChar, + onChange, + open, + onEnter, + isMobile, + ]); const editor = useEditor(editorConfig); @@ -201,27 +226,6 @@ export default function MentionInput({ editor?.setEditable(!disabled); }, [disabled]); - // Memoize handlers - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - const isSubmit = - !open && - e.key === "Enter" && - editor?.getText().trim().length && - !e.shiftKey && - !e.metaKey && - !e.nativeEvent.isComposing; - if (isSubmit) { - e.preventDefault(); - onEnter?.(); - if (isMobile) { - editor?.commands.blur(); - } - } - }, - [editor, onEnter, open], - ); - // Memoize the DOM structure const suggestion = useMemo(() => { if (!open || disabledMention) return null; @@ -303,7 +307,7 @@ export default function MentionInput({ onClick={focus} className={cn("relative w-full", className)} > - + {suggestion} {placeholderElement}