use floating panel in editor and css value editor

apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx

@@ -99,12 +99,10 @@ export const CssFragmentEditorContent = ({
 
 export const CssFragmentEditor = ({
   title,
-  open,
   content,
   onOpenChange,
 }: {
   title?: ReactNode;
-  open?: boolean;
   content: ReactNode;
   onOpenChange?: (newOpen: boolean) => void;
 }) => {
@@ -113,7 +111,6 @@ export const CssFragmentEditor = ({
       <EditorDialogControl>
         {content}
         <EditorDialog
-          open={open}
           onOpenChange={onOpenChange}
           title={title}
           content={content}

apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx

@@ -1,10 +1,6 @@
-import {
-  NestedInputButton,
-  rawTheme,
-  theme,
-} from "@webstudio-is/design-system";
+import { NestedInputButton, theme } from "@webstudio-is/design-system";
 import { MaximizeIcon } from "@webstudio-is/icons";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { EditorDialog } from "~/builder/shared/code-editor-base";
 import { CssFragmentEditorContent } from "../css-fragment";
 import type {
@@ -39,8 +35,6 @@ export const isComplexValue = (value: CssValueInputValue) => {
   return false;
 };
 
-const width = parseFloat(rawTheme.sizes.sidebarWidth);
-
 export const ValueEditorDialog = ({
   property,
   value,
@@ -58,25 +52,6 @@ export const ValueEditorDialog = ({
     setIntermediateValue({ type: "intermediate", value });
   }, [value]);
 
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  const [rect, setRect] = useState(() => ({
-    height: 200,
-    width,
-    x: window.innerWidth - width,
-    y: 0,
-  }));
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (isOpen && triggerRef.current) {
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      setRect({
-        ...rect,
-        y: triggerRect.y,
-      });
-    }
-  };
-
   const handleChange = (value: string) => {
     const parsedValue = parseIntermediateOrInvalidValue(property, {
       type: "intermediate",
@@ -111,8 +86,6 @@ export const ValueEditorDialog = ({
   return (
     <EditorDialog
       title="CSS Value"
-      onOpenChange={handleOpenChange}
-      {...rect}
       content={
         <CssFragmentEditorContent
           autoFocus
@@ -133,7 +106,6 @@ export const ValueEditorDialog = ({
             display: "block",
           },
         }}
-        ref={triggerRef}
       >
         <MaximizeIcon size={12} />
       </NestedInputButton>

apps/builder/app/builder/shared/code-editor-base.tsx

@@ -2,7 +2,6 @@ import {
   useEffect,
   useRef,
   type ReactNode,
-  useState,
   forwardRef,
   type ComponentProps,
   type RefObject,
@@ -32,21 +31,16 @@ import {
   textVariants,
   css,
   SmallIconButton,
-  Dialog,
-  DialogTrigger,
-  DialogContent,
   Grid,
-  DialogTitle,
-  Button,
-  DialogClose,
   Flex,
   rawTheme,
   globalCss,
   Kbd,
   Text,
 } from "@webstudio-is/design-system";
-import { CrossIcon, MaximizeIcon, MinimizeIcon } from "@webstudio-is/icons";
+import { MaximizeIcon } from "@webstudio-is/icons";
 import { solarizedLight } from "./code-highlight";
+import { FloatingPanel } from "./floating-panel";
 
 // This undocumented flag is required to keep contenteditable fields editable after the first activation of EditorView.
 // To reproduce the issue, open any Binding dialog and then try to edit a Navigation Item in the Navigation menu.
@@ -423,42 +417,28 @@ export const EditorDialogButton = forwardRef<
 EditorDialogButton.displayName = "EditorDialogButton";
 
 export const EditorDialog = ({
-  open,
-  onOpenChange,
   title,
   content,
   children,
-  width = 640,
-  height = 480,
-  x,
-  y,
+  open,
+  onOpenChange,
 }: {
-  open?: boolean;
-  onOpenChange?: (newOpen: boolean) => void;
   title?: ReactNode;
   content: ReactNode;
   children: ReactNode;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
+  open?: boolean;
+  onOpenChange?: (newOpen: boolean) => void;
 }) => {
-  const [isMaximized, setIsMaximized] = useState(false);
   return (
-    <Dialog open={open} onOpenChange={onOpenChange} modal={false}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent
-        resize="auto"
-        width={width}
-        height={height}
-        x={x}
-        y={y}
-        minHeight={240}
-        isMaximized={isMaximized}
-        onInteractOutside={(event) => {
-          event.preventDefault();
-        }}
-      >
+    <FloatingPanel
+      title={title}
+      onOpenChange={onOpenChange}
+      width={640}
+      height={480}
+      align="center"
+      maximizable
+      open={open}
+      content={
         <Grid
           align="stretch"
           css={{
@@ -470,38 +450,9 @@ export const EditorDialog = ({
         >
           {content}
         </Grid>
-        {/* Title is at the end intentionally,
-         * to make the close button last in the tab order
-         */}
-        <DialogTitle
-          draggable
-          suffix={
-            <Flex
-              gap="1"
-              onMouseDown={(event) => {
-                // Prevent dragging dialog
-                event.preventDefault();
-              }}
-            >
-              <Button
-                color="ghost"
-                prefix={isMaximized ? <MinimizeIcon /> : <MaximizeIcon />}
-                aria-label="Expand"
-                onClick={() => setIsMaximized(isMaximized ? false : true)}
-              />
-              <DialogClose asChild>
-                <Button
-                  color="ghost"
-                  prefix={<CrossIcon />}
-                  aria-label="Close"
-                />
-              </DialogClose>
-            </Flex>
-          }
-        >
-          {title}
-        </DialogTitle>
-      </DialogContent>
-    </Dialog>
+      }
+    >
+      {children}
+    </FloatingPanel>
   );
 };

apps/builder/app/builder/shared/floating-panel.tsx

@@ -8,6 +8,7 @@ import {
   type JSX,
   type ComponentProps,
   useEffect,
+  type ReactNode,
 } from "react";
 import {
   theme,
@@ -81,11 +82,15 @@ export const FloatingPanelProvider = ({
 );
 
 type FloatingPanelProps = {
-  title: string;
-  content: JSX.Element;
-  children: JSX.Element;
+  title: ReactNode;
+  content: ReactNode;
+  children: ReactNode;
   maximizable?: boolean;
   resize?: ComponentProps<typeof DialogContent>["resize"];
+  width?: number;
+  height?: number;
+  align?: "left" | "center";
+  open?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
 };
 
@@ -99,6 +104,10 @@ export const FloatingPanel = ({
   children,
   resize,
   maximizable,
+  width,
+  height,
+  align,
+  open,
   onOpenChange,
 }: FloatingPanelProps) => {
   const { container: containerRef } = useContext(FloatingPanelContext);
@@ -115,7 +124,12 @@ export const FloatingPanel = ({
   }));
 
   useEffect(() => {
-    if (!triggerRef.current || !containerRef.current || !contentElement) {
+    if (
+      !triggerRef.current ||
+      !containerRef.current ||
+      !contentElement ||
+      align === "center"
+    ) {
       return;
     }
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -127,19 +141,21 @@ export const FloatingPanel = ({
         ? window.innerHeight - contentRect.height
         : triggerRect.y;
     setRect({ x, y });
-  }, [contentElement, containerRef]);
+  }, [contentElement, containerRef, align]);
 
   return (
-    <Dialog modal={false} onOpenChange={onOpenChange}>
+    <Dialog open={open} modal={false} onOpenChange={onOpenChange}>
       <DialogTrigger asChild ref={triggerRef}>
         {children}
       </DialogTrigger>
       <DialogContent
         draggable
         resize={resize}
         className={contentStyle()}
-        x={rect.x}
-        y={rect.y}
+        {...(align === "center" ? {} : rect)}
+        width={width}
+        height={height}
+        isMaximized={isMaximized}
         onInteractOutside={(event) => {
           event.preventDefault();
         }}