fefactor: use declarative component-based configuration for content mode

Author: shreyanshkotak

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

@@ -16,14 +16,13 @@ import {
   $registeredComponentMetas,
 } from "~/shared/nano-states";
 import { isRichText } from "~/shared/content-model";
-import { $selectedInstance, $selectedInstancePath } from "~/shared/awareness";
+import { $selectedInstancePath } from "~/shared/awareness";
 import {
   $selectedInstanceInitialPropNames,
   $selectedInstancePropsMetas,
   showAttributeMeta,
   type PropValue,
 } from "../shared";
-import { $instanceTags } from "../../style-panel/shared/model";
 
 type PropOrName = { prop?: Prop; propName: string };
 
@@ -158,60 +157,32 @@ const $canHaveTextContent = computed(
   }
 );
 
-const contentModePropertiesByTag: Partial<Record<string, string[]>> = {
-  img: ["src", "width", "height", "alt"],
-  a: ["href"],
-};
-
-const contentModePropertiesByComponent: Partial<Record<string, string[]>> = {
-  YouTube: ["url"],
-  Vimeo: ["url"],
-};
-
-const $selectedInstanceTag = computed(
-  [$selectedInstance, $instanceTags],
-  (selectedInstance, instanceTags) => {
-    if (selectedInstance === undefined) {
-      return;
-    }
-    return instanceTags.get(selectedInstance.id);
-  }
-);
-
 /** usePropsLogic expects that key={instanceId} is used on the ancestor component */
 export const usePropsLogic = ({
   instance,
   props,
   updateProp,
 }: UsePropsLogicInput) => {
   const isContentMode = useStore($isContentMode);
-  const selectedInstanceTag = useStore($selectedInstanceTag);
+  const propsMetas = useStore($selectedInstancePropsMetas);
 
   /**
-   * In content edit mode we show only Image and Link props
+   * In content edit mode we show only props marked with contentMode: true
    * In the future I hope the only thing we will show will be Components
    */
   const isPropVisible = (propName: string) => {
     if (!isContentMode) {
       return true;
     }
-    const allowedPropertiesByTag =
-      contentModePropertiesByTag[selectedInstanceTag ?? ""] ?? [];
-    const allowedPropertiesByComponent =
-      contentModePropertiesByComponent[instance.component] ?? [];
-    return (
-      allowedPropertiesByTag.includes(propName) ||
-      allowedPropertiesByComponent.includes(propName)
-    );
+    const propMeta = propsMetas.get(propName);
+    return propMeta?.contentMode === true;
   };
 
   const savedProps = props;
 
   // we will delete items from these maps as we categorize the props
   const unprocessedSaved = new Map(savedProps.map((prop) => [prop.name, prop]));
 
-  const propsMetas = useStore($selectedInstancePropsMetas);
-
   const initialPropNames = useStore($selectedInstanceInitialPropNames);
 
   const systemProps: PropAndMeta[] = [];

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -27,7 +27,7 @@ import {
   SYSTEM_VARIABLE_ID,
   systemParameter,
 } from "@webstudio-is/sdk";
-import type { PropMeta, Prop, Asset } from "@webstudio-is/sdk";
+import type { PropMeta, Prop, Asset, WsComponentMeta } from "@webstudio-is/sdk";
 import { InfoCircleIcon } from "@webstudio-is/icons";
 import {
   Label as BaseLabel,
@@ -458,6 +458,35 @@ const attributeToMeta = (attribute: Attribute): PropMeta => {
   throw Error("impossible case");
 };
 
+// Derive tag → content-mode attribute names from registered component metas,
+// so a prop marked `contentMode: true` in a .ws.ts file also surfaces on
+// `ws:element` instances rendering the same tag.
+const getContentModeAttributesByTag = (metas: Map<string, WsComponentMeta>) => {
+  const byTag = new Map<string, Set<string>>();
+  for (const componentMeta of metas.values()) {
+    const tags = Object.keys(componentMeta.presetStyle ?? {});
+    if (tags.length === 0) {
+      continue;
+    }
+    for (const [propName, propMeta] of Object.entries(
+      componentMeta.props ?? {}
+    )) {
+      if (propMeta.contentMode !== true) {
+        continue;
+      }
+      for (const tag of tags) {
+        let names = byTag.get(tag);
+        if (names === undefined) {
+          names = new Set();
+          byTag.set(tag, names);
+        }
+        names.add(propName);
+      }
+    }
+  }
+  return byTag;
+};
+
 export const $selectedInstancePropsMetas = computed(
   [$selectedInstance, $registeredComponentMetas, $instanceTags],
   (instance, metas, instanceTags): Map<string, PropMeta> => {
@@ -467,22 +496,32 @@ export const $selectedInstancePropsMetas = computed(
     const meta = metas.get(instance.component);
     const tag = instanceTags.get(instance.id);
     const propsMetas = new Map<Prop["name"], PropMeta>();
+    const contentModeAttributesByTag = getContentModeAttributesByTag(metas);
+    const contentModeAttributes =
+      tag === undefined ? undefined : contentModeAttributesByTag.get(tag);
+    const toAttributeMeta = (attribute: Attribute): PropMeta => {
+      const propMeta = attributeToMeta(attribute);
+      if (contentModeAttributes?.has(attribute.name)) {
+        return { ...propMeta, contentMode: true };
+      }
+      return propMeta;
+    };
     // add html attributes only when instance has tag
     if (tag) {
       if (elementsByTag[tag].categories.includes("html-element")) {
         for (const attribute of [...ariaAttributes].reverse()) {
-          propsMetas.set(attribute.name, attributeToMeta(attribute));
+          propsMetas.set(attribute.name, toAttributeMeta(attribute));
         }
         // include global attributes only for html elements
         if (attributesByTag["*"]) {
           for (const attribute of [...attributesByTag["*"]].reverse()) {
-            propsMetas.set(attribute.name, attributeToMeta(attribute));
+            propsMetas.set(attribute.name, toAttributeMeta(attribute));
           }
         }
       }
       if (attributesByTag[tag]) {
         for (const attribute of [...attributesByTag[tag]].reverse()) {
-          propsMetas.set(attribute.name, attributeToMeta(attribute));
+          propsMetas.set(attribute.name, toAttributeMeta(attribute));
         }
       }
     }

packages/sdk-components-react/src/image.ws.ts

@@ -53,6 +53,25 @@ export const meta: WsComponentMeta = {
       label: "Source",
       required: false,
       accept: "image/*",
+      contentMode: true,
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true,
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true,
+    },
+    alt: {
+      type: "string",
+      control: "text",
+      required: false,
+      contentMode: true,
     },
   },
 };

packages/sdk-components-react/src/link.ws.ts

@@ -23,6 +23,7 @@ export const meta: WsComponentMeta = {
       type: "string",
       control: "url",
       required: false,
+      contentMode: true,
     },
   },
 };

packages/sdk-components-react/src/markdown-embed.ws.ts

@@ -28,6 +28,7 @@ export const meta: WsComponentMeta = {
       control: "code",
       language: "markdown",
       type: "string",
+      contentMode: true,
     },
   },
 };

