@webiny/app-file-manager 6.6.0-alpha.0 → 6.6.0-alpha.1

package/presentation/fieldRenderers/CmsImageEditorDialog.js

@@ -0,0 +1,32 @@
+import react from "react";
+import { ImageEditor } from "@webiny/admin-ui";
+const CmsImageEditorDialog = ({ editor })=>{
+    const { open, close, file, save } = editor;
+    if (!file) return null;
+    const img = file.metadata?.image;
+    const value = img?.crop || img?.focalPoint ? {
+        crop: img.crop ?? void 0,
+        hotspot: img.focalPoint ? {
+            x: img.focalPoint.x,
+            y: img.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: img.alt ?? void 0,
+        caption: img.caption ?? void 0
+    } : void 0;
+    return /*#__PURE__*/ react.createElement(ImageEditor, {
+        open: open,
+        onClose: close,
+        image: {
+            src: file.src,
+            width: img?.width ?? 0,
+            height: img?.height ?? 0
+        },
+        value: value,
+        onSave: save
+    });
+};
+export { CmsImageEditorDialog };
+
+//# sourceMappingURL=CmsImageEditorDialog.js.map

package/presentation/fieldRenderers/CmsImageEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/CmsImageEditorDialog.js","sources":["../../../src/presentation/fieldRenderers/CmsImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor, type ImageEditorValue } from \"@webiny/admin-ui\";\nimport type { useCmsImageEditor } from \"~/presentation/hooks/useCmsImageEditor.js\";\n\ninterface CmsImageEditorDialogProps {\n    editor: ReturnType<typeof useCmsImageEditor>;\n}\n\nexport const CmsImageEditorDialog = ({ editor }: CmsImageEditorDialogProps) => {\n    const { open, close, file, save } = editor;\n\n    if (!file) {\n        return null;\n    }\n\n    const img = file.metadata?.image as Record<string, any> | undefined;\n    const value: ImageEditorValue | undefined =\n        img?.crop || img?.focalPoint\n            ? {\n                  crop: img.crop ?? undefined,\n                  hotspot: img.focalPoint\n                      ? { x: img.focalPoint.x, y: img.focalPoint.y, width: 1, height: 1 }\n                      : undefined,\n                  alt: img.alt ?? undefined,\n                  caption: img.caption ?? undefined\n              }\n            : undefined;\n\n    return (\n        <ImageEditor\n            open={open}\n            onClose={close}\n            image={{\n                src: file.src,\n                width: img?.width ?? 0,\n                height: img?.height ?? 0\n            }}\n            value={value}\n            onSave={save}\n        />\n    );\n};\n"],"names":["CmsImageEditorDialog","editor","open","close","file","save","img","value","undefined","ImageEditor"],"mappings":";;AAQO,MAAMA,uBAAuB,CAAC,EAAEC,MAAM,EAA6B;IACtE,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGJ;IAEpC,IAAI,CAACG,MACD,OAAO;IAGX,MAAME,MAAMF,KAAK,QAAQ,EAAE;IAC3B,MAAMG,QACFD,KAAK,QAAQA,KAAK,aACZ;QACI,MAAMA,IAAI,IAAI,IAAIE;QAClB,SAASF,IAAI,UAAU,GACjB;YAAE,GAAGA,IAAI,UAAU,CAAC,CAAC;YAAE,GAAGA,IAAI,UAAU,CAAC,CAAC;YAAE,OAAO;YAAG,QAAQ;QAAE,IAChEE;QACN,KAAKF,IAAI,GAAG,IAAIE;QAChB,SAASF,IAAI,OAAO,IAAIE;IAC5B,IACAA;IAEV,OAAO,WAAP,GACI,oBAACC,aAAWA;QACR,MAAMP;QACN,SAASC;QACT,OAAO;YACH,KAAKC,KAAK,GAAG;YACb,OAAOE,KAAK,SAAS;YACrB,QAAQA,KAAK,UAAU;QAC3B;QACA,OAAOC;QACP,QAAQF;;AAGpB"}

package/presentation/fieldRenderers/CmsMultiAssetPickerRenderer.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { AssetFieldRendererSettings } from "./CmsAssetPickerRenderer.js";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        cmsMultiAssetPicker: {
+            fieldType: "asset";
+            settings: AssetFieldRendererSettings;
+        };
+    }
+}
+/**
+ * Multi-asset picker for a list-mode CMS Asset field. The value is an array of
+ * typed Asset objects; the picker shows each file's URL and offers a per-item
+ * crop / focal point / alt editor that writes back onto that item's `image`.
+ */
+export declare const CmsMultiAssetPickerRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index.js").IFieldVM;
+}>;

package/presentation/fieldRenderers/CmsMultiAssetPickerRenderer.js

@@ -0,0 +1,88 @@
+import react, { useState } from "react";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { FileManager } from "@webiny/app-admin/base/ui/FileManager.js";
+import { ImageEditor, MultiFilePicker, RichItemPreview } from "@webiny/admin-ui";
+import { applyImageEditToAsset, assetImageToEditorValue, fileItemToAsset, hasAsset, hasImageEdit, isImageAsset } from "./assetValue.js";
+import { CroppedAssetThumb } from "./CroppedAssetThumb.js";
+const CmsMultiAssetPickerRenderer = createFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    const value = field.value;
+    const assets = Array.isArray(value) ? value : [];
+    const [editingIndex, setEditingIndex] = useState(null);
+    const editingAsset = null !== editingIndex ? assets[editingIndex] : void 0;
+    const editable = isImageAsset(editingAsset) && hasAsset(editingAsset);
+    const replaceAt = (index, next)=>{
+        field.onChange([
+            ...assets.slice(0, index),
+            ...next,
+            ...assets.slice(index + 1)
+        ]);
+    };
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        multiple: true,
+        images: settings?.imagesOnly,
+        accept: settings?.accept,
+        render: ({ showFileManager })=>{
+            const selectFiles = (replaceIndex = -1)=>{
+                showFileManager((files)=>{
+                    const picked = files.map(fileItemToAsset);
+                    if (-1 === replaceIndex) field.onChange([
+                        ...assets,
+                        ...picked
+                    ]);
+                    else replaceAt(replaceIndex, picked);
+                });
+            };
+            return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(MultiFilePicker, {
+                label: field.label,
+                description: field.description,
+                note: field.note,
+                hint: field.help,
+                type: "compact",
+                values: assets.map((a)=>a.src ?? ""),
+                renderFilePreview: (previewProps)=>{
+                    const asset = assets.find((a)=>a.src === previewProps.value.url);
+                    if (asset?.src && hasImageEdit(asset.image)) return /*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>/*#__PURE__*/ react.createElement(CroppedAssetThumb, {
+                                src: asset.src,
+                                name: name,
+                                image: asset.image
+                            })
+                    });
+                    return /*#__PURE__*/ react.createElement(RichItemPreview, previewProps);
+                },
+                onSelectItem: ()=>selectFiles(),
+                onReplaceItem: (_, index)=>selectFiles(index),
+                onEditItem: (_, index)=>{
+                    const asset = assets[index];
+                    if (isImageAsset(asset) && hasAsset(asset)) setEditingIndex(index);
+                },
+                onRemoveItem: (_, index)=>{
+                    field.onChange([
+                        ...assets.slice(0, index),
+                        ...assets.slice(index + 1)
+                    ]);
+                }
+            }), editable && editingAsset ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: null !== editingIndex,
+                onClose: ()=>setEditingIndex(null),
+                image: {
+                    src: editingAsset.src ?? "",
+                    width: editingAsset.image?.width ?? 0,
+                    height: editingAsset.image?.height ?? 0
+                },
+                value: assetImageToEditorValue(editingAsset.image),
+                onSave: (edit)=>{
+                    if (null !== editingIndex) replaceAt(editingIndex, [
+                        applyImageEditToAsset(editingAsset, edit)
+                    ]);
+                    setEditingIndex(null);
+                }
+            }) : null);
+        }
+    });
+});
+export { CmsMultiAssetPickerRenderer };
+
+//# sourceMappingURL=CmsMultiAssetPickerRenderer.js.map

