sanity-plugin-cloudinary 0.2.2 → 1.0.0-v3-studio.2

package/src/components/WidgetInput.tsx

@@ -0,0 +1,66 @@
+import React, {useCallback} from 'react'
+import {ObjectInputProps, PatchEvent, unset} from 'sanity'
+import {Button, Flex, Grid, Stack} from '@sanity/ui'
+import {PlugIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import AssetPreview from './AssetPreview'
+import {CloudinaryAsset} from '../typings'
+
+const SetupButtonContainer = styled.div`
+  position: relative;
+  display: block;
+  font-size: 0.8em;
+  transform: translate(0%, -10%);
+`
+
+type WidgetInputProps = ObjectInputProps & {openMediaSelector: () => void; onSetup: () => void}
+
+const WidgetInput = (props: WidgetInputProps) => {
+  const {onChange, readOnly, value, openMediaSelector} = props
+
+  const removeValue = useCallback(() => {
+    onChange(PatchEvent.from([unset()]))
+  }, [onChange])
+
+  return (
+    <Stack>
+      <SetupButtonContainer>
+        <Flex flex={1} justify="flex-end">
+          <Button
+            color="primary"
+            icon={PlugIcon}
+            mode="bleed"
+            title="Configure"
+            onClick={props.onSetup}
+            tabIndex={1}
+          />
+        </Flex>
+      </SetupButtonContainer>
+
+      <Flex style={{textAlign: 'center'}} marginBottom={2}>
+        <AssetPreview value={value as CloudinaryAsset} />
+      </Flex>
+
+      <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
+        <Button
+          disabled={readOnly}
+          mode="ghost"
+          title="Select an asset"
+          tone="default"
+          onClick={openMediaSelector}
+          text="Select…"
+        />
+        <Button
+          disabled={readOnly || !value}
+          tone="critical"
+          mode="ghost"
+          title="Remove asset"
+          text="Remove"
+          onClick={removeValue}
+        />
+      </Grid>
+    </Stack>
+  )
+}
+
+export default WidgetInput

package/src/components/asset-source/CloudinaryAssetSource.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable camelcase */
+import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button, Dialog, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {CloudinaryMediaLibrary, InsertHandlerParams} from '../../typings'
+import {createMediaLibrary, decodeSourceId, encodeFilename, encodeSourceId} from '../../utils'
+import styled from 'styled-components'
+import {useSecrets} from '@sanity/studio-secrets'
+import SecretsConfigView, {namespace, Secrets} from '../SecretsConfigView'
+import {AssetSourceComponentProps, ImageAsset} from 'sanity'
+import {PlugIcon} from '@sanity/icons'
+
+export const Widget = styled.div`
+  height: 70vh;
+`
+
+export function CloudinaryAssetSource(props: AssetSourceComponentProps) {
+  const {onClose} = props
+
+  const [loadingMessage, setLoadingMessage] = useState<string | undefined>(
+    'Loading Cloudinary Media Libary'
+  )
+  const library = useRef<CloudinaryMediaLibrary | undefined>()
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  const {secrets} = useSecrets<Secrets>(namespace)
+  const cloudName = secrets?.cloudName
+  const apiKey = secrets?.apiKey
+  const [widgetId] = useState(() => `cloundinaryWidget-${Date.now()}`)
+  const [showSettings, setShowSettings] = useState(false)
+
+  const propsRef = useRef(props)
+
+  useEffect(() => {
+    // because we have to access props after loading js in a callback,
+    // we cannot pass props as dependecnies as that will cause infinite updates
+    // this takes a snapshot of props, so we can access them later
+    propsRef.current = props
+  }, [props])
+
+  const handleClose = useCallback(() => {
+    if (library.current) {
+      library.current.hide()
+    }
+    onClose()
+  }, [onClose, library])
+
+  useEffect(() => {
+    if (!cloudName || !apiKey) {
+      return
+    }
+
+    createMediaLibrary({
+      cloudName,
+      apiKey,
+      inlineContainer: `#${widgetId}`,
+      libraryCreated: (lib: CloudinaryMediaLibrary) => {
+        library.current = lib
+        const selectedAssets = propsRef.current.selectedAssets
+        const firstSelectedAsset = selectedAssets ? selectedAssets[0] : null
+
+        // eslint-disable-next-line no-undef
+        const iframe: ChildNode | null | undefined =
+          contentRef.current && contentRef.current.firstChild
+        if (iframe && iframe instanceof HTMLIFrameElement) {
+          setLoadingMessage(undefined)
+          let asset
+          if (
+            propsRef.current.selectionType === 'single' &&
+            firstSelectedAsset &&
+            firstSelectedAsset.source &&
+            firstSelectedAsset.source.id
+          ) {
+            asset = decodeSourceId(firstSelectedAsset.source.id)
+          }
+          const folder = asset
+            ? {
+                path: asset.public_id.split('/').slice(0, -1).join('/'),
+                resource_type: 'image',
+              }
+            : {path: '', resource_type: 'image'}
+          if (lib && contentRef.current) {
+            lib.show({folder, asset})
+            contentRef.current.style.visibility = 'visible'
+          }
+        }
+      },
+      insertHandler: ({assets}: InsertHandlerParams) => {
+        if (!library.current) {
+          return
+        }
+        const imageAssets = assets.filter((asset) => asset.resource_type === 'image')
+        if (imageAssets.length === 0) {
+          throw new Error('The selection did not contain any images.')
+        }
+        library.current.hide()
+        propsRef.current.onSelect(
+          imageAssets.map((asset) => {
+            const url =
+              asset.derived && asset.derived[0] ? asset.derived[0].secure_url : asset.secure_url
+            return {
+              kind: 'url',
+              value: url,
+              assetDocumentProps: {
+                _type: 'sanity.imageAsset',
+                originalFilename: encodeFilename(asset),
+                source: {
+                  id: encodeSourceId(asset),
+                  name: `cloudinary:${cloudName}`,
+                },
+              } as ImageAsset,
+            }
+          })
+        )
+      },
+    })
+  }, [cloudName, apiKey, widgetId])
+
+  const hasConfig = apiKey && cloudName
+  return (
+    <Dialog
+      id="cloudinary-asset-source"
+      header="Select image from Cloudinary"
+      onClose={handleClose}
+      open
+      width={4}
+    >
+      <Box padding={4}>
+        {showSettings && <SecretsConfigView onClose={() => setShowSettings(false)} />}
+        <Flex flex={1} justify="flex-end">
+          <Button
+            color="primary"
+            icon={PlugIcon}
+            mode="bleed"
+            title="Configure"
+            onClick={() => setShowSettings(true)}
+            tabIndex={1}
+            text={hasConfig ? undefined : 'Configure Cloudinary plugin'}
+          />
+        </Flex>
+
+        {hasConfig && loadingMessage && (
+          <Stack space={3}>
+            <Flex align="center" justify="center">
+              <Spinner muted />
+            </Flex>
+            <Text size={1} muted align="center">
+              {loadingMessage}
+            </Text>
+          </Stack>
+        )}
+
+        <Widget style={{visibility: 'hidden'}} ref={contentRef} id={widgetId} />
+      </Box>
+    </Dialog>
+  )
+}

package/src/components/asset-source/Icon.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+
+export function CloudinaryIcon() {
+  return (
+    <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"
+    >
+      <g>
+        <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
+        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
+        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
+        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
+        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
+        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
+        c0,10.693-6.934,20.146-17.253,23.523C116.382,109.18,115.98,109.242,115.585,109.242z"
+        />
+        <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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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"
+        />
+        <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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        C84.267,111.345,84.112,111.121,83.889,111.02z"
+        />
+        <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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        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
+        C111.045,111.345,110.889,111.121,110.667,111.02z"
+        />
+      </g>
+    </svg>
+  )
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+import {cloudinaryAssetSchema} from './schema/cloudinaryAsset'
+import {cloudinaryAssetDerivedSchema} from './schema/cloudinaryAssetDerived'
+import {createPlugin, AssetSource} from 'sanity'
+import {CloudinaryIcon} from './components/asset-source/Icon'
+import {CloudinaryAssetSource} from './components/asset-source/CloudinaryAssetSource'
+
+export {cloudinaryAssetSchema, cloudinaryAssetDerivedSchema}
+
+export const cloudinarySchemaPlugin = createPlugin({
+  name: 'cloudinary-schema',
+  schema: {
+    types: [cloudinaryAssetSchema, cloudinaryAssetDerivedSchema],
+  },
+})
+
+export const cloudinaryImageSource: AssetSource = {
+  name: 'cloudinary-image',
+  title: 'Cloudinary',
+  icon: CloudinaryIcon,
+  component: CloudinaryAssetSource,
+}
+
+export const cloudinaryAssetSourcePlugin = createPlugin({
+  name: 'cloudinart-asset-source',
+  form: {
+    image: {
+      assetSources: [cloudinaryImageSource],
+    },
+  },
+})

package/src/schema/cloudinaryAsset.ts

@@ -0,0 +1,99 @@
+/* eslint-disable */
+import CloudinaryInput from '../components/CloudinaryInput'
+import AssetDiff from '../components/AssetDiff'
+import AssetPreview from '../components/AssetPreview'
+import {defineType} from 'sanity'
+
+export const cloudinaryAssetSchema = defineType({
+  type: 'object',
+  name: 'cloudinary.asset',
+  fields: [
+    {
+      type: 'string',
+      name: 'public_id',
+    },
+    {
+      type: 'string',
+      name: 'resource_type',
+      // "image", "?"
+    },
+    {
+      type: 'string',
+      name: 'type',
+      // "upload", "?"
+    },
+    {
+      type: 'string',
+      name: 'format',
+      // "jpg"
+    },
+    {
+      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',
+      // can be null
+    },
+    {
+      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',
+    },
+    // context array of unknown content
+    // metadata array of unknown content
+  ],
+  components: {
+    input: CloudinaryInput,
+    diff: AssetDiff,
+    preview: AssetPreview,
+  },
+  preview: {
+    select: {
+      url: 'url',
+      resource_type: 'resource_type',
+      derived: 'derived.0.url',
+    },
+    prepare({url, derived, resource_type}) {
+      return {
+        title: url,
+        resource_type,
+        url: derived || url,
+      }
+    },
+  },
+})

package/src/schema/cloudinaryAssetDerived.ts

@@ -0,0 +1,26 @@
+import {defineType} from 'sanity'
+
+export type CloudinaryAssetDerived = {
+  raw_transformation: string
+  url: string
+  secure_url: string
+}
+
+export const cloudinaryAssetDerivedSchema = defineType({
+  type: 'object',
+  name: 'cloudinary.assetDerived',
+  fields: [
+    {
+      type: 'string',
+      name: 'raw_transformation',
+    },
+    {
+      type: 'url',
+      name: 'url',
+    },
+    {
+      type: 'url',
+      name: 'secure_url',
+    },
+  ],
+})

package/src/typings.d.ts

@@ -0,0 +1,74 @@
+import {CSSProperties} from 'react'
+import {CloudinaryAssetDerived} from './schema/cloudinaryAssetDerived'
+
+declare module '*.css' {
+  const content: {[className: string]: CSSProperties}
+  export default content
+}
+
+export type CloudinaryDerivative = {
+  url: string
+  secure_url: string
+  raw_transformation: string
+}
+
+export type CloudinaryAssetResponse = {
+  public_id: string
+  resource_type: string
+  type: string
+  url: string
+  tags: string[]
+  secure_url: string
+  format: string
+  width: number
+  height: number
+  bytes: number
+  derived?: CloudinaryDerivative[]
+}
+
+export type InsertHandlerParams = {
+  assets: CloudinaryAssetResponse[]
+}
+
+export interface CloudinaryMediaLibrary {
+  show: (config?: {asset: any; folder: any}) => void
+  hide: () => void
+}
+
+export type CloudinaryAsset = {
+  _type: string
+  _key?: string
+  _version: number
+  public_id: string
+  resource_type: string
+  type: string
+  format: string
+  version: number
+  url: string
+  secure_url: string
+  derived?: CloudinaryAssetDerived[]
+}
+
+export type AssetDocument = {
+  _id: string
+  label?: string
+  title?: string
+  description?: string
+  source?: {
+    id: string
+    name: string
+    url?: string
+  }
+  creditLine?: string
+  originalFilename?: string
+}
+
+declare global {
+  // eslint-disable-next-line no-unused-vars
+  interface Window {
+    cloudinary: {
+      openMediaLibrary: (config: any, callbacks: any) => void
+      createMediaLibrary: (config: any, callbacks?: any) => CloudinaryMediaLibrary
+    }
+  }
+}

package/src/utils.ts

@@ -0,0 +1,115 @@
+/* eslint-disable camelcase */
+import {
+  CloudinaryAsset,
+  CloudinaryAssetResponse,
+  CloudinaryMediaLibrary,
+  InsertHandlerParams,
+} from './typings'
+
+const widgetSrc = 'https://media-library.cloudinary.com/global/all.js'
+
+export function assetUrl(asset: CloudinaryAsset) {
+  if (asset.derived && asset.derived.length > 0) {
+    const [derived] = asset.derived
+    if (derived.secure_url) {
+      return derived.secure_url
+    }
+    return derived.url
+  }
+  if (asset.secure_url) {
+    return asset.secure_url
+  }
+  return asset.url
+}
+
+export const openMediaSelector = (
+  cloudName: string,
+  apiKey: string,
+  multiple: boolean,
+  insertHandler: (params: InsertHandlerParams) => void,
+  selectedAsset?: CloudinaryAsset
+) => {
+  loadJS(widgetSrc, () => {
+    const options: Record<string, any> = {
+      cloud_name: cloudName,
+      api_key: apiKey,
+      insert_caption: 'Select',
+      multiple,
+    }
+
+    if (selectedAsset) {
+      options.asset = {
+        public_id: selectedAsset.public_id,
+        type: selectedAsset.type,
+        resource_type: selectedAsset.resource_type,
+      }
+    }
+
+    window.cloudinary.openMediaLibrary(options, {insertHandler})
+  })
+}
+
+export const createMediaLibrary = ({
+  cloudName,
+  apiKey,
+  inlineContainer,
+  libraryCreated,
+  insertHandler,
+}: {
+  cloudName: string
+  apiKey: string
+  inlineContainer: string
+  libraryCreated: (library: CloudinaryMediaLibrary) => void
+  insertHandler: (params: InsertHandlerParams) => void
+}) => {
+  loadJS(widgetSrc, () => {
+    const options: Record<string, any> = {
+      cloud_name: cloudName,
+      api_key: apiKey,
+      insert_caption: 'Select',
+      inline_container: inlineContainer,
+      remove_header: true,
+    }
+
+    libraryCreated(window.cloudinary.createMediaLibrary(options, {insertHandler}))
+  })
+}
+
+export function loadJS(url: string, callback: () => void) {
+  const existingScript = document.getElementById('damWidget')
+  if (!existingScript) {
+    const script = document.createElement('script')
+    script.src = url
+    script.id = 'damWidget'
+    document.body.appendChild(script)
+    script.onload = () => {
+      if (callback) {
+        return callback()
+      }
+      return true
+    }
+  }
+  if (existingScript && callback) {
+    return callback()
+  }
+  return true
+}
+
+export function encodeSourceId(asset: CloudinaryAssetResponse): string {
+  const {resource_type, public_id, type} = asset
+  return btoa(JSON.stringify({public_id, resource_type, type})) // Sort keys alphabetically!
+}
+
+export function encodeFilename(asset: CloudinaryAssetResponse) {
+  return `${asset.public_id.split('/').slice(-1)[0]}.${asset.format}`
+}
+
+export function decodeSourceId(sourceId: string): CloudinaryAssetResponse | undefined {
+  let sourceIdDecoded: any
+  try {
+    sourceIdDecoded = JSON.parse(atob(sourceId))
+  } catch (err) {
+    // Do nothing
+  }
+  return sourceIdDecoded
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})