sanity-plugin-cloudinary 1.4.1 → 2.0.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/lib/index.js DELETED
@@ -1,791 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', {
4
- value: true
5
- });
6
- var jsxRuntime = require('react/jsx-runtime');
7
- var React = require('react');
8
- var sanity = require('sanity');
9
- var ui = require('@sanity/ui');
10
- var icons = require('@sanity/icons');
11
- var styledComponents = require('styled-components');
12
- var nanoid = require('nanoid');
13
- var studioSecrets = require('@sanity/studio-secrets');
14
- function _interopDefaultCompat(e) {
15
- return e && typeof e === 'object' && 'default' in e ? e : {
16
- default: e
17
- };
18
- }
19
- var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
- function VideoPlayer(props) {
21
- const {
22
- src
23
- } = props;
24
- const style = {
25
- width: "100%",
26
- height: "auto"
27
- };
28
- return /* @__PURE__ */jsxRuntime.jsx("video", {
29
- controls: true,
30
- style,
31
- children: /* @__PURE__ */jsxRuntime.jsx("source", {
32
- src,
33
- type: "video/mp4"
34
- })
35
- });
36
- }
37
- const widgetSrc = "https://media-library.cloudinary.com/global/all.js";
38
- function assetUrl(asset) {
39
- if (asset.derived && asset.derived.length > 0) {
40
- const [derived] = asset.derived;
41
- if (derived.secure_url) {
42
- return derived.secure_url;
43
- }
44
- return derived.url;
45
- }
46
- if (asset.secure_url) {
47
- return asset.secure_url;
48
- }
49
- return asset.url;
50
- }
51
- const openMediaSelector = (cloudName, apiKey, multiple, insertHandler, selectedAsset) => {
52
- loadJS(widgetSrc, () => {
53
- const options = {
54
- cloud_name: cloudName,
55
- api_key: apiKey,
56
- insert_caption: "Select",
57
- multiple
58
- };
59
- if (selectedAsset) {
60
- options.asset = {
61
- public_id: selectedAsset.public_id,
62
- type: selectedAsset.type,
63
- resource_type: selectedAsset.resource_type
64
- };
65
- }
66
- window.cloudinary.openMediaLibrary(options, {
67
- insertHandler
68
- });
69
- });
70
- };
71
- const createMediaLibrary = _ref => {
72
- let {
73
- cloudName,
74
- apiKey,
75
- inlineContainer,
76
- libraryCreated,
77
- insertHandler
78
- } = _ref;
79
- loadJS(widgetSrc, () => {
80
- const options = {
81
- cloud_name: cloudName,
82
- api_key: apiKey,
83
- insert_caption: "Select",
84
- inline_container: inlineContainer,
85
- remove_header: true
86
- };
87
- libraryCreated(window.cloudinary.createMediaLibrary(options, {
88
- insertHandler
89
- }));
90
- });
91
- };
92
- function loadJS(url, callback) {
93
- const existingScript = document.getElementById("damWidget");
94
- if (!existingScript) {
95
- const script = document.createElement("script");
96
- script.src = url;
97
- script.id = "damWidget";
98
- document.body.appendChild(script);
99
- script.onload = () => {
100
- if (callback) {
101
- return callback();
102
- }
103
- return true;
104
- };
105
- }
106
- if (existingScript && callback) {
107
- return callback();
108
- }
109
- return true;
110
- }
111
- function encodeSourceId(asset) {
112
- const {
113
- resource_type,
114
- public_id,
115
- type
116
- } = asset;
117
- return btoa(JSON.stringify({
118
- public_id,
119
- resource_type,
120
- type
121
- }));
122
- }
123
- function encodeFilename(asset) {
124
- return `${asset.public_id.split("/").slice(-1)[0]}.${asset.format}`;
125
- }
126
- function decodeSourceId(sourceId) {
127
- let sourceIdDecoded;
128
- try {
129
- sourceIdDecoded = JSON.parse(atob(sourceId));
130
- } catch (err) {}
131
- return sourceIdDecoded;
132
- }
133
- const AssetPreview = _ref2 => {
134
- let {
135
- value,
136
- layout
137
- } = _ref2;
138
- const url = value && assetUrl(value);
139
- if (!value || !url) {
140
- return null;
141
- }
142
- switch (value.resource_type) {
143
- case "video":
144
- return /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
145
- align: "center",
146
- style: {
147
- maxWidth: layout === "default" ? "80px" : "100%"
148
- },
149
- children: /* @__PURE__ */jsxRuntime.jsx(VideoPlayer, {
150
- src: url,
151
- kind: "player"
152
- })
153
- });
154
- case "raw":
155
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
156
- align: "center",
157
- children: [/* @__PURE__ */jsxRuntime.jsx(icons.DocumentIcon, {}), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
158
- size: 1,
159
- style: {
160
- marginLeft: "0.5em"
161
- },
162
- children: value.display_name ?? "Raw file"
163
- })]
164
- });
165
- default:
166
- return /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
167
- align: "center",
168
- children: /* @__PURE__ */jsxRuntime.jsx("img", {
169
- alt: "preview",
170
- src:
171
- // Cloudinary returns resource_type as "image" even for PDFs,
172
- // so we check the format to handle PDFs specifically.
173
- // If it's a PDF, convert the first page to JPG and overlay a "PDF" label for thumbnail clarity.
174
- value.format === "pdf" ? url?.replace("image/upload", "image/upload/f_jpg,pg_1,l_text:Verdana_75_letter_spacing_14:PDF") : url,
175
- style: {
176
- maxWidth: layout === "default" ? "80px" : "100%",
177
- height: "auto"
178
- }
179
- })
180
- });
181
- }
182
- };
183
- const SetupButtonContainer = styledComponents.styled.div`
184
- position: relative;
185
- display: block;
186
- font-size: 0.8em;
187
- transform: translate(0%, -10%);
188
- `;
189
- const WidgetInput = props => {
190
- const {
191
- onChange,
192
- readOnly,
193
- value,
194
- openMediaSelector
195
- } = props;
196
- const removeValue = React.useCallback(() => {
197
- onChange(sanity.PatchEvent.from([sanity.unset()]));
198
- }, [onChange]);
199
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
200
- children: [/* @__PURE__ */jsxRuntime.jsx(SetupButtonContainer, {
201
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
202
- flex: 1,
203
- justify: "flex-end",
204
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
205
- color: "primary",
206
- icon: icons.PlugIcon,
207
- mode: "bleed",
208
- title: "Configure",
209
- onClick: props.onSetup,
210
- tabIndex: 1
211
- })
212
- })
213
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
214
- style: {
215
- textAlign: "center",
216
- width: "100%"
217
- },
218
- marginBottom: 2,
219
- children: /* @__PURE__ */jsxRuntime.jsx(AssetPreview, {
220
- value
221
- })
222
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
223
- gap: 1,
224
- style: {
225
- gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))"
226
- },
227
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
228
- disabled: readOnly,
229
- mode: "ghost",
230
- title: "Select an asset",
231
- tone: "default",
232
- onClick: openMediaSelector,
233
- text: "Select\u2026"
234
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
235
- disabled: readOnly || !value,
236
- tone: "critical",
237
- mode: "ghost",
238
- title: "Remove asset",
239
- text: "Remove",
240
- onClick: removeValue
241
- })]
242
- })]
243
- });
244
- };
245
- const pluginConfigKeys = [{
246
- key: "cloudName",
247
- title: "Cloud name",
248
- description: ""
249
- }, {
250
- key: "apiKey",
251
- title: "API key",
252
- description: ""
253
- }];
254
- const namespace = "cloudinary";
255
- const SecretsConfigView = props => {
256
- return /* @__PURE__ */jsxRuntime.jsx(studioSecrets.SettingsView, {
257
- title: "Cloudinary config",
258
- namespace,
259
- keys: pluginConfigKeys,
260
- onClose: props.onClose
261
- });
262
- };
263
- const CloudinaryInput = props => {
264
- const [showSettings, setShowSettings] = React.useState(false);
265
- const {
266
- secrets
267
- } = studioSecrets.useSecrets(namespace);
268
- const {
269
- onChange,
270
- schemaType: type
271
- } = props;
272
- const value = props.value || void 0;
273
- const handleSelect = React.useCallback(payload => {
274
- const [asset] = payload.assets;
275
- if (!asset) {
276
- return;
277
- }
278
- let updatedAsset = asset;
279
- const assetWithoutNulls = Object.fromEntries(Object.entries(asset).filter(_ref3 => {
280
- let [_, assetValue] = _ref3;
281
- return assetValue !== null;
282
- }));
283
- const requiredFields = {
284
- public_id: asset.public_id,
285
- resource_type: asset.resource_type,
286
- type: asset.type,
287
- url: asset.url,
288
- secure_url: asset.secure_url,
289
- format: asset.format,
290
- width: asset.width,
291
- height: asset.height,
292
- bytes: asset.bytes,
293
- tags: asset.tags
294
- };
295
- updatedAsset = {
296
- ...assetWithoutNulls,
297
- ...requiredFields
298
- };
299
- if (asset.context) {
300
- const objectWithRenamedKeys = Object.fromEntries(Object.entries(asset.context.custom).map(_ref4 => {
301
- let [contextKey, contextValue] = _ref4;
302
- return [contextKey.replace(/[^a-zA-Z0-9_]|-/g, "_"), contextValue];
303
- }));
304
- updatedAsset = {
305
- ...updatedAsset,
306
- context: {
307
- ...asset.context,
308
- custom: objectWithRenamedKeys
309
- }
310
- };
311
- }
312
- if (asset.derived) {
313
- const derivedWithType = asset.derived.map(derivedItem => ({
314
- ...derivedItem,
315
- _type: "derived"
316
- }));
317
- updatedAsset = {
318
- ...updatedAsset,
319
- derived: derivedWithType
320
- };
321
- }
322
- onChange(sanity.PatchEvent.from([sanity.set(Object.assign({
323
- _type: type.name,
324
- _version: 1,
325
- ...(value?._key ? {
326
- _key: value._key
327
- } : {
328
- _key: nanoid.nanoid()
329
- })
330
- }, updatedAsset))]));
331
- }, [onChange, type, value?._key]);
332
- const action = secrets ? () => openMediaSelector(secrets.cloudName, secrets.apiKey, false,
333
- // single selection
334
- handleSelect, value) : () => setShowSettings(true);
335
- return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
336
- children: [showSettings && /* @__PURE__ */jsxRuntime.jsx(SecretsConfigView, {
337
- onClose: () => setShowSettings(false)
338
- }), /* @__PURE__ */jsxRuntime.jsx(WidgetInput, {
339
- onSetup: () => setShowSettings(true),
340
- openMediaSelector: action,
341
- ...props
342
- })]
343
- });
344
- };
345
- const CloudinaryDiffPreview = _ref5 => {
346
- let {
347
- value
348
- } = _ref5;
349
- if (!value) {
350
- return null;
351
- }
352
- const url = assetUrl(value);
353
- if (value.resource_type === "video" && url) {
354
- return /* @__PURE__ */jsxRuntime.jsx("section", {
355
- style: {
356
- display: "flex",
357
- flexWrap: "wrap",
358
- justifyContent: "space-between"
359
- },
360
- children: /* @__PURE__ */jsxRuntime.jsx(VideoPlayer, {
361
- src: url,
362
- kind: "diff"
363
- })
364
- });
365
- }
366
- return /* @__PURE__ */jsxRuntime.jsx("img", {
367
- alt: "preview",
368
- src: url,
369
- style: {
370
- maxWidth: "100%",
371
- height: "auto"
372
- }
373
- });
374
- };
375
- const AssetDiff = _ref6 => {
376
- let {
377
- diff,
378
- schemaType
379
- } = _ref6;
380
- return /* @__PURE__ */jsxRuntime.jsx(sanity.DiffFromTo, {
381
- diff,
382
- schemaType,
383
- previewComponent: CloudinaryDiffPreview
384
- });
385
- };
386
- const cloudinaryAssetSchema = sanity.defineType({
387
- type: "object",
388
- name: "cloudinary.asset",
389
- fields: [{
390
- type: "string",
391
- name: "public_id"
392
- }, {
393
- type: "string",
394
- name: "resource_type"
395
- // "image", "?"
396
- }, {
397
- type: "string",
398
- name: "type"
399
- // "upload", "?"
400
- }, {
401
- type: "string",
402
- name: "format"
403
- // "jpg"
404
- }, {
405
- type: "number",
406
- name: "version"
407
- }, {
408
- type: "url",
409
- name: "url"
410
- }, {
411
- type: "url",
412
- name: "secure_url"
413
- }, {
414
- type: "number",
415
- name: "width"
416
- }, {
417
- type: "number",
418
- name: "height"
419
- }, {
420
- type: "number",
421
- name: "bytes"
422
- }, {
423
- type: "number",
424
- name: "duration"
425
- // can be null
426
- }, {
427
- type: "array",
428
- name: "tags",
429
- of: [{
430
- type: "string"
431
- }]
432
- }, {
433
- type: "datetime",
434
- name: "created_at"
435
- }, {
436
- type: "array",
437
- name: "derived",
438
- of: [{
439
- type: "cloudinary.assetDerived",
440
- name: "derived"
441
- }]
442
- }, {
443
- type: "string",
444
- name: "access_mode"
445
- }, {
446
- type: "cloudinary.assetContext",
447
- name: "context"
448
- }
449
- // metadata array of unknown content
450
- ],
451
- ...{
452
- components: {
453
- input: CloudinaryInput,
454
- diff: AssetDiff,
455
- preview: AssetPreview
456
- }
457
- },
458
- //TODO revert this change when rc.1 is released
459
- preview: {
460
- select: {
461
- url: "url",
462
- resource_type: "resource_type",
463
- derived: "derived.0.url"
464
- },
465
- prepare(_ref7) {
466
- let {
467
- url,
468
- derived,
469
- resource_type
470
- } = _ref7;
471
- return {
472
- title: url,
473
- value: {
474
- title: url,
475
- resource_type,
476
- url: derived || url
477
- }
478
- };
479
- }
480
- }
481
- });
482
- const cloudinaryAssetDerivedSchema = sanity.defineType({
483
- type: "object",
484
- name: "cloudinary.assetDerived",
485
- fields: [{
486
- type: "string",
487
- name: "raw_transformation"
488
- }, {
489
- type: "url",
490
- name: "url"
491
- }, {
492
- type: "url",
493
- name: "secure_url"
494
- }]
495
- });
496
- function CloudinaryIcon() {
497
- return /* @__PURE__ */jsxRuntime.jsx("svg", {
498
- version: "1.1",
499
- id: "Layer_1",
500
- x: "0px",
501
- y: "0px",
502
- width: "1em",
503
- height: "1em",
504
- viewBox: "0 0 141.732 141.747",
505
- enableBackground: "new 0 0 141.732 141.747",
506
- children: /* @__PURE__ */jsxRuntime.jsxs("g", {
507
- children: [/* @__PURE__ */jsxRuntime.jsx("path", {
508
- fill: "#0071CE",
509
- d: "M115.585,109.242c-1.609,0-3.107-1.024-3.635-2.637c-0.657-2.008,0.438-4.169,2.447-4.826\n c7.278-2.382,11.98-8.761,11.98-16.252c0-9.487-7.718-17.206-17.205-17.206c-0.659,0-1.368,0.052-2.231,0.164l-3.741,0.485\n l-0.537-3.735c-2.299-16.016-16.251-28.094-32.454-28.094c-13.395,0-25.32,8.019-30.377,20.43l-0.952,2.335l-2.52,0.046\n c-11.581,0.213-21.003,9.804-21.003,21.379c0,8.45,4.906,16.156,12.498,19.631c1.921,0.88,2.766,3.15,1.886,5.071\n c-0.88,1.921-3.149,2.764-5.07,1.887C14.363,103.202,7.703,92.766,7.703,81.331c0-14.88,11.465-27.345,26.028-28.876\n c6.71-14.03,20.773-22.965,36.477-22.965c18.796,0,35.135,13.178,39.372,31.184c13.519,0.219,24.45,11.284,24.45,24.854\n c0,10.693-6.934,20.146-17.253,23.523C116.382,109.18,115.98,109.242,115.585,109.242z"
510
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
511
- fill: "#DC8327",
512
- d: "M57.12,111.02c-0.001-0.001-0.001-0.001-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001\n c0,0-0.001-0.001-0.001-0.001l-0.001-0.001c0,0-0.001,0-0.001-0.001h-0.001l-0.001-0.001c0.001-0.001-0.001-0.001-0.001-0.001\n l-0.001-0.001c0,0-0.001,0-0.001,0l-0.001-0.001c0.001,0.001-0.001-0.001-0.001-0.001s-0.002-0.001-0.003-0.001l-0.001-0.001H57.1\n c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.003-0.001-0.002-0.001-0.003-0.001c-0.001,0.001-0.001-0.001-0.002-0.001\n l-0.001-0.001c0,0-0.001-0.001-0.002-0.001l-0.001-0.001c-0.001-0.001-0.003-0.001-0.004-0.001s-0.003-0.001-0.004-0.001\n c-0.001-0.001-0.001-0.001-0.002-0.001h-0.001c-0.001-0.001-0.002-0.001-0.003-0.001c-0.001-0.001-0.003-0.001-0.003-0.001\n c-0.001,0-0.001,0-0.001,0l-0.002-0.001c-0.001,0-0.001-0.001-0.001-0.001h-0.001c-0.059-0.021-0.122-0.034-0.188-0.037h-0.002\n h-0.002c-0.001,0-0.001,0-0.002,0c0,0,0,0-0.001,0c0,0-0.001,0-0.001,0h-0.001c-0.001-0.001-0.001-0.001-0.001-0.001\n c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.002,0h-0.001h-0.001h-0.001c-0.001,0-0.002,0-0.002,0h-0.001H56.86h-0.001h-0.001\n c-0.001,0-0.001,0-0.001,0h-0.001h-0.001h-0.001h-0.001c-0.001,0-0.001,0-0.001,0c-1.656,0-3.011-1.348-3.021-3V74.29h2.567\n c0.004,0,0.009,0,0.013,0c0.393,0.017,0.661-0.285,0.661-0.648c0-0.271-0.166-0.503-0.402-0.6l-12.379-8.544\n c-0.222-0.153-0.515-0.153-0.737,0l-12.476,8.611c-0.234,0.161-0.335,0.456-0.251,0.727c0.085,0.271,0.335,0.455,0.619,0.455h2.58\n l0.002,33.674c0.013,2.328,1.883,4.228,4.262,4.288c0.027,0.003,0.053,0.005,0.08,0.005h18.481c0.004,0,0.007,0,0.011,0\n c0.17-0.003,0.324-0.071,0.438-0.18c0,0,0,0,0.001-0.001c0.002-0.002,0.004-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003\n c0,0,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001l0.001-0.001l0.001-0.001c0.001-0.001,0.001-0.001,0.001-0.001\n c0.002-0.001,0.001-0.001,0.002-0.002c0,0,0,0,0.001-0.001l0.001-0.001c0,0,0,0,0.001-0.001c0.112-0.116,0.182-0.273,0.183-0.447\n v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002C57.498,111.345,57.343,111.121,57.12,111.02z"
513
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
514
- fill: "#F4B21B",
515
- d: "M83.889,111.02c0,0-0.001-0.001-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001\n c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001c0,0-0.001-0.001-0.001-0.001\n c0.001-0.001-0.001-0.001-0.002-0.001l-0.001-0.001h-0.001c-0.001,0-0.001-0.001-0.001-0.001c-0.002,0.001-0.002-0.001-0.002-0.001\n l-0.002-0.001l-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001l-0.001-0.001c-0.001-0.001-0.002-0.001-0.002-0.001\n c-0.001,0.001-0.001-0.001-0.003-0.001l-0.001-0.001l-0.001-0.001c0,0-0.001,0-0.002-0.001c-0.001-0.001-0.003-0.001-0.004-0.001\n s-0.003-0.001-0.004-0.001c-0.001-0.001-0.001-0.001-0.002-0.001c-0.001,0-0.001,0-0.002-0.001c0,0-0.001,0-0.002-0.001\n c-0.003-0.001-0.001-0.001-0.002-0.001c-0.003,0-0.001,0-0.002-0.001c0,0-0.001-0.001-0.002-0.001l-0.001-0.001h-0.001\n c-0.059-0.021-0.122-0.034-0.188-0.037h-0.002c-0.001,0-0.001,0-0.001,0c-0.001,0-0.002,0-0.002,0s-0.001,0-0.001,0h-0.001h-0.001\n l-0.001-0.001c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.002,0h-0.001c-0.001,0-0.001,0-0.001,0h-0.001\n c-0.001,0-0.002,0-0.002,0s-0.001,0-0.002,0h-0.001c0,0-0.001,0-0.001,0h-0.001c-0.001,0-0.001,0-0.001,0h-0.001h-0.001h-0.001\n h-0.001c-0.001,0-0.001,0-0.001,0c-1.655,0-3.01-1.348-3.02-3V81.829h2.579c0.009-0.001,0.016-0.001,0.026,0\n c0.358,0,0.648-0.29,0.648-0.648c0-0.271-0.166-0.503-0.402-0.6l-12.38-8.544c-0.222-0.153-0.515-0.153-0.737,0L57.86,80.647\n c-0.234,0.161-0.335,0.456-0.251,0.727c0.085,0.271,0.335,0.455,0.619,0.455h2.568l0.002,26.135\n c0.011,2.329,1.884,4.23,4.264,4.289c0.026,0.003,0.052,0.004,0.078,0.004h18.481c0.004,0,0.007,0,0.011,0\n c0.17-0.003,0.324-0.071,0.438-0.18c0,0,0,0,0.001-0.001c0.002-0.002,0.006-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003\n c0.001-0.001,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001c0,0,0.001,0,0.001-0.001l0.001-0.001\n c0.001,0,0.001-0.001,0.001-0.001c0.003-0.001,0.002-0.001,0.002-0.002c0,0,0,0,0.001-0.001c0,0,0,0,0.001-0.001\n c0,0,0,0,0.001-0.001c0.112-0.116,0.182-0.273,0.183-0.447v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002\n C84.267,111.345,84.112,111.121,83.889,111.02z"
516
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
517
- fill: "#F2D864",
518
- d: "M110.667,111.02l-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001\n c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.001,0-0.001,0-0.001-0.001h-0.001l-0.001-0.001\n c-0.001-0.001-0.001-0.001-0.001-0.001s-0.001,0-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001\n c-0.001,0.001-0.001-0.001-0.002-0.001c0.001-0.001-0.001-0.001-0.002-0.001l-0.001-0.001c-0.001,0-0.001,0-0.001,0\n c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.003-0.001-0.002-0.001-0.002-0.001c-0.001,0.001-0.001-0.001-0.003-0.001\n l-0.001-0.001c0.001-0.001-0.001-0.001-0.002-0.001c0,0-0.001,0-0.001-0.001c-0.001-0.001-0.003-0.001-0.004-0.001\n s-0.003-0.001-0.004-0.001l-0.002-0.001c0,0-0.001,0-0.002-0.001l-0.002-0.001c-0.003-0.001-0.003-0.001-0.002-0.001\n c-0.003,0-0.003,0-0.002-0.001c-0.001,0-0.001-0.001-0.001-0.001c-0.001,0-0.002-0.001-0.002-0.001h-0.001\n c-0.059-0.021-0.122-0.034-0.188-0.037h-0.001c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.003,0h-0.001h-0.001h-0.001\n c-0.001-0.001-0.001-0.001-0.002-0.001c0,0-0.001,0-0.002,0c0,0-0.001,0-0.002,0h-0.001c0,0-0.001,0-0.001,0h-0.001\n c-0.001,0-0.002,0-0.002,0h-0.002c0,0,0,0-0.001,0c0,0-0.001,0-0.001,0h-0.001c0,0-0.001,0-0.001,0h-0.001h-0.001h-0.001H110.4\n c0,0-0.001,0-0.001,0c-1.655,0-3.01-1.348-3.02-3V89.365h2.573c0.004,0,0.009,0,0.013,0c0.365-0.009,0.661-0.285,0.661-0.648\n c0-0.271-0.166-0.503-0.402-0.6l-12.38-8.544c-0.221-0.153-0.515-0.153-0.737,0l-12.476,8.61c-0.234,0.161-0.335,0.456-0.251,0.727\n c0.085,0.271,0.335,0.455,0.619,0.455h2.573l0.002,18.599c0.013,2.329,1.885,4.231,4.264,4.289\n c0.026,0.003,0.052,0.004,0.078,0.004h18.481c0.004,0,0.007,0,0.011,0c0.17-0.003,0.324-0.071,0.438-0.18l0.001-0.001\n c0.002-0.002,0.005-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003c0,0,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001\n l0.001-0.001l0.001-0.001l0.001-0.001c0.003-0.001,0.001-0.001,0.002-0.002c0,0,0,0,0.001-0.001l0.001-0.001c0,0,0,0,0.001-0.001\n c0.112-0.116,0.182-0.273,0.183-0.447v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002\n C111.045,111.345,110.889,111.121,110.667,111.02z"
519
- })]
520
- })
521
- });
522
- }
523
- const Widget = styledComponents.styled.div`
524
- height: 70vh;
525
- `;
526
- function CloudinaryAssetSource(props) {
527
- const {
528
- onClose,
529
- dialogHeaderTitle
530
- } = props;
531
- const [loadingMessage, setLoadingMessage] = React.useState("Loading Cloudinary Media Libary");
532
- const library = React.useRef(void 0);
533
- const contentRef = React.useRef(null);
534
- const {
535
- secrets
536
- } = studioSecrets.useSecrets(namespace);
537
- const cloudName = secrets?.cloudName;
538
- const apiKey = secrets?.apiKey;
539
- const [widgetId] = React.useState(() => `cloundinaryWidget-${Date.now()}`);
540
- const [showSettings, setShowSettings] = React.useState(false);
541
- const propsRef = React.useRef(props);
542
- React.useEffect(() => {
543
- propsRef.current = props;
544
- }, [props]);
545
- const handleClose = React.useCallback(() => {
546
- if (library.current) {
547
- library.current.hide();
548
- }
549
- onClose();
550
- }, [onClose, library]);
551
- React.useEffect(() => {
552
- if (!cloudName || !apiKey) {
553
- return;
554
- }
555
- createMediaLibrary({
556
- cloudName,
557
- apiKey,
558
- inlineContainer: `#${widgetId}`,
559
- libraryCreated: lib => {
560
- library.current = lib;
561
- const selectedAssets = propsRef.current.selectedAssets;
562
- const firstSelectedAsset = selectedAssets ? selectedAssets[0] : null;
563
- const iframe = contentRef.current && contentRef.current.firstChild;
564
- if (iframe && iframe instanceof HTMLIFrameElement) {
565
- setLoadingMessage(void 0);
566
- let asset;
567
- if (propsRef.current.selectionType === "single" && firstSelectedAsset && firstSelectedAsset.source && firstSelectedAsset.source.id) {
568
- asset = decodeSourceId(firstSelectedAsset.source.id);
569
- }
570
- const folder = asset ? {
571
- path: asset.public_id.split("/").slice(0, -1).join("/"),
572
- resource_type: "image"
573
- } : {
574
- path: "",
575
- resource_type: "image"
576
- };
577
- if (lib && contentRef.current) {
578
- lib.show({
579
- folder,
580
- asset
581
- });
582
- contentRef.current.style.visibility = "visible";
583
- }
584
- }
585
- },
586
- insertHandler: _ref8 => {
587
- let {
588
- assets
589
- } = _ref8;
590
- if (!library.current) {
591
- return;
592
- }
593
- const imageAssets = assets.filter(asset => asset.resource_type === "image");
594
- if (imageAssets.length === 0) {
595
- throw new Error("The selection did not contain any images.");
596
- }
597
- library.current.hide();
598
- propsRef.current.onSelect(imageAssets.map(asset => {
599
- const url = asset.derived && asset.derived[0] ? asset.derived[0].secure_url : asset.secure_url;
600
- return {
601
- kind: "url",
602
- value: url,
603
- assetDocumentProps: {
604
- _type: "sanity.imageAsset",
605
- originalFilename: encodeFilename(asset),
606
- source: {
607
- id: encodeSourceId(asset),
608
- name: `cloudinary:${cloudName}`
609
- }
610
- }
611
- };
612
- }));
613
- }
614
- });
615
- }, [cloudName, apiKey, widgetId]);
616
- const hasConfig = apiKey && cloudName;
617
- return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
618
- id: "cloudinary-asset-source",
619
- header: dialogHeaderTitle ?? "Select image from Cloudinary",
620
- onClose: handleClose,
621
- open: true,
622
- width: 4,
623
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
624
- padding: 4,
625
- children: [showSettings && /* @__PURE__ */jsxRuntime.jsx(SecretsConfigView, {
626
- onClose: () => setShowSettings(false)
627
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
628
- flex: 1,
629
- justify: "flex-end",
630
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
631
- color: "primary",
632
- icon: icons.PlugIcon,
633
- mode: "bleed",
634
- title: "Configure",
635
- onClick: () => setShowSettings(true),
636
- tabIndex: 1,
637
- text: hasConfig ? void 0 : "Configure Cloudinary plugin"
638
- })
639
- }), hasConfig && loadingMessage && /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
640
- space: 3,
641
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
642
- align: "center",
643
- justify: "center",
644
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
645
- muted: true
646
- })
647
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
648
- size: 1,
649
- muted: true,
650
- align: "center",
651
- children: loadingMessage
652
- })]
653
- }), /* @__PURE__ */jsxRuntime.jsx(Widget, {
654
- style: {
655
- visibility: "hidden"
656
- },
657
- ref: contentRef,
658
- id: widgetId
659
- })]
660
- })
661
- });
662
- }
663
- const cloudinaryAssetContext = sanity.defineType({
664
- type: "object",
665
- name: "cloudinary.assetContext",
666
- fields: [{
667
- type: "cloudinary.assetContextCustom",
668
- name: "custom"
669
- }]
670
- });
671
- const cloudinaryAssetContextCustom = sanity.defineType({
672
- type: "object",
673
- name: "cloudinary.assetContextCustom",
674
- fields: [{
675
- type: "string",
676
- name: "alt"
677
- }, {
678
- type: "string",
679
- name: "caption"
680
- }]
681
- });
682
- const AssetListFunctions = props => {
683
- const {
684
- onValueCreate,
685
- onChange
686
- } = props;
687
- const {
688
- secrets,
689
- loading
690
- } = studioSecrets.useSecrets(namespace);
691
- const [showSettings, setShowSettings] = React__default.default.useState(false);
692
- const show = React.useCallback(() => setShowSettings(true), [setShowSettings]);
693
- const hide = React.useCallback(() => setShowSettings(false), [setShowSettings]);
694
- const cloudinaryType = props.schemaType.of.find(t => t.name === cloudinaryAssetSchema.name);
695
- if (!cloudinaryType) {
696
- throw new Error(`AssetListFunctions can only be used in array.of ${cloudinaryAssetSchema.name}, but it was array.of
697
- ${props.schemaType.of.map(t => t.name)}`);
698
- }
699
- const handleSelect = React.useCallback(selected => {
700
- const items = selected.assets.map(asset => Object.assign({}, asset, {
701
- // Schema version. In case we ever change our schema.
702
- _version: 1
703
- }, onValueCreate(cloudinaryType)
704
- // onValueCreate is mistyped
705
- ));
706
- onChange(sanity.PatchEvent.from([sanity.setIfMissing([]), sanity.insert(items, "after", [-1])]));
707
- }, [onValueCreate, onChange, cloudinaryType]);
708
- const handleOpenSelector = React.useCallback(() => secrets && openMediaSelector(secrets.cloudName, secrets.apiKey, true,
709
- // multi-selection
710
- handleSelect), [secrets, handleSelect]);
711
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
712
- gap: 2,
713
- flex: 1,
714
- children: [showSettings && /* @__PURE__ */jsxRuntime.jsx(SecretsConfigView, {
715
- onClose: hide
716
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
717
- flex: 1,
718
- children: /* @__PURE__ */jsxRuntime.jsx(sanity.ArrayOfObjectsFunctions, {
719
- ...props
720
- })
721
- }), cloudinaryType && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
722
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
723
- flex: 1,
724
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
725
- style: {
726
- width: "100%"
727
- },
728
- disabled: props.readOnly || loading,
729
- mode: "bleed",
730
- text: "Add multiple",
731
- onClick: handleOpenSelector
732
- })
733
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
734
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
735
- onClick: show,
736
- icon: icons.PlugIcon,
737
- mode: "bleed",
738
- title: "Configure"
739
- })
740
- })]
741
- })]
742
- });
743
- };
744
- const cloudinarySchemaPlugin = sanity.definePlugin({
745
- name: "cloudinary-schema",
746
- form: {
747
- components: {
748
- input: props => {
749
- const {
750
- schemaType
751
- } = props;
752
- if (sanity.isArrayOfObjectsSchemaType(schemaType)) {
753
- const arrayProps = props;
754
- const cloudinaryType = arrayProps.schemaType.of.find(t => t.name === cloudinaryAssetSchema.name);
755
- if (cloudinaryType) {
756
- return arrayProps.renderDefault({
757
- ...arrayProps,
758
- arrayFunctions: AssetListFunctions
759
- });
760
- }
761
- }
762
- return props.renderDefault(props);
763
- }
764
- }
765
- },
766
- schema: {
767
- types: [cloudinaryAssetSchema, cloudinaryAssetDerivedSchema, cloudinaryAssetContext, cloudinaryAssetContextCustom]
768
- }
769
- });
770
- const cloudinaryImageSource = {
771
- name: "cloudinary-image",
772
- title: "Cloudinary",
773
- icon: CloudinaryIcon,
774
- component: CloudinaryAssetSource
775
- };
776
- const cloudinaryAssetSourcePlugin = sanity.definePlugin({
777
- name: "cloudinart-asset-source",
778
- form: {
779
- image: {
780
- assetSources: [cloudinaryImageSource]
781
- }
782
- }
783
- });
784
- exports.cloudinaryAssetContext = cloudinaryAssetContext;
785
- exports.cloudinaryAssetContextCustom = cloudinaryAssetContextCustom;
786
- exports.cloudinaryAssetDerivedSchema = cloudinaryAssetDerivedSchema;
787
- exports.cloudinaryAssetSchema = cloudinaryAssetSchema;
788
- exports.cloudinaryAssetSourcePlugin = cloudinaryAssetSourcePlugin;
789
- exports.cloudinaryImageSource = cloudinaryImageSource;
790
- exports.cloudinarySchemaPlugin = cloudinarySchemaPlugin;
791
- //# sourceMappingURL=index.js.map