fix: allow inserting into textual collection items (#4305)

Fixes #4294

Author: TrySound

apps/builder/app/shared/instance-utils.test.tsx

@@ -7,7 +7,7 @@ import {
 } from "@webstudio-is/react-sdk";
 import type { Project } from "@webstudio-is/project";
 import { createDefaultPages } from "@webstudio-is/project-build";
-import { $, renderJsx } from "@webstudio-is/sdk/testing";
+import { $, ws, renderJsx } from "@webstudio-is/sdk/testing";
 import { parseCss } from "@webstudio-is/css-data";
 import * as defaultMetas from "@webstudio-is/sdk-components-react/metas";
 import type {
@@ -589,6 +589,27 @@ describe("find closest droppable target", () => {
       )
     ).toEqual(undefined);
   });
+
+  test("allow inserting into collection item", () => {
+    const { instances } = renderJsx(
+      <$.Body ws:id="bodyId">
+        <ws.collection ws:id="collectionId">
+          <$.Box ws:id="boxId"></$.Box>
+        </ws.collection>
+      </$.Body>
+    );
+    expect(
+      findClosestDroppableTarget(
+        defaultMetasMap,
+        instances,
+        ["collectionId[1]", "collectionId", "bodyId"],
+        emptyInsertConstraints
+      )
+    ).toEqual({
+      parentSelector: ["collectionId", "bodyId"],
+      position: "end",
+    });
+  });
 });
 
 describe("insert instance children", () => {
@@ -3185,7 +3206,12 @@ describe("copy paste", () => {
     const styleSources: StyleSources = new Map();
     const styles: Styles = new Map();
     const parsed = mapGroupBy(
-      parseCss(cssString),
+      parseCss(cssString).map((styleDecl) => ({
+        ...styleDecl,
+        selector: styleDecl.selector.startsWith("__")
+          ? styleDecl.selector.slice(2)
+          : styleDecl.selector,
+      })),
       (parsedStyleDecl) => parsedStyleDecl.selector
     );
     for (const [selector, parsedStyles] of parsed) {
@@ -3298,7 +3324,8 @@ describe("copy paste", () => {
       boxId__boxlocalid {
         color: red;
       }
-      ${newBoxId}__${newBoxLocalId} {
+      /* escape potential leading digit */
+      __${newBoxId}__${newBoxLocalId} {
         color: red;
       }
     `);

apps/builder/app/shared/instance-utils.ts

@@ -400,6 +400,22 @@ export const findClosestDroppableTarget = (
     return;
   }
 
+  const dropTargetParentInstance = instances.get(
+    instanceSelector[droppableIndex + 1]
+  );
+  let dropTargetInstance = instances.get(instanceSelector[droppableIndex]);
+  // skip collection item when inserting something and go straight into collection instance
+  if (
+    dropTargetInstance === undefined &&
+    dropTargetParentInstance?.component === collectionComponent
+  ) {
+    instanceSelector = instanceSelector.slice(1);
+    dropTargetInstance = dropTargetParentInstance;
+  }
+  if (dropTargetInstance === undefined) {
+    return;
+  }
+
   if (droppableIndex === 0) {
     return {
       parentSelector: instanceSelector,
@@ -408,8 +424,6 @@ export const findClosestDroppableTarget = (
   }
 
   const dropTargetSelector = instanceSelector.slice(droppableIndex);
-  const dropTargetInstanceId = instanceSelector[droppableIndex];
-  const dropTargetInstance = instances.get(dropTargetInstanceId);
   if (dropTargetInstance === undefined) {
     return;
   }