experimental: support paste html

apps/builder/app/builder/features/ai/apply-operations.ts

@@ -10,7 +10,6 @@ import { serverSyncStore } from "~/shared/sync";
 import { isBaseBreakpoint } from "~/shared/breakpoints";
 import {
   deleteInstanceMutable,
-  findClosestInsertable,
   insertWebstudioFragmentAt,
   updateWebstudioData,
   type Insertable,
@@ -76,11 +75,10 @@ const insertTemplateByOp = (
 
   const instanceSelector = computeSelectorForInstanceId(operation.addTo);
   if (instanceSelector) {
-    let insertable: Insertable = {
+    const insertable: Insertable = {
       parentSelector: instanceSelector,
       position: operation.addAtIndex + 1,
     };
-    insertable = findClosestInsertable(fragment, insertable) ?? insertable;
     insertWebstudioFragmentAt(fragment, insertable);
     return rootInstanceIds;
   }

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -38,7 +38,6 @@ import {
   $selectedBreakpointId,
 } from "~/shared/nano-states";
 import {
-  findClosestInsertable,
   getComponentTemplateData,
   getInstanceLabel,
   insertWebstudioFragmentAt,
@@ -207,10 +206,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
               closeCommandPanel();
               const fragment = getComponentTemplateData(component);
               if (fragment) {
-                const insertable = findClosestInsertable(fragment);
-                if (insertable) {
-                  insertWebstudioFragmentAt(fragment, insertable);
-                }
+                insertWebstudioFragmentAt(fragment);
               }
             }}
           >

apps/builder/app/builder/features/components/components.tsx

@@ -37,7 +37,6 @@ import {
   $registeredTemplates,
 } from "~/shared/nano-states";
 import {
-  findClosestInsertable,
   getComponentTemplateData,
   getInstanceLabel,
   insertWebstudioFragmentAt,
@@ -218,10 +217,7 @@ export const ComponentsPanel = ({
   const handleInsert = (component: string) => {
     const fragment = getComponentTemplateData(component);
     if (fragment) {
-      const insertable = findClosestInsertable(fragment);
-      if (insertable) {
-        insertWebstudioFragmentAt(fragment, insertable);
-      }
+      insertWebstudioFragmentAt(fragment);
     }
     onClose();
   };

apps/builder/app/builder/features/workspace/canvas-tools/outline/block-utils.ts

@@ -13,6 +13,7 @@ import {
 } from "~/shared/instance-utils";
 import {
   $instances,
+  $project,
   $registeredComponentMetas,
   $textEditingInstanceSelector,
   findBlockChildSelector,
@@ -69,7 +70,11 @@ const getInsertionIndex = (
 };
 
 export const insertListItemAt = (listItemSelector: InstanceSelector) => {
+  const project = $project.get();
   const instances = $instances.get();
+  if (project === undefined) {
+    return;
+  }
 
   const parentSelector = listItemSelector.slice(1);
 
@@ -111,6 +116,7 @@ export const insertListItemAt = (listItemSelector: InstanceSelector) => {
         ...data,
         startingInstanceId: target.parentSelector[0],
       }),
+      projectId: project.id,
     });
     const newRootInstanceId = newInstanceIds.get(fragment.instances[0].id);
     if (newRootInstanceId === undefined) {
@@ -141,7 +147,11 @@ export const insertTemplateAt = (
   anchor: InstanceSelector,
   insertBefore: boolean
 ) => {
+  const project = $project.get();
   const instances = $instances.get();
+  if (project === undefined) {
+    return;
+  }
 
   const fragment = extractWebstudioFragment(
     getWebstudioData(),
@@ -173,6 +183,7 @@ export const insertTemplateAt = (
         ...data,
         startingInstanceId: target.parentSelector[0],
       }),
+      projectId: project.id,
     });
     const newRootInstanceId = newInstanceIds.get(fragment.instances[0].id);
     if (newRootInstanceId === undefined) {

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

@@ -16,6 +16,7 @@ import {
   $isContentMode,
   $registeredComponentMetas,
   findBlockSelector,
+  $project,
 } from "~/shared/nano-states";
 import {
   $breakpointsMenuView,
@@ -439,6 +440,10 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       name: "duplicateInstance",
       defaultHotkeys: ["meta+d", "ctrl+d"],
       handler: () => {
+        const project = $project.get();
+        if (project === undefined) {
+          return;
+        }
         if ($isDesignMode.get() === false) {
           builderApi.toast.info("Duplicating is only allowed in design mode.");
           return;
@@ -462,6 +467,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
               ...data,
               startingInstanceId: parentItem.instanceSelector[0],
             }),
+            projectId: project.id,
           });
           const newRootInstanceId = newInstanceIds.get(
             selectedItem.instance.id

apps/builder/app/shared/content-model.ts

@@ -398,7 +398,7 @@ export const isTreeSatisfyingContentModel = ({
   return isSatisfying;
 };
 
-const richTextContentTags = new Set<undefined | string>([
+export const richTextContentTags = new Set<undefined | string>([
   "sup",
   "sub",
   "b",

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

@@ -129,12 +129,14 @@ test("insert instances with slots", () => {
     data,
     fragment,
     availableVariables: [],
+    projectId: "",
   });
   expect(data.instances.size).toEqual(4);
   insertWebstudioFragmentCopy({
     data,
     fragment,
     availableVariables: [],
+    projectId: "",
   });
   expect(data.instances.size).toEqual(5);
   expect(Array.from(data.instances.values())).toEqual([
@@ -164,6 +166,7 @@ test("insert instances with multiple roots", () => {
     data,
     fragment,
     availableVariables: [],
+    projectId: "",
   });
   expect(data.instances.size).toEqual(5);
 });
@@ -185,6 +188,7 @@ test("should add :root local styles", () => {
     data: newProject,
     fragment,
     availableVariables: [],
+    projectId: "",
   });
   expect(toCss(newProject)).toEqual(
     stripIndent(`
@@ -223,6 +227,7 @@ test("should merge :root local styles", () => {
     data: newProject,
     fragment,
     availableVariables: [],
+    projectId: "",
   });
   expect(toCss(newProject)).toEqual(
     stripIndent(`
@@ -252,6 +257,7 @@ test("should copy local styles of duplicated instance", () => {
     data: project,
     fragment,
     availableVariables: [],
+    projectId: "",
   });
   const newInstanceId = Array.from(project.instances.keys()).at(-1);
   expect(toCss(project)).toEqual(
@@ -317,6 +323,7 @@ describe("props", () => {
       data,
       fragment,
       availableVariables: [],
+      projectId: "",
     });
     expect(Array.from(data.props.values())).toEqual([
       expect.objectContaining({
@@ -345,6 +352,7 @@ describe("props", () => {
       data,
       fragment,
       availableVariables: [],
+      projectId: "",
     });
     expect(Array.from(data.props.values())).toEqual([
       expect.objectContaining({
@@ -437,6 +445,7 @@ describe("variables", () => {
       data,
       fragment,
       availableVariables: [],
+      projectId: "",
     });
     const [newDataSourceId] = data.dataSources.keys();
     expect(Array.from(data.dataSources.values())).toEqual([
@@ -488,6 +497,7 @@ describe("variables", () => {
       data,
       fragment,
       availableVariables: [],
+      projectId: "",
     });
     expect(Array.from(data.dataSources.values())).toEqual([
       expect.objectContaining({
@@ -540,6 +550,7 @@ describe("variables", () => {
         ...data,
         startingInstanceId: "bodyId",
       }),
+      projectId: "",
     });
     const newInstanceId = Array.from(data.instances.keys()).at(-1) ?? "";
     expect(newInstanceId).not.toEqual("boxId");
@@ -636,6 +647,7 @@ describe("resources", () => {
         ...data,
         startingInstanceId: "bodyId",
       }),
+      projectId: "",
     });
     const newInstanceId = Array.from(data.instances.keys()).at(-1);
     expect(newInstanceId).not.toEqual("boxId");
@@ -724,6 +736,7 @@ describe("resources", () => {
         ...data,
         startingInstanceId: "bodyId",
       }),
+      projectId: "",
     });
     const newInstanceId = Array.from(data.instances.keys()).at(-1);
     expect(newInstanceId).not.toEqual("boxId");
@@ -767,6 +780,7 @@ describe("resources", () => {
       data,
       fragment,
       availableVariables: [],
+      projectId: "",
     });
     const [newPropResourceId, newVariableResourceId] = data.resources.keys();
     const [newBoxVariableId] = data.dataSources.keys();
@@ -833,6 +847,7 @@ describe("resources", () => {
       data,
       fragment,
       availableVariables: [],
+      projectId: "",
     });
     expect(Array.from(data.dataSources.values())).toEqual([
       expect.objectContaining({

apps/builder/app/shared/copy-paste/init-copy-paste.ts

@@ -4,6 +4,7 @@ import {
   $textEditingInstanceSelector,
 } from "../nano-states";
 import { instanceText, instanceJson } from "./plugin-instance";
+import { html } from "./plugin-html";
 import * as markdown from "./plugin-markdown";
 import * as webflow from "./plugin-webflow/plugin-webflow";
 import { builderApi } from "../builder-api";
@@ -132,7 +133,7 @@ const initPlugins = ({
 
 export const initCopyPaste = ({ signal }: { signal: AbortSignal }) => {
   initPlugins({
-    plugins: [instanceJson, instanceText, markdown, webflow],
+    plugins: [instanceJson, instanceText, html, markdown, webflow],
     signal,
   });
 };

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

@@ -0,0 +1,65 @@
+import { expect, test } from "vitest";
+import { setEnv } from "@webstudio-is/feature-flags";
+import { renderData, ws } from "@webstudio-is/template";
+import { createDefaultPages } from "@webstudio-is/project-build";
+import type { Project } from "@webstudio-is/project";
+import { registerContainers } from "../sync";
+import { $instances, $pages, $project } from "../nano-states";
+import { $awareness } from "../awareness";
+import { html } from "./plugin-html";
+
+setEnv("*");
+registerContainers();
+
+test("paste html fragment", () => {
+  const data = renderData(
+    <ws.element ws:tag="body" ws:id="bodyId">
+      <ws.element ws:tag="div" ws:id="divId"></ws.element>
+    </ws.element>
+  );
+  $project.set({ id: "" } as Project);
+  $instances.set(data.instances);
+  $pages.set(
+    createDefaultPages({ rootInstanceId: "bodyId", homePageId: "pageId" })
+  );
+  $awareness.set({ pageId: "pageId", instanceSelector: ["divId", "bodyId"] });
+  expect(
+    html.onPaste?.(`
+      <section>
+        <h1>It works</h1>
+      </section>
+    `)
+  ).toEqual(true);
+  const [_bodyId, _divId, sectionId, headingId] = $instances.get().keys();
+  expect(sectionId).toBeTruthy();
+  expect(headingId).toBeTruthy();
+  expect($instances.get()).toEqual(
+    renderData(
+      <ws.element ws:tag="body" ws:id="bodyId">
+        <ws.element ws:tag="div" ws:id="divId">
+          <ws.element ws:tag="section" ws:id={sectionId}>
+            <ws.element ws:tag="h1" ws:id={headingId}>
+              It works
+            </ws.element>
+          </ws.element>
+        </ws.element>
+      </ws.element>
+    ).instances
+  );
+});
+
+test("ignore html without any tags", () => {
+  const data = renderData(
+    <ws.element ws:tag="body" ws:id="bodyId">
+      <ws.element ws:tag="div" ws:id="divId"></ws.element>
+    </ws.element>
+  );
+  $project.set({ id: "" } as Project);
+  $instances.set(data.instances);
+  $pages.set(
+    createDefaultPages({ rootInstanceId: "bodyId", homePageId: "pageId" })
+  );
+  $awareness.set({ pageId: "pageId", instanceSelector: ["divId", "bodyId"] });
+  expect(html.onPaste?.(`It works`)).toEqual(false);
+  expect($instances.get()).toEqual(data.instances);
+});

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

@@ -0,0 +1,15 @@
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
+import { generateFragmentFromHtml } from "../html";
+import { insertWebstudioFragmentAt } from "../instance-utils";
+import type { Plugin } from "./init-copy-paste";
+
+export const html: Plugin = {
+  mimeType: "text/plain",
+  onPaste: (html: string) => {
+    if (!isFeatureEnabled("element")) {
+      return false;
+    }
+    const fragment = generateFragmentFromHtml(html);
+    return insertWebstudioFragmentAt(fragment);
+  },
+};

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

@@ -9,7 +9,11 @@ import {
   isComponentDetachable,
   portalComponent,
 } from "@webstudio-is/sdk";
-import { $selectedInstanceSelector, $instances } from "../nano-states";
+import {
+  $selectedInstanceSelector,
+  $instances,
+  $project,
+} from "../nano-states";
 import type { InstanceSelector } from "../tree-utils";
 import {
   deleteInstanceMutable,
@@ -152,9 +156,9 @@ const findPasteTarget = (data: InstanceData): undefined | Insertable => {
 };
 
 const onPaste = (clipboardData: string) => {
+  const project = $project.get();
   const fragment = parse(clipboardData);
-
-  if (fragment === undefined) {
+  if (fragment === undefined || project === undefined) {
     return false;
   }
 
@@ -171,6 +175,7 @@ const onPaste = (clipboardData: string) => {
         ...data,
         startingInstanceId: pasteTarget.parentSelector[0],
       }),
+      projectId: project.id,
     });
     const newRootInstanceId = newInstanceIds.get(fragment.instances[0].id);
     if (newRootInstanceId === undefined) {