package/presentation/fieldRenderers/CmsMultiAssetPickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/CmsMultiAssetPickerRenderer.js","sources":["../../../src/presentation/fieldRenderers/CmsMultiAssetPickerRenderer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport type { FileManagerFileItem } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport {\n    MultiFilePicker,\n    RichItemPreview,\n    ImageEditor,\n    type ImageEditorValue\n} from \"@webiny/admin-ui\";\nimport type { AssetFieldRendererSettings } from \"./CmsAssetPickerRenderer.js\";\nimport {\n    applyImageEditToAsset,\n    assetImageToEditorValue,\n    fileItemToAsset,\n    hasAsset,\n    hasImageEdit,\n    isImageAsset,\n    type Asset\n} from \"./assetValue.js\";\nimport { CroppedAssetThumb } from \"./CroppedAssetThumb.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsMultiAssetPicker: { fieldType: \"asset\"; settings: AssetFieldRendererSettings };\n    }\n}\n\n/**\n * Multi-asset picker for a list-mode CMS Asset field. The value is an array of\n * typed Asset objects; the picker shows each file's URL and offers a per-item\n * crop / focal point / alt editor that writes back onto that item's `image`.\n */\nexport const CmsMultiAssetPickerRenderer = createFieldRenderer<\"cmsMultiAssetPicker\">(\n    ({ field }) => {\n        const settings = field.rendererSettings as AssetFieldRendererSettings | undefined;\n        const value = field.value as Asset[] | null | undefined;\n        const assets = Array.isArray(value) ? value : [];\n        const [editingIndex, setEditingIndex] = useState<number | null>(null);\n\n        const editingAsset = editingIndex !== null ? assets[editingIndex] : undefined;\n        const editable = isImageAsset(editingAsset) && hasAsset(editingAsset);\n\n        const replaceAt = (index: number, next: Asset[]) => {\n            field.onChange([...assets.slice(0, index), ...next, ...assets.slice(index + 1)]);\n        };\n\n        return (\n            <FileManager\n                multiple\n                images={settings?.imagesOnly}\n                accept={settings?.accept}\n                render={({ showFileManager }) => {\n                    const selectFiles = (replaceIndex = -1) => {\n                        showFileManager((files: FileManagerFileItem[]) => {\n                            const picked = files.map(fileItemToAsset);\n                            if (replaceIndex === -1) {\n                                field.onChange([...assets, ...picked]);\n                            } else {\n                                replaceAt(replaceIndex, picked);\n                            }\n                        });\n                    };\n\n                    return (\n                        <>\n                            <MultiFilePicker\n                                label={field.label}\n                                description={field.description}\n                                note={field.note}\n                                hint={field.help}\n                                type=\"compact\"\n                                values={assets.map(a => a.src ?? \"\")}\n                                // Reflect each item's per-usage crop + focal point.\n                                renderFilePreview={previewProps => {\n                                    const asset = assets.find(\n                                        a => a.src === previewProps.value.url\n                                    );\n                                    if (asset?.src && hasImageEdit(asset.image)) {\n                                        return (\n                                            <RichItemPreview\n                                                {...previewProps}\n                                                renderImage={({ name }) => (\n                                                    <CroppedAssetThumb\n                                                        src={asset.src as string}\n                                                        name={name}\n                                                        image={asset.image!}\n                                                    />\n                                                )}\n                                            />\n                                        );\n                                    }\n                                    return <RichItemPreview {...previewProps} />;\n                                }}\n                                onSelectItem={() => selectFiles()}\n                                onReplaceItem={(_, index) => selectFiles(index)}\n                                onEditItem={(_, index) => {\n                                    const asset = assets[index];\n                                    if (isImageAsset(asset) && hasAsset(asset)) {\n                                        setEditingIndex(index);\n                                    }\n                                }}\n                                onRemoveItem={(_, index) => {\n                                    field.onChange([\n                                        ...assets.slice(0, index),\n                                        ...assets.slice(index + 1)\n                                    ]);\n                                }}\n                            />\n                            {editable && editingAsset ? (\n                                <ImageEditor\n                                    open={editingIndex !== null}\n                                    onClose={() => setEditingIndex(null)}\n                                    image={{\n                                        src: editingAsset.src ?? \"\",\n                                        width: editingAsset.image?.width ?? 0,\n                                        height: editingAsset.image?.height ?? 0\n                                    }}\n                                    value={assetImageToEditorValue(editingAsset.image)}\n                                    onSave={(edit: ImageEditorValue) => {\n                                        if (editingIndex !== null) {\n                                            replaceAt(editingIndex, [\n                                                applyImageEditToAsset(editingAsset, edit)\n                                            ]);\n                                        }\n                                        setEditingIndex(null);\n                                    }}\n                                />\n                            ) : null}\n                        </>\n                    );\n                }}\n            />\n        );\n    }\n);\n"],"names":["CmsMultiAssetPickerRenderer","createFieldRenderer","field","settings","value","assets","Array","editingIndex","setEditingIndex","useState","editingAsset","undefined","editable","isImageAsset","hasAsset","replaceAt","index","next","FileManager","showFileManager","selectFiles","replaceIndex","files","picked","fileItemToAsset","MultiFilePicker","a","previewProps","asset","hasImageEdit","RichItemPreview","name","CroppedAssetThumb","_","ImageEditor","assetImageToEditorValue","edit","applyImageEditToAsset"],"mappings":";;;;;;AAiCO,MAAMA,8BAA8BC,oBACvC,CAAC,EAAEC,KAAK,EAAE;IACN,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,QAAQF,MAAM,KAAK;IACzB,MAAMG,SAASC,MAAM,OAAO,CAACF,SAASA,QAAQ,EAAE;IAChD,MAAM,CAACG,cAAcC,gBAAgB,GAAGC,SAAwB;IAEhE,MAAMC,eAAeH,AAAiB,SAAjBA,eAAwBF,MAAM,CAACE,aAAa,GAAGI;IACpE,MAAMC,WAAWC,aAAaH,iBAAiBI,SAASJ;IAExD,MAAMK,YAAY,CAACC,OAAeC;QAC9Bf,MAAM,QAAQ,CAAC;eAAIG,OAAO,KAAK,CAAC,GAAGW;eAAWC;eAASZ,OAAO,KAAK,CAACW,QAAQ;SAAG;IACnF;IAEA,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR;QACA,QAAQf,UAAU;QAClB,QAAQA,UAAU;QAClB,QAAQ,CAAC,EAAEgB,eAAe,EAAE;YACxB,MAAMC,cAAc,CAACC,eAAe,EAAE;gBAClCF,gBAAgB,CAACG;oBACb,MAAMC,SAASD,MAAM,GAAG,CAACE;oBACzB,IAAIH,AAAiB,OAAjBA,cACAnB,MAAM,QAAQ,CAAC;2BAAIG;2BAAWkB;qBAAO;yBAErCR,UAAUM,cAAcE;gBAEhC;YACJ;YAEA,OAAO,WAAP,GACI,wDACI,oBAACE,iBAAeA;gBACZ,OAAOvB,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,MAAK;gBACL,QAAQG,OAAO,GAAG,CAACqB,CAAAA,IAAKA,EAAE,GAAG,IAAI;gBAEjC,mBAAmBC,CAAAA;oBACf,MAAMC,QAAQvB,OAAO,IAAI,CACrBqB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,aAAa,KAAK,CAAC,GAAG;oBAEzC,IAAIC,OAAO,OAAOC,aAAaD,MAAM,KAAK,GACtC,OAAO,WAAP,GACI,oBAACE,iBAAeA;wBACX,GAAGH,YAAY;wBAChB,aAAa,CAAC,EAAEI,IAAI,EAAE,iBAClB,oBAACC,mBAAiBA;gCACd,KAAKJ,MAAM,GAAG;gCACd,MAAMG;gCACN,OAAOH,MAAM,KAAK;;;oBAMtC,OAAO,WAAP,GAAO,oBAACE,iBAAoBH;gBAChC;gBACA,cAAc,IAAMP;gBACpB,eAAe,CAACa,GAAGjB,QAAUI,YAAYJ;gBACzC,YAAY,CAACiB,GAAGjB;oBACZ,MAAMY,QAAQvB,MAAM,CAACW,MAAM;oBAC3B,IAAIH,aAAae,UAAUd,SAASc,QAChCpB,gBAAgBQ;gBAExB;gBACA,cAAc,CAACiB,GAAGjB;oBACdd,MAAM,QAAQ,CAAC;2BACRG,OAAO,KAAK,CAAC,GAAGW;2BAChBX,OAAO,KAAK,CAACW,QAAQ;qBAC3B;gBACL;gBAEHJ,YAAYF,eAAe,WAAfA,GACT,oBAACwB,aAAWA;gBACR,MAAM3B,AAAiB,SAAjBA;gBACN,SAAS,IAAMC,gBAAgB;gBAC/B,OAAO;oBACH,KAAKE,aAAa,GAAG,IAAI;oBACzB,OAAOA,aAAa,KAAK,EAAE,SAAS;oBACpC,QAAQA,aAAa,KAAK,EAAE,UAAU;gBAC1C;gBACA,OAAOyB,wBAAwBzB,aAAa,KAAK;gBACjD,QAAQ,CAAC0B;oBACL,IAAI7B,AAAiB,SAAjBA,cACAQ,UAAUR,cAAc;wBACpB8B,sBAAsB3B,cAAc0B;qBACvC;oBAEL5B,gBAAgB;gBACpB;iBAEJ;QAGhB;;AAGZ"}