packages/sdk-components-react/src/video.ws.ts

@@ -39,6 +39,19 @@ export const meta: WsComponentMeta = {
       label: "Source",
       required: false,
       accept: ".mp4,.webm,.mpg,.mpeg,.mov",
+      contentMode: true,
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true,
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true,
     },
   },
 };

packages/sdk-components-react/src/vimeo-preview-image.ws.ts

@@ -19,6 +19,7 @@ export const meta: WsComponentMeta = {
       control: "file",
       label: "Source",
       required: false,
+      contentMode: true,
     },
   },
 };

packages/sdk-components-react/src/vimeo.ws.ts

@@ -34,5 +34,11 @@ export const meta: WsComponentMeta = {
   },
   presetStyle: { div },
   initialProps,
-  props,
+  props: {
+    ...props,
+    url: {
+      ...props.url,
+      contentMode: true,
+    },
+  },
 };

packages/sdk-components-react/src/youtube.ws.ts

@@ -44,5 +44,11 @@ export const meta: WsComponentMeta = {
   },
   presetStyle: { div },
   initialProps,
-  props,
+  props: {
+    ...props,
+    url: {
+      ...props.url,
+      contentMode: true,
+    },
+  },
 };

packages/sdk/src/schema/prop-meta.ts

@@ -14,6 +14,7 @@ const common = {
   label: z.string().optional(),
   description: z.string().optional(),
   required: z.boolean(),
+  contentMode: z.boolean().optional(),
 };
 
 const Tag = z.object({