fix[angular-gen2]: embed and custom code block and text block angular sanitizing html warning

.changeset/chatty-islands-camp.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-angular": patch
+---
+
+Fix: mark text as safe to remove the Angular stripping/warning message

.changeset/fuzzy-masks-shave.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/sdk-angular': patch
+---
+
+Fix: Embed and Custom Code block to support embedding iframes

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

@@ -494,4 +494,30 @@ test.describe('Blocks', () => {
       expect(firstColumnSpace + secondColumnSpace).toBeCloseTo(400, 1);
     });
   });
+
+  test.describe('Embed', () => {
+    test('should render embed', async ({ page, sdk }) => {
+      test.skip(checkIsRN(sdk));
+      await page.goto('/embed-and-custom-code');
+
+      await expect(page.locator('.builder-embed iframe')).toBeVisible();
+
+      const iframe = page.locator('.builder-embed iframe');
+      const src = await iframe.getAttribute('src');
+      expect(src).toContain('https://www.youtube.com/embed/oU3H581uCsA');
+    });
+  });
+
+  test.describe('Custom Code', () => {
+    test('should render custom code', async ({ page, sdk }) => {
+      test.skip(checkIsRN(sdk));
+      await page.goto('/embed-and-custom-code');
+
+      await expect(page.locator('.builder-custom-code iframe')).toBeVisible();
+
+      const iframe = page.locator('.builder-custom-code iframe');
+      const src = await iframe.getAttribute('src');
+      expect(src).toContain('https://www.youtube.com/embed/oU3H581uCsA');
+    });
+  });
 });

packages/sdks-tests/src/specs/embed-and-custom-code.ts

@@ -0,0 +1,87 @@
+export const EMBED_AND_CUSTOM_CODE = {
+  ownerId: 'ad30f9a246614faaa6a03374f83554c9',
+  lastUpdateBy: null,
+  createdDate: 1735908946457,
+  id: '70b6e19247c94038a1325afa0a3b3b70',
+  '@version': 4,
+  name: 'embed-angular',
+  modelId: '17c6065109ef4062ba083f5741f4ee6a',
+  published: 'draft',
+  meta: {
+    hasLinks: false,
+    lastPreviewUrl:
+      'http://localhost:4200/embed-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=70b6e19247c94038a1325afa0a3b3b70&builder.overrides.70b6e19247c94038a1325afa0a3b3b70=70b6e19247c94038a1325afa0a3b3b70&builder.overrides.page:/embed-angular=70b6e19247c94038a1325afa0a3b3b70&builder.options.locale=Default',
+    kind: 'page',
+  },
+  priority: -925,
+  query: [
+    {
+      '@type': '@builder.io/core:Query',
+      property: 'urlPath',
+      operator: 'is',
+      value: '/embed-angular',
+    },
+  ],
+  data: {
+    inputs: [],
+    title: 'embed-angular',
+    themeId: false,
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-c8f3819ed1b64478a7a2ff41ae1aa458',
+        component: {
+          name: 'Custom Code',
+          options: {
+            code: '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/oU3H581uCsA?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"></iframe></div>',
+            scriptsClientOnly: false,
+          },
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+          },
+        },
+      },
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-307d260eeb2f465980c6e8c4d0a0af11',
+        component: {
+          name: 'Embed',
+          options: {
+            url: 'https://www.youtube.com/watch?v=oU3H581uCsA',
+            content:
+              '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/oU3H581uCsA?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"></iframe></div>',
+          },
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+          },
+        },
+      },
+    ],
+  },
+  metrics: {
+    clicks: 0,
+    impressions: 0,
+  },
+  variations: {},
+  lastUpdated: 1736507314861,
+  testRatio: 1,
+  createdBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  lastUpdatedBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  folders: [],
+};

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

@@ -76,6 +76,7 @@ import { XSS_EXPLOIT } from './xss-exploit.js';
 import { COUNTDOWN } from './countdown.js';
 import { LOCALIZATION, LOCALIZATION_WITHOUT_LOCALE_PROP } from './localization.js';
 import { LOCALIZATION_SUBFIELDS } from './localization-subfields.js';