package/presentation/fieldRenderers/CmsMultiFilePickerRenderer.d.ts

@@ -9,5 +9,5 @@ declare module "@webiny/app-admin/features/formModel/abstractions.js" {
     }
 }
 export declare const CmsMultiFilePickerRenderer: React.ComponentType<{
-    field: import("@webiny/app-admin/index").IFieldVM;
+    field: import("@webiny/app-admin/index.js").IFieldVM;
 }>;

package/presentation/fieldRenderers/CmsMultiFilePickerRenderer.js

@@ -2,10 +2,13 @@ import react from "react";
 import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
 import { FileManager } from "@webiny/app-admin/base/ui/FileManager.js";
 import { MultiFilePicker } from "@webiny/admin-ui";
+import { isEditableImageUrl, useCmsImageEditor } from "../hooks/useCmsImageEditor.js";
+import { CmsImageEditorDialog } from "./CmsImageEditorDialog.js";
 const CmsMultiFilePickerRenderer = createFieldRenderer(({ field })=>{
     const value = field.value;
     const settings = field.rendererSettings;
     const currentValues = Array.isArray(value) ? value : [];
+    const editor = useCmsImageEditor();
     return /*#__PURE__*/ react.createElement(FileManager, {
         multiple: true,
         images: settings?.images,
@@ -27,7 +30,7 @@ const CmsMultiFilePickerRenderer = createFieldRenderer(({ field })=>{
                     ]);
                 });
             };
-            return /*#__PURE__*/ react.createElement(MultiFilePicker, {
+            return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(MultiFilePicker, {
                 label: field.label,
                 description: field.description,
                 note: field.note,
@@ -36,13 +39,19 @@ const CmsMultiFilePickerRenderer = createFieldRenderer(({ field })=>{
                 type: "compact",
                 onSelectItem: ()=>selectFiles(),
                 onReplaceItem: (_, index)=>selectFiles(index),
+                onEditItem: (_, index)=>{
+                    const url = currentValues[index];
+                    if (isEditableImageUrl(url)) editor.openFor(url);
+                },
                 onRemoveItem: (_, index)=>{
                     field.onChange([
                         ...currentValues.slice(0, index),
                         ...currentValues.slice(index + 1)
                     ]);
                 }
-            });
+            }), /*#__PURE__*/ react.createElement(CmsImageEditorDialog, {
+                editor: editor
+            }));
         }
     });
 });

package/presentation/fieldRenderers/CmsMultiFilePickerRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/fieldRenderers/CmsMultiFilePickerRenderer.js","sources":["../../../src/presentation/fieldRenderers/CmsMultiFilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport type { FileManagerFileItem } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport { MultiFilePicker } from \"@webiny/admin-ui\";\nimport type { FileFieldSettings } from \"@webiny/app-admin/features/formModel/fieldTypes/FileFieldType.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsMultiFilePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nexport const CmsMultiFilePickerRenderer = createFieldRenderer<\"cmsMultiFilePicker\">(({ field }) => {\n    const value = field.value as string[] | undefined;\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n    const currentValues = Array.isArray(value) ? value : [];\n\n    return (\n        <FileManager\n            multiple\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => {\n                const selectFiles = (replaceIndex = -1) => {\n                    showFileManager((files: FileManagerFileItem[]) => {\n                        const newSrcs = files.map(f => f.src || \"\");\n                        if (replaceIndex === -1) {\n                            field.onChange([...currentValues, ...newSrcs]);\n                        } else {\n                            field.onChange([\n                                ...currentValues.slice(0, replaceIndex),\n                                ...newSrcs,\n                                ...currentValues.slice(replaceIndex + 1)\n                            ]);\n                        }\n                    });\n                };\n\n                return (\n                    <MultiFilePicker\n                        label={field.label}\n                        description={field.description}\n                        note={field.note}\n                        hint={field.help}\n                        values={currentValues}\n                        type=\"compact\"\n                        onSelectItem={() => selectFiles()}\n                        onReplaceItem={(_, index) => selectFiles(index)}\n                        onRemoveItem={(_, index) => {\n                            field.onChange([\n                                ...currentValues.slice(0, index),\n                                ...currentValues.slice(index + 1)\n                            ]);\n                        }}\n                    />\n                );\n            }}\n        />\n    );\n});\n"],"names":["CmsMultiFilePickerRenderer","createFieldRenderer","field","value","settings","currentValues","Array","FileManager","showFileManager","selectFiles","replaceIndex","files","newSrcs","f","MultiFilePicker","_","index"],"mappings":";;;;AAaO,MAAMA,6BAA6BC,oBAA0C,CAAC,EAAEC,KAAK,EAAE;IAC1F,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAME,WAAWF,MAAM,gBAAgB;IACvC,MAAMG,gBAAgBC,MAAM,OAAO,CAACH,SAASA,QAAQ,EAAE;IAEvD,OAAO,WAAP,GACI,oBAACI,aAAWA;QACR;QACA,QAAQH,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEI,eAAe,EAAE;YACxB,MAAMC,cAAc,CAACC,eAAe,EAAE;gBAClCF,gBAAgB,CAACG;oBACb,MAAMC,UAAUD,MAAM,GAAG,CAACE,CAAAA,IAAKA,EAAE,GAAG,IAAI;oBACxC,IAAIH,AAAiB,OAAjBA,cACAR,MAAM,QAAQ,CAAC;2BAAIG;2BAAkBO;qBAAQ;yBAE7CV,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGK;2BACvBE;2BACAP,cAAc,KAAK,CAACK,eAAe;qBACzC;gBAET;YACJ;YAEA,OAAO,WAAP,GACI,oBAACI,iBAAeA;gBACZ,OAAOZ,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,QAAQG;gBACR,MAAK;gBACL,cAAc,IAAMI;gBACpB,eAAe,CAACM,GAAGC,QAAUP,YAAYO;gBACzC,cAAc,CAACD,GAAGC;oBACdd,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGW;2BACvBX,cAAc,KAAK,CAACW,QAAQ;qBAClC;gBACL;;QAGZ;;AAGZ"}
+{"version":3,"file":"presentation/fieldRenderers/CmsMultiFilePickerRenderer.js","sources":["../../../src/presentation/fieldRenderers/CmsMultiFilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport type { FileManagerFileItem } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport { MultiFilePicker } from \"@webiny/admin-ui\";\nimport type { FileFieldSettings } from \"@webiny/app-admin/features/formModel/fieldTypes/FileFieldType.js\";\nimport { isEditableImageUrl, useCmsImageEditor } from \"~/presentation/hooks/useCmsImageEditor.js\";\nimport { CmsImageEditorDialog } from \"./CmsImageEditorDialog.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsMultiFilePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nexport const CmsMultiFilePickerRenderer = createFieldRenderer<\"cmsMultiFilePicker\">(({ field }) => {\n    const value = field.value as string[] | undefined;\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n    const currentValues = Array.isArray(value) ? value : [];\n    const editor = useCmsImageEditor();\n\n    return (\n        <FileManager\n            multiple\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => {\n                const selectFiles = (replaceIndex = -1) => {\n                    showFileManager((files: FileManagerFileItem[]) => {\n                        const newSrcs = files.map(f => f.src || \"\");\n                        if (replaceIndex === -1) {\n                            field.onChange([...currentValues, ...newSrcs]);\n                        } else {\n                            field.onChange([\n                                ...currentValues.slice(0, replaceIndex),\n                                ...newSrcs,\n                                ...currentValues.slice(replaceIndex + 1)\n                            ]);\n                        }\n                    });\n                };\n\n                return (\n                    <>\n                        <MultiFilePicker\n                            label={field.label}\n                            description={field.description}\n                            note={field.note}\n                            hint={field.help}\n                            values={currentValues}\n                            type=\"compact\"\n                            onSelectItem={() => selectFiles()}\n                            onReplaceItem={(_, index) => selectFiles(index)}\n                            onEditItem={(_, index) => {\n                                const url = currentValues[index];\n                                if (isEditableImageUrl(url)) {\n                                    editor.openFor(url);\n                                }\n                            }}\n                            onRemoveItem={(_, index) => {\n                                field.onChange([\n                                    ...currentValues.slice(0, index),\n                                    ...currentValues.slice(index + 1)\n                                ]);\n                            }}\n                        />\n                        <CmsImageEditorDialog editor={editor} />\n                    </>\n                );\n            }}\n        />\n    );\n});\n"],"names":["CmsMultiFilePickerRenderer","createFieldRenderer","field","value","settings","currentValues","Array","editor","useCmsImageEditor","FileManager","showFileManager","selectFiles","replaceIndex","files","newSrcs","f","MultiFilePicker","_","index","url","isEditableImageUrl","CmsImageEditorDialog"],"mappings":";;;;;;AAeO,MAAMA,6BAA6BC,oBAA0C,CAAC,EAAEC,KAAK,EAAE;IAC1F,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAME,WAAWF,MAAM,gBAAgB;IACvC,MAAMG,gBAAgBC,MAAM,OAAO,CAACH,SAASA,QAAQ,EAAE;IACvD,MAAMI,SAASC;IAEf,OAAO,WAAP,GACI,oBAACC,aAAWA;QACR;QACA,QAAQL,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEM,eAAe,EAAE;YACxB,MAAMC,cAAc,CAACC,eAAe,EAAE;gBAClCF,gBAAgB,CAACG;oBACb,MAAMC,UAAUD,MAAM,GAAG,CAACE,CAAAA,IAAKA,EAAE,GAAG,IAAI;oBACxC,IAAIH,AAAiB,OAAjBA,cACAV,MAAM,QAAQ,CAAC;2BAAIG;2BAAkBS;qBAAQ;yBAE7CZ,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGO;2BACvBE;2BACAT,cAAc,KAAK,CAACO,eAAe;qBACzC;gBAET;YACJ;YAEA,OAAO,WAAP,GACI,wDACI,oBAACI,iBAAeA;gBACZ,OAAOd,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,QAAQG;gBACR,MAAK;gBACL,cAAc,IAAMM;gBACpB,eAAe,CAACM,GAAGC,QAAUP,YAAYO;gBACzC,YAAY,CAACD,GAAGC;oBACZ,MAAMC,MAAMd,aAAa,CAACa,MAAM;oBAChC,IAAIE,mBAAmBD,MACnBZ,OAAO,OAAO,CAACY;gBAEvB;gBACA,cAAc,CAACF,GAAGC;oBACdhB,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGa;2BACvBb,cAAc,KAAK,CAACa,QAAQ;qBAClC;gBACL;8BAEJ,oBAACG,sBAAoBA;gBAAC,QAAQd;;QAG1C;;AAGZ"}

