fix: render slash menu via React Portal under document.body - outside editor DOM hierarchy

memento-note/components/rich-text-editor.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState, useCallback, forwardRef, useImperativeHandle } from 'react'
+import { createPortal } from 'react-dom'
 import { useLanguage } from '@/lib/i18n'
 import { useEditor, EditorContent } from '@tiptap/react'
 import { BubbleMenu } from '@tiptap/react/menus'
@@ -478,17 +479,11 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
   let flatIndex = -1
   const totalVisible = Object.keys(categories).length
 
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       className="notion-slash-menu"
       style={{ top: coords.top, left: coords.left }}
-      onMouseDown={(e) => {
-        e.preventDefault()      // prevent editor from losing focus
-        e.stopPropagation()     // prevent ProseMirror from seeing the mousedown → no selectionUpdate
-        menuInteracting.current = true
-        setTimeout(() => { menuInteracting.current = false }, 300)
-      }}
       onClick={(e) => e.stopPropagation()}
     >
       {/* Category tabs */}
@@ -561,7 +556,8 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
           })}
         </div>
       ))}
-    </div>
+    </div>,
+    document.body
   )
 }