From bc6dd1656dcdbbc0236f81b2f2b10215e499d5ef Mon Sep 17 00:00:00 2001
From: Prathamesh Chavan <prathamesh.chavan216@gmail.com>
Date: Sun, 20 Aug 2023 12:00:34 +0530
Subject: [PATCH 1/3] Fixed Collision detection for Selector dropdowns

---
 ui/editor/components/color-selector.tsx | 148 ++++++++++++------------
 1 file changed, 77 insertions(+), 71 deletions(-)

diff --git a/ui/editor/components/color-selector.tsx b/ui/editor/components/color-selector.tsx
index 16d132032..d7262de01 100644
--- a/ui/editor/components/color-selector.tsx
+++ b/ui/editor/components/color-selector.tsx
@@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/core";
 import { Check, ChevronDown } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";
+import * as Popover from "@radix-ui/react-popover";
 
 export interface BubbleColorMenuItem {
   name: string;
@@ -105,83 +106,88 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   );
 
   return (
-    <div className="relative h-full">
-      <button
-        className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <span
-          className="rounded-sm px-1"
-          style={{
-            color: activeColorItem?.color,
-            backgroundColor: activeHighlightItem?.color,
-          }}
+    <Popover.Root open={isOpen}>
+      <div className="relative h-full">
+        <Popover.Trigger
+          className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+          onClick={() => setIsOpen(!isOpen)}
         >
-          A
-        </span>
+          <span
+            className="rounded-sm px-1"
+            style={{
+              color: activeColorItem?.color,
+              backgroundColor: activeHighlightItem?.color,
+            }}
+          >
+            A
+          </span>
 
-        <ChevronDown className="h-4 w-4" />
-      </button>
+          <ChevronDown className="h-4 w-4" />
+        </Popover.Trigger>
 
-      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
-          <div className="my-1 px-2 text-sm text-stone-500">Color</div>
-          {TEXT_COLORS.map(({ name, color }, index) => (
-            <button
-              key={index}
-              onClick={() => {
-                editor.commands.unsetColor();
-                name !== "Default" &&
-                  editor.chain().focus().setColor(color).run();
-                setIsOpen(false);
-              }}
-              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
-            >
-              <div className="flex items-center space-x-2">
-                <div
-                  className="rounded-sm border border-stone-200 px-1 py-px font-medium"
-                  style={{ color }}
+        <Popover.Portal>
+          <Popover.Content>
+            <section className="z-[99999] my-1 flex h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+              <div className="my-1 px-2 text-sm text-stone-500">Color</div>
+              {TEXT_COLORS.map(({ name, color }, index) => (
+                <button
+                  key={index}
+                  onClick={() => {
+                    editor.commands.unsetColor();
+                    name !== "Default" &&
+                      editor.chain().focus().setColor(color).run();
+                    setIsOpen(false);
+                  }}
+                  className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
                 >
-                  A
-                </div>
-                <span>{name}</span>
-              </div>
-              {editor.isActive("textStyle", { color }) && (
-                <Check className="h-4 w-4" />
-              )}
-            </button>
-          ))}
+                  <div className="flex items-center space-x-2">
+                    <div
+                      className="rounded-sm border border-stone-200 px-1 py-px font-medium"
+                      style={{ color }}
+                    >
+                      A
+                    </div>
+                    <span>{name}</span>
+                  </div>
+                  {editor.isActive("textStyle", { color }) && (
+                    <Check className="h-4 w-4" />
+                  )}
+                </button>
+              ))}
 
-          <div className="mb-1 mt-2 px-2 text-sm text-stone-500">
-            Background
-          </div>
+              <div className="mb-1 mt-2 px-2 text-sm text-stone-500">
+                Background
+              </div>
 
-          {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
-            <button
-              key={index}
-              onClick={() => {
-                editor.commands.unsetHighlight();
-                name !== "Default" && editor.commands.setHighlight({ color });
-                setIsOpen(false);
-              }}
-              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
-            >
-              <div className="flex items-center space-x-2">
-                <div
-                  className="rounded-sm border border-stone-200 px-1 py-px font-medium"
-                  style={{ backgroundColor: color }}
+              {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
+                <button
+                  key={index}
+                  onClick={() => {
+                    editor.commands.unsetHighlight();
+                    name !== "Default" &&
+                      editor.commands.setHighlight({ color });
+                    setIsOpen(false);
+                  }}
+                  className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
                 >
-                  A
-                </div>
-                <span>{name}</span>
-              </div>
-              {editor.isActive("highlight", { color }) && (
-                <Check className="h-4 w-4" />
-              )}
-            </button>
-          ))}
-        </section>
-      )}
-    </div>
+                  <div className="flex items-center space-x-2">
+                    <div
+                      className="rounded-sm border border-stone-200 px-1 py-px font-medium"
+                      style={{ backgroundColor: color }}
+                    >
+                      A
+                    </div>
+                    <span>{name}</span>
+                  </div>
+                  {editor.isActive("highlight", { color }) && (
+                    <Check className="h-4 w-4" />
+                  )}
+                </button>
+              ))}
+            </section>
+          </Popover.Content>
+        </Popover.Portal>
+      </div>
+    </Popover.Root>
   );
 };

