Allow video, audio and iFrame in front components

[bosiraphael]

Allow video, audio and iFrame in front components

• fix css style properties starting with --

[cubic-dev-ai]

No issues found across 6 files

[greptile-apps]

Greptile Summary

This PR enables video, audio, and iframe elements in the front component renderer and fixes a bug with CSS custom properties (variables starting with --).

Changes:

• Added support for <iframe>, <video>, <audio>, and <source> HTML elements across the component system
• Fixed CSS custom property parsing to preserve -- prefix instead of incorrectly camelCasing it
• All new components properly registered in host, remote, and allowed elements configurations
• All exports correctly added to index.ts (previous issue resolved)

Issues Found:

• Type inconsistency: HtmlIframeProperties uses string for width/height (correct for iframes), but HtmlVideoProperties incorrectly uses number in AllowedHtmlElements.ts while using number in remote-elements.ts (should match <img> convention with number)
• The inconsistency exists across two files and could cause runtime type mismatches

Confidence Score: 4/5

• Safe to merge after fixing type inconsistencies in width/height properties
• The implementation is solid with proper registration across all component layers and correct CSS fix. However, type inconsistencies between AllowedHtmlElements.ts and remote-elements.ts for video width/height, and between iframe Number/String types, need correction to prevent runtime type mismatches
• packages/twenty-sdk/src/front-component-renderer/remote/generated/remote-elements.ts and packages/twenty-sdk/src/sdk/front-component-api/constants/AllowedHtmlElements.ts require type corrections for width/height properties

Important Files Changed

Filename	Overview
packages/twenty-sdk/src/front-component-renderer/host/utils/createHtmlHostWrapper.ts	Fixes CSS custom property handling by preserving -- prefix instead of camelCasing
packages/twenty-sdk/src/front-component-renderer/remote/generated/remote-elements.ts	Defines custom elements with properties for iframe, video, audio, and source; width/height type inconsistency between video and iframe
packages/twenty-sdk/src/sdk/front-component-api/constants/AllowedHtmlElements.ts	Adds allowed HTML element definitions for iframe, video, audio, and source; width/height type inconsistency between video and iframe

_{Last reviewed commit: 88cbfa3}

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[bosiraphael]

@greptileai

[prastoin]

Challenge: Do we really want to ? All files should be on twenty files no ?

[greptile-apps]

_{6 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[charlesBochet]

Left a comment :)