experimental: adapt tag control to html content model (#5208)

Ref #3632

Here improved tag control to allow updating with tag satisfying content
model.

For example when ul has li it can only be changed to ol and menu. li
inside ul cannot be changed with anything.

Also switch to combobox when there is more than 10 satisfying tags.



https://github.com/user-attachments/assets/ad42bba7-9be1-4f50-9b1a-6f6cda52f3e5

Author: TrySound

apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx

@@ -1,17 +1,70 @@
+import { useState } from "react";
+import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-import { Box, Select, theme } from "@webstudio-is/design-system";
+import { Box, Combobox, Select, theme } from "@webstudio-is/design-system";
 import { elementsByTag } from "@webstudio-is/html-data";
-import { $selectedInstance } from "~/shared/awareness";
+import { tags } from "@webstudio-is/sdk";
+import { $selectedInstance, $selectedInstancePath } from "~/shared/awareness";
 import { updateWebstudioData } from "~/shared/instance-utils";
+import { isTreeSatisfyingContentModel } from "~/shared/content-model";
+import {
+  $instances,
+  $props,
+  $registeredComponentMetas,
+} from "~/shared/nano-states";
 import { type ControlProps, VerticalLayout } from "../shared";
 import { FieldLabel } from "../property-label";
 
+const $satisfyingTags = computed(
+  [$selectedInstancePath, $instances, $props, $registeredComponentMetas],
+  (instancePath, instances, props, metas) => {
+    const satisfyingTags: string[] = [];
+    if (instancePath === undefined) {
+      return satisfyingTags;
+    }
+    const [{ instance, instanceSelector }] = instancePath;
+    const newInstances = new Map(instances);
+    for (const tag of tags) {
+      newInstances.set(instance.id, { ...instance, tag });
+      const isSatisfying = isTreeSatisfyingContentModel({
+        instances: newInstances,
+        props,
+        metas,
+        instanceSelector,
+      });
+      if (isSatisfying) {
+        satisfyingTags.push(tag);
+      }
+    }
+    return satisfyingTags;
+  }
+);
+
 export const TagControl = ({ meta, prop }: ControlProps<"tag">) => {
   const instance = useStore($selectedInstance);
   const propTag = prop?.type === "string" ? prop.value : undefined;
   const instanceTag = instance?.tag;
   const defaultTag = meta.options[0];
-  const value = propTag ?? instanceTag ?? defaultTag;
+  const computedTag = instanceTag ?? propTag ?? defaultTag;
+  const satisfyingTags = useStore($satisfyingTags);
+  const options = meta.options.filter((tag) => satisfyingTags.includes(tag));
+  const [value, setValue] = useState<undefined | string>();
+  const updateTag = (value: string) => {
+    if (instance === undefined) {
+      return;
+    }
+    const instanceId = instance.id;
+    updateWebstudioData((data) => {
+      // clean legacy <Box tag> and <Text tag>
+      if (prop) {
+        data.props.delete(prop.id);
+      }
+      const instance = data.instances.get(instanceId);
+      if (instance) {
+        instance.tag = value;
+      }
+    });
+  };
   return (
     <VerticalLayout
       label={
@@ -20,32 +73,36 @@ export const TagControl = ({ meta, prop }: ControlProps<"tag">) => {
         </FieldLabel>
       }
     >
-      <Select
-        fullWidth
-        value={value}
-        options={meta.options}
-        onChange={(value) => {
-          if (instance === undefined) {
-            return;
-          }
-          const instanceId = instance.id;
-          updateWebstudioData((data) => {
-            // clean legacy <Box tag> and <Text tag>
-            if (prop) {
-              data.props.delete(prop.id);
-            }
-            const instance = data.instances.get(instanceId);
-            if (instance) {
-              instance.tag = value;
-            }
-          });
-        }}
-        getDescription={(item) => (
-          <Box css={{ width: theme.spacing[28] }}>
-            {elementsByTag[item]?.description}
-          </Box>
-        )}
-      />
+      {options.length > 10 ? (
+        <Combobox<string>
+          defaultHighlightedIndex={0}
+          getItems={() => options}
+          onItemSelect={(item) => {
+            updateTag(item);
+            setValue(undefined);
+          }}
+          itemToString={(item) => item ?? options[0]}
+          value={value ?? computedTag}
+          onChange={(value) => setValue(value ?? undefined)}
+          getDescription={(item) => (
+            <Box css={{ width: theme.spacing[28] }}>
+              {elementsByTag[item ?? ""]?.description}
+            </Box>
+          )}
+        />
+      ) : (
+        <Select
+          fullWidth
+          value={computedTag}
+          options={options}
+          onChange={updateTag}
+          getDescription={(item) => (
+            <Box css={{ width: theme.spacing[28] }}>
+              {elementsByTag[item]?.description}
+            </Box>
+          )}
+        />
+      )}
     </VerticalLayout>
   );
 };