From b0e6bd2eda44215e241d5aab7eb88b25c73cf7a7 Mon Sep 17 00:00:00 2001
From: G Pardhiv Varma <gpardhivvarma@gmail.com>
Date: Wed, 25 Feb 2026 17:49:22 +0530
Subject: [PATCH] fix: close toolbar dropdowns when clicking in editor area

EditorInputManager calls preventDefault() on pointerdown in the editor
viewport, which suppresses mousedown/click events per the Pointer Events
spec. Since Naive UI's NDropdown uses mousedown for click-outside
detection, dropdowns remain open when clicking back into the editor.

Add a pointerdown-based click-outside listener in ButtonGroup.vue that
closes open dropdowns when clicking outside the toolbar UI surface.
pointerdown always fires regardless of preventDefault() calls.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/toolbar/ButtonGroup.vue      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/super-editor/src/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
index a0e8ed0f0e..d7b3bf1dba 100644
--- a/packages/super-editor/src/components/toolbar/ButtonGroup.vue
+++ b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, h } from 'vue';
+import { computed, ref, h, onMounted, onBeforeUnmount } from 'vue';
 import ToolbarButton from './ToolbarButton.vue';
 import ToolbarSeparator from './ToolbarSeparator.vue';
 import OverflowMenu from './OverflowMenu.vue';
@@ -204,6 +204,21 @@ const handleFocus = (e) => {
   }
 };
 
+const handleDocumentPointerDown = (event) => {
+  if (!currentItem.value?.expand) return;
+  const target = event.target;
+  if (target?.closest?.('[data-editor-ui-surface]') || target?.closest?.('.n-dropdown')) return;
+  closeDropdowns();
+};
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleDocumentPointerDown, true);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
+});
+
 const handleDropdownUpdateShow = (open) => {
   if (!open) {
     closeDropdowns();