feat: allow user to add asset description (#5369)

Ref #3263

Now users can control "alt" for all image uses with asset description.



https://github.com/user-attachments/assets/c0e5ae4b-d2b0-4ec1-bf93-c385816369d1

Author: TrySound

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -101,6 +101,7 @@ const renderProperty = (
       ) {
         logic.handleChangeByPropName("width", propValue);
         logic.handleChangeByPropName("height", propValue);
+        logic.handleChangeByPropName("alt", propValue);
       }
     },
   });

apps/builder/app/builder/shared/image-manager/image-info.tsx

@@ -33,6 +33,7 @@ import {
   CloudIcon,
   DimensionsIcon,
   GearIcon,
+  InfoCircleIcon,
   PageIcon,
   TrashIcon,
 } from "@webstudio-is/icons";
@@ -200,7 +201,7 @@ const AssetUsagesList = ({ usages }: { usages: AssetUsage[] }) => {
 const UsageDot = styled(Box, {
   width: 6,
   height: 6,
-  backgroundColor: theme.colors.foregroundDestructive,
+  backgroundColor: "#000",
   border: "1px solid white",
   boxShadow: "0 0 3px rgb(0, 0, 0)",
   borderRadius: "50%",
@@ -287,6 +288,18 @@ const ImageInfoContent = ({
       });
     }
   );
+  const [description, setDescription] = useLocalValue(
+    asset.description ?? "",
+    (newDescription) => {
+      const assetId = asset.id;
+      updateWebstudioData((data) => {
+        const asset = data.assets.get(assetId);
+        if (asset) {
+          asset.description = newDescription;
+        }
+      });
+    }
+  );
 
   const authPermit = useStore($authPermit);
 
@@ -358,6 +371,27 @@ const ImageInfoContent = ({
         </InputErrorsTooltip>
       </Grid>
 
+      <Grid css={{ padding: theme.panel.padding, gap: 4 }}>
+        <Label
+          htmlFor="image-manager-description"
+          css={{ display: "flex", alignItems: "center", gap: 4 }}
+        >
+          Description
+          <Tooltip
+            variant="wrapped"
+            content="The description is used as the default “alt” text for the image."
+          >
+            <InfoCircleIcon />
+          </Tooltip>
+        </Label>
+        <InputField
+          id="image-manager-description"
+          placeholder='Enter "alt" text'
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+        />
+      </Grid>
+
       <Box css={{ padding: theme.panel.padding }}>
         {authPermit === "view" ? (
           <Tooltip side="bottom" content="View mode. You can't delete assets.">
@@ -376,9 +410,7 @@ const ImageInfoContent = ({
         ) : (
           <Dialog>
             <DialogTrigger asChild>
-              <Button color="destructive" prefix={<TrashIcon />}>
-                Delete
-              </Button>
+              <Button>Review & delete</Button>
             </DialogTrigger>
             <DialogContent minWidth={360}>
               <DialogTitle>Delete asset?</DialogTitle>

apps/builder/app/shared/nano-states/props.ts

@@ -259,20 +259,6 @@ export const $propValuesByInstanceSelector = computed(
 
       if (props) {
         for (const prop of props) {
-          if (prop.type === "asset" && prop.name === "width") {
-            const asset = assets.get(prop.value);
-            if (asset?.type === "image") {
-              propValues.set("width", asset.meta.width);
-            }
-          }
-
-          if (prop.type === "asset" && prop.name === "height") {
-            const asset = assets.get(prop.value);
-            if (asset?.type === "image") {
-              propValues.set("height", asset.meta.height);
-            }
-          }
-
           // at this point asset and page either already converted to string
           // or can be ignored
           if (prop.type === "asset" || prop.type === "page") {

packages/asset-uploader/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@aws-crypto/sha256-js": "^5.2.0",
-    "@smithy/signature-v4": "^5.0.1",
+    "@smithy/signature-v4": "^5.1.3",
     "@webstudio-is/fonts": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
     "@webstudio-is/trpc-interface": "workspace:*",
@@ -22,7 +22,7 @@
     "warn-once": "^0.1.1"
   },
   "devDependencies": {
-    "@types/fontkit": "^2.0.7",
+    "@types/fontkit": "^2.0.8",
     "@webstudio-is/tsconfig": "workspace:*",
     "vitest": "^3.1.2",
     "zod": "^3.24.2"

packages/asset-uploader/src/utils/font-data.ts

@@ -8,13 +8,6 @@ import {
   type FontStyle,
 } from "@webstudio-is/fonts";
 
-// @todo sumbit this to definitely typed, they are not up to date
-declare module "fontkit" {
-  export interface Font {
-    variationAxes: VariationAxes;
-  }
-}
-
 // same default fontkit uses internally
 const defaultLanguage = "en";
 

packages/react-sdk/src/props.ts

@@ -60,6 +60,15 @@ export const normalizeProps = ({
         continue;
       }
 
+      if (prop.name === "alt" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "string",
+          value: asset.description ?? "",
+        });
+        continue;
+      }
+
       newProps.push({
         ...propBase,
         type: "string",