fix: slash menu tabs - use menuInteracting ref to block selectionUpdate during menu clicks
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 44s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 44s
This commit is contained in:
@@ -333,6 +333,8 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
|
|||||||
const [aiLoading, setAiLoading] = useState(false)
|
const [aiLoading, setAiLoading] = useState(false)
|
||||||
const menuRef = useRef<HTMLDivElement>(null)
|
const menuRef = useRef<HTMLDivElement>(null)
|
||||||
const selectedItemRef = useRef<HTMLButtonElement>(null)
|
const selectedItemRef = useRef<HTMLButtonElement>(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)
|
// Translated category names (keys match slashCommands category field)
|
||||||
const CAT_LABELS: Record<string, string> = {
|
const CAT_LABELS: Record<string, string> = {
|
||||||
@@ -457,7 +459,9 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handler = () => {
|
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 }
|
if (!empty) { if (isOpen) closeMenu(); return }
|
||||||
const text = editor.state.doc.textBetween(Math.max(0, from - 50), from, '\n')
|
const text = editor.state.doc.textBetween(Math.max(0, from - 50), from, '\n')
|
||||||
const m = text.match(/\/([^\s/]*)$/)
|
const m = text.match(/\/([^\s/]*)$/)
|
||||||
@@ -475,7 +479,17 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
|
|||||||
const totalVisible = Object.keys(categories).length
|
const totalVisible = Object.keys(categories).length
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={menuRef} className="notion-slash-menu" style={{ top: coords.top, left: coords.left }} onClick={(e) => e.stopPropagation()}>
|
<div
|
||||||
|
ref={menuRef}
|
||||||
|
className="notion-slash-menu"
|
||||||
|
style={{ top: coords.top, left: coords.left }}
|
||||||
|
onMouseDown={() => {
|
||||||
|
// Block selectionUpdate handler while interacting with menu
|
||||||
|
menuInteracting.current = true
|
||||||
|
setTimeout(() => { menuInteracting.current = false }, 200)
|
||||||
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
{/* Category tabs */}
|
{/* Category tabs */}
|
||||||
{!query && totalVisible > 1 && (
|
{!query && totalVisible > 1 && (
|
||||||
<div className="notion-slash-tabs" onMouseDown={(e) => e.preventDefault()}>
|
<div className="notion-slash-tabs" onMouseDown={(e) => e.preventDefault()}>
|
||||||
|
|||||||
Reference in New Issue
Block a user