package/presentation/fieldRenderers/CroppedAssetThumb.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { AssetImage } from "./assetValue.js";
+interface CroppedAssetThumbProps {
+    src: string;
+    name: string;
+    image: AssetImage;
+}
+/**
+ * Fills its parent thumbnail box (the FilePicker's 56px square) with the asset's
+ * per-usage crop, cropping the crop region toward the focal point (`cover`) — the
+ * same square footprint and `object-cover` feel as the default thumbnail, just
+ * showing the cropped/focused region instead of the whole image.
+ */
+export declare const CroppedAssetThumb: ({ src, name, image }: CroppedAssetThumbProps) => React.JSX.Element;
+export {};

package/presentation/fieldRenderers/CroppedAssetThumb.js

@@ -0,0 +1,25 @@
+import react from "react";
+import { getCroppedImageRenderStyles } from "@webiny/admin-ui";
+const CroppedAssetThumb = ({ src, name, image })=>{
+    const { wrapper, image: imageStyle } = getCroppedImageRenderStyles(image.width ?? 0, image.height ?? 0, image.crop ?? void 0, image.focalPoint ? {
+        x: image.focalPoint.x,
+        y: image.focalPoint.y,
+        width: 1,
+        height: 1
+    } : void 0, {
+        boxWidth: 1,
+        boxHeight: 1,
+        fit: "cover"
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        style: wrapper
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: src,
+        alt: name,
+        draggable: false,
+        style: imageStyle
+    }));
+};
+export { CroppedAssetThumb };
+
+//# sourceMappingURL=CroppedAssetThumb.js.map

package/presentation/fieldRenderers/CroppedAssetThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/CroppedAssetThumb.js","sources":["../../../src/presentation/fieldRenderers/CroppedAssetThumb.tsx"],"sourcesContent":["import React from \"react\";\nimport { getCroppedImageRenderStyles } from \"@webiny/admin-ui\";\nimport type { AssetImage } from \"./assetValue.js\";\n\ninterface CroppedAssetThumbProps {\n    src: string;\n    name: string;\n    image: AssetImage;\n}\n\n/**\n * Fills its parent thumbnail box (the FilePicker's 56px square) with the asset's\n * per-usage crop, cropping the crop region toward the focal point (`cover`) — the\n * same square footprint and `object-cover` feel as the default thumbnail, just\n * showing the cropped/focused region instead of the whole image.\n */\nexport const CroppedAssetThumb = ({ src, name, image }: CroppedAssetThumbProps) => {\n    const { wrapper, image: imageStyle } = getCroppedImageRenderStyles(\n        image.width ?? 0,\n        image.height ?? 0,\n        image.crop ?? undefined,\n        image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        // Square target (the thumbnail box is square); cover fills the parent box.\n        { boxWidth: 1, boxHeight: 1, fit: \"cover\" }\n    );\n\n    return (\n        <div style={wrapper}>\n            <img src={src} alt={name} draggable={false} style={imageStyle} />\n        </div>\n    );\n};\n"],"names":["CroppedAssetThumb","src","name","image","wrapper","imageStyle","getCroppedImageRenderStyles","undefined"],"mappings":";;AAgBO,MAAMA,oBAAoB,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,KAAK,EAA0B;IAC1E,MAAM,EAAEC,OAAO,EAAE,OAAOC,UAAU,EAAE,GAAGC,4BACnCH,MAAM,KAAK,IAAI,GACfA,MAAM,MAAM,IAAI,GAChBA,MAAM,IAAI,IAAII,QACdJ,MAAM,UAAU,GACV;QAAE,GAAGA,MAAM,UAAU,CAAC,CAAC;QAAE,GAAGA,MAAM,UAAU,CAAC,CAAC;QAAE,OAAO;QAAG,QAAQ;IAAE,IACpEI,QAEN;QAAE,UAAU;QAAG,WAAW;QAAG,KAAK;IAAQ;IAG9C,OAAO,WAAP,GACI,oBAAC;QAAI,OAAOH;qBACR,oBAAC;QAAI,KAAKH;QAAK,KAAKC;QAAM,WAAW;QAAO,OAAOG;;AAG/D"}

package/presentation/fieldRenderers/assetValue.d.ts

