[WIKI-782] feat: integrate EditorRefApi into initiative components for isAnyDropbarOpen detection (#4787)

apps/web/ee/components/initiatives/details/main/info-section-root.tsx

@@ -4,6 +4,7 @@ import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import type { EditorRefApi } from "@plane/editor";
 import { EmojiIconPickerTypes, EmojiPicker, Logo } from "@plane/propel/emoji-icon-picker";
 import { InitiativeIcon } from "@plane/propel/icons";
 import { EFileAssetType } from "@plane/types";
@@ -17,6 +18,7 @@ import { InitiativeInfoActionItems } from "./info-section/action-items";
 import { InitiativeInfoIndicatorItem } from "./info-section/indicator-item";
 
 type Props = {
+  editorRef?: React.RefObject<EditorRefApi>;
   workspaceSlug: string;
   initiativeId: string;
   disabled?: boolean;
@@ -25,7 +27,7 @@ type Props = {
 };
 
 export const InitiativeInfoSection: FC<Props> = observer((props) => {
-  const { workspaceSlug, initiativeId, disabled = false, toggleProjectModal, toggleEpicModal } = props;
+  const { editorRef, workspaceSlug, initiativeId, disabled = false, toggleProjectModal, toggleEpicModal } = props;
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
   const {
@@ -43,6 +45,7 @@ export const InitiativeInfoSection: FC<Props> = observer((props) => {
 
   return (
     <InfoSection
+      editorRef={editorRef}
       workspaceSlug={workspaceSlug}
       itemId={initiativeId}
       titleValue={initiative.name}

apps/web/ee/components/initiatives/details/main/root.tsx

@@ -2,6 +2,8 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 // plane web
@@ -14,6 +16,7 @@ import { InitiativeProgressSection } from "./progress-section-root";
 import { ScopeBreakdown } from "./scope-breakdown";
 
 type Props = {
+  editorRef?: React.RefObject<EditorRefApi>;
   workspaceSlug: string;
   initiativeId: string;
   disabled?: boolean;
@@ -22,13 +25,14 @@ type Props = {
 };
 
 export const InitiativeMainContentRoot: FC<Props> = observer((props) => {
-  const { workspaceSlug, initiativeId, disabled = false, toggleEpicModal, toggleProjectModal } = props;
+  const { editorRef, workspaceSlug, initiativeId, disabled = false, toggleEpicModal, toggleProjectModal } = props;
   // store hooks
   const { initiativesSidebarCollapsed } = useAppTheme();
 
   return (
     <MainWrapper isSidebarOpen={!initiativesSidebarCollapsed}>
       <InitiativeInfoSection
+        editorRef={editorRef}
         workspaceSlug={workspaceSlug}
         initiativeId={initiativeId}
         disabled={disabled}

apps/web/ee/components/initiatives/peek-overview/view.tsx

@@ -5,6 +5,7 @@ import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
 // plane imports
+import type { EditorRefApi } from "@plane/editor";
 import type { TInitiativeStates } from "@plane/types";
 import { cn } from "@plane/utils";
 // hooks
@@ -52,6 +53,7 @@ export const InitiativeView: FC<IInitiativeView> = observer((props) => {
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
   // ref
   const initiativePeekOverviewRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<EditorRefApi>(null);
   // store hooks
   const {
     initiative: { isAnyModalOpen, setPeekInitiative, getInitiativeById },
@@ -67,8 +69,9 @@ export const InitiativeView: FC<IInitiativeView> = observer((props) => {
   usePeekOverviewOutsideClickDetector(
     initiativePeekOverviewRef,
     () => {
-      // Don't close peek overview if any modal is open
-      if (!isAnyModalOpen && !isProjectsModalOpen && !isEpicModalOpen) {
+      const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+      // Don't close peek overview if any modal is open or if any dropbar is open
+      if (!isAnyModalOpen && !isProjectsModalOpen && !isEpicModalOpen && !isAnyDropbarOpen) {
         removeRoutePeekId();
       }
     },
@@ -77,8 +80,9 @@ export const InitiativeView: FC<IInitiativeView> = observer((props) => {
 
   const handleKeyDown = () => {
     const dropdownElement = document.activeElement?.tagName === "INPUT";
-    // Don't close peek overview if any modal is open or if input is focused
-    if (!dropdownElement && !isAnyModalOpen && !isProjectsModalOpen && !isEpicModalOpen) {
+    const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+    // Don't close peek overview if any modal is open, if input is focused, or if any dropbar is open
+    if (!dropdownElement && !isAnyModalOpen && !isProjectsModalOpen && !isEpicModalOpen && !isAnyDropbarOpen) {
       removeRoutePeekId();
       const initiativeElement = document.getElementById(`initiative-${initiativeId}`);
       if (initiativeElement) initiativeElement?.focus();
@@ -131,6 +135,7 @@ export const InitiativeView: FC<IInitiativeView> = observer((props) => {
               <div className="flex h-full w-full overflow-hidden">
                 <div className="h-full w-full overflow-y-auto">
                   <InitiativeMainContentRoot
+                    editorRef={editorRef}
                     workspaceSlug={workspaceSlug}
                     initiativeId={initiativeId}
                     disabled={disabled}