fix: strip invalid attributes when paste html (#5304)

We never validated invalid attributes which cannot be rendered as jsx
and will break the build. Here just strip them away.

Author: TrySound

apps/builder/app/shared/html.test.tsx

@@ -334,3 +334,23 @@ test("generate Image component instead of img element", () => {
     )
   );
 });
+
+test("strip unsupported attribute names", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <button @click="open = true">Expand</button>
+      <button x-on:click="open = !open">
+        Toggle
+      </button>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <>
+        <ws.element ws:tag="button">Expand</ws.element>
+        <ws.element ws:tag="button" x-on:click="open = !open">
+          Toggle
+        </ws.element>
+      </>
+    )
+  );
+});

apps/builder/app/shared/html.ts

@@ -18,6 +18,7 @@ import { ariaAttributes, attributesByTag } from "@webstudio-is/html-data";
 import { camelCaseProperty, parseCss } from "@webstudio-is/css-data";
 import { richTextContentTags } from "./content-model";
 import { setIsSubsetOf } from "./shim";
+import { isAttributeNameSafe } from "@webstudio-is/react-sdk";
 
 type ElementNode = DefaultTreeAdapterMap["element"];
 
@@ -169,6 +170,10 @@ export const generateFragmentFromHtml = (
     }
     instances.set(instance.id, instance);
     for (const attr of node.attrs) {
+      // skip attributes which cannot be rendered in jsx
+      if (!isAttributeNameSafe(attr.name)) {
+        continue;
+      }
       const id = `${instance.id}:${attr.name}`;
       const instanceId = instance.id;
       const name = attr.name;