fix[angular-gen2]: new blocks getting added on top in case of components that use children

.changeset/angry-doors-scream.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/sdk-angular': patch
+---
+
+Fix: New child blocks getting added at the top while visual editing. This issue occurred with components that use children for rendering, for example - Section.

packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -19,6 +19,7 @@ import { ADD_A_TEXT_BLOCK } from '../specs/duplicated-content-using-nested-symbo
 import { EDITING_STYLES } from '../specs/editing-styles.js';
 import { ACCORDION_WITH_NO_DETAIL } from '../specs/accordion.js';
 import { NEW_BLOCK_ADD, NEW_BLOCK_ADD_2 } from '../specs/new-block-add.js';
+import { SECTION_CHILDREN } from '../specs/section-children.js';
 
 const editorTests = ({
   noTrustedHosts,
@@ -644,4 +645,183 @@ test.describe('Visual Editing', () => {
       await page.frameLocator('iframe').getByText('new text').waitFor({ state: 'hidden' });
     });
   });
+
+  test.describe('New Block addition and deletion with components using props.children / slots', () => {
+    test('should add new block below the last block', async ({
+      page,
+      basePort,
+      sdk,
+      packageName,
+    }) => {
+      test.skip(checkIsGen1React(sdk));
+      test.skip(packageName === 'nextjs-sdk-next-app');
+      test.skip(
+        packageName === 'vue',
+        `Failing on the CI: TypeError: Cannot read properties of null (reading 'namespaceURI')`
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/section-children', basePort, page, sdk });
+
+      const newContent = cloneContent(SECTION_CHILDREN);
+      newContent.data.blocks[0].children.push({
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-421fe741cdab4a5181fe83ffa0af7ff6',
+        component: {
+          name: 'Text',
+          options: { text: 'new text' },
+        },
+      });
+
+      await sendContentUpdateMessage({
+        page,
+        newContent,
+        model: 'page',
+      });
+      await page.frameLocator('iframe').getByText('new text').waitFor();
+
+      const textBlocks = await page.frameLocator('iframe').getByText('text 2').all();
+      expect(textBlocks.length).toBe(1);
+      const newTextBlockBox = await page.frameLocator('iframe').getByText('new text').boundingBox();
+      expect(newTextBlockBox).toBeDefined();
+      const textBlockBox = await textBlocks[0].boundingBox();
+      expect(textBlockBox).toBeDefined();
+
+      if (!newTextBlockBox || !textBlockBox) {
+        throw new Error('New text block or text block not found');
+      }
+
+      expect(newTextBlockBox.y).toBeGreaterThan(textBlockBox.y);
+    });
+
+    test('should add new block in the middle', async ({ page, basePort, sdk, packageName }) => {
+      test.skip(checkIsGen1React(sdk));
+      test.skip(packageName === 'nextjs-sdk-next-app');
+      test.skip(
+        packageName === 'vue',
+        `Failing on the CI: TypeError: Cannot read properties of null (reading 'namespaceURI')`
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/section-children', basePort, page, sdk });
+
+      const newContent = cloneContent(SECTION_CHILDREN);
+
+      newContent.data.blocks[0].children.splice(1, 0, {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-421fe741cdab4a5181fe83ffa0af7ff6',
+        component: { name: 'Text', options: { text: 'add to middle' } },
+      });
+
+      await sendContentUpdateMessage({
+        page,
+        newContent,
+        model: 'page',
+      });
+      await page.frameLocator('iframe').getByText('add to middle').waitFor();
+
+      const topTextBlockBox = await page.frameLocator('iframe').getByText('text 1').boundingBox();
+      const endTextBlockBox = await page.frameLocator('iframe').getByText('text 2').boundingBox();
+      const middleTextBlockBox = await page
+        .frameLocator('iframe')
+        .getByText('add to middle')
+        .boundingBox();
+
+      expect(middleTextBlockBox).toBeDefined();
+      expect(topTextBlockBox).toBeDefined();
+      expect(endTextBlockBox).toBeDefined();
+
+      if (!middleTextBlockBox || !topTextBlockBox || !endTextBlockBox) {
+        throw new Error('Middle text block or text block not found');
+      }
+
+      expect(middleTextBlockBox.y).toBeGreaterThan(topTextBlockBox.y);
+      expect(middleTextBlockBox.y).toBeLessThan(endTextBlockBox.y);
+    });
+
+    test('should add new block at the top', async ({ page, basePort, sdk, packageName }) => {
+      test.skip(checkIsGen1React(sdk));
+      test.skip(packageName === 'nextjs-sdk-next-app');
+      test.skip(
+        packageName === 'vue',
+        `Failing on the CI: TypeError: Cannot read properties of null (reading 'namespaceURI')`
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/section-children', basePort, page, sdk });
+
+      const newContent = cloneContent(SECTION_CHILDREN);
+      newContent.data.blocks[0].children.unshift({
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-421fe741cdab4a5181fe83ffa0af7ff6',
+        component: {
+          name: 'Text',
+          options: { text: 'add to top' },
+        },
+      });
+
+      await sendContentUpdateMessage({
+        page,
+        newContent,
+        model: 'page',
+      });
+      await page.frameLocator('iframe').getByText('add to top').waitFor();
+
+      const textBlocks = await page.frameLocator('iframe').getByText('text 1').all();
+      expect(textBlocks.length).toBe(1);
+      const newTextBlockBox = await page
+        .frameLocator('iframe')
+        .getByText('add to top')
+        .boundingBox();
+      expect(newTextBlockBox).toBeDefined();
+      const textBlockBox = await textBlocks[0].boundingBox();
+      expect(textBlockBox).toBeDefined();
+
+      if (!newTextBlockBox || !textBlockBox) {
+        throw new Error('New text block or text block not found');
+      }
+
+      expect(newTextBlockBox.y).toBeLessThan(textBlockBox.y);
+    });
+
+    test('deleting a newly added block should remove it from the DOM', async ({
+      page,
+      basePort,
+      sdk,
+      packageName,
+    }) => {
+      test.skip(checkIsGen1React(sdk));
+      test.skip(packageName === 'nextjs-sdk-next-app');
+      test.skip(
+        packageName === 'vue',
+        `Failing on the CI: TypeError: Cannot read properties of null (reading 'namespaceURI')`
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/section-children', basePort, page, sdk });
+
+      const newContent = cloneContent(SECTION_CHILDREN);
+      newContent.data.blocks[0].children.push({
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-421fe741cdab4a5181fe83ffa0af7ff6',
+        component: {
+          name: 'Text',
+          options: { text: 'new text' },
+        },
+      });
+
+      await sendContentUpdateMessage({
+        page,
+        newContent,
+        model: 'page',
+      });
+      await page.frameLocator('iframe').getByText('new text').waitFor();
+
+      const updatedContent = cloneContent(SECTION_CHILDREN);
+      updatedContent.data.blocks[0].children.pop();
+
+      await sendContentUpdateMessage({ page, newContent: updatedContent, model: 'page' });
+      await page.frameLocator('iframe').getByText('new text').waitFor({ state: 'hidden' });
+    });
+  });
 });

packages/sdks-tests/src/specs/index.ts

@@ -90,6 +90,7 @@ import { CUSTOM_CODE_DOM_UPDATE } from './custom-code-dom-update.js';
 import { NEW_BLOCK_ADD } from './new-block-add.js';
 
 import { DYNAMIC_BUTTON } from './dynamic-button.js';
+import { SECTION_CHILDREN } from './section-children.js';
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
@@ -283,6 +284,7 @@ export const PAGES: Record<string, Page> = {
   '/custom-code-dom-update': { content: CUSTOM_CODE_DOM_UPDATE },
   '/new-block-add': { content: NEW_BLOCK_ADD },
   '/dynamic-button': { content: DYNAMIC_BUTTON },
+  '/section-children': { content: SECTION_CHILDREN },
 } as const;
 
 export type Path = keyof typeof PAGES;

packages/sdks-tests/src/specs/section-children.ts

@@ -0,0 +1,116 @@
+export const SECTION_CHILDREN = {
+  ownerId: 'ad30f9a246614faaa6a03374f83554c9',
+  lastUpdateBy: null,
+  createdDate: 1742361329592,
+  id: 'a6c1c51873a94f2d9d74939e3a995bc5',
+  '@version': 4,
+  name: 'section-children-angular',
+  modelId: '17c6065109ef4062ba083f5741f4ee6a',
+  published: 'draft',
+  meta: {
+    kind: 'page',
+    lastPreviewUrl:
+      'http://localhost:4200/section-children-angular?builder.space=ad30f9a246614faaa6a03374f83554c9&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers%2CeditContentPriority&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=a6c1c51873a94f2d9d74939e3a995bc5&builder.overrides.a6c1c51873a94f2d9d74939e3a995bc5=a6c1c51873a94f2d9d74939e3a995bc5&builder.overrides.page:/section-children-angular=a6c1c51873a94f2d9d74939e3a995bc5&builder.options.locale=Default',
+    hasLinks: false,
+  },
+  priority: -1010,
+  query: [
+    {
+      '@type': '@builder.io/core:Query',
+      property: 'urlPath',
+      operator: 'is',
+      value: '/section-children-angular',
+    },
+  ],
+  data: {
+    themeId: false,
+    title: 'section-children-angular',
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-4777cbd5400240fcb5ec3053147350ac',
+        component: {
+          name: 'Core:Section',
+          options: {
+            maxWidth: 1200,
+            lazyLoad: false,
+          },
+        },
+        children: [
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            id: 'builder-f1ef479d4fc24c3db13f67f5972bbfa4',
+            component: {
+              name: 'Text',
+              options: {
+                text: 'text 1',
+              },
+            },
+            responsiveStyles: {
+              large: {
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'relative',
+                flexShrink: '0',
+                boxSizing: 'border-box',
+                marginTop: '20px',
+                lineHeight: 'normal',
+                height: 'auto',
+              },
+            },
+          },
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            id: 'builder-ed79c46cb43848548933175fadb75344',
+            component: {
+              name: 'Text',
+              options: {
+                text: 'text 2',
+              },
+            },
+            responsiveStyles: {
+              large: {
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'relative',
+                flexShrink: '0',
+                boxSizing: 'border-box',
+                marginTop: '20px',
+                lineHeight: 'normal',
+                height: 'auto',
+              },
+            },
+          },
+        ],
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '0px',
+            paddingLeft: '20px',
+            paddingRight: '20px',
+            paddingTop: '20px',
+            paddingBottom: '20px',
+            minHeight: '100px',
+          },
+        },
+      },
+    ],
+  },
+  metrics: {
+    clicks: 0,
+    impressions: 0,
+  },
+  variations: {},
+  lastUpdated: 1742365828625,
+  testRatio: 1,
+  createdBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  lastUpdatedBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  folders: [],
+};