From fafdac68f046da0b1e82df163975a18d03473b9d Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:04:01 +0530
Subject: [PATCH] [WEB-876] fix: Multiple editor instances cause weird issues
 with Tippy (#4092)

* fix: tippy rendered properly when there are multiple editor instances

* enhancement: using cn to merge classes conditionally
---
 packages/editor/core/src/ui/components/editor-container.tsx  | 3 ++-
 packages/editor/core/src/ui/mentions/suggestion.ts           | 2 +-
 packages/editor/extensions/src/extensions/slash-commands.tsx | 2 +-
 yarn.lock                                                    | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx
index 1b2504b58..2d6081525 100644
--- a/packages/editor/core/src/ui/components/editor-container.tsx
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@@ -1,5 +1,6 @@
 import { Editor } from "@tiptap/react";
 import { FC, ReactNode } from "react";
+import { cn } from "src/lib/utils";
 
 interface EditorContainerProps {
   editor: Editor | null;
@@ -53,7 +54,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
       onMouseLeave={() => {
         hideDragHandle?.();
       }}
-      className={`cursor-text ${editorClassNames}`}
+      className={cn(`cursor-text`, { "active-editor": editor?.isFocused && editor?.isEditable }, editorClassNames)}
     >
       {children}
     </div>
diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts
index 40e75a1e3..3f1b8eeec 100644
--- a/packages/editor/core/src/ui/mentions/suggestion.ts
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -22,7 +22,7 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
         // @ts-ignore
         popup = tippy("body", {
           getReferenceClientRect: props.clientRect,
-          appendTo: () => document.querySelector("#editor-container"),
+          appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
           content: reactRenderer.element,
           showOnCreate: true,
           interactive: true,
diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx
index f37d18c68..c52178b81 100644
--- a/packages/editor/extensions/src/extensions/slash-commands.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@@ -330,7 +330,7 @@ const renderItems = () => {
       // @ts-ignore
       popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
-        appendTo: () => document.querySelector("#editor-container"),
+        appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
         content: component.element,
         showOnCreate: true,
         interactive: true,
diff --git a/yarn.lock b/yarn.lock
index 4442a5cd5..88f5d4e55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2733,7 +2733,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.42":
+"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
   version "18.2.42"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
   integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==