@@ -0,0 +1,10 @@
+import type { ImageEditorValue } from "@webiny/admin-ui";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager.js";
+import type { Asset, AssetImage } from "@webiny/sdk";
+export type { Asset, AssetImage };
+export declare const isImageAsset: (asset: Asset | null | undefined) => boolean;
+export declare const hasAsset: (asset: Asset | null | undefined) => boolean;
+export declare const hasImageEdit: (image: AssetImage | null | undefined) => boolean;
+export declare const fileItemToAsset: (file: FileManagerFileItem) => Asset;
+export declare const assetImageToEditorValue: (image: AssetImage | null | undefined) => ImageEditorValue | undefined;
+export declare const applyImageEditToAsset: (asset: Asset, edit: ImageEditorValue) => Asset;

package/presentation/fieldRenderers/assetValue.js

@@ -0,0 +1,88 @@
+const isImageAsset = (asset)=>"string" == typeof asset?.type && asset.type.startsWith("image/");
+const hasAsset = (asset)=>"string" == typeof asset?.src && asset.src.length > 0;
+const isFullCrop = (crop)=>!crop || 0 === crop.top && 0 === crop.left && 0 === crop.bottom && 0 === crop.right;
+const isCenteredFocal = (focalPoint)=>!focalPoint || 0.5 === focalPoint.x && 0.5 === focalPoint.y;
+const hasImageEdit = (image)=>{
+    if (!image) return false;
+    return !isFullCrop(image.crop) || !isCenteredFocal(image.focalPoint);
+};
+const fileItemToAsset = (file)=>{
+    const src = file.src;
+    const asset = {
+        id: file.id,
+        src,
+        url: src,
+        name: file.name,
+        type: file.type,
+        size: file.size
+    };
+    if ("string" == typeof file.type && file.type.startsWith("image/")) {
+        const meta = file.metadata?.image;
+        const image = {
+            width: meta?.width ?? file.width,
+            height: meta?.height ?? file.height
+        };
+        if (meta?.crop) image.crop = meta.crop;
+        if (meta?.focalPoint) image.focalPoint = {
+            x: meta.focalPoint.x,
+            y: meta.focalPoint.y
+        };
+        if (meta?.alt) image.alt = meta.alt;
+        if (meta?.caption) image.caption = meta.caption;
+        asset.image = image;
+        asset.url = buildAssetUrl(src, image.crop);
+    }
+    return asset;
+};
+const assetImageToEditorValue = (image)=>{
+    if (!image) return;
+    return {
+        crop: image.crop ?? void 0,
+        hotspot: image.focalPoint ? {
+            x: image.focalPoint.x,
+            y: image.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: image.alt ?? void 0,
+        caption: image.caption ?? void 0
+    };
+};
+const applyImageEditToAsset = (asset, edit)=>{
+    const crop = edit.crop ?? void 0;
+    return {
+        ...asset,
+        url: buildAssetUrl(asset.src, crop),
+        image: {
+            width: asset.image?.width,
+            height: asset.image?.height,
+            crop,
+            focalPoint: edit.hotspot ? {
+                x: edit.hotspot.x,
+                y: edit.hotspot.y
+            } : void 0,
+            alt: edit.alt ?? void 0,
+            caption: edit.caption ?? void 0
+        }
+    };
+};
+const round = (n)=>Math.round(10000 * n) / 10000;
+function buildAssetUrl(src, crop) {
+    if (!crop) return src;
+    const top = crop.top ?? 0;
+    const left = crop.left ?? 0;
+    const bottom = crop.bottom ?? 0;
+    const right = crop.right ?? 0;
+    if (0 === top && 0 === left && 0 === bottom && 0 === right) return src;
+    const param = [
+        top,
+        left,
+        bottom,
+        right
+    ].map(round).join(",");
+    const separator = src.includes("?") ? "&" : "?";
+    return `${src}${separator}crop=${param}`;
+}
+export { applyImageEditToAsset, assetImageToEditorValue, fileItemToAsset, hasAsset, hasImageEdit, isImageAsset };
+
+//# sourceMappingURL=assetValue.js.map

package/presentation/fieldRenderers/assetValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/assetValue.js","sources":["../../../src/presentation/fieldRenderers/assetValue.ts"],"sourcesContent":["import type { ImageEditorValue } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport type { Asset, AssetImage } from \"@webiny/sdk\";\n\nexport type { Asset, AssetImage };\n\nexport const isImageAsset = (asset: Asset | null | undefined): boolean => {\n    return typeof asset?.type === \"string\" && asset.type.startsWith(\"image/\");\n};\n\nexport const hasAsset = (asset: Asset | null | undefined): boolean => {\n    return typeof asset?.src === \"string\" && asset.src.length > 0;\n};\n\nconst isFullCrop = (crop: AssetImage[\"crop\"]): boolean => {\n    return !crop || (crop.top === 0 && crop.left === 0 && crop.bottom === 0 && crop.right === 0);\n};\n\nconst isCenteredFocal = (focalPoint: AssetImage[\"focalPoint\"]): boolean => {\n    return !focalPoint || (focalPoint.x === 0.5 && focalPoint.y === 0.5);\n};\n\nexport const hasImageEdit = (image: AssetImage | null | undefined): boolean => {\n    if (!image) {\n        return false;\n    }\n    return !isFullCrop(image.crop) || !isCenteredFocal(image.focalPoint);\n};\n\ninterface FileImageMetadata {\n    width?: number;\n    height?: number;\n    crop?: { top: number; left: number; bottom: number; right: number };\n    focalPoint?: { x: number; y: number };\n    alt?: string;\n    caption?: string;\n}\n\nexport const fileItemToAsset = (file: FileManagerFileItem): Asset => {\n    const src = file.src;\n    const asset: Asset = {\n        id: file.id,\n        src,\n        url: src,\n        name: file.name,\n        type: file.type,\n        size: file.size\n    };\n    if (typeof file.type === \"string\" && file.type.startsWith(\"image/\")) {\n        const meta = file.metadata?.image as FileImageMetadata | undefined;\n        const image: AssetImage = {\n            width: meta?.width ?? file.width,\n            height: meta?.height ?? file.height\n        };\n        if (meta?.crop) {\n            image.crop = meta.crop;\n        }\n        if (meta?.focalPoint) {\n            image.focalPoint = { x: meta.focalPoint.x, y: meta.focalPoint.y };\n        }\n        if (meta?.alt) {\n            image.alt = meta.alt;\n        }\n        if (meta?.caption) {\n            image.caption = meta.caption;\n        }\n        asset.image = image;\n        asset.url = buildAssetUrl(src, image.crop);\n    }\n    return asset;\n};\n\nexport const assetImageToEditorValue = (\n    image: AssetImage | null | undefined\n): ImageEditorValue | undefined => {\n    if (!image) {\n        return undefined;\n    }\n    return {\n        crop: image.crop ?? undefined,\n        hotspot: image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        alt: image.alt ?? undefined,\n        caption: image.caption ?? undefined\n    };\n};\n\nexport const applyImageEditToAsset = (asset: Asset, edit: ImageEditorValue): Asset => {\n    const crop = edit.crop ?? undefined;\n    return {\n        ...asset,\n        url: buildAssetUrl(asset.src, crop),\n        image: {\n            width: asset.image?.width,\n            height: asset.image?.height,\n            crop,\n            focalPoint: edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined,\n            alt: edit.alt ?? undefined,\n            caption: edit.caption ?? undefined\n        }\n    };\n};\n\nconst round = (n: number): number => Math.round(n * 10000) / 10000;\n\nfunction buildAssetUrl(src: string, crop: AssetImage[\"crop\"] | null | undefined): string {\n    if (!crop) {\n        return src;\n    }\n    const top = crop.top ?? 0;\n    const left = crop.left ?? 0;\n    const bottom = crop.bottom ?? 0;\n    const right = crop.right ?? 0;\n    if (top === 0 && left === 0 && bottom === 0 && right === 0) {\n        return src;\n    }\n    const param = [top, left, bottom, right].map(round).join(\",\");\n    const separator = src.includes(\"?\") ? \"&\" : \"?\";\n    return `${src}${separator}crop=${param}`;\n}\n"],"names":["isImageAsset","asset","hasAsset","isFullCrop","crop","isCenteredFocal","focalPoint","hasImageEdit","image","fileItemToAsset","file","src","meta","buildAssetUrl","assetImageToEditorValue","undefined","applyImageEditToAsset","edit","round","n","Math","top","left","bottom","right","param","separator"],"mappings":"AAMO,MAAMA,eAAe,CAACC,QAClB,AAAuB,YAAvB,OAAOA,OAAO,QAAqBA,MAAM,IAAI,CAAC,UAAU,CAAC;AAG7D,MAAMC,WAAW,CAACD,QACd,AAAsB,YAAtB,OAAOA,OAAO,OAAoBA,MAAM,GAAG,CAAC,MAAM,GAAG;AAGhE,MAAME,aAAa,CAACC,OACT,CAACA,QAASA,AAAa,MAAbA,KAAK,GAAG,IAAUA,AAAc,MAAdA,KAAK,IAAI,IAAUA,AAAgB,MAAhBA,KAAK,MAAM,IAAUA,AAAe,MAAfA,KAAK,KAAK;AAGzF,MAAMC,kBAAkB,CAACC,aACd,CAACA,cAAeA,AAAiB,QAAjBA,WAAW,CAAC,IAAYA,AAAiB,QAAjBA,WAAW,CAAC;AAGxD,MAAMC,eAAe,CAACC;IACzB,IAAI,CAACA,OACD,OAAO;IAEX,OAAO,CAACL,WAAWK,MAAM,IAAI,KAAK,CAACH,gBAAgBG,MAAM,UAAU;AACvE;AAWO,MAAMC,kBAAkB,CAACC;IAC5B,MAAMC,MAAMD,KAAK,GAAG;IACpB,MAAMT,QAAe;QACjB,IAAIS,KAAK,EAAE;QACXC;QACA,KAAKA;QACL,MAAMD,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;IACnB;IACA,IAAI,AAAqB,YAArB,OAAOA,KAAK,IAAI,IAAiBA,KAAK,IAAI,CAAC,UAAU,CAAC,WAAW;QACjE,MAAME,OAAOF,KAAK,QAAQ,EAAE;QAC5B,MAAMF,QAAoB;YACtB,OAAOI,MAAM,SAASF,KAAK,KAAK;YAChC,QAAQE,MAAM,UAAUF,KAAK,MAAM;QACvC;QACA,IAAIE,MAAM,MACNJ,MAAM,IAAI,GAAGI,KAAK,IAAI;QAE1B,IAAIA,MAAM,YACNJ,MAAM,UAAU,GAAG;YAAE,GAAGI,KAAK,UAAU,CAAC,CAAC;YAAE,GAAGA,KAAK,UAAU,CAAC,CAAC;QAAC;QAEpE,IAAIA,MAAM,KACNJ,MAAM,GAAG,GAAGI,KAAK,GAAG;QAExB,IAAIA,MAAM,SACNJ,MAAM,OAAO,GAAGI,KAAK,OAAO;QAEhCX,MAAM,KAAK,GAAGO;QACdP,MAAM,GAAG,GAAGY,cAAcF,KAAKH,MAAM,IAAI;IAC7C;IACA,OAAOP;AACX;AAEO,MAAMa,0BAA0B,CACnCN;IAEA,IAAI,CAACA,OACD;IAEJ,OAAO;QACH,MAAMA,MAAM,IAAI,IAAIO;QACpB,SAASP,MAAM,UAAU,GACnB;YAAE,GAAGA,MAAM,UAAU,CAAC,CAAC;YAAE,GAAGA,MAAM,UAAU,CAAC,CAAC;YAAE,OAAO;YAAG,QAAQ;QAAE,IACpEO;QACN,KAAKP,MAAM,GAAG,IAAIO;QAClB,SAASP,MAAM,OAAO,IAAIO;IAC9B;AACJ;AAEO,MAAMC,wBAAwB,CAACf,OAAcgB;IAChD,MAAMb,OAAOa,KAAK,IAAI,IAAIF;IAC1B,OAAO;QACH,GAAGd,KAAK;QACR,KAAKY,cAAcZ,MAAM,GAAG,EAAEG;QAC9B,OAAO;YACH,OAAOH,MAAM,KAAK,EAAE;YACpB,QAAQA,MAAM,KAAK,EAAE;YACrBG;YACA,YAAYa,KAAK,OAAO,GAAG;gBAAE,GAAGA,KAAK,OAAO,CAAC,CAAC;gBAAE,GAAGA,KAAK,OAAO,CAAC,CAAC;YAAC,IAAIF;YACtE,KAAKE,KAAK,GAAG,IAAIF;YACjB,SAASE,KAAK,OAAO,IAAIF;QAC7B;IACJ;AACJ;AAEA,MAAMG,QAAQ,CAACC,IAAsBC,KAAK,KAAK,CAACD,AAAI,QAAJA,KAAa;AAE7D,SAASN,cAAcF,GAAW,EAAEP,IAA2C;IAC3E,IAAI,CAACA,MACD,OAAOO;IAEX,MAAMU,MAAMjB,KAAK,GAAG,IAAI;IACxB,MAAMkB,OAAOlB,KAAK,IAAI,IAAI;IAC1B,MAAMmB,SAASnB,KAAK,MAAM,IAAI;IAC9B,MAAMoB,QAAQpB,KAAK,KAAK,IAAI;IAC5B,IAAIiB,AAAQ,MAARA,OAAaC,AAAS,MAATA,QAAcC,AAAW,MAAXA,UAAgBC,AAAU,MAAVA,OAC3C,OAAOb;IAEX,MAAMc,QAAQ;QAACJ;QAAKC;QAAMC;QAAQC;KAAM,CAAC,GAAG,CAACN,OAAO,IAAI,CAAC;IACzD,MAAMQ,YAAYf,IAAI,QAAQ,CAAC,OAAO,MAAM;IAC5C,OAAO,GAAGA,MAAMe,UAAU,KAAK,EAAED,OAAO;AAC5C"}

