refactor: detect empty tags and components (#5132)

Here replaced "embed" and "control" components with content model. Many
components now detect no content based on html content model like with
img or input tags. In other cases component meta can explicitly specify
empty array to not accept anything.

```
meta = {
  contentModel: {
    category: 'instance',
    children: []
  }
}
```

Author: TrySound

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

@@ -6,13 +6,15 @@ import { serverSyncStore } from "~/shared/sync";
 import { isBaseBreakpoint } from "~/shared/breakpoints";
 import {
   deleteInstanceMutable,
+  findClosestInsertable,
   insertWebstudioFragmentAt,
   updateWebstudioData,
   type Insertable,
 } from "~/shared/instance-utils";
 import {
   $breakpoints,
   $instances,
+  $props,
   $registeredComponentMetas,
   $selectedInstanceSelector,
   $styleSourceSelections,
@@ -22,6 +24,7 @@ import {
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { $selectedInstance, getInstancePath } from "~/shared/awareness";
 import { isInstanceDetachable } from "~/shared/matcher";
+import { isRichTextTree } from "~/shared/content-model";
 
 export const applyOperations = (operations: operations.WsOperations) => {
   for (const operation of operations) {
@@ -47,7 +50,7 @@ const insertTemplateByOp = (
   operation: operations.generateInsertTemplateWsOperation
 ) => {
   const metas = $registeredComponentMetas.get();
-  const templateData = generateDataFromEmbedTemplate(operation.template, metas);
+  const fragment = generateDataFromEmbedTemplate(operation.template, metas);
 
   // @todo Find a way to avoid the workaround below, peharps improving the prompt.
   // Occasionally the LLM picks a component name or the entire data-ws-id attribute as the insertion point.
@@ -63,26 +66,18 @@ const insertTemplateByOp = (
     }
   }
 
-  const rootInstanceIds = templateData.children
+  const rootInstanceIds = fragment.children
     .filter((child) => child.type === "id")
     .map((child) => child.value);
 
   const instanceSelector = computeSelectorForInstanceId(operation.addTo);
   if (instanceSelector) {
-    const currentInstance = $instances.get().get(instanceSelector[0]);
-    // Only container components are allowed to have child elements.
-    if (
-      currentInstance &&
-      metas.get(currentInstance.component)?.type !== "container"
-    ) {
-      return;
-    }
-
-    const dropTarget: Insertable = {
+    let insertable: Insertable = {
       parentSelector: instanceSelector,
       position: operation.addAtIndex + 1,
     };
-    insertWebstudioFragmentAt(templateData, dropTarget);
+    insertable = findClosestInsertable(fragment, insertable) ?? insertable;
+    insertWebstudioFragmentAt(fragment, insertable);
     return rootInstanceIds;
   }
 };
@@ -214,39 +209,47 @@ const computeSelectorForInstanceId = (instanceId: Instance["id"]) => {
 };
 
 export const patchTextInstance = (textInstance: copywriter.TextInstance) => {
-  serverSyncStore.createTransaction([$instances], (instances) => {
-    const currentInstance = instances.get(textInstance.instanceId);
-
-    if (currentInstance === undefined) {
-      return;
-    }
-
-    const meta = $registeredComponentMetas.get().get(currentInstance.component);
+  serverSyncStore.createTransaction(
+    [$instances, $props],
+    (instances, props) => {
+      const currentInstance = instances.get(textInstance.instanceId);
 
-    // Only container components are allowed to have child elements.
-    if (meta?.type !== "container") {
-      return;
-    }
+      if (currentInstance === undefined) {
+        return;
+      }
 
-    if (currentInstance.children.length === 0) {
-      currentInstance.children = [{ type: "text", value: textInstance.text }];
-      return;
-    }
+      const canBeEdited = isRichTextTree({
+        instanceId: textInstance.instanceId,
+        instances,
+        props,
+        metas: $registeredComponentMetas.get(),
+      });
+      if (!canBeEdited) {
+        return;
+      }
 
-    // Instances can have a number of text child nodes without interleaving components.
-    // When this is the case we treat the child nodes as a single text node,
-    // otherwise the AI would generate children.length chunks of separate text.
-    // We can identify this case of "joint" text instances when the index is -1.
-    const replaceAll = textInstance.index === -1;
-    if (replaceAll) {
-      if (currentInstance.children.every((child) => child.type === "text")) {
+      if (currentInstance.children.length === 0) {
         currentInstance.children = [{ type: "text", value: textInstance.text }];
+        return;
       }
-      return;
-    }
 
-    if (currentInstance.children[textInstance.index].type === "text") {
-      currentInstance.children[textInstance.index].value = textInstance.text;
+      // Instances can have a number of text child nodes without interleaving components.
+      // When this is the case we treat the child nodes as a single text node,
+      // otherwise the AI would generate children.length chunks of separate text.
+      // We can identify this case of "joint" text instances when the index is -1.
+      const replaceAll = textInstance.index === -1;
+      if (replaceAll) {
+        if (currentInstance.children.every((child) => child.type === "text")) {
+          currentInstance.children = [
+            { type: "text", value: textInstance.text },
+          ];
+        }
+        return;
+      }
+
+      if (currentInstance.children[textInstance.index].type === "text") {
+        currentInstance.children[textInstance.index].value = textInstance.text;
+      }
     }
-  });
+  );
 };

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -66,8 +66,9 @@ import {
   getInstanceKey,
   selectInstance,
 } from "~/shared/awareness";
-import { findClosestContainer, isTreeMatching } from "~/shared/matcher";
+import { isTreeMatching } from "~/shared/matcher";
 import {
+  findClosestContainer,
   isRichTextContent,
   isTreeSatisfyingContentModel,
 } from "~/shared/content-model";
@@ -550,19 +551,17 @@ const canDrop = (
     }
   }
   // prevent dropping into non-container instances
-  const closestContainerIndex = findClosestContainer({
+  const containerSelector = findClosestContainer({
     metas,
+    props,
     instances,
     instanceSelector: dropSelector,
   });
-  if (closestContainerIndex !== 0) {
+  if (dropSelector.length !== containerSelector.length) {
     return false;
   }
   // make sure dragging tree can be put inside of drop instance
-  const containerInstanceSelector = [
-    dragSelector[0],
-    ...dropSelector.slice(closestContainerIndex),
-  ];
+  const containerInstanceSelector = [dragSelector[0], ...dropSelector];
   let matches = isTreeMatching({
     instances,
     metas,

apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts

@@ -1,16 +1,22 @@
 import { nanoid } from "nanoid";
+import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import type { PropMeta, Instance, Prop } from "@webstudio-is/sdk";
-import { collectionComponent, descendantComponent } from "@webstudio-is/sdk";
+import { descendantComponent } from "@webstudio-is/sdk";
 import { showAttribute, textContentAttribute } from "@webstudio-is/react-sdk";
-import { showAttributeMeta, type PropValue } from "../shared";
 import {
+  $instances,
   $isContentMode,
+  $props,
   $registeredComponentMetas,
   $registeredComponentPropsMetas,
 } from "~/shared/nano-states";
+import { isRichText } from "~/shared/content-model";
+import { $selectedInstancePath } from "~/shared/awareness";
+import { showAttributeMeta, type PropValue } from "../shared";
 
 type PropOrName = { prop?: Prop; propName: string };
+
 export type PropAndMeta = {
   prop?: Prop;
   propName: string;
@@ -132,6 +138,22 @@ const getAndDelete = <Value>(map: Map<string, Value>, key: string) => {
   return value;
 };
 
+const $canHaveTextContent = computed(
+  [$instances, $props, $registeredComponentMetas, $selectedInstancePath],
+  (instances, props, metas, instancePath) => {
+    if (instancePath === undefined) {
+      return false;
+    }
+    const [{ instanceSelector }] = instancePath;
+    return isRichText({
+      instances,
+      props,
+      metas,
+      instanceSelector,
+    });
+  }
+);
+
 /** usePropsLogic expects that key={instanceId} is used on the ancestor component */
 export const usePropsLogic = ({
   instance,
@@ -160,9 +182,6 @@ export const usePropsLogic = ({
     return propsWhiteList.includes(propName);
   };
 
-  const instanceMeta = useStore($registeredComponentMetas).get(
-    instance.component
-  );
   const meta = useStore($registeredComponentPropsMetas).get(
     instance.component
   ) ?? {
@@ -192,9 +211,7 @@ export const usePropsLogic = ({
     });
   }
 
-  const canHaveTextContent =
-    instanceMeta?.type === "container" &&
-    instance.component !== collectionComponent;
+  const canHaveTextContent = useStore($canHaveTextContent);
 
   const hasNoChildren = instance.children.length === 0;
   const hasOnlyTextChild =

apps/builder/app/canvas/features/text-editor/text-editor.stories.tsx

@@ -244,8 +244,8 @@ export const CursorPositioningUpDown: StoryFn<typeof TextEditor> = () => {
 
     $registeredComponentMetas.set(
       new Map([
-        ["Box", { type: "container", icon: "icon" }],
-        ["Bold", { type: "container", icon: "icon" }],
+        ["Box", { icon: "icon" }],
+        ["Bold", { icon: "icon" }],
       ])
     );
 

apps/builder/app/canvas/shared/use-drag-drop.ts

@@ -30,11 +30,11 @@ import {
   areInstanceSelectorsEqual,
 } from "~/shared/tree-utils";
 import {
-  findClosestContainer,
   findClosestInstanceMatchingFragment,
   isTreeMatching,
 } from "~/shared/matcher";
 import {
+  findClosestContainer,
   findClosestRichText,
   isTreeSatisfyingContentModel,
 } from "~/shared/content-model";
@@ -74,15 +74,13 @@ const findClosestDroppableInstanceSelector = (
   const metas = $registeredComponentMetas.get();
 
   // prevent dropping anything into non containers like image
-  let droppableIndex = findClosestContainer({
+  instanceSelector = findClosestContainer({
     metas,
+    props,
     instances,
     instanceSelector,
   });
-  if (droppableIndex === -1) {
-    return;
-  }
-  instanceSelector = instanceSelector.slice(droppableIndex);
+  let droppableIndex = -1;
   if (dragPayload?.type === "insert") {
     const fragment = getComponentTemplateData(dragPayload.dragComponent);
     if (fragment) {

apps/builder/app/shared/content-model.test.tsx

@@ -3,6 +3,7 @@ import { coreMetas } from "@webstudio-is/sdk";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
 import { $, expression, renderData, ws } from "@webstudio-is/template";
 import {
+  findClosestContainer,
   findClosestNonTextualContainer,
   findClosestRichText,
   isRichTextTree,
@@ -835,8 +836,68 @@ describe("rich text tree", () => {
   });
 });
 
-describe("closest non textual container", () => {
+describe("closest container", () => {
   test("skips non-container instances", () => {
+    expect(
+      findClosestContainer({
+        ...renderData(
+          <$.Body ws:id="bodyId">
+            <$.Box ws:id="boxId">
+              <$.Image ws:id="imageId" />
+            </$.Box>
+          </$.Body>
+        ),
+        metas: defaultMetas,
+        instanceSelector: ["imageId", "boxId", "bodyId"],
+      })
+    ).toEqual(["boxId", "bodyId"]);
+  });
+
+  test("allow containers with text", () => {
+    expect(
+      findClosestContainer({
+        ...renderData(
+          <$.Body ws:id="bodyId">
+            <$.Box ws:id="boxId">
+              <$.Box ws:id="box-with-text">text</$.Box>
+            </$.Box>
+          </$.Body>
+        ),
+        metas: defaultMetas,
+        instanceSelector: ["box-with-text", "boxId", "bodyId"],
+      })
+    ).toEqual(["box-with-text", "boxId", "bodyId"]);
+  });
+
+  test("allow containers with expression", () => {
+    expect(
+      findClosestContainer({
+        ...renderData(
+          <$.Body ws:id="bodyId">
+            <$.Box ws:id="boxId">
+              <$.Box ws:id="box-with-expr">{expression`1 + 1`}</$.Box>
+            </$.Box>
+          </$.Body>
+        ),
+        metas: defaultMetas,
+        instanceSelector: ["box-with-expr", "boxId", "bodyId"],
+      })
+    ).toEqual(["box-with-expr", "boxId", "bodyId"]);
+  });
+
+  test("allow root with text", () => {
+    expect(
+      findClosestContainer({
+        ...renderData(<$.Body ws:id="bodyId">text</$.Body>),
+        metas: defaultMetas,
+        instanceSelector: ["bodyId"],
+      })
+    ).toEqual(["bodyId"]);
+  });
+});
+
+describe("closest non textual container", () => {
+  test("skips image tag", () => {
     expect(
       findClosestNonTextualContainer({
         ...renderData(
@@ -852,6 +913,22 @@ describe("closest non textual container", () => {
     ).toEqual(["boxId", "bodyId"]);
   });
 
+  test("skips CodeText component", () => {
+    expect(
+      findClosestNonTextualContainer({
+        ...renderData(
+          <$.Body ws:id="bodyId">
+            <$.Box ws:id="boxId">
+              <$.CodeText ws:id="codeId" />
+            </$.Box>
+          </$.Body>
+        ),
+        metas: defaultMetas,
+        instanceSelector: ["codeId", "boxId", "bodyId"],
+      })
+    ).toEqual(["boxId", "bodyId"]);
+  });
+
   test("skips containers with text", () => {
     expect(
       findClosestNonTextualContainer({