+import { EMBED_AND_CUSTOM_CODE } from './embed-and-custom-code.js';
 
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
@@ -215,6 +216,7 @@ export const PAGES: Record<string, Page> = {
     content: null as unknown as BuilderContent,
     target: ['svelte', 'sveltekit', 'vue', 'nuxt', 'qwik-city'],
   },
+  '/embed-and-custom-code': { content: EMBED_AND_CUSTOM_CODE },
 } as const;
 
 export type Path = keyof typeof PAGES;

packages/sdks/README.md

@@ -54,7 +54,7 @@ Legend:
 | Custom Code    | ✅  | 🏗           | ✅     | ✅    | ✅   | ✅    | ✅     | ✅      |
 | Section        | ✅  | ✅           | ✅     | ✅    | ✅   | ✅    | ✅     | ✅      |
 | Fragment       | ✅  | ✅           | ✅     | ✅    | ✅   | ✅    | ✅     | ✅      |
-| Embed          | ✅  | 🏗           | ✅     | ✅    | ✅   | ✅    | ✅     | 🏗️      |
+| Embed          | ✅  | 🏗           | ✅     | ✅    | ✅   | ✅    | ✅     | ✅      |
 | Slot           | ✅  | ✅           | ✅     | ✅    | ✅   | ✅    | ✅     | ✅      |
 | Form           | ✅  | 🏗           | ✅     | ✅    | ✅   | ✅    | 🏗️     | 🏗️      |
 | Input          | ✅  | 🏗           | ✅     | ✅    | ✅   | ✅    | 🏗️     | 🏗️      |

packages/sdks/mitosis.config.cjs

@@ -718,6 +718,55 @@ const ANGULAR_COMPONENT_REF_UPDATE_TEMPLATE_SSR = () => ({
   },
 });
 
+const ANGULAR_MARK_SAFE_INNER_HTML = () => ({
+  code: {
+    post: (code) => {
+      if (
+        code.includes('selector: "builder-text"') ||
+        code.includes('selector: "builder-embed"') ||
+        code.includes('selector: "custom-code"')
+      ) {
+        code =
+          `import { DomSanitizer } from "@angular/platform-browser";\nimport { ChangeDetectionStrategy } from "@angular/core";\n` +
+          code;
+
+        // add changeDetection: ChangeDetectionStrategy.OnPush
+        const changeDetectionIndex = code.indexOf('selector:');
+        if (changeDetectionIndex !== -1) {
+          code =
+            code.slice(0, changeDetectionIndex) +
+            `changeDetection: ChangeDetectionStrategy.OnPush,\n` +
+            code.slice(changeDetectionIndex);
+        }
+
+        // add constructor with sanitizer
+        const constructorIndex = code.indexOf('constructor');
+        if (constructorIndex === -1) {
+          // not found
+          const ngOnChangesIndex = code.indexOf('ngOnChanges');
+          code =
+            code.slice(0, ngOnChangesIndex) +
+            `constructor(protected sanitizer: DomSanitizer) {}\n` +
+            code.slice(ngOnChangesIndex);
+        } else {
+          throw new Error(
+            'constructor found which should not be here. If you see this, please fix the ANGULAR_TEXT_MARK_SAFE_HTML Plugin.'
+          );
+        }
+
+        const variableName = code.match(/\[innerHTML\]="([^"]+)"/)?.[1];
+        if (variableName) {
+          code = code.replace(
+            `[innerHTML]="${variableName}"`,
+            `[innerHTML]="sanitizer.bypassSecurityTrustHtml(${variableName})"`
+          );
+        }
+      }
+      return code;
+    },
+  },
+});
+
 /**
  * @type {MitosisConfig}
  */
@@ -746,6 +795,7 @@ module.exports = {
         ANGULAR_ADD_UNUSED_PROP_TYPES,
         ANGULAR_NOWRAP_INTERACTIVE_ELEMENT_PLUGIN,
         ANGULAR_COMPONENT_REF_UPDATE_TEMPLATE_SSR,
+        ANGULAR_MARK_SAFE_INNER_HTML,
       ],
     },
     solid: {