package/presentation/hooks/useCmsImageEditor.d.ts

@@ -0,0 +1,10 @@
+import type { ImageEditorValue } from "@webiny/admin-ui";
+/** Whether a stored file URL points at a raster image we can crop (SVGs excluded). */
+export declare const isEditableImageUrl: (url: string | undefined) => url is string;
+export declare function useCmsImageEditor(): {
+    open: boolean;
+    openFor: (url: string) => Promise<void>;
+    close: () => void;
+    file: import("@webiny/sdk/index").FmFile | null;
+    save: (edit: ImageEditorValue) => Promise<void>;
+};

package/presentation/hooks/useCmsImageEditor.js

@@ -0,0 +1,76 @@
+import { useCallback, useState } from "react";
+import { useSnackbar } from "@webiny/app-admin";
+import { useContainer } from "@webiny/app";
+import { GetFileUseCase } from "../../features/getFile/abstractions.js";
+import { UpdateFileUseCase } from "../../features/updateFile/abstractions.js";
+const IMAGE_URL = /\.(jpe?g|png|webp|avif|gif)$/i;
+const isEditableImageUrl = (url)=>!!url && IMAGE_URL.test(url.split("?")[0]);
+const parseFileId = (url)=>{
+    const clean = url.split("?")[0].replace(/\/+$/, "");
+    const parts = clean.split("/").filter(Boolean);
+    return parts.length >= 2 ? parts[parts.length - 2] : void 0;
+};
+function useCmsImageEditor() {
+    const { showSnackbar } = useSnackbar();
+    const container = useContainer();
+    const getFileUseCase = container.resolve(GetFileUseCase);
+    const updateFileUseCase = container.resolve(UpdateFileUseCase);
+    const [open, setOpen] = useState(false);
+    const [file, setFile] = useState(null);
+    const openFor = useCallback(async (url)=>{
+        const id = parseFileId(url);
+        if (!id) return void showSnackbar("Could not resolve the image to edit.");
+        const result = await getFileUseCase.execute({
+            id
+        });
+        if (result.success) {
+            setFile(result.file);
+            setOpen(true);
+        } else showSnackbar(result.error.message);
+    }, [
+        getFileUseCase,
+        showSnackbar
+    ]);
+    const close = useCallback(()=>setOpen(false), []);
+    const save = useCallback(async (edit)=>{
+        if (!file) return;
+        const metadata = {
+            ...file.metadata
+        };
+        const image = {
+            ...metadata.image
+        };
+        image.crop = edit.crop ?? void 0;
+        image.focalPoint = edit.hotspot ? {
+            x: edit.hotspot.x,
+            y: edit.hotspot.y
+        } : void 0;
+        image.alt = edit.alt ?? void 0;
+        image.caption = edit.caption ?? void 0;
+        metadata.image = image;
+        const result = await updateFileUseCase.execute({
+            id: file.id,
+            data: {
+                metadata
+            }
+        });
+        if (result.success) {
+            showSnackbar("Image settings saved.");
+            setFile(result.file);
+        } else showSnackbar(result.error.message);
+    }, [
+        file,
+        updateFileUseCase,
+        showSnackbar
+    ]);
+    return {
+        open,
+        openFor,
+        close,
+        file,
+        save
+    };
+}
+export { isEditableImageUrl, useCmsImageEditor };
+
+//# sourceMappingURL=useCmsImageEditor.js.map

