feat: download image when paste html with it (#5232)

Ref #3632

Now images will be downloaded when paste it in html to make them
accessible within project even when original one is no longer responds.



https://github.com/user-attachments/assets/2591e981-3ec1-40f8-bf50-19332c322332

Author: TrySound

apps/builder/app/builder/shared/commands.ts

@@ -53,6 +53,7 @@ import {
 } from "~/shared/content-model";
 import { generateFragmentFromHtml } from "~/shared/html";
 import { generateFragmentFromTailwind } from "~/shared/tailwind/tailwind";
+import { denormalizeSrcProps } from "~/shared/copy-paste/asset-upload";
 import { getInstanceLabel } from "./instance-label";
 
 export const $styleSourceInputElement = atom<HTMLInputElement | undefined>();
@@ -536,6 +537,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
             handler: async () => {
               const html = await navigator.clipboard.readText();
               let fragment = generateFragmentFromHtml(html);
+              fragment = await denormalizeSrcProps(fragment);
               fragment = await generateFragmentFromTailwind(fragment);
               return insertWebstudioFragmentAt(fragment);
             },

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

@@ -11,7 +11,7 @@ import { html } from "./plugin-html";
 setEnv("*");
 registerContainers();
 
-test("paste html fragment", () => {
+test("paste html fragment", async () => {
   const data = renderData(
     <ws.element ws:tag="body" ws:id="bodyId">
       <ws.element ws:tag="div" ws:id="divId"></ws.element>
@@ -24,7 +24,7 @@ test("paste html fragment", () => {
   );
   $awareness.set({ pageId: "pageId", instanceSelector: ["divId", "bodyId"] });
   expect(
-    html.onPaste?.(`
+    await html.onPaste?.(`
       <section>
         <h1>It works</h1>
       </section>
@@ -48,7 +48,7 @@ test("paste html fragment", () => {
   );
 });
 
-test("ignore html without any tags", () => {
+test("ignore html without any tags", async () => {
   const data = renderData(
     <ws.element ws:tag="body" ws:id="bodyId">
       <ws.element ws:tag="div" ws:id="divId"></ws.element>
@@ -60,6 +60,6 @@ test("ignore html without any tags", () => {
     createDefaultPages({ rootInstanceId: "bodyId", homePageId: "pageId" })
   );
   $awareness.set({ pageId: "pageId", instanceSelector: ["divId", "bodyId"] });
-  expect(html.onPaste?.(`It works`)).toEqual(false);
+  expect(await html.onPaste?.(`It works`)).toEqual(false);
   expect($instances.get()).toEqual(data.instances);
 });

apps/builder/app/shared/copy-paste/plugin-html.ts

@@ -1,11 +1,13 @@
 import { generateFragmentFromHtml } from "../html";
 import { insertWebstudioFragmentAt } from "../instance-utils";
+import { denormalizeSrcProps } from "./asset-upload";
 import type { Plugin } from "./init-copy-paste";
 
 export const html: Plugin = {
   mimeType: "text/plain",
-  onPaste: (html: string) => {
-    const fragment = generateFragmentFromHtml(html);
+  onPaste: async (html: string) => {
+    let fragment = generateFragmentFromHtml(html);
+    fragment = await denormalizeSrcProps(fragment);
     return insertWebstudioFragmentAt(fragment);
   },
 };

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

@@ -162,14 +162,14 @@ test("wrap text with span when spotted outside of rich text", () => {
   );
   expect(
     generateFragmentFromHtml(`
-      <div>div<b><img></b></div>
+      <div>div<b><br></b></div>
    `)
   ).toEqual(
     renderTemplate(
       <ws.element ws:tag="div">
         <ws.element ws:tag="span">div</ws.element>
         <ws.element ws:tag="b">
-          <ws.element ws:tag="img"></ws.element>
+          <ws.element ws:tag="br"></ws.element>
         </ws.element>
       </ws.element>
     )
@@ -301,3 +301,19 @@ test("generate select element", () => {
     )
   );
 });
+
+test("generate Image component instead of img element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <img src="./my-url">
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <$.Image src="./my-url" />
+      </ws.element>
+    )
+  );
+});

apps/builder/app/shared/html.ts

@@ -161,6 +161,12 @@ export const generateFragmentFromHtml = (
       tag: node.tagName,
       children: [],
     };
+    // users expect to get optimized images by default
+    // though still able to create raw img element
+    if (node.tagName === "img") {
+      instance.component = "Image";
+      delete instance.tag;
+    }
     instances.set(instance.id, instance);
     for (const attr of node.attrs) {
       const id = `${instance.id}:${attr.name}`;