experimental: allow pasting svg as html embed (for now) (#5200)

Now icons are added as HtmlEmbed component when paste html. This is
essential for tailwind paste which use a lot of icons.

<img width="342" alt="image"
src="https://github.com/user-attachments/assets/06bbe633-e2ae-4929-99c5-91040cda9472"
/>
<img width="431" alt="image"
src="https://github.com/user-attachments/assets/8c7e1b5c-42b4-4d6f-8039-5918175bad7e"
/>


```html
    <div
      style="display: flex; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;"
    >
      <button
        style="background-color: #f8f8f8; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ccc; font-family: sans-serif; font-size: 12px;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          style="margin-right: 5px;"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
        <span>Menu</span>
      </button>
      <button
        style="background-color: #f8f8f8; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ccc; font-family: sans-serif; font-size: 12px;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          style="margin-right: 5px;"
        >
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="16"></line>
          <line x1="8" y1="12" x2="16" y2="12"></line>
        </svg>
        <span>Add</span>
      </button>
      <button
        style="background-color: #f8f8f8; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: sans-serif; font-size: 12px;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          style="margin-right: 5px;"
        >
          <path d="M18 6L6 18"></path>
          <path d="M6 6L18 18"></path>
        </svg>
        <span>Close</span>
      </button>
    </div>
```

Author: TrySound

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

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { css, renderTemplate, ws } from "@webstudio-is/template";
+import { $, css, renderTemplate, ws } from "@webstudio-is/template";
 import { generateFragmentFromHtml } from "./html";
 
 test("generate instances from html", () => {
@@ -222,3 +222,25 @@ test("generate style attribute as local styles", () => {
     )
   );
 });
+
+test("paste svg as html embed", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <svg viewBox="0 0 20 20">
+          <rect x="5" y="5" width="10" height="10" />
+        </svg>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <$.HtmlEmbed
+          code={`<svg viewBox="0 0 20 20">
+  <rect x="5" y="5" width="10" height="10" />
+</svg>`}
+        />
+      </ws.element>
+    )
+  );
+});

apps/builder/app/shared/html.ts

@@ -108,6 +108,38 @@ export const generateFragmentFromHtml = (html: string): WebstudioFragment => {
   };
 
   const convertElementToInstance = (node: ElementNode) => {
+    if (node.tagName === "svg" && node.sourceCodeLocation) {
+      const { startCol, startOffset, endOffset } = node.sourceCodeLocation;
+      const indent = startCol - 1;
+      const htmlFragment = html
+        .slice(startOffset, endOffset)
+        // try to preserve indentation
+        .split("\n")
+        .map((line, index) => {
+          if (index > 0 && /^\s+$/.test(line.slice(0, indent))) {
+            return line.slice(indent);
+          }
+          return line;
+        })
+        .join("\n");
+      const instance: Instance = {
+        type: "instance",
+        id: getNewId(),
+        component: "HtmlEmbed",
+        children: [],
+      };
+      instances.set(instance.id, instance);
+      const name = "code";
+      const codeProp: Prop = {
+        id: `${instance.id}:${name}`,
+        instanceId: instance.id,
+        name,
+        type: "string",
+        value: htmlFragment,
+      };
+      props.push(codeProp);
+      return { type: "id" as const, value: instance.id };
+    }
     if (!tags.includes(node.tagName)) {
       return;
     }
@@ -196,7 +228,10 @@ export const generateFragmentFromHtml = (html: string): WebstudioFragment => {
     return { type: "id" as const, value: instance.id };
   };
 
-  const documentFragment = parseFragment(html, { scriptingEnabled: false });
+  const documentFragment = parseFragment(html, {
+    scriptingEnabled: false,
+    sourceCodeLocationInfo: true,
+  });
   const children: Instance["children"] = [];
   for (const childNode of documentFragment.childNodes) {
     if (defaultTreeAdapter.isElementNode(childNode)) {