diff --git a/memento-note/components/rich-text-editor.tsx b/memento-note/components/rich-text-editor.tsx index 735e01a..3046925 100644 --- a/memento-note/components/rich-text-editor.tsx +++ b/memento-note/components/rich-text-editor.tsx @@ -333,6 +333,8 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI const [aiLoading, setAiLoading] = useState(false) const menuRef = useRef(null) const selectedItemRef = useRef(null) + // Flag: true while user is interacting with the menu (prevents selectionUpdate from closing it) + const menuInteracting = useRef(false) // Translated category names (keys match slashCommands category field) const CAT_LABELS: Record = { @@ -457,7 +459,9 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI useEffect(() => { const handler = () => { - const { from, to, empty } = editor.state.selection + // Ignore events fired while user clicks inside the menu + if (menuInteracting.current) return + const { from, empty } = editor.state.selection if (!empty) { if (isOpen) closeMenu(); return } const text = editor.state.doc.textBetween(Math.max(0, from - 50), from, '\n') const m = text.match(/\/([^\s/]*)$/) @@ -475,7 +479,17 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI const totalVisible = Object.keys(categories).length return ( -
e.stopPropagation()}> +
{ + // Block selectionUpdate handler while interacting with menu + menuInteracting.current = true + setTimeout(() => { menuInteracting.current = false }, 200) + }} + onClick={(e) => e.stopPropagation()} + > {/* Category tabs */} {!query && totalVisible > 1 && (
e.preventDefault()}>