feat: Support script and style tag when pasting HTML (#5447)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

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

@@ -92,13 +92,8 @@ test("ignore custom elements", () => {
 
 test("ignore not allowed tags", () => {
   expect(
-    generateFragmentFromHtml(`
-      <style>style</style>
-      <script>script</script>
-      <template>template</template>
-      <section></section>
-   `)
-  ).toEqual(renderTemplate(<ws.element ws:tag="section"></ws.element>));
+    generateFragmentFromHtml(`<div><marquee>test</marquee></div>`)
+  ).toEqual(renderTemplate(<ws.element ws:tag="div"></ws.element>));
 });
 
 test("generate props from html attributes", () => {
@@ -240,33 +235,24 @@ test("generate style attribute as local styles", () => {
   );
 });
 
-test("optionally 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>
-      `,
-      {
-        unknownTags: true,
-      }
-    )
-  ).toEqual(
+test("script as html embed", () => {
+  expect(generateFragmentFromHtml(`<script>a;</script>`)).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>
+      <$.HtmlEmbed
+        ws:label="Script"
+        clientOnly={true}
+        code={`<script>a;</script>`}
+      />
     )
   );
 });
 
+test("style as html embed", () => {
+  expect(generateFragmentFromHtml(`<style>a;</style>`)).toEqual(
+    renderTemplate(<$.HtmlEmbed code={`<style>a;</style>`} ws:label="Style" />)
+  );
+});
+
 test("generate textarea element", () => {
   expect(
     generateFragmentFromHtml(`

apps/builder/app/shared/html.ts

@@ -19,6 +19,7 @@ import { camelCaseProperty, parseCss } from "@webstudio-is/css-data";
 import { richTextContentTags } from "./content-model";
 import { setIsSubsetOf } from "./shim";
 import { isAttributeNameSafe } from "@webstudio-is/react-sdk";
+import { capitalCase } from "change-case";
 
 type ElementNode = DefaultTreeAdapterMap["element"];
 
@@ -72,10 +73,7 @@ const findContentTags = (element: ElementNode, tags = new Set<string>()) => {
   return tags;
 };
 
-export const generateFragmentFromHtml = (
-  html: string,
-  options?: { unknownTags?: boolean }
-): WebstudioFragment => {
+export const generateFragmentFromHtml = (html: string): WebstudioFragment => {
   const attributeTypes = getAttributeTypes();
   const instances = new Map<Instance["id"], Instance>();
   const styleSourceSelections: StyleSourceSelection[] = [];
@@ -98,6 +96,7 @@ export const generateFragmentFromHtml = (
     breakpoints.push(baseBreakpoint);
     return baseBreakpoint.id;
   };
+
   const createLocalStyles = (instanceId: string, css: string) => {
     const localStyleSource: StyleSource = {
       type: "local",
@@ -117,9 +116,8 @@ export const generateFragmentFromHtml = (
 
   const convertElementToInstance = (node: ElementNode) => {
     if (
-      node.tagName === "svg" &&
-      node.sourceCodeLocation &&
-      options?.unknownTags
+      (node.tagName === "script" || node.tagName === "style") &&
+      node.sourceCodeLocation
     ) {
       const { startCol, startOffset, endOffset } = node.sourceCodeLocation;
       const indent = startCol - 1;
@@ -138,18 +136,26 @@ export const generateFragmentFromHtml = (
         type: "instance",
         id: getNewId(),
         component: "HtmlEmbed",
+        label: capitalCase(node.tagName),
         children: [],
       };
       instances.set(instance.id, instance);
-      const name = "code";
-      const codeProp: Prop = {
-        id: `${instance.id}:${name}`,
+      if (node.tagName === "script") {
+        props.push({
+          id: `${instance.id}:clientOnly`,
+          instanceId: instance.id,
+          name: "clientOnly",
+          type: "boolean",
+          value: true,
+        });
+      }
+      props.push({
+        id: `${instance.id}:code`,
         instanceId: instance.id,
-        name,
+        name: "code",
         type: "string",
         value: htmlFragment,
-      };
-      props.push(codeProp);
+      });
       return { type: "id" as const, value: instance.id };
     }
     if (!tags.includes(node.tagName)) {