sanity-plugin-media 4.0.0 → 4.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -1
- package/dist/index.d.mts +197 -1
- package/dist/index.d.ts +197 -1
- package/dist/index.js +194 -142
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +216 -163
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/AssetMetadata/index.tsx +1 -1
- package/src/components/DialogAssetEdit/Details.tsx +101 -0
- package/src/components/DialogAssetEdit/index.tsx +27 -69
- package/src/components/FormSubmitButton/index.tsx +1 -1
- package/src/components/Header/index.tsx +12 -8
- package/src/components/ReduxProvider/index.tsx +2 -1
- package/src/components/TableRowAsset/index.tsx +1 -1
- package/src/components/UploadDropzone/index.tsx +4 -2
- package/src/constants.ts +6 -0
- package/src/contexts/ToolOptionsContext.tsx +10 -2
- package/src/modules/assets/index.ts +3 -1
- package/src/types/index.ts +11 -0
- package/src/utils/isSupportedAssetType.ts +15 -0
package/dist/index.mjs
CHANGED
|
@@ -20,13 +20,12 @@ import { Virtuoso, VirtuosoGrid, GroupedVirtuoso } from "react-virtuoso";
|
|
|
20
20
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
21
21
|
import { Controller, useForm } from "react-hook-form";
|
|
22
22
|
import * as z from "zod";
|
|
23
|
-
import format from "date-fns
|
|
23
|
+
import { format, formatRelative } from "date-fns";
|
|
24
24
|
import filesize from "filesize";
|
|
25
25
|
import copy from "copy-to-clipboard";
|
|
26
26
|
import { useIntentLink } from "sanity/router";
|
|
27
27
|
import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
|
|
28
28
|
import CreatableSelect from "react-select/creatable";
|
|
29
|
-
import formatRelative from "date-fns/formatRelative";
|
|
30
29
|
import { useDropzone } from "react-dropzone";
|
|
31
30
|
function getDefaultExportFromCjs(x) {
|
|
32
31
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
|
|
@@ -475,7 +474,10 @@ const useKeyPress = (hotkey, onPress) => {
|
|
|
475
474
|
fn: (value, _field) => value ? `references('${value}')` : void 0,
|
|
476
475
|
label: "includes"
|
|
477
476
|
}
|
|
478
|
-
},
|
|
477
|
+
}, SUPPORTED_ASSET_TYPES = [
|
|
478
|
+
"file",
|
|
479
|
+
"image"
|
|
480
|
+
], ORDER_OPTIONS = [
|
|
479
481
|
{
|
|
480
482
|
direction: "desc",
|
|
481
483
|
field: "_createdAt"
|
|
@@ -1258,7 +1260,9 @@ const UPLOADS_ACTIONS = {
|
|
|
1258
1260
|
originalFilename,
|
|
1259
1261
|
size,
|
|
1260
1262
|
source {
|
|
1261
|
-
name
|
|
1263
|
+
name,
|
|
1264
|
+
id,
|
|
1265
|
+
url,
|
|
1262
1266
|
},
|
|
1263
1267
|
title,
|
|
1264
1268
|
url
|
|
@@ -2361,15 +2365,21 @@ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
|
|
|
2361
2365
|
let creditLineExcludeSources;
|
|
2362
2366
|
return options?.creditLine?.excludeSources && (creditLineExcludeSources = Array.isArray(options?.creditLine?.excludeSources) ? options.creditLine.excludeSources : [options?.creditLine?.excludeSources]), {
|
|
2363
2367
|
dropzone: { maxSize: options?.maximumUploadSize },
|
|
2368
|
+
components: {
|
|
2369
|
+
details: options?.components?.details
|
|
2370
|
+
},
|
|
2364
2371
|
creditLine: {
|
|
2365
2372
|
enabled: options?.creditLine?.enabled || !1,
|
|
2366
2373
|
excludeSources: creditLineExcludeSources
|
|
2367
|
-
}
|
|
2374
|
+
},
|
|
2375
|
+
directUploads: options?.directUploads ?? !0
|
|
2368
2376
|
};
|
|
2369
2377
|
}, [
|
|
2370
2378
|
options?.creditLine?.enabled,
|
|
2379
|
+
options?.components,
|
|
2371
2380
|
options?.creditLine?.excludeSources,
|
|
2372
|
-
options?.maximumUploadSize
|
|
2381
|
+
options?.maximumUploadSize,
|
|
2382
|
+
options?.directUploads
|
|
2373
2383
|
]);
|
|
2374
2384
|
return /* @__PURE__ */ jsx(ToolOptionsContext.Provider, { value, children });
|
|
2375
2385
|
}, useToolOptions = () => {
|
|
@@ -2828,7 +2838,51 @@ const imageDprUrl = (asset, options) => {
|
|
|
2828
2838
|
}
|
|
2829
2839
|
}
|
|
2830
2840
|
) : /* @__PURE__ */ jsx(FileIcon, { extension: asset.extension, width: "50%" });
|
|
2831
|
-
},
|
|
2841
|
+
}, FormSubmitButton = (props) => {
|
|
2842
|
+
const { disabled, isValid, lastUpdated, onClick } = props;
|
|
2843
|
+
let content;
|
|
2844
|
+
return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2845
|
+
"Last updated",
|
|
2846
|
+
/* @__PURE__ */ jsx("br", {}),
|
|
2847
|
+
" ",
|
|
2848
|
+
format(new Date(lastUpdated), "PPp")
|
|
2849
|
+
] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsx(
|
|
2850
|
+
Tooltip,
|
|
2851
|
+
{
|
|
2852
|
+
animate: !0,
|
|
2853
|
+
content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
|
|
2854
|
+
disabled: "ontouchstart" in window,
|
|
2855
|
+
placement: "top",
|
|
2856
|
+
portal: !0,
|
|
2857
|
+
children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
|
|
2858
|
+
Button,
|
|
2859
|
+
{
|
|
2860
|
+
disabled,
|
|
2861
|
+
fontSize: 1,
|
|
2862
|
+
onClick,
|
|
2863
|
+
text: "Save and close",
|
|
2864
|
+
tone: "primary"
|
|
2865
|
+
}
|
|
2866
|
+
) })
|
|
2867
|
+
}
|
|
2868
|
+
);
|
|
2869
|
+
}, Image$1 = styled.img`
|
|
2870
|
+
--checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
|
|
2871
|
+
|
|
2872
|
+
display: block;
|
|
2873
|
+
width: 100%;
|
|
2874
|
+
height: 100%;
|
|
2875
|
+
object-fit: contain;
|
|
2876
|
+
|
|
2877
|
+
${(props) => props.$showCheckerboard && css`
|
|
2878
|
+
background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
|
|
2879
|
+
linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
|
|
2880
|
+
linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
|
|
2881
|
+
linear-gradient(-45deg, transparent 75%, var(--checkerboard-color) 75%);
|
|
2882
|
+
background-size: 20px 20px;
|
|
2883
|
+
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
|
2884
|
+
`}
|
|
2885
|
+
`, { radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
|
|
2832
2886
|
control: (styles, { isFocused }) => {
|
|
2833
2887
|
let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
|
|
2834
2888
|
return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
|
|
@@ -3052,55 +3106,99 @@ const imageDprUrl = (asset, options) => {
|
|
|
3052
3106
|
}
|
|
3053
3107
|
)
|
|
3054
3108
|
] });
|
|
3055
|
-
})
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3109
|
+
});
|
|
3110
|
+
function Details({
|
|
3111
|
+
formUpdating,
|
|
3112
|
+
handleCreateTag,
|
|
3113
|
+
control,
|
|
3114
|
+
errors,
|
|
3115
|
+
register,
|
|
3116
|
+
allTagOptions,
|
|
3117
|
+
assetTagOptions,
|
|
3118
|
+
currentAsset,
|
|
3119
|
+
creditLine
|
|
3120
|
+
}) {
|
|
3121
|
+
return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
|
|
3122
|
+
/* @__PURE__ */ jsx(
|
|
3123
|
+
FormFieldInputTags,
|
|
3124
|
+
{
|
|
3125
|
+
control,
|
|
3126
|
+
disabled: formUpdating,
|
|
3127
|
+
error: errors?.opt?.media?.tags?.message,
|
|
3128
|
+
label: "Tags",
|
|
3129
|
+
name: "opt.media.tags",
|
|
3130
|
+
onCreateTag: handleCreateTag,
|
|
3131
|
+
options: allTagOptions,
|
|
3132
|
+
placeholder: "Select or create...",
|
|
3133
|
+
value: assetTagOptions
|
|
3134
|
+
}
|
|
3135
|
+
),
|
|
3136
|
+
/* @__PURE__ */ jsx(
|
|
3137
|
+
FormFieldInputText,
|
|
3138
|
+
{
|
|
3139
|
+
...register("originalFilename"),
|
|
3140
|
+
disabled: formUpdating,
|
|
3141
|
+
error: errors?.originalFilename?.message,
|
|
3142
|
+
label: "Filename",
|
|
3143
|
+
name: "originalFilename",
|
|
3144
|
+
value: currentAsset?.originalFilename
|
|
3145
|
+
}
|
|
3146
|
+
),
|
|
3147
|
+
/* @__PURE__ */ jsx(
|
|
3148
|
+
FormFieldInputText,
|
|
3149
|
+
{
|
|
3150
|
+
...register("title"),
|
|
3151
|
+
disabled: formUpdating,
|
|
3152
|
+
error: errors?.title?.message,
|
|
3153
|
+
label: "Title",
|
|
3154
|
+
name: "title",
|
|
3155
|
+
value: currentAsset?.title
|
|
3156
|
+
}
|
|
3157
|
+
),
|
|
3158
|
+
/* @__PURE__ */ jsx(
|
|
3159
|
+
FormFieldInputText,
|
|
3160
|
+
{
|
|
3161
|
+
...register("altText"),
|
|
3162
|
+
disabled: formUpdating,
|
|
3163
|
+
error: errors?.altText?.message,
|
|
3164
|
+
label: "Alt Text",
|
|
3165
|
+
name: "altText",
|
|
3166
|
+
value: currentAsset?.altText
|
|
3167
|
+
}
|
|
3168
|
+
),
|
|
3169
|
+
/* @__PURE__ */ jsx(
|
|
3170
|
+
FormFieldInputTextarea,
|
|
3171
|
+
{
|
|
3172
|
+
...register("description"),
|
|
3173
|
+
disabled: formUpdating,
|
|
3174
|
+
error: errors?.description?.message,
|
|
3175
|
+
label: "Description",
|
|
3176
|
+
name: "description",
|
|
3177
|
+
rows: 5,
|
|
3178
|
+
value: currentAsset?.description
|
|
3179
|
+
}
|
|
3180
|
+
),
|
|
3181
|
+
creditLine?.enabled && /* @__PURE__ */ jsx(
|
|
3182
|
+
FormFieldInputText,
|
|
3183
|
+
{
|
|
3184
|
+
...register("creditLine"),
|
|
3185
|
+
error: errors?.creditLine?.message,
|
|
3186
|
+
label: "Credit",
|
|
3187
|
+
name: "creditLine",
|
|
3188
|
+
value: currentAsset?.creditLine,
|
|
3189
|
+
disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
|
|
3190
|
+
}
|
|
3191
|
+
)
|
|
3192
|
+
] });
|
|
3193
|
+
}
|
|
3194
|
+
function renderDefaultDetails(props) {
|
|
3195
|
+
return /* @__PURE__ */ jsx(Details, { ...props });
|
|
3196
|
+
}
|
|
3197
|
+
const DialogAssetEdit = (props) => {
|
|
3100
3198
|
const {
|
|
3101
3199
|
children,
|
|
3102
3200
|
dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
|
|
3103
|
-
} = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = useCallback(
|
|
3201
|
+
} = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = useCallback(
|
|
3104
3202
|
(asset) => ({
|
|
3105
3203
|
altText: asset?.altText || "",
|
|
3106
3204
|
creditLine: asset?.creditLine || "",
|
|
@@ -3173,7 +3271,7 @@ const imageDprUrl = (asset, options) => {
|
|
|
3173
3271
|
},
|
|
3174
3272
|
[assetItem?.asset, dispatch]
|
|
3175
3273
|
);
|
|
3176
|
-
|
|
3274
|
+
useEffect(() => {
|
|
3177
3275
|
if (!assetItem?.asset)
|
|
3178
3276
|
return;
|
|
3179
3277
|
const subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
|
|
@@ -3192,32 +3290,48 @@ const imageDprUrl = (asset, options) => {
|
|
|
3192
3290
|
}
|
|
3193
3291
|
}, [getValues, lastRemovedTagIds, setValue]), useEffect(() => {
|
|
3194
3292
|
assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
|
|
3195
|
-
}, [assetItem?.asset, generateDefaultValues, reset])
|
|
3293
|
+
}, [assetItem?.asset, generateDefaultValues, reset]);
|
|
3294
|
+
const Footer = () => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
|
|
3295
|
+
/* @__PURE__ */ jsx(
|
|
3296
|
+
Button,
|
|
3297
|
+
{
|
|
3298
|
+
disabled: formUpdating,
|
|
3299
|
+
fontSize: 1,
|
|
3300
|
+
mode: "bleed",
|
|
3301
|
+
onClick: handleDelete,
|
|
3302
|
+
text: "Delete",
|
|
3303
|
+
tone: "critical"
|
|
3304
|
+
}
|
|
3305
|
+
),
|
|
3306
|
+
/* @__PURE__ */ jsx(
|
|
3307
|
+
FormSubmitButton,
|
|
3308
|
+
{
|
|
3309
|
+
disabled: formUpdating || !isDirty || !isValid,
|
|
3310
|
+
isValid,
|
|
3311
|
+
lastUpdated: currentAsset?._updatedAt,
|
|
3312
|
+
onClick: handleSubmit(onSubmit)
|
|
3313
|
+
}
|
|
3314
|
+
)
|
|
3315
|
+
] }) });
|
|
3316
|
+
if (!currentAsset)
|
|
3317
|
+
return null;
|
|
3318
|
+
const detailsProps = {
|
|
3319
|
+
control,
|
|
3320
|
+
errors,
|
|
3321
|
+
formUpdating,
|
|
3322
|
+
register,
|
|
3323
|
+
setValue,
|
|
3324
|
+
assetTagOptions,
|
|
3325
|
+
allTagOptions,
|
|
3326
|
+
handleCreateTag,
|
|
3327
|
+
currentAsset,
|
|
3328
|
+
creditLine
|
|
3329
|
+
};
|
|
3330
|
+
return /* @__PURE__ */ jsxs(
|
|
3196
3331
|
Dialog,
|
|
3197
3332
|
{
|
|
3198
3333
|
animate: !0,
|
|
3199
|
-
footer: /* @__PURE__ */ jsx(
|
|
3200
|
-
/* @__PURE__ */ jsx(
|
|
3201
|
-
Button,
|
|
3202
|
-
{
|
|
3203
|
-
disabled: formUpdating,
|
|
3204
|
-
fontSize: 1,
|
|
3205
|
-
mode: "bleed",
|
|
3206
|
-
onClick: handleDelete,
|
|
3207
|
-
text: "Delete",
|
|
3208
|
-
tone: "critical"
|
|
3209
|
-
}
|
|
3210
|
-
),
|
|
3211
|
-
/* @__PURE__ */ jsx(
|
|
3212
|
-
FormSubmitButton,
|
|
3213
|
-
{
|
|
3214
|
-
disabled: formUpdating || !isDirty || !isValid,
|
|
3215
|
-
isValid,
|
|
3216
|
-
lastUpdated: currentAsset?._updatedAt,
|
|
3217
|
-
onClick: handleSubmit(onSubmit)
|
|
3218
|
-
}
|
|
3219
|
-
)
|
|
3220
|
-
] }) }), {}),
|
|
3334
|
+
footer: /* @__PURE__ */ jsx(Footer, {}),
|
|
3221
3335
|
header: "Asset details",
|
|
3222
3336
|
id,
|
|
3223
3337
|
onClose: handleClose,
|
|
@@ -3262,78 +3376,13 @@ const imageDprUrl = (asset, options) => {
|
|
|
3262
3376
|
"aria-labelledby": "details",
|
|
3263
3377
|
hidden: tabSection !== "details",
|
|
3264
3378
|
id: "details-panel",
|
|
3265
|
-
children: /* @__PURE__ */
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
label: "Tags",
|
|
3273
|
-
name: "opt.media.tags",
|
|
3274
|
-
onCreateTag: handleCreateTag,
|
|
3275
|
-
options: allTagOptions,
|
|
3276
|
-
placeholder: "Select or create...",
|
|
3277
|
-
value: assetTagOptions
|
|
3278
|
-
}
|
|
3279
|
-
),
|
|
3280
|
-
/* @__PURE__ */ jsx(
|
|
3281
|
-
FormFieldInputText,
|
|
3282
|
-
{
|
|
3283
|
-
...register("originalFilename"),
|
|
3284
|
-
disabled: formUpdating,
|
|
3285
|
-
error: errors?.originalFilename?.message,
|
|
3286
|
-
label: "Filename",
|
|
3287
|
-
name: "originalFilename",
|
|
3288
|
-
value: currentAsset?.originalFilename
|
|
3289
|
-
}
|
|
3290
|
-
),
|
|
3291
|
-
/* @__PURE__ */ jsx(
|
|
3292
|
-
FormFieldInputText,
|
|
3293
|
-
{
|
|
3294
|
-
...register("title"),
|
|
3295
|
-
disabled: formUpdating,
|
|
3296
|
-
error: errors?.title?.message,
|
|
3297
|
-
label: "Title",
|
|
3298
|
-
name: "title",
|
|
3299
|
-
value: currentAsset?.title
|
|
3300
|
-
}
|
|
3301
|
-
),
|
|
3302
|
-
/* @__PURE__ */ jsx(
|
|
3303
|
-
FormFieldInputText,
|
|
3304
|
-
{
|
|
3305
|
-
...register("altText"),
|
|
3306
|
-
disabled: formUpdating,
|
|
3307
|
-
error: errors?.altText?.message,
|
|
3308
|
-
label: "Alt Text",
|
|
3309
|
-
name: "altText",
|
|
3310
|
-
value: currentAsset?.altText
|
|
3311
|
-
}
|
|
3312
|
-
),
|
|
3313
|
-
/* @__PURE__ */ jsx(
|
|
3314
|
-
FormFieldInputTextarea,
|
|
3315
|
-
{
|
|
3316
|
-
...register("description"),
|
|
3317
|
-
disabled: formUpdating,
|
|
3318
|
-
error: errors?.description?.message,
|
|
3319
|
-
label: "Description",
|
|
3320
|
-
name: "description",
|
|
3321
|
-
rows: 5,
|
|
3322
|
-
value: currentAsset?.description
|
|
3323
|
-
}
|
|
3324
|
-
),
|
|
3325
|
-
creditLine?.enabled && /* @__PURE__ */ jsx(
|
|
3326
|
-
FormFieldInputText,
|
|
3327
|
-
{
|
|
3328
|
-
...register("creditLine"),
|
|
3329
|
-
error: errors?.creditLine?.message,
|
|
3330
|
-
label: "Credit",
|
|
3331
|
-
name: "creditLine",
|
|
3332
|
-
value: currentAsset?.creditLine,
|
|
3333
|
-
disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
|
|
3334
|
-
}
|
|
3335
|
-
)
|
|
3336
|
-
] })
|
|
3379
|
+
children: CustomDetails ? /* @__PURE__ */ jsx(
|
|
3380
|
+
CustomDetails,
|
|
3381
|
+
{
|
|
3382
|
+
...detailsProps,
|
|
3383
|
+
renderDefaultDetails
|
|
3384
|
+
}
|
|
3385
|
+
) : /* @__PURE__ */ jsx(Details, { ...detailsProps })
|
|
3337
3386
|
}
|
|
3338
3387
|
),
|
|
3339
3388
|
/* @__PURE__ */ jsx(
|
|
@@ -3373,7 +3422,7 @@ const imageDprUrl = (asset, options) => {
|
|
|
3373
3422
|
children
|
|
3374
3423
|
]
|
|
3375
3424
|
}
|
|
3376
|
-
)
|
|
3425
|
+
);
|
|
3377
3426
|
}, DialogConfirm = (props) => {
|
|
3378
3427
|
const { children, dialog } = props, dispatch = useDispatch(), handleClose = () => {
|
|
3379
3428
|
dispatch(dialogActions.remove({ id: dialog?.id }));
|
|
@@ -3860,7 +3909,7 @@ const imageDprUrl = (asset, options) => {
|
|
|
3860
3909
|
throw new Error("useDropzoneActions must be used within an DropzoneDispatchProvider");
|
|
3861
3910
|
return context;
|
|
3862
3911
|
}, Header = (props) => {
|
|
3863
|
-
const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document);
|
|
3912
|
+
const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document), { directUploads } = useToolOptions();
|
|
3864
3913
|
return /* @__PURE__ */ jsx(Box, { paddingY: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
|
|
3865
3914
|
/* @__PURE__ */ jsx(Box, { flex: 1, marginX: 3, children: /* @__PURE__ */ jsxs(Inline, { style: { whiteSpace: "nowrap" }, children: [
|
|
3866
3915
|
/* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", weight: "semibold", children: /* @__PURE__ */ jsx("span", { children: onSelect ? `Insert ${assetTypes.join(" or ")}` : "Browse Assets" }) }),
|
|
@@ -3870,15 +3919,14 @@ const imageDprUrl = (asset, options) => {
|
|
|
3870
3919
|
] }) })
|
|
3871
3920
|
] }) }),
|
|
3872
3921
|
/* @__PURE__ */ jsxs(Flex, { marginX: 2, children: [
|
|
3873
|
-
/* @__PURE__ */ jsx(
|
|
3922
|
+
directUploads && /* @__PURE__ */ jsx(
|
|
3874
3923
|
Button,
|
|
3875
3924
|
{
|
|
3876
3925
|
fontSize: 1,
|
|
3877
3926
|
icon: UploadIcon,
|
|
3878
3927
|
mode: "bleed",
|
|
3879
3928
|
onClick: open,
|
|
3880
|
-
text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}
|
|
3881
|
-
tone: "primary"
|
|
3929
|
+
text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}`
|
|
3882
3930
|
}
|
|
3883
3931
|
),
|
|
3884
3932
|
onClose && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
|
|
@@ -3969,7 +4017,7 @@ const imageDprUrl = (asset, options) => {
|
|
|
3969
4017
|
`
|
|
3970
4018
|
), StyledWarningOutlineIcon = styled(WarningFilledIcon)(({ theme }) => ({
|
|
3971
4019
|
color: theme.sanity.color.spot.red
|
|
3972
|
-
})), CardAsset = (props) => {
|
|
4020
|
+
})), CardAsset$1 = (props) => {
|
|
3973
4021
|
const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
|
|
3974
4022
|
if (!asset)
|
|
3975
4023
|
return null;
|
|
@@ -4099,7 +4147,7 @@ const imageDprUrl = (asset, options) => {
|
|
|
4099
4147
|
)
|
|
4100
4148
|
] }) });
|
|
4101
4149
|
};
|
|
4102
|
-
var CardAsset
|
|
4150
|
+
var CardAsset = memo(CardAsset$1);
|
|
4103
4151
|
const PREVIEW_WIDTH = 180, createBlob = (img) => new Promise((resolve) => {
|
|
4104
4152
|
const imageAspect = img.width / img.height, canvas = document.createElement("canvas");
|
|
4105
4153
|
canvas.width = PREVIEW_WIDTH, canvas.height = Math.max(PREVIEW_WIDTH / imageAspect, 1);
|
|
@@ -4456,7 +4504,7 @@ const CardWrapper = styled(Flex)`
|
|
|
4456
4504
|
}
|
|
4457
4505
|
) });
|
|
4458
4506
|
}, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = memo(
|
|
4459
|
-
({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset
|
|
4507
|
+
({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsx(CardUpload, { id: item.id }) : null
|
|
4460
4508
|
), StyledItemContainer = styled.div`
|
|
4461
4509
|
height: ${CARD_HEIGHT}px;
|
|
4462
4510
|
width: ${CARD_WIDTH}px;
|
|
@@ -4621,7 +4669,7 @@ const CardWrapper = styled(Flex)`
|
|
|
4621
4669
|
`
|
|
4622
4670
|
), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
|
|
4623
4671
|
color: theme.sanity.color.spot.red
|
|
4624
|
-
})), TableRowAsset = (props) => {
|
|
4672
|
+
})), TableRowAsset$1 = (props) => {
|
|
4625
4673
|
const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = useCallback(
|
|
4626
4674
|
(e) => {
|
|
4627
4675
|
e.stopPropagation(), asset && (onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked })));
|
|
@@ -4847,7 +4895,7 @@ const CardWrapper = styled(Flex)`
|
|
|
4847
4895
|
}
|
|
4848
4896
|
) : null;
|
|
4849
4897
|
};
|
|
4850
|
-
var TableRowAsset
|
|
4898
|
+
var TableRowAsset = memo(TableRowAsset$1);
|
|
4851
4899
|
const TableRowUpload = (props) => {
|
|
4852
4900
|
const { id } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = useMediaIndex();
|
|
4853
4901
|
if (!item)
|
|
@@ -4961,7 +5009,7 @@ const TableRowUpload = (props) => {
|
|
|
4961
5009
|
}
|
|
4962
5010
|
);
|
|
4963
5011
|
}, VirtualRow = memo(
|
|
4964
|
-
({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowAsset
|
|
5012
|
+
({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowAsset, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowUpload, { id: item.id }) }) : null
|
|
4965
5013
|
), AssetTableVirtualized = (props) => {
|
|
4966
5014
|
const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
|
|
4967
5015
|
return totalCount === 0 ? null : /* @__PURE__ */ jsx(
|
|
@@ -5224,6 +5272,9 @@ const rootEpic = combineEpics(
|
|
|
5224
5272
|
const assetIds = getAssetIds(document2);
|
|
5225
5273
|
return [...new Set(assetIds.sort())];
|
|
5226
5274
|
};
|
|
5275
|
+
function isSupportedAssetType(assetType) {
|
|
5276
|
+
return assetType ? SUPPORTED_ASSET_TYPES.includes(assetType) : !1;
|
|
5277
|
+
}
|
|
5227
5278
|
class ReduxProvider extends Component {
|
|
5228
5279
|
store;
|
|
5229
5280
|
constructor(props) {
|
|
@@ -5254,7 +5305,7 @@ class ReduxProvider extends Component {
|
|
|
5254
5305
|
preloadedState: {
|
|
5255
5306
|
assets: {
|
|
5256
5307
|
...initialState$5,
|
|
5257
|
-
assetTypes: props?.assetType ? [props.assetType] : ["file", "image"]
|
|
5308
|
+
assetTypes: isSupportedAssetType(props?.assetType) ? [props.assetType] : ["file", "image"]
|
|
5258
5309
|
},
|
|
5259
5310
|
debug: {
|
|
5260
5311
|
badConnection: !1,
|
|
@@ -5346,7 +5397,8 @@ async function filterFiles(fileList) {
|
|
|
5346
5397
|
}
|
|
5347
5398
|
const UploadDropzone = (props) => {
|
|
5348
5399
|
const { children } = props, {
|
|
5349
|
-
dropzone: { maxSize }
|
|
5400
|
+
dropzone: { maxSize },
|
|
5401
|
+
directUploads
|
|
5350
5402
|
} = useToolOptions(), { onSelect } = useAssetSourceActions(), dispatch = useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), isImageAssetType = assetTypes.length === 1 && assetTypes[0] === "image", handleDrop = async (acceptedFiles) => {
|
|
5351
5403
|
acceptedFiles.forEach(
|
|
5352
5404
|
(file) => dispatch(
|
|
@@ -5387,7 +5439,8 @@ const UploadDropzone = (props) => {
|
|
|
5387
5439
|
noDrag: !!onSelect,
|
|
5388
5440
|
onDrop: handleDrop,
|
|
5389
5441
|
maxSize,
|
|
5390
|
-
onDropRejected: handleDropRejected
|
|
5442
|
+
onDropRejected: handleDropRejected,
|
|
5443
|
+
disabled: !directUploads
|
|
5391
5444
|
});
|
|
5392
5445
|
return /* @__PURE__ */ jsx(DropzoneDispatchProvider, { open, children: /* @__PURE__ */ jsxs(UploadContainer, { ...getRootProps(), children: [
|
|
5393
5446
|
/* @__PURE__ */ jsx("input", { ...getInputProps() }),
|