package/presentation/hooks/useCmsImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/hooks/useCmsImageEditor.js","sources":["../../../src/presentation/hooks/useCmsImageEditor.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useContainer } from \"@webiny/app\";\nimport type { ImageEditorValue } from \"@webiny/admin-ui\";\nimport { GetFileUseCase } from \"~/features/getFile/abstractions.js\";\nimport { UpdateFileUseCase } from \"~/features/updateFile/abstractions.js\";\nimport type { FileItem } from \"~/domain/types.js\";\n\nconst IMAGE_URL = /\\.(jpe?g|png|webp|avif|gif)$/i;\n\n/** Whether a stored file URL points at a raster image we can crop (SVGs excluded). */\nexport const isEditableImageUrl = (url: string | undefined): url is string => {\n    return !!url && IMAGE_URL.test(url.split(\"?\")[0]);\n};\n\n/**\n * Resolve a File's id from its public URL. File keys are `{id}/{filename}` and the\n * URL is `{srcPrefix}{key}`, so the id is the second-to-last path segment (this is\n * the same convention the asset-delivery ObjectKey relies on).\n */\nconst parseFileId = (url: string): string | undefined => {\n    const clean = url.split(\"?\")[0].replace(/\\/+$/, \"\");\n    const parts = clean.split(\"/\").filter(Boolean);\n    return parts.length >= 2 ? parts[parts.length - 2] : undefined;\n};\n\nexport function useCmsImageEditor() {\n    const { showSnackbar } = useSnackbar();\n    const container = useContainer();\n    const getFileUseCase = container.resolve(GetFileUseCase);\n    const updateFileUseCase = container.resolve(UpdateFileUseCase);\n\n    const [open, setOpen] = useState(false);\n    const [file, setFile] = useState<FileItem | null>(null);\n\n    const openFor = useCallback(\n        async (url: string) => {\n            const id = parseFileId(url);\n            if (!id) {\n                showSnackbar(\"Could not resolve the image to edit.\");\n                return;\n            }\n            const result = await getFileUseCase.execute({ id });\n            if (result.success) {\n                setFile(result.file);\n                setOpen(true);\n            } else {\n                showSnackbar(result.error.message);\n            }\n        },\n        [getFileUseCase, showSnackbar]\n    );\n\n    const close = useCallback(() => setOpen(false), []);\n\n    const save = useCallback(\n        async (edit: ImageEditorValue) => {\n            if (!file) {\n                return;\n            }\n            const metadata: Record<string, any> = { ...file.metadata };\n            const image: Record<string, any> = { ...metadata.image };\n\n            image.crop = edit.crop ?? undefined;\n            image.focalPoint = edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined;\n            image.alt = edit.alt ?? undefined;\n            image.caption = edit.caption ?? undefined;\n\n            metadata.image = image;\n\n            const result = await updateFileUseCase.execute({ id: file.id, data: { metadata } });\n            if (result.success) {\n                showSnackbar(\"Image settings saved.\");\n                setFile(result.file);\n            } else {\n                showSnackbar(result.error.message);\n            }\n        },\n        [file, updateFileUseCase, showSnackbar]\n    );\n\n    return { open, openFor, close, file, save };\n}\n"],"names":["IMAGE_URL","isEditableImageUrl","url","parseFileId","clean","parts","Boolean","undefined","useCmsImageEditor","showSnackbar","useSnackbar","container","useContainer","getFileUseCase","GetFileUseCase","updateFileUseCase","UpdateFileUseCase","open","setOpen","useState","file","setFile","openFor","useCallback","id","result","close","save","edit","metadata","image"],"mappings":";;;;;AAQA,MAAMA,YAAY;AAGX,MAAMC,qBAAqB,CAACC,MACxB,CAAC,CAACA,OAAOF,UAAU,IAAI,CAACE,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE;AAQpD,MAAMC,cAAc,CAACD;IACjB,MAAME,QAAQF,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ;IAChD,MAAMG,QAAQD,MAAM,KAAK,CAAC,KAAK,MAAM,CAACE;IACtC,OAAOD,MAAM,MAAM,IAAI,IAAIA,KAAK,CAACA,MAAM,MAAM,GAAG,EAAE,GAAGE;AACzD;AAEO,SAASC;IACZ,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAMC,YAAYC;IAClB,MAAMC,iBAAiBF,UAAU,OAAO,CAACG;IACzC,MAAMC,oBAAoBJ,UAAU,OAAO,CAACK;IAE5C,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,MAAMC,QAAQ,GAAGF,SAA0B;IAElD,MAAMG,UAAUC,YACZ,OAAOrB;QACH,MAAMsB,KAAKrB,YAAYD;QACvB,IAAI,CAACsB,IAAI,YACLf,aAAa;QAGjB,MAAMgB,SAAS,MAAMZ,eAAe,OAAO,CAAC;YAAEW;QAAG;QACjD,IAAIC,OAAO,OAAO,EAAE;YAChBJ,QAAQI,OAAO,IAAI;YACnBP,QAAQ;QACZ,OACIT,aAAagB,OAAO,KAAK,CAAC,OAAO;IAEzC,GACA;QAACZ;QAAgBJ;KAAa;IAGlC,MAAMiB,QAAQH,YAAY,IAAML,QAAQ,QAAQ,EAAE;IAElD,MAAMS,OAAOJ,YACT,OAAOK;QACH,IAAI,CAACR,MACD;QAEJ,MAAMS,WAAgC;YAAE,GAAGT,KAAK,QAAQ;QAAC;QACzD,MAAMU,QAA6B;YAAE,GAAGD,SAAS,KAAK;QAAC;QAEvDC,MAAM,IAAI,GAAGF,KAAK,IAAI,IAAIrB;QAC1BuB,MAAM,UAAU,GAAGF,KAAK,OAAO,GAAG;YAAE,GAAGA,KAAK,OAAO,CAAC,CAAC;YAAE,GAAGA,KAAK,OAAO,CAAC,CAAC;QAAC,IAAIrB;QAC7EuB,MAAM,GAAG,GAAGF,KAAK,GAAG,IAAIrB;QACxBuB,MAAM,OAAO,GAAGF,KAAK,OAAO,IAAIrB;QAEhCsB,SAAS,KAAK,GAAGC;QAEjB,MAAML,SAAS,MAAMV,kBAAkB,OAAO,CAAC;YAAE,IAAIK,KAAK,EAAE;YAAE,MAAM;gBAAES;YAAS;QAAE;QACjF,IAAIJ,OAAO,OAAO,EAAE;YAChBhB,aAAa;YACbY,QAAQI,OAAO,IAAI;QACvB,OACIhB,aAAagB,OAAO,KAAK,CAAC,OAAO;IAEzC,GACA;QAACL;QAAML;QAAmBN;KAAa;IAG3C,OAAO;QAAEQ;QAAMK;QAASI;QAAON;QAAMO;IAAK;AAC9C"}

package/presentation/hooks/useEditImage.d.ts

