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

TrySound · web-flow · commit a44530b06866 · 2025-05-14T14:12:48.000+03:00
Ref webstudio-is#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
diff --git a/apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx b/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>
   );
 };