From 98e9b4e02ab0fb7e5f9083c0b5bbf880e970c552 Mon Sep 17 00:00:00 2001
From: Prathamesh Chavan <prathamesh.chavan216@gmail.com>
Date: Sun, 20 Aug 2023 18:45:29 +0530
Subject: [PATCH 2/3] Fixed Popover content not interactive

---
 ui/editor/components/color-selector.tsx | 111 +++++++++++-------------
 1 file changed, 53 insertions(+), 58 deletions(-)

diff --git a/ui/editor/components/color-selector.tsx b/ui/editor/components/color-selector.tsx
index d7262de01..2ae9cf449 100644
--- a/ui/editor/components/color-selector.tsx
+++ b/ui/editor/components/color-selector.tsx
@@ -125,68 +125,63 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
           <ChevronDown className="h-4 w-4" />
         </Popover.Trigger>
 
-        <Popover.Portal>
-          <Popover.Content>
-            <section className="z-[99999] my-1 flex h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
-              <div className="my-1 px-2 text-sm text-stone-500">Color</div>
-              {TEXT_COLORS.map(({ name, color }, index) => (
-                <button
-                  key={index}
-                  onClick={() => {
-                    editor.commands.unsetColor();
-                    name !== "Default" &&
-                      editor.chain().focus().setColor(color).run();
-                    setIsOpen(false);
-                  }}
-                  className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+        <Popover.Content className="z-[99999] my-1 flex h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+          <div className="my-1 px-2 text-sm text-stone-500">Color</div>
+          {TEXT_COLORS.map(({ name, color }, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                editor.commands.unsetColor();
+                name !== "Default" &&
+                  editor.chain().focus().setColor(color).run();
+                setIsOpen(false);
+              }}
+              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+            >
+              <div className="flex items-center space-x-2">
+                <div
+                  className="rounded-sm border border-stone-200 px-1 py-px font-medium"
+                  style={{ color }}
                 >
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className="rounded-sm border border-stone-200 px-1 py-px font-medium"
-                      style={{ color }}
-                    >
-                      A
-                    </div>
-                    <span>{name}</span>
-                  </div>
-                  {editor.isActive("textStyle", { color }) && (
-                    <Check className="h-4 w-4" />
-                  )}
-                </button>
-              ))}
-
-              <div className="mb-1 mt-2 px-2 text-sm text-stone-500">
-                Background
+                  A
+                </div>
+                <span>{name}</span>
               </div>
+              {editor.isActive("textStyle", { color }) && (
+                <Check className="h-4 w-4" />
+              )}
+            </button>
+          ))}
+
+          <div className="mb-1 mt-2 px-2 text-sm text-stone-500">
+            Background
+          </div>
 
-              {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
-                <button
-                  key={index}
-                  onClick={() => {
-                    editor.commands.unsetHighlight();
-                    name !== "Default" &&
-                      editor.commands.setHighlight({ color });
-                    setIsOpen(false);
-                  }}
-                  className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+          {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                editor.commands.unsetHighlight();
+                name !== "Default" && editor.commands.setHighlight({ color });
+                setIsOpen(false);
+              }}
+              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+            >
+              <div className="flex items-center space-x-2">
+                <div
+                  className="rounded-sm border border-stone-200 px-1 py-px font-medium"
+                  style={{ backgroundColor: color }}
                 >
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className="rounded-sm border border-stone-200 px-1 py-px font-medium"
-                      style={{ backgroundColor: color }}
-                    >
-                      A
-                    </div>
-                    <span>{name}</span>
-                  </div>
-                  {editor.isActive("highlight", { color }) && (
-                    <Check className="h-4 w-4" />
-                  )}
-                </button>
-              ))}
-            </section>
-          </Popover.Content>
-        </Popover.Portal>
+                  A
+                </div>
+                <span>{name}</span>
+              </div>
+              {editor.isActive("highlight", { color }) && (
+                <Check className="h-4 w-4" />
+              )}
+            </button>
+          ))}
+        </Popover.Content>
       </div>
     </Popover.Root>
   );

From 6d8c774aa783e9b5e0cd164a976ddc855b4e2ef8 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Fri, 25 Aug 2023 22:02:24 -0500
Subject: [PATCH 3/3] added radix popover to node selector as well

---
 ui/editor/components/color-selector.tsx |  5 +++-
 ui/editor/components/node-selector.tsx  | 31 ++++++++++++++-----------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/ui/editor/components/color-selector.tsx b/ui/editor/components/color-selector.tsx
index 2ae9cf449..60cafa68a 100644
--- a/ui/editor/components/color-selector.tsx
+++ b/ui/editor/components/color-selector.tsx
@@ -125,7 +125,10 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
           <ChevronDown className="h-4 w-4" />
         </Popover.Trigger>
 
-        <Popover.Content className="z-[99999] my-1 flex h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <Popover.Content
+          align="start"
+          className="z-[99999] my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
+        >
           <div className="my-1 px-2 text-sm text-stone-500">Color</div>
           {TEXT_COLORS.map(({ name, color }, index) => (
             <button
diff --git a/ui/editor/components/node-selector.tsx b/ui/editor/components/node-selector.tsx
index d933f3611..d8a45ec90 100644
--- a/ui/editor/components/node-selector.tsx
+++ b/ui/editor/components/node-selector.tsx
@@ -11,8 +11,8 @@ import {
   Code,
   CheckSquare,
 } from "lucide-react";
+import * as Popover from "@radix-ui/react-popover";
 import { Dispatch, FC, SetStateAction } from "react";
-
 import { BubbleMenuItem } from "./bubble-menu";
 
 interface NodeSelectorProps {
@@ -99,17 +99,20 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <div className="relative h-full">
-      <button
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <span>{activeItem?.name}</span>
-        <ChevronDown className="h-4 w-4" />
-      </button>
+    <Popover.Root open={isOpen}>
+      <div className="relative h-full">
+        <Popover.Trigger
+          className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span>{activeItem?.name}</span>
+          <ChevronDown className="h-4 w-4" />
+        </Popover.Trigger>
 
-      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <Popover.Content
+          align="start"
+          className="z-[99999] my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
+        >
           {items.map((item, index) => (
             <button
               key={index}
@@ -128,8 +131,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
               {activeItem.name === item.name && <Check className="h-4 w-4" />}
             </button>
           ))}
-        </section>
-      )}
-    </div>
+        </Popover.Content>
+      </div>
+    </Popover.Root>
   );
 };