sanity-plugin-cloudinary 1.0.1 → 1.1.0

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.esm.js CHANGED
@@ -1,2 +1,627 @@
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
+ type: "cloudinary.assetContext",
373
+ name: "context"
374
+ }
375
+ // metadata array of unknown content
376
+ ],
377
+
378
+ ...{
379
+ components: {
380
+ input: CloudinaryInput,
381
+ diff: AssetDiff,
382
+ preview: AssetPreview
383
+ }
384
+ },
385
+ //TODO revert this change when rc.1 is released
386
+ preview: {
387
+ select: {
388
+ url: "url",
389
+ resource_type: "resource_type",
390
+ derived: "derived.0.url"
391
+ },
392
+ prepare(_ref5) {
393
+ let {
394
+ url,
395
+ derived,
396
+ resource_type
397
+ } = _ref5;
398
+ return {
399
+ title: url,
400
+ value: {
401
+ title: url,
402
+ resource_type,
403
+ url: derived || url
404
+ }
405
+ };
406
+ }
407
+ }
408
+ });
409
+ const cloudinaryAssetDerivedSchema = defineType({
410
+ type: "object",
411
+ name: "cloudinary.assetDerived",
412
+ fields: [{
413
+ type: "string",
414
+ name: "raw_transformation"
415
+ }, {
416
+ type: "url",
417
+ name: "url"
418
+ }, {
419
+ type: "url",
420
+ name: "secure_url"
421
+ }]
422
+ });
423
+ function CloudinaryIcon() {
424
+ return /* @__PURE__ */jsx("svg", {
425
+ version: "1.1",
426
+ id: "Layer_1",
427
+ x: "0px",
428
+ y: "0px",
429
+ width: "1em",
430
+ height: "1em",
431
+ viewBox: "0 0 141.732 141.747",
432
+ enableBackground: "new 0 0 141.732 141.747",
433
+ children: /* @__PURE__ */jsxs("g", {
434
+ children: [/* @__PURE__ */jsx("path", {
435
+ fill: "#0071CE",
436
+ 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"
437
+ }), /* @__PURE__ */jsx("path", {
438
+ fill: "#DC8327",
439
+ 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"
440
+ }), /* @__PURE__ */jsx("path", {
441
+ fill: "#F4B21B",
442
+ 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"
443
+ }), /* @__PURE__ */jsx("path", {
444
+ fill: "#F2D864",
445
+ 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"
446
+ })]
447
+ })
448
+ });
449
+ }
450
+ const Widget = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 70vh;\n"])));
451
+ function CloudinaryAssetSource(props) {
452
+ const {
453
+ onClose
454
+ } = props;
455
+ const [loadingMessage, setLoadingMessage] = useState("Loading Cloudinary Media Libary");
456
+ const library = useRef();
457
+ const contentRef = useRef(null);
458
+ const {
459
+ secrets
460
+ } = useSecrets(namespace);
461
+ const cloudName = secrets == null ? void 0 : secrets.cloudName;
462
+ const apiKey = secrets == null ? void 0 : secrets.apiKey;
463
+ const [widgetId] = useState(() => "cloundinaryWidget-".concat(Date.now()));
464
+ const [showSettings, setShowSettings] = useState(false);
465
+ const propsRef = useRef(props);
466
+ useEffect(() => {
467
+ propsRef.current = props;
468
+ }, [props]);
469
+ const handleClose = useCallback(() => {
470
+ if (library.current) {
471
+ library.current.hide();
472
+ }
473
+ onClose();
474
+ }, [onClose, library]);
475
+ useEffect(() => {
476
+ if (!cloudName || !apiKey) {
477
+ return;
478
+ }
479
+ createMediaLibrary({
480
+ cloudName,
481
+ apiKey,
482
+ inlineContainer: "#".concat(widgetId),
483
+ libraryCreated: lib => {
484
+ library.current = lib;
485
+ const selectedAssets = propsRef.current.selectedAssets;
486
+ const firstSelectedAsset = selectedAssets ? selectedAssets[0] : null;
487
+ const iframe = contentRef.current && contentRef.current.firstChild;
488
+ if (iframe && iframe instanceof HTMLIFrameElement) {
489
+ setLoadingMessage(void 0);
490
+ let asset;
491
+ if (propsRef.current.selectionType === "single" && firstSelectedAsset && firstSelectedAsset.source && firstSelectedAsset.source.id) {
492
+ asset = decodeSourceId(firstSelectedAsset.source.id);
493
+ }
494
+ const folder = asset ? {
495
+ path: asset.public_id.split("/").slice(0, -1).join("/"),
496
+ resource_type: "image"
497
+ } : {
498
+ path: "",
499
+ resource_type: "image"
500
+ };
501
+ if (lib && contentRef.current) {
502
+ lib.show({
503
+ folder,
504
+ asset
505
+ });
506
+ contentRef.current.style.visibility = "visible";
507
+ }
508
+ }
509
+ },
510
+ insertHandler: _ref6 => {
511
+ let {
512
+ assets
513
+ } = _ref6;
514
+ if (!library.current) {
515
+ return;
516
+ }
517
+ const imageAssets = assets.filter(asset => asset.resource_type === "image");
518
+ if (imageAssets.length === 0) {
519
+ throw new Error("The selection did not contain any images.");
520
+ }
521
+ library.current.hide();
522
+ propsRef.current.onSelect(imageAssets.map(asset => {
523
+ const url = asset.derived && asset.derived[0] ? asset.derived[0].secure_url : asset.secure_url;
524
+ return {
525
+ kind: "url",
526
+ value: url,
527
+ assetDocumentProps: {
528
+ _type: "sanity.imageAsset",
529
+ originalFilename: encodeFilename(asset),
530
+ source: {
531
+ id: encodeSourceId(asset),
532
+ name: "cloudinary:".concat(cloudName)
533
+ }
534
+ }
535
+ };
536
+ }));
537
+ }
538
+ });
539
+ }, [cloudName, apiKey, widgetId]);
540
+ const hasConfig = apiKey && cloudName;
541
+ return /* @__PURE__ */jsx(Dialog, {
542
+ id: "cloudinary-asset-source",
543
+ header: "Select image from Cloudinary",
544
+ onClose: handleClose,
545
+ open: true,
546
+ width: 4,
547
+ children: /* @__PURE__ */jsxs(Box, {
548
+ padding: 4,
549
+ children: [showSettings && /* @__PURE__ */jsx(SecretsConfigView, {
550
+ onClose: () => setShowSettings(false)
551
+ }), /* @__PURE__ */jsx(Flex, {
552
+ flex: 1,
553
+ justify: "flex-end",
554
+ children: /* @__PURE__ */jsx(Button, {
555
+ color: "primary",
556
+ icon: PlugIcon,
557
+ mode: "bleed",
558
+ title: "Configure",
559
+ onClick: () => setShowSettings(true),
560
+ tabIndex: 1,
561
+ text: hasConfig ? void 0 : "Configure Cloudinary plugin"
562
+ })
563
+ }), hasConfig && loadingMessage && /* @__PURE__ */jsxs(Stack, {
564
+ space: 3,
565
+ children: [/* @__PURE__ */jsx(Flex, {
566
+ align: "center",
567
+ justify: "center",
568
+ children: /* @__PURE__ */jsx(Spinner, {
569
+ muted: true
570
+ })
571
+ }), /* @__PURE__ */jsx(Text, {
572
+ size: 1,
573
+ muted: true,
574
+ align: "center",
575
+ children: loadingMessage
576
+ })]
577
+ }), /* @__PURE__ */jsx(Widget, {
578
+ style: {
579
+ visibility: "hidden"
580
+ },
581
+ ref: contentRef,
582
+ id: widgetId
583
+ })]
584
+ })
585
+ });
586
+ }
587
+ const cloudinaryAssetContext = defineType({
588
+ type: "object",
589
+ name: "cloudinary.assetContext",
590
+ fields: [{
591
+ type: "cloudinary.assetContextCustom",
592
+ name: "custom"
593
+ }]
594
+ });
595
+ const cloudinaryAssetContextCustom = defineType({
596
+ type: "object",
597
+ name: "cloudinary.assetContextCustom",
598
+ fields: [{
599
+ type: "string",
600
+ name: "alt"
601
+ }, {
602
+ type: "string",
603
+ name: "caption"
604
+ }]
605
+ });
606
+ const cloudinarySchemaPlugin = definePlugin({
607
+ name: "cloudinary-schema",
608
+ schema: {
609
+ types: [cloudinaryAssetSchema, cloudinaryAssetDerivedSchema, cloudinaryAssetContext, cloudinaryAssetContextCustom]
610
+ }
611
+ });
612
+ const cloudinaryImageSource = {
613
+ name: "cloudinary-image",
614
+ title: "Cloudinary",
615
+ icon: CloudinaryIcon,
616
+ component: CloudinaryAssetSource
617
+ };
618
+ const cloudinaryAssetSourcePlugin = definePlugin({
619
+ name: "cloudinart-asset-source",
620
+ form: {
621
+ image: {
622
+ assetSources: [cloudinaryImageSource]
623
+ }
624
+ }
625
+ });
626
+ export { cloudinaryAssetContext, cloudinaryAssetContextCustom, cloudinaryAssetDerivedSchema, cloudinaryAssetSchema, cloudinaryAssetSourcePlugin, cloudinaryImageSource, cloudinarySchemaPlugin };
2
627
  //# sourceMappingURL=index.esm.js.map