fix: insert multiple instances when paste from markdown

Fixes #4678

Missed a case markdown can insert multiple new instances.

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

@@ -7,7 +7,13 @@ import {
 } from "@webstudio-is/react-sdk";
 import type { Project } from "@webstudio-is/project";
 import { createDefaultPages } from "@webstudio-is/project-build";
-import { $, ws, renderJsx, ExpressionValue } from "@webstudio-is/template";
+import {
+  $,
+  ws,
+  renderJsx,
+  ExpressionValue,
+  renderTemplate,
+} from "@webstudio-is/template";
 import { parseCss } from "@webstudio-is/css-data";
 import { coreMetas } from "@webstudio-is/react-sdk";
 import * as defaultMetas from "@webstudio-is/sdk-components-react/metas";
@@ -40,6 +46,7 @@ import {
   getWebstudioData,
   insertInstanceChildrenMutable,
   findClosestInsertable,
+  insertWebstudioFragmentAt,
 } from "./instance-utils";
 import {
   $assets,
@@ -435,6 +442,40 @@ describe("insert instance children", () => {
   });
 });
 
+describe("insert webstudio fragment at", () => {
+  test("insert multiple instances", () => {
+    $instances.set(renderJsx(<$.Body ws:id="bodyId"></$.Body>).instances);
+    $styleSourceSelections.set(new Map());
+    $styleSources.set(new Map());
+    $breakpoints.set(new Map());
+    $styles.set(new Map());
+    $dataSources.set(new Map());
+    $resources.set(new Map());
+    $props.set(new Map());
+    $assets.set(new Map());
+    insertWebstudioFragmentAt(
+      renderTemplate(
+        <>
+          <$.Heading ws:id="headingId"></$.Heading>
+          <$.Paragraph ws:id="paragraphId"></$.Paragraph>
+        </>
+      ),
+      {
+        parentSelector: ["bodyId"],
+        position: "end",
+      }
+    );
+    expect($instances.get()).toEqual(
+      renderJsx(
+        <$.Body ws:id="bodyId">
+          <$.Heading ws:id={expect.any(String)}></$.Heading>
+          <$.Paragraph ws:id={expect.any(String)}></$.Paragraph>
+        </$.Body>
+      ).instances
+    );
+  });
+});
+
 describe("reparent instance", () => {
   test("between instances", () => {
     // body

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

@@ -317,7 +317,7 @@ export const insertWebstudioFragmentAt = (
   fragment: WebstudioFragment,
   insertable: Insertable
 ) => {
-  let newRootInstanceId: undefined | Instance["id"];
+  let children: undefined | Instance["children"];
   updateWebstudioData((data) => {
     const { newInstanceIds } = insertWebstudioFragmentCopy({
       data,
@@ -328,17 +328,19 @@ export const insertWebstudioFragmentAt = (
         insertable.parentSelector
       ),
     });
-    newRootInstanceId = newInstanceIds.get(fragment.instances[0].id);
-    if (newRootInstanceId === undefined) {
-      return;
-    }
-    const children: Instance["children"] = [
-      { type: "id", value: newRootInstanceId },
-    ];
+    children = fragment.children.map((child) => {
+      if (child.type === "id") {
+        return {
+          type: "id",
+          value: newInstanceIds.get(child.value) ?? child.value,
+        };
+      }
+      return child;
+    });
     insertInstanceChildrenMutable(data, children, insertable);
   });
-  if (newRootInstanceId) {
-    selectInstance([newRootInstanceId, ...insertable.parentSelector]);
+  if (children?.[0].type === "id") {
+    selectInstance([children[0].value, ...insertable.parentSelector]);
   }
 };