@@ -0,0 +1,14 @@
+import type { ImageEditorValue } from "@webiny/admin-ui";
+import type { FileItem } from "../../domain/types.js";
+interface UseEditImageOptions {
+    /** Called with the updated file after a successful save (e.g. to refresh the UI). */
+    onSaved?: (file: FileItem) => void;
+}
+export declare function useEditImage(file: FileItem, options?: UseEditImageOptions): {
+    open: boolean;
+    openEditor: () => void;
+    closeEditor: () => void;
+    value: ImageEditorValue | undefined;
+    save: (edit: ImageEditorValue) => Promise<void>;
+};
+export {};

package/presentation/hooks/useEditImage.js

@@ -0,0 +1,67 @@
+import { useCallback, useState } from "react";
+import { useSnackbar } from "@webiny/app-admin";
+import { useContainer } from "@webiny/app";
+import { UpdateFileUseCase } from "../../features/updateFile/abstractions.js";
+function useEditImage(file, options = {}) {
+    const { showSnackbar } = useSnackbar();
+    const container = useContainer();
+    const updateFileUseCase = container.resolve(UpdateFileUseCase);
+    const { onSaved } = options;
+    const [open, setOpen] = useState(false);
+    const img = file.metadata?.image;
+    const value = img ? {
+        crop: img.crop ?? void 0,
+        hotspot: img.focalPoint ? {
+            x: img.focalPoint.x,
+            y: img.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: img.alt ?? void 0,
+        caption: img.caption ?? void 0
+    } : void 0;
+    const openEditor = useCallback(()=>setOpen(true), []);
+    const closeEditor = useCallback(()=>setOpen(false), []);
+    const save = useCallback(async (edit)=>{
+        const metadata = {
+            ...file.metadata
+        };
+        const image = {
+            ...metadata.image
+        };
+        image.crop = edit.crop ?? void 0;
+        image.focalPoint = edit.hotspot ? {
+            x: edit.hotspot.x,
+            y: edit.hotspot.y
+        } : void 0;
+        image.alt = edit.alt ?? void 0;
+        image.caption = edit.caption ?? void 0;
+        metadata.image = image;
+        const result = await updateFileUseCase.execute({
+            id: file.id,
+            data: {
+                metadata
+            }
+        });
+        if (result.success) {
+            showSnackbar("Image settings saved.");
+            onSaved?.(result.file);
+        } else showSnackbar(result.error.message);
+    }, [
+        file.id,
+        file.metadata,
+        updateFileUseCase,
+        showSnackbar,
+        onSaved
+    ]);
+    return {
+        open,
+        openEditor,
+        closeEditor,
+        value,
+        save
+    };
+}
+export { useEditImage };
+
+//# sourceMappingURL=useEditImage.js.map

package/presentation/hooks/useEditImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/hooks/useEditImage.js","sources":["../../../src/presentation/hooks/useEditImage.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useContainer } from \"@webiny/app\";\nimport type { ImageEditorValue } from \"@webiny/admin-ui\";\nimport { UpdateFileUseCase } from \"~/features/updateFile/abstractions.js\";\nimport type { FileItem } from \"~/domain/types.js\";\n\ninterface UseEditImageOptions {\n    /** Called with the updated file after a successful save (e.g. to refresh the UI). */\n    onSaved?: (file: FileItem) => void;\n}\n\nexport function useEditImage(file: FileItem, options: UseEditImageOptions = {}) {\n    const { showSnackbar } = useSnackbar();\n    const container = useContainer();\n    const updateFileUseCase = container.resolve(UpdateFileUseCase);\n    const { onSaved } = options;\n\n    const [open, setOpen] = useState(false);\n\n    const img = file.metadata?.image as Record<string, any> | undefined;\n    const value: ImageEditorValue | undefined = img\n        ? {\n              crop: img.crop ?? undefined,\n              hotspot: img.focalPoint\n                  ? { x: img.focalPoint.x, y: img.focalPoint.y, width: 1, height: 1 }\n                  : undefined,\n              alt: img.alt ?? undefined,\n              caption: img.caption ?? undefined\n          }\n        : undefined;\n\n    const openEditor = useCallback(() => setOpen(true), []);\n    const closeEditor = useCallback(() => setOpen(false), []);\n\n    const save = useCallback(\n        async (edit: ImageEditorValue) => {\n            const metadata: Record<string, any> = { ...file.metadata };\n            const image: Record<string, any> = { ...metadata.image };\n\n            image.crop = edit.crop ?? undefined;\n            image.focalPoint = edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined;\n            image.alt = edit.alt ?? undefined;\n            image.caption = edit.caption ?? undefined;\n\n            metadata.image = image;\n\n            const result = await updateFileUseCase.execute({ id: file.id, data: { metadata } });\n\n            if (result.success) {\n                showSnackbar(`Image settings saved.`);\n                onSaved?.(result.file);\n            } else {\n                showSnackbar(result.error.message);\n            }\n        },\n        [file.id, file.metadata, updateFileUseCase, showSnackbar, onSaved]\n    );\n\n    return { open, openEditor, closeEditor, value, save };\n}\n"],"names":["useEditImage","file","options","showSnackbar","useSnackbar","container","useContainer","updateFileUseCase","UpdateFileUseCase","onSaved","open","setOpen","useState","img","value","undefined","openEditor","useCallback","closeEditor","save","edit","metadata","image","result"],"mappings":";;;;AAYO,SAASA,aAAaC,IAAc,EAAEC,UAA+B,CAAC,CAAC;IAC1E,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAMC,YAAYC;IAClB,MAAMC,oBAAoBF,UAAU,OAAO,CAACG;IAC5C,MAAM,EAAEC,OAAO,EAAE,GAAGP;IAEpB,MAAM,CAACQ,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,MAAMZ,KAAK,QAAQ,EAAE;IAC3B,MAAMa,QAAsCD,MACtC;QACI,MAAMA,IAAI,IAAI,IAAIE;QAClB,SAASF,IAAI,UAAU,GACjB;YAAE,GAAGA,IAAI,UAAU,CAAC,CAAC;YAAE,GAAGA,IAAI,UAAU,CAAC,CAAC;YAAE,OAAO;YAAG,QAAQ;QAAE,IAChEE;QACN,KAAKF,IAAI,GAAG,IAAIE;QAChB,SAASF,IAAI,OAAO,IAAIE;IAC5B,IACAA;IAEN,MAAMC,aAAaC,YAAY,IAAMN,QAAQ,OAAO,EAAE;IACtD,MAAMO,cAAcD,YAAY,IAAMN,QAAQ,QAAQ,EAAE;IAExD,MAAMQ,OAAOF,YACT,OAAOG;QACH,MAAMC,WAAgC;YAAE,GAAGpB,KAAK,QAAQ;QAAC;QACzD,MAAMqB,QAA6B;YAAE,GAAGD,SAAS,KAAK;QAAC;QAEvDC,MAAM,IAAI,GAAGF,KAAK,IAAI,IAAIL;QAC1BO,MAAM,UAAU,GAAGF,KAAK,OAAO,GAAG;YAAE,GAAGA,KAAK,OAAO,CAAC,CAAC;YAAE,GAAGA,KAAK,OAAO,CAAC,CAAC;QAAC,IAAIL;QAC7EO,MAAM,GAAG,GAAGF,KAAK,GAAG,IAAIL;QACxBO,MAAM,OAAO,GAAGF,KAAK,OAAO,IAAIL;QAEhCM,SAAS,KAAK,GAAGC;QAEjB,MAAMC,SAAS,MAAMhB,kBAAkB,OAAO,CAAC;YAAE,IAAIN,KAAK,EAAE;YAAE,MAAM;gBAAEoB;YAAS;QAAE;QAEjF,IAAIE,OAAO,OAAO,EAAE;YAChBpB,aAAa;YACbM,UAAUc,OAAO,IAAI;QACzB,OACIpB,aAAaoB,OAAO,KAAK,CAAC,OAAO;IAEzC,GACA;QAACtB,KAAK,EAAE;QAAEA,KAAK,QAAQ;QAAEM;QAAmBJ;QAAcM;KAAQ;IAGtE,OAAO;QAAEC;QAAMM;QAAYE;QAAaJ;QAAOK;IAAK;AACxD"}