From 2dd08eda6d5e4e3ddee52ac66526ea92f21271f3 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Wed, 31 Jul 2024 13:49:14 +0200
Subject: [PATCH] fix: allow to paste multiple gradients at pnce (#3842)

Ref
https://discord.com/channels/955905230107738152/1268162090934206494/1268162090934206494

This regressed while refactoring with new parser.
---
 .../backgrounds/background-gradient.tsx       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx
index 47a641a016..46cd480539 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx
@@ -1,4 +1,8 @@
-import type { InvalidValue, StyleValue } from "@webstudio-is/css-engine";
+import type {
+  InvalidValue,
+  LayersValue,
+  StyleValue,
+} from "@webstudio-is/css-engine";
 import { parseCssValue } from "@webstudio-is/css-data";
 import {
   Flex,
@@ -69,16 +73,17 @@ export const BackgroundGradient = (
     const parsed = parseCssFragment(intermediateValue.value, "background");
     const backgroundImage = parsed.get("backgroundImage");
     const backgroundColor = parsed.get("backgroundColor");
-    const [layer] =
+    const layers: LayersValue =
       backgroundImage?.type === "layers"
-        ? backgroundImage.value
-        : [backgroundImage];
+        ? backgroundImage
+        : { type: "layers", value: [] };
+    const [firstLayer] = layers.value;
 
     // set invalid state
     if (
       backgroundColor?.type === "invalid" ||
-      layer === undefined ||
-      layer.type === "invalid"
+      layers.value.length === 0 ||
+      firstLayer.type === "invalid"
     ) {
       setIntermediateValue({ type: "invalid", value: intermediateValue.value });
       props.deleteProperty(property, { isEphemeral: true });
@@ -88,7 +93,8 @@ export const BackgroundGradient = (
     if (backgroundColor && isTransparent(backgroundColor) === false) {
       props.setBackgroundColor(backgroundColor);
     }
-    props.setProperty(property)(layer);
+    // insert all new layers at current position
+    props.setProperty(property)(layers);
   };
 
   const handleOnCompleteRef = useRef(handleOnComplete);