[pull] main from webstudio-is:main

apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.test.tsx

@@ -3288,6 +3288,7 @@ describe("Styles", () => {
           background-image: linear-gradient(350deg,hsl(256.3636363636363 72.13% 23.92%/0.00),hsl(256.2162162162162 72.55% 80.00%/1.00) 49%,#bba7f1);
           -webkit-background-clip: text;
           background-clip: text;
+          -webkit-text-fill-color: transparent;
           color: transparent
         }
       }"

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

@@ -150,6 +150,32 @@ test("generate props from number and boolean aria attributes", () => {
   );
 });
 
+test("skip webstudio runtime attributes from pasted html", () => {
+  const fragment = generateFragmentFromHtml(`
+    <a
+      data-ws-tag="a"
+      href="#services"
+      data-ws-text-content="View solutions "
+      data-ws-id="V8q7r5rwOIOz7m_od3wi3"
+      data-ws-component="ws:element"
+      data-ws-selector="V8q7r5rwOIOz7m_od3wi3,BUSoEKIavhIKiBd1COmHZ"
+    >View solutions </a>
+  `);
+
+  expect(fragment.props).toEqual([
+    expect.objectContaining({ name: "href", value: "#services" }),
+  ]);
+  expect(fragment.props.some((prop) => prop.name.startsWith("data-ws-"))).toBe(
+    false
+  );
+  expect(fragment.instances[0]).toEqual(
+    expect.objectContaining({
+      tag: "a",
+      children: [{ type: "text", value: "View solutions " }],
+    })
+  );
+});
+
 test("wrap text with span when spotted outside of rich text", () => {
   expect(
     generateFragmentFromHtml(`

apps/builder/app/shared/html.ts

@@ -26,14 +26,18 @@ import {
 } from "@webstudio-is/css-data";
 import { richTextContentTags } from "./content-model";
 import { setIsSubsetOf } from "./shim";
-import { isAttributeNameSafe } from "@webstudio-is/react-sdk";
+import {
+  isAttributeNameSafe,
+  textContentAttribute,
+} from "@webstudio-is/react-sdk";
 import { ROOT_INSTANCE_ID } from "@webstudio-is/sdk";
 import * as csstree from "css-tree";
 import { titleCase } from "title-case";
 
 type ElementNode = DefaultTreeAdapterMap["element"];
 
 const spaceRegex = /^\s*$/;
+const wsAttributePrefix = "data-ws-";
 
 const getAttributeType = (
   attribute: (typeof ariaAttributes)[number]
@@ -742,7 +746,15 @@ export const generateFragmentFromHtml = (
       delete instance.tag;
     }
     instances.set(instance.id, instance);
+    const wsTextContentAttr = node.attrs.find(
+      (attr) => attr.name === textContentAttribute
+    );
     for (const attr of node.attrs) {
+      // Webstudio runtime metadata can appear when users copy rendered canvas
+      // DOM. Do not import it as user-authored attributes.
+      if (attr.name.startsWith(wsAttributePrefix)) {
+        continue;
+      }
       // skip attributes which cannot be rendered in jsx
       if (!isAttributeNameSafe(attr.name)) {
         continue;
@@ -887,6 +899,21 @@ export const generateFragmentFromHtml = (
         }
       }
     }
+    if (
+      wsTextContentAttr !== undefined &&
+      node.tagName !== "textarea" &&
+      node.childNodes.every((childNode) =>
+        defaultTreeAdapter.isTextNode(childNode)
+      )
+    ) {
+      if (wsTextContentAttr.value !== "") {
+        instance.children.push({
+          type: "text",
+          value: wsTextContentAttr.value,
+        });
+      }
+      return { type: "id" as const, value: instance.id };
+    }
     let spaceAttachedToPrev = false;
     for (let index = 0; index < node.childNodes.length; index += 1) {
       const childNode = node.childNodes[index];