scope click-outside check to each dropdown's own container

Replaces the global querySelectorAll('.dropdown-container') with a
per-instance containerRef, so clicking one dropdown's trigger correctly
closes the other instead of being treated as an inside click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: akolson

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue

@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="containerRef"
     class="dropdown-container"
     @keydown="handleContainerKeydown"
   >
@@ -65,6 +66,7 @@
         showHeadersDropdown: isOpen,
         toggleHeadersDropdown: toggleDropdown,
         selectFormat,
+        containerRef,
       } = useDropdowns();
 
       const { handleFormatChange } = useToolbarActions();
@@ -193,6 +195,7 @@
         handleContainerKeydown,
         textFormatOptions$,
         formatOptions$,
+        containerRef,
       };
     },
   });

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue

@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="containerRef"
     class="dropdown-container paste-button-container"
     @keydown="handleContainerKeydown"
   >
@@ -78,6 +79,7 @@
         pasteOptions,
         showPasteDropdown: isOpen,
         togglePasteDropdown: toggleDropdown,
+        containerRef,
       } = useDropdowns();
 
       const { handlePaste } = useToolbarActions();
@@ -214,6 +216,7 @@
         paste$,
         pasteOptions$,
         pasteOptionsMenu$,
+        containerRef,
       };
     },
   });

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js

@@ -77,19 +77,13 @@ export function useDropdowns() {
     selectedFormat.value = format.label;
   };
 
-  const handleClickOutside = event => {
-    const dropdownContainers = document.querySelectorAll('.dropdown-container');
-    let isOutside = true;
-
-    dropdownContainers.forEach(container => {
-      if (container.contains(event.target)) {
-        isOutside = false;
-      }
-    });
+  const containerRef = ref(null);
 
-    if (isOutside) {
-      closeAllDropdowns();
+  const handleClickOutside = event => {
+    if (!containerRef.value || containerRef.value.contains(event.target)) {
+      return;
     }
+    closeAllDropdowns();
   };
 
   onMounted(() => {
@@ -149,5 +143,6 @@ export function useDropdowns() {
     togglePasteDropdown,
     selectFormat,
     updateSelectedFormat,
+    containerRef,
   };
 }