Fixed Popover content not interactive

steven-tey · Aug 20, 2023 · 98e9b4e · 98e9b4e
1 parent bc6dd16
commit 98e9b4e
Showing 1 changed file with 53 additions and 58 deletions.
diff --git 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>
   );