From df791fc6c77cee51b15102dba64c486894f5e22b Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sat, 2 May 2026 22:22:21 +0200
Subject: [PATCH] fix: render slash menu via React Portal under document.body -
 outside editor DOM hierarchy

---
 memento-note/components/rich-text-editor.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/memento-note/components/rich-text-editor.tsx b/memento-note/components/rich-text-editor.tsx
index c4ceb9b..12df1be 100644
--- a/memento-note/components/rich-text-editor.tsx
+++ b/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
   )
 }