sanity-plugin-cloudinary 1.0.1 → 1.0.2

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/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2022 Sanity.io
3
+ Copyright (c) 2023 Sanity.io
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
File without changes
package/lib/index.esm.js CHANGED
@@ -1,2 +1,606 @@
1
- var e,n;function t(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);n&&(c=c.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,c)}return t}function c(e){for(var n=1;n<arguments.length;n++){var c=null!=arguments[n]?arguments[n]:{};n%2?t(Object(c),!0).forEach((function(n){r(e,n,c[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(c)):t(Object(c)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(c,n))}))}return e}function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}import{jsxs as l,jsx as o,Fragment as s}from"react/jsx-runtime";import a,{useCallback as d,useState as u,useRef as p,useEffect as y}from"react";import{PatchEvent as h,unset as m,set as f,DiffFromTo as v,defineType as g,definePlugin as b}from"sanity";import{Box as _,Stack as C,Flex as j,Button as w,Grid as O,Dialog as k,Spinner as x,Text as S}from"@sanity/ui";import{PlugIcon as P}from"@sanity/icons";import D from"styled-components";import M from"video.js";import{nanoid as N}from"nanoid";import{SettingsView as z,useSecrets as H}from"@sanity/studio-secrets";class E extends a.Component{componentDidMount(){const{src:e}=this.props;this.player=M(this.videoNode,{sources:[{src:e}],controls:!0})}componentWillUnmount(){this.player&&this.player.dispose()}render(){const{kind:e}=this.props;return l("div",{children:[o("link",{href:"https://vjs.zencdn.net/7.8.4/video-js.css",rel:"stylesheet"}),o("div",{"data-vjs-player":!0,children:o("video",{onClick:e=>e.stopPropagation(),style:"diff"===e?{position:"relative"}:{},className:{player:"video-js vjs-16-9 vjs-big-play-centered",diff:"video-js vjs-layout-tiny vjs-fluid"}[e],ref:e=>{e&&(this.videoNode=e)}})})]})}}const L="https://media-library.cloudinary.com/global/all.js";function T(e){if(e.derived&&e.derived.length>0){const[n]=e.derived;return n.secure_url?n.secure_url:n.url}return e.secure_url?e.secure_url:e.url}function W(e,n){const t=document.getElementById("damWidget");if(!t){const t=document.createElement("script");t.src=e,t.id="damWidget",document.body.appendChild(t),t.onload=()=>!n||n()}return!t||!n||n()}function B(e){const{resource_type:n,public_id:t,type:c}=e;return btoa(JSON.stringify({public_id:t,resource_type:n,type:c}))}function I(e){return"".concat(e.public_id.split("/").slice(-1)[0],".").concat(e.format)}const K=e=>{let{value:n,layout:t}=e;const c=n&&T(n);return n&&c?"video"===n.resource_type?o(_,{children:o(E,{src:c,kind:"player"})}):o(_,{children:o("img",{alt:"preview",src:c,style:{maxWidth:"default"===t?"80px":"100%",height:"auto"}})}):null},A=D.div(e||(e=i(["\n position: relative;\n display: block;\n font-size: 0.8em;\n transform: translate(0%, -10%);\n"]))),F=e=>{const{onChange:n,readOnly:t,value:c,openMediaSelector:r}=e,i=d((()=>{n(h.from([m()]))}),[n]);return l(C,{children:[o(A,{children:o(j,{flex:1,justify:"flex-end",children:o(w,{color:"primary",icon:P,mode:"bleed",title:"Configure",onClick:e.onSetup,tabIndex:1})})}),o(j,{style:{textAlign:"center"},marginBottom:2,children:o(K,{value:c})}),l(O,{gap:1,style:{gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))"},children:[o(w,{disabled:t,mode:"ghost",title:"Select an asset",tone:"default",onClick:r,text:"Select…"}),o(w,{disabled:t||!c,tone:"critical",mode:"ghost",title:"Remove asset",text:"Remove",onClick:i})]})]})},V=[{key:"cloudName",title:"Cloud name",description:""},{key:"apiKey",title:"API key",description:""}],J=e=>o(z,{title:"Cloudinary config",namespace:"cloudinary",keys:V,onClose:e.onClose}),R=e=>{let{value:n}=e;if(!n)return null;const t=T(n);return"video"===n.resource_type?o("section",{style:{display:"flex",flexWrap:"wrap",justifyContent:"space-between"},children:o(E,{src:t,kind:"diff"})}):o("img",{alt:"preview",src:t,style:{maxWidth:"100%",height:"auto"}})},U=g(c(c({type:"object",name:"cloudinary.asset",fields:[{type:"string",name:"public_id"},{type:"string",name:"resource_type"},{type:"string",name:"type"},{type:"string",name:"format"},{type:"number",name:"version"},{type:"url",name:"url"},{type:"url",name:"secure_url"},{type:"number",name:"width"},{type:"number",name:"height"},{type:"number",name:"bytes"},{type:"number",name:"duration"},{type:"array",name:"tags",of:[{type:"string"}]},{type:"datetime",name:"created_at"},{type:"array",name:"derived",of:[{type:"cloudinary.assetDerived"}]},{type:"string",name:"access_mode"}]},{components:{input:e=>{const[n,t]=u(!1),{secrets:r}=H("cloudinary"),{onChange:i,schemaType:a}=e,p=e.value||void 0,y=d((e=>{const[n]=e.assets;n&&i(h.from([f(Object.assign(c({_type:a.name,_version:1},(null==p?void 0:p._key)?{_key:p._key}:{_key:N()}),n))]))}),[i,a,null==p?void 0:p._key]),m=r?()=>{return e=r.cloudName,n=r.apiKey,t=!1,c=y,i=p,void W(L,(()=>{const r={cloud_name:e,api_key:n,insert_caption:"Select",multiple:t};i&&(r.asset={public_id:i.public_id,type:i.type,resource_type:i.resource_type}),window.cloudinary.openMediaLibrary(r,{insertHandler:c})}));var e,n,t,c,i}:()=>t(!0);return l(s,{children:[n&&o(J,{onClose:()=>t(!1)}),o(F,c({onSetup:()=>t(!0),openMediaSelector:m},e))]})},diff:e=>{let{diff:n,schemaType:t}=e;return o(v,{diff:n,schemaType:t,previewComponent:R})},preview:K}}),{},{preview:{select:{url:"url",resource_type:"resource_type",derived:"derived.0.url"},prepare(e){let{url:n,derived:t,resource_type:c}=e;return{title:n,resource_type:c,url:t||n}}}})),q=g({type:"object",name:"cloudinary.assetDerived",fields:[{type:"string",name:"raw_transformation"},{type:"url",name:"url"},{type:"url",name:"secure_url"}]});const G=D.div(n||(n=i(["\n height: 70vh;\n"])));const Q=b({name:"cloudinary-schema",schema:{types:[U,q]}}),X={name:"cloudinary-image",title:"Cloudinary",icon:function(){return o("svg",{version:"1.1",id:"Layer_1",x:"0px",y:"0px",width:"1em",height:"1em",viewBox:"0 0 141.732 141.747",enableBackground:"new 0 0 141.732 141.747",children:l("g",{children:[o("path",{fill:"#0071CE",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"}),o("path",{fill:"#DC8327",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"}),o("path",{fill:"#F4B21B",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"}),o("path",{fill:"#F2D864",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"})]})})},component:function(e){const{onClose:n}=e,[t,c]=u("Loading Cloudinary Media Libary"),r=p(),i=p(null),{secrets:s}=H("cloudinary"),a=null==s?void 0:s.cloudName,h=null==s?void 0:s.apiKey,[m]=u((()=>"cloundinaryWidget-".concat(Date.now()))),[f,v]=u(!1),g=p(e);y((()=>{g.current=e}),[e]);const b=d((()=>{r.current&&r.current.hide(),n()}),[n,r]);y((()=>{a&&h&&(e=>{let{cloudName:n,apiKey:t,inlineContainer:c,libraryCreated:r,insertHandler:i}=e;W(L,(()=>{const e={cloud_name:n,api_key:t,insert_caption:"Select",inline_container:c,remove_header:!0};r(window.cloudinary.createMediaLibrary(e,{insertHandler:i}))}))})({cloudName:a,apiKey:h,inlineContainer:"#".concat(m),libraryCreated:e=>{r.current=e;const n=g.current.selectedAssets,t=n?n[0]:null,l=i.current&&i.current.firstChild;if(l&&l instanceof HTMLIFrameElement){let n;c(void 0),"single"===g.current.selectionType&&t&&t.source&&t.source.id&&(n=function(e){let n;try{n=JSON.parse(atob(e))}catch(e){}return n}(t.source.id));const r=n?{path:n.public_id.split("/").slice(0,-1).join("/"),resource_type:"image"}:{path:"",resource_type:"image"};e&&i.current&&(e.show({folder:r,asset:n}),i.current.style.visibility="visible")}},insertHandler:e=>{let{assets:n}=e;if(!r.current)return;const t=n.filter((e=>"image"===e.resource_type));if(0===t.length)throw new Error("The selection did not contain any images.");r.current.hide(),g.current.onSelect(t.map((e=>({kind:"url",value:e.derived&&e.derived[0]?e.derived[0].secure_url:e.secure_url,assetDocumentProps:{_type:"sanity.imageAsset",originalFilename:I(e),source:{id:B(e),name:"cloudinary:".concat(a)}}}))))}})}),[a,h,m]);const O=h&&a;return o(k,{id:"cloudinary-asset-source",header:"Select image from Cloudinary",onClose:b,open:!0,width:4,children:l(_,{padding:4,children:[f&&o(J,{onClose:()=>v(!1)}),o(j,{flex:1,justify:"flex-end",children:o(w,{color:"primary",icon:P,mode:"bleed",title:"Configure",onClick:()=>v(!0),tabIndex:1,text:O?void 0:"Configure Cloudinary plugin"})}),O&&t&&l(C,{space:3,children:[o(j,{align:"center",justify:"center",children:o(x,{muted:!0})}),o(S,{size:1,muted:!0,align:"center",children:t})]}),o(G,{style:{visibility:"hidden"},ref:i,id:m})]})})}},Y=b({name:"cloudinart-asset-source",form:{image:{assetSources:[X]}}});export{q as cloudinaryAssetDerivedSchema,U as cloudinaryAssetSchema,Y as cloudinaryAssetSourcePlugin,X as cloudinaryImageSource,Q as cloudinarySchemaPlugin};
1
+ var _templateObject, _templateObject2;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+ import { useCallback, useState, useRef, useEffect } from 'react';
5
+ import { PatchEvent, unset, set, DiffFromTo, defineType, definePlugin } from 'sanity';
6
+ import { Flex, Stack, Button, Grid, Dialog, Box, Spinner, Text } from '@sanity/ui';
7
+ import { PlugIcon } from '@sanity/icons';
8
+ import styled from 'styled-components';
9
+ import { nanoid } from 'nanoid';
10
+ import { SettingsView, useSecrets } from '@sanity/studio-secrets';
11
+ function VideoPlayer(props) {
12
+ const {
13
+ src
14
+ } = props;
15
+ const style = {
16
+ width: "100%",
17
+ height: "auto"
18
+ };
19
+ return /* @__PURE__ */jsx("video", {
20
+ controls: true,
21
+ style,
22
+ children: /* @__PURE__ */jsx("source", {
23
+ src,
24
+ type: "video/mp4"
25
+ })
26
+ });
27
+ }
28
+ const widgetSrc = "https://media-library.cloudinary.com/global/all.js";
29
+ function assetUrl(asset) {
30
+ if (asset.derived && asset.derived.length > 0) {
31
+ const [derived] = asset.derived;
32
+ if (derived.secure_url) {
33
+ return derived.secure_url;
34
+ }
35
+ return derived.url;
36
+ }
37
+ if (asset.secure_url) {
38
+ return asset.secure_url;
39
+ }
40
+ return asset.url;
41
+ }
42
+ const openMediaSelector = (cloudName, apiKey, multiple, insertHandler, selectedAsset) => {
43
+ loadJS(widgetSrc, () => {
44
+ const options = {
45
+ cloud_name: cloudName,
46
+ api_key: apiKey,
47
+ insert_caption: "Select",
48
+ multiple
49
+ };
50
+ if (selectedAsset) {
51
+ options.asset = {
52
+ public_id: selectedAsset.public_id,
53
+ type: selectedAsset.type,
54
+ resource_type: selectedAsset.resource_type
55
+ };
56
+ }
57
+ window.cloudinary.openMediaLibrary(options, {
58
+ insertHandler
59
+ });
60
+ });
61
+ };
62
+ const createMediaLibrary = _ref => {
63
+ let {
64
+ cloudName,
65
+ apiKey,
66
+ inlineContainer,
67
+ libraryCreated,
68
+ insertHandler
69
+ } = _ref;
70
+ loadJS(widgetSrc, () => {
71
+ const options = {
72
+ cloud_name: cloudName,
73
+ api_key: apiKey,
74
+ insert_caption: "Select",
75
+ inline_container: inlineContainer,
76
+ remove_header: true
77
+ };
78
+ libraryCreated(window.cloudinary.createMediaLibrary(options, {
79
+ insertHandler
80
+ }));
81
+ });
82
+ };
83
+ function loadJS(url, callback) {
84
+ const existingScript = document.getElementById("damWidget");
85
+ if (!existingScript) {
86
+ const script = document.createElement("script");
87
+ script.src = url;
88
+ script.id = "damWidget";
89
+ document.body.appendChild(script);
90
+ script.onload = () => {
91
+ if (callback) {
92
+ return callback();
93
+ }
94
+ return true;
95
+ };
96
+ }
97
+ if (existingScript && callback) {
98
+ return callback();
99
+ }
100
+ return true;
101
+ }
102
+ function encodeSourceId(asset) {
103
+ const {
104
+ resource_type,
105
+ public_id,
106
+ type
107
+ } = asset;
108
+ return btoa(JSON.stringify({
109
+ public_id,
110
+ resource_type,
111
+ type
112
+ }));
113
+ }
114
+ function encodeFilename(asset) {
115
+ return "".concat(asset.public_id.split("/").slice(-1)[0], ".").concat(asset.format);
116
+ }
117
+ function decodeSourceId(sourceId) {
118
+ let sourceIdDecoded;
119
+ try {
120
+ sourceIdDecoded = JSON.parse(atob(sourceId));
121
+ } catch (err) {}
122
+ return sourceIdDecoded;
123
+ }
124
+ const AssetPreview = _ref2 => {
125
+ let {
126
+ value,
127
+ layout
128
+ } = _ref2;
129
+ const url = value && assetUrl(value);
130
+ if (!value || !url) {
131
+ return null;
132
+ }
133
+ switch (value.resource_type) {
134
+ case "video":
135
+ return /* @__PURE__ */jsx(Flex, {
136
+ align: "center",
137
+ style: {
138
+ maxWidth: layout === "default" ? "80px" : "100%"
139
+ },
140
+ children: /* @__PURE__ */jsx(VideoPlayer, {
141
+ src: url,
142
+ kind: "player"
143
+ })
144
+ });
145
+ default:
146
+ return /* @__PURE__ */jsx(Flex, {
147
+ align: "center",
148
+ children: /* @__PURE__ */jsx("img", {
149
+ alt: "preview",
150
+ src: url,
151
+ style: {
152
+ maxWidth: layout === "default" ? "80px" : "100%",
153
+ height: "auto"
154
+ }
155
+ })
156
+ });
157
+ }
158
+ };
159
+ const SetupButtonContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: block;\n font-size: 0.8em;\n transform: translate(0%, -10%);\n"])));
160
+ const WidgetInput = props => {
161
+ const {
162
+ onChange,
163
+ readOnly,
164
+ value,
165
+ openMediaSelector
166
+ } = props;
167
+ const removeValue = useCallback(() => {
168
+ onChange(PatchEvent.from([unset()]));
169
+ }, [onChange]);
170
+ return /* @__PURE__ */jsxs(Stack, {
171
+ children: [/* @__PURE__ */jsx(SetupButtonContainer, {
172
+ children: /* @__PURE__ */jsx(Flex, {
173
+ flex: 1,
174
+ justify: "flex-end",
175
+ children: /* @__PURE__ */jsx(Button, {
176
+ color: "primary",
177
+ icon: PlugIcon,
178
+ mode: "bleed",
179
+ title: "Configure",
180
+ onClick: props.onSetup,
181
+ tabIndex: 1
182
+ })
183
+ })
184
+ }), /* @__PURE__ */jsx(Flex, {
185
+ style: {
186
+ textAlign: "center",
187
+ width: "100%"
188
+ },
189
+ marginBottom: 2,
190
+ children: /* @__PURE__ */jsx(AssetPreview, {
191
+ value
192
+ })
193
+ }), /* @__PURE__ */jsxs(Grid, {
194
+ gap: 1,
195
+ style: {
196
+ gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))"
197
+ },
198
+ children: [/* @__PURE__ */jsx(Button, {
199
+ disabled: readOnly,
200
+ mode: "ghost",
201
+ title: "Select an asset",
202
+ tone: "default",
203
+ onClick: openMediaSelector,
204
+ text: "Select\u2026"
205
+ }), /* @__PURE__ */jsx(Button, {
206
+ disabled: readOnly || !value,
207
+ tone: "critical",
208
+ mode: "ghost",
209
+ title: "Remove asset",
210
+ text: "Remove",
211
+ onClick: removeValue
212
+ })]
213
+ })]
214
+ });
215
+ };
216
+ const pluginConfigKeys = [{
217
+ key: "cloudName",
218
+ title: "Cloud name",
219
+ description: ""
220
+ }, {
221
+ key: "apiKey",
222
+ title: "API key",
223
+ description: ""
224
+ }];
225
+ const namespace = "cloudinary";
226
+ const SecretsConfigView = props => {
227
+ return /* @__PURE__ */jsx(SettingsView, {
228
+ title: "Cloudinary config",
229
+ namespace,
230
+ keys: pluginConfigKeys,
231
+ onClose: props.onClose
232
+ });
233
+ };
234
+ const CloudinaryInput = props => {
235
+ const [showSettings, setShowSettings] = useState(false);
236
+ const {
237
+ secrets
238
+ } = useSecrets(namespace);
239
+ const {
240
+ onChange,
241
+ schemaType: type
242
+ } = props;
243
+ const value = props.value || void 0;
244
+ const handleSelect = useCallback(payload => {
245
+ const [asset] = payload.assets;
246
+ if (!asset) {
247
+ return;
248
+ }
249
+ onChange(PatchEvent.from([set(Object.assign({
250
+ _type: type.name,
251
+ _version: 1,
252
+ ...((value == null ? void 0 : value._key) ? {
253
+ _key: value._key
254
+ } : {
255
+ _key: nanoid()
256
+ })
257
+ }, asset))]));
258
+ }, [onChange, type, value == null ? void 0 : value._key]);
259
+ const action = secrets ? () => openMediaSelector(secrets.cloudName, secrets.apiKey, false,
260
+ // single selection
261
+ handleSelect, value) : () => setShowSettings(true);
262
+ return /* @__PURE__ */jsxs(Fragment, {
263
+ children: [showSettings && /* @__PURE__ */jsx(SecretsConfigView, {
264
+ onClose: () => setShowSettings(false)
265
+ }), /* @__PURE__ */jsx(WidgetInput, {
266
+ onSetup: () => setShowSettings(true),
267
+ openMediaSelector: action,
268
+ ...props
269
+ })]
270
+ });
271
+ };
272
+ const CloudinaryDiffPreview = _ref3 => {
273
+ let {
274
+ value
275
+ } = _ref3;
276
+ if (!value) {
277
+ return null;
278
+ }
279
+ const url = assetUrl(value);
280
+ if (value.resource_type === "video" && url) {
281
+ return /* @__PURE__ */jsx("section", {
282
+ style: {
283
+ display: "flex",
284
+ flexWrap: "wrap",
285
+ justifyContent: "space-between"
286
+ },
287
+ children: /* @__PURE__ */jsx(VideoPlayer, {
288
+ src: url,
289
+ kind: "diff"
290
+ })
291
+ });
292
+ }
293
+ return /* @__PURE__ */jsx("img", {
294
+ alt: "preview",
295
+ src: url,
296
+ style: {
297
+ maxWidth: "100%",
298
+ height: "auto"
299
+ }
300
+ });
301
+ };
302
+ const AssetDiff = _ref4 => {
303
+ let {
304
+ diff,
305
+ schemaType
306
+ } = _ref4;
307
+ return /* @__PURE__ */jsx(DiffFromTo, {
308
+ diff,
309
+ schemaType,
310
+ previewComponent: CloudinaryDiffPreview
311
+ });
312
+ };
313
+ const cloudinaryAssetSchema = defineType({
314
+ type: "object",
315
+ name: "cloudinary.asset",
316
+ fields: [{
317
+ type: "string",
318
+ name: "public_id"
319
+ }, {
320
+ type: "string",
321
+ name: "resource_type"
322
+ // "image", "?"
323
+ }, {
324
+ type: "string",
325
+ name: "type"
326
+ // "upload", "?"
327
+ }, {
328
+ type: "string",
329
+ name: "format"
330
+ // "jpg"
331
+ }, {
332
+ type: "number",
333
+ name: "version"
334
+ }, {
335
+ type: "url",
336
+ name: "url"
337
+ }, {
338
+ type: "url",
339
+ name: "secure_url"
340
+ }, {
341
+ type: "number",
342
+ name: "width"
343
+ }, {
344
+ type: "number",
345
+ name: "height"
346
+ }, {
347
+ type: "number",
348
+ name: "bytes"
349
+ }, {
350
+ type: "number",
351
+ name: "duration"
352
+ // can be null
353
+ }, {
354
+ type: "array",
355
+ name: "tags",
356
+ of: [{
357
+ type: "string"
358
+ }]
359
+ }, {
360
+ type: "datetime",
361
+ name: "created_at"
362
+ }, {
363
+ type: "array",
364
+ name: "derived",
365
+ of: [{
366
+ type: "cloudinary.assetDerived"
367
+ }]
368
+ }, {
369
+ type: "string",
370
+ name: "access_mode"
371
+ }
372
+ // context array of unknown content
373
+ // metadata array of unknown content
374
+ ],
375
+
376
+ ...{
377
+ components: {
378
+ input: CloudinaryInput,
379
+ diff: AssetDiff,
380
+ preview: AssetPreview
381
+ }
382
+ },
383
+ //TODO revert this change when rc.1 is released
384
+ preview: {
385
+ select: {
386
+ url: "url",
387
+ resource_type: "resource_type",
388
+ derived: "derived.0.url"
389
+ },
390
+ prepare(_ref5) {
391
+ let {
392
+ url,
393
+ derived,
394
+ resource_type
395
+ } = _ref5;
396
+ return {
397
+ title: url,
398
+ value: {
399
+ title: url,
400
+ resource_type,
401
+ url: derived || url
402
+ }
403
+ };
404
+ }
405
+ }
406
+ });
407
+ const cloudinaryAssetDerivedSchema = defineType({
408
+ type: "object",
409
+ name: "cloudinary.assetDerived",
410
+ fields: [{
411
+ type: "string",
412
+ name: "raw_transformation"
413
+ }, {
414
+ type: "url",
415
+ name: "url"
416
+ }, {
417
+ type: "url",
418
+ name: "secure_url"
419
+ }]
420
+ });
421
+ function CloudinaryIcon() {
422
+ return /* @__PURE__ */jsx("svg", {
423
+ version: "1.1",
424
+ id: "Layer_1",
425
+ x: "0px",
426
+ y: "0px",
427
+ width: "1em",
428
+ height: "1em",
429
+ viewBox: "0 0 141.732 141.747",
430
+ enableBackground: "new 0 0 141.732 141.747",
431
+ children: /* @__PURE__ */jsxs("g", {
432
+ children: [/* @__PURE__ */jsx("path", {
433
+ fill: "#0071CE",
434
+ 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"
435
+ }), /* @__PURE__ */jsx("path", {
436
+ fill: "#DC8327",
437
+ 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"
438
+ }), /* @__PURE__ */jsx("path", {
439
+ fill: "#F4B21B",
440
+ 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"
441
+ }), /* @__PURE__ */jsx("path", {
442
+ fill: "#F2D864",
443
+ 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"
444
+ })]
445
+ })
446
+ });
447
+ }
448
+ const Widget = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 70vh;\n"])));
449
+ function CloudinaryAssetSource(props) {
450
+ const {
451
+ onClose
452
+ } = props;
453
+ const [loadingMessage, setLoadingMessage] = useState("Loading Cloudinary Media Libary");
454
+ const library = useRef();
455
+ const contentRef = useRef(null);
456
+ const {
457
+ secrets
458
+ } = useSecrets(namespace);
459
+ const cloudName = secrets == null ? void 0 : secrets.cloudName;
460
+ const apiKey = secrets == null ? void 0 : secrets.apiKey;
461
+ const [widgetId] = useState(() => "cloundinaryWidget-".concat(Date.now()));
462
+ const [showSettings, setShowSettings] = useState(false);
463
+ const propsRef = useRef(props);
464
+ useEffect(() => {
465
+ propsRef.current = props;
466
+ }, [props]);
467
+ const handleClose = useCallback(() => {
468
+ if (library.current) {
469
+ library.current.hide();
470
+ }
471
+ onClose();
472
+ }, [onClose, library]);
473
+ useEffect(() => {
474
+ if (!cloudName || !apiKey) {
475
+ return;
476
+ }
477
+ createMediaLibrary({
478
+ cloudName,
479
+ apiKey,
480
+ inlineContainer: "#".concat(widgetId),
481
+ libraryCreated: lib => {
482
+ library.current = lib;
483
+ const selectedAssets = propsRef.current.selectedAssets;
484
+ const firstSelectedAsset = selectedAssets ? selectedAssets[0] : null;
485
+ const iframe = contentRef.current && contentRef.current.firstChild;
486
+ if (iframe && iframe instanceof HTMLIFrameElement) {
487
+ setLoadingMessage(void 0);
488
+ let asset;
489
+ if (propsRef.current.selectionType === "single" && firstSelectedAsset && firstSelectedAsset.source && firstSelectedAsset.source.id) {
490
+ asset = decodeSourceId(firstSelectedAsset.source.id);
491
+ }
492
+ const folder = asset ? {
493
+ path: asset.public_id.split("/").slice(0, -1).join("/"),
494
+ resource_type: "image"
495
+ } : {
496
+ path: "",
497
+ resource_type: "image"
498
+ };
499
+ if (lib && contentRef.current) {
500
+ lib.show({
501
+ folder,
502
+ asset
503
+ });
504
+ contentRef.current.style.visibility = "visible";
505
+ }
506
+ }
507
+ },
508
+ insertHandler: _ref6 => {
509
+ let {
510
+ assets
511
+ } = _ref6;
512
+ if (!library.current) {
513
+ return;
514
+ }
515
+ const imageAssets = assets.filter(asset => asset.resource_type === "image");
516
+ if (imageAssets.length === 0) {
517
+ throw new Error("The selection did not contain any images.");
518
+ }
519
+ library.current.hide();
520
+ propsRef.current.onSelect(imageAssets.map(asset => {
521
+ const url = asset.derived && asset.derived[0] ? asset.derived[0].secure_url : asset.secure_url;
522
+ return {
523
+ kind: "url",
524
+ value: url,
525
+ assetDocumentProps: {
526
+ _type: "sanity.imageAsset",
527
+ originalFilename: encodeFilename(asset),
528
+ source: {
529
+ id: encodeSourceId(asset),
530
+ name: "cloudinary:".concat(cloudName)
531
+ }
532
+ }
533
+ };
534
+ }));
535
+ }
536
+ });
537
+ }, [cloudName, apiKey, widgetId]);
538
+ const hasConfig = apiKey && cloudName;
539
+ return /* @__PURE__ */jsx(Dialog, {
540
+ id: "cloudinary-asset-source",
541
+ header: "Select image from Cloudinary",
542
+ onClose: handleClose,
543
+ open: true,
544
+ width: 4,
545
+ children: /* @__PURE__ */jsxs(Box, {
546
+ padding: 4,
547
+ children: [showSettings && /* @__PURE__ */jsx(SecretsConfigView, {
548
+ onClose: () => setShowSettings(false)
549
+ }), /* @__PURE__ */jsx(Flex, {
550
+ flex: 1,
551
+ justify: "flex-end",
552
+ children: /* @__PURE__ */jsx(Button, {
553
+ color: "primary",
554
+ icon: PlugIcon,
555
+ mode: "bleed",
556
+ title: "Configure",
557
+ onClick: () => setShowSettings(true),
558
+ tabIndex: 1,
559
+ text: hasConfig ? void 0 : "Configure Cloudinary plugin"
560
+ })
561
+ }), hasConfig && loadingMessage && /* @__PURE__ */jsxs(Stack, {
562
+ space: 3,
563
+ children: [/* @__PURE__ */jsx(Flex, {
564
+ align: "center",
565
+ justify: "center",
566
+ children: /* @__PURE__ */jsx(Spinner, {
567
+ muted: true
568
+ })
569
+ }), /* @__PURE__ */jsx(Text, {
570
+ size: 1,
571
+ muted: true,
572
+ align: "center",
573
+ children: loadingMessage
574
+ })]
575
+ }), /* @__PURE__ */jsx(Widget, {
576
+ style: {
577
+ visibility: "hidden"
578
+ },
579
+ ref: contentRef,
580
+ id: widgetId
581
+ })]
582
+ })
583
+ });
584
+ }
585
+ const cloudinarySchemaPlugin = definePlugin({
586
+ name: "cloudinary-schema",
587
+ schema: {
588
+ types: [cloudinaryAssetSchema, cloudinaryAssetDerivedSchema]
589
+ }
590
+ });
591
+ const cloudinaryImageSource = {
592
+ name: "cloudinary-image",
593
+ title: "Cloudinary",
594
+ icon: CloudinaryIcon,
595
+ component: CloudinaryAssetSource
596
+ };
597
+ const cloudinaryAssetSourcePlugin = definePlugin({
598
+ name: "cloudinart-asset-source",
599
+ form: {
600
+ image: {
601
+ assetSources: [cloudinaryImageSource]
602
+ }
603
+ }
604
+ });
605
+ export { cloudinaryAssetDerivedSchema, cloudinaryAssetSchema, cloudinaryAssetSourcePlugin, cloudinaryImageSource, cloudinarySchemaPlugin };
2
606
  //# sourceMappingURL=index.esm.js.map