Add new html tags to the remote elements (#19723)

- Add 72 missing HTML and SVG elements to the remote-dom component
registry (48 HTML + 24 SVG), bringing the total from 47 to 119 supported
elements
- HTML additions include semantic inline text (b, i, u, s, mark, sub,
sup, kbd, etc.), description lists, ruby annotations, structural
elements (figure, details, dialog), and form utilities (fieldset,
progress, meter, optgroup)
- SVG additions include containers (svg, g, defs), shapes (path, circle,
rect, line, polygon), text (text, tspan), gradients (linearGradient,
radialGradient, stop), and utilities (clipPath, mask, foreignObject,
marker)
- Add htmlTag override to support SVG elements with camelCase names
(e.g. clipPath, foreignObject) while keeping custom element tags
lowercase per the Web Components spec

packages/twenty-front-component-renderer/scripts/remote-dom/generate-remote-dom-elements.ts

@@ -45,7 +45,7 @@ const getHtmlElementSchemas = (): ComponentSchema[] => {
     events: element.events
       ? [...COMMON_HTML_EVENTS, ...element.events]
       : COMMON_HTML_EVENTS,
-    htmlTag: extractHtmlTag(element.tag),
+    htmlTag: element.htmlTag ?? extractHtmlTag(element.tag),
   }));
 };
 

packages/twenty-front-component-renderer/scripts/remote-dom/generators/schemas.ts

@@ -12,6 +12,7 @@ export const HtmlElementConfigZ = z.object({
     .regex(/^Html[A-Z]/, 'Name must be PascalCase starting with Html'),
   properties: z.record(z.string(), PropertySchemaZ),
   events: z.array(z.string()).optional(),
+  htmlTag: z.string().optional(),
 });
 
 export const HtmlElementConfigArrayZ = z.array(HtmlElementConfigZ);