Merge pull request #115 from prathameshjchavan/fix/collision-detectio…

…n-for-selector-dropdowns
steven-tey · Aug 26, 2023 · 06cc16f · 06cc16f · vercel · Aug 26, 2023
2 parents 2196990 + 6d8c774
commit 06cc16f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 34 deletions.
diff --git 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,26 +106,29 @@ 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">
+        <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
@@ -180,8 +184,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               )}
             </button>
           ))}
-        </section>
-      )}
-    </div>
+        </Popover.Content>
+      </div>
+    </Popover.Root>
   );
 };
diff --git 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>
   );
 };