From c76fbc41816c0df6cf3358c103f37b531b610207 Mon Sep 17 00:00:00 2001
From: Filip Michalski <fmc@touk.pl>
Date: Tue, 10 Dec 2024 10:28:19 +0100
Subject: [PATCH] Remove StickyNotePreview from ComponentPreview

---
 .../src/components/ComponentDragPreview.tsx   | 35 +++++++++++--------
 .../src/components/ComponentPreview.tsx       |  6 +---
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/designer/client/src/components/ComponentDragPreview.tsx b/designer/client/src/components/ComponentDragPreview.tsx
index 1028f91776b..c927d701401 100644
--- a/designer/client/src/components/ComponentDragPreview.tsx
+++ b/designer/client/src/components/ComponentDragPreview.tsx
@@ -1,11 +1,13 @@
 import { css } from "@emotion/css";
-import React, { forwardRef, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, ReactPortal, useEffect, useMemo, useState } from "react";
 import { useDragDropManager, useDragLayer } from "react-dnd";
 import { createPortal } from "react-dom";
 import { useDebouncedValue } from "rooks";
 import { NodeType } from "../types";
 import { ComponentPreview } from "./ComponentPreview";
 import { DndTypes } from "./toolbars/creator/Tool";
+import { StickyNotePreview } from "./StickyNotePreview";
+import { StickyNoteType } from "../types/stickyNote";
 
 function useNotNull<T>(value: T) {
     const [current, setCurrent] = useState(() => value);
@@ -53,17 +55,22 @@ export const ComponentDragPreview = forwardRef<HTMLDivElement, { scale: () => nu
         return null;
     }
 
-    return createPortal(
-        <div ref={forwardedRef} className={wrapperStyles} style={{ transform: `translate(${x}px, ${y}px)` }}>
-            <div
-                style={{
-                    transformOrigin: "top left",
-                    transform: `scale(${scale()})`,
-                }}
-            >
-                <ComponentPreview node={node} isActive={active} isOver={isOver} />
-            </div>
-        </div>,
-        document.body,
-    );
+    function createPortalForPreview(child: JSX.Element): ReactPortal {
+        return createPortal(
+            <div ref={forwardedRef} className={wrapperStyles} style={{ transform: `translate(${x}px, ${y}px)` }}>
+                <div
+                    style={{
+                        transformOrigin: "top left",
+                        transform: `scale(${scale()})`,
+                    }}
+                >
+                    {child}
+                </div>
+            </div>,
+            document.body,
+        );
+    }
+
+    if (node?.type === StickyNoteType) return createPortalForPreview(<StickyNotePreview isActive={active} isOver={isOver} />);
+    return createPortalForPreview(<ComponentPreview node={node} isActive={active} isOver={isOver} />);
 });
diff --git a/designer/client/src/components/ComponentPreview.tsx b/designer/client/src/components/ComponentPreview.tsx
index e9b7305836b..8053083663a 100644
--- a/designer/client/src/components/ComponentPreview.tsx
+++ b/designer/client/src/components/ComponentPreview.tsx
@@ -7,8 +7,6 @@ import { ComponentIcon } from "./toolbars/creator/ComponentIcon";
 import { alpha, styled, useTheme } from "@mui/material";
 import { blend } from "@mui/system";
 import { blendLighten, getBorderColor } from "../containers/theme/helpers";
-import { StickyNotePreview } from "./StickyNotePreview";
-import { StickyNoteType } from "../types/stickyNote";
 
 export function ComponentPreview({ node, isActive, isOver }: { node: NodeType; isActive?: boolean; isOver?: boolean }): JSX.Element {
     const theme = useTheme();
@@ -77,9 +75,7 @@ export function ComponentPreview({ node, isActive, isOver }: { node: NodeType; i
 
     const colors = isOver ? nodeColorsHover : nodeColors;
 
-    return node?.type === StickyNoteType ? (
-        <StickyNotePreview isActive={isActive} isOver={isOver} />
-    ) : (
+    return (
         <div className={cx(colors, nodeStyles)}>
             <div className={cx(imageStyles, imageColors)}>
                 <ComponentIcon node={node} />