sanity-plugin-cloudinary 1.0.2 → 1.1.1

package/src/index.ts

@@ -1,15 +1,56 @@
 import {cloudinaryAssetSchema} from './schema/cloudinaryAsset'
 import {cloudinaryAssetDerivedSchema} from './schema/cloudinaryAssetDerived'
-import {definePlugin, AssetSource} from 'sanity'
+import {
+  definePlugin,
+  AssetSource,
+  ArrayOfObjectsInputProps,
+  isArrayOfObjectsSchemaType,
+} from 'sanity'
 import {CloudinaryIcon} from './components/asset-source/Icon'
 import {CloudinaryAssetSource} from './components/asset-source/CloudinaryAssetSource'
+import {cloudinaryAssetContext} from './schema/cloudinaryAssetContext'
+import {cloudinaryAssetContextCustom} from './schema/cloudinaryAssetContextCustom'
+import {AssetListFunctions} from './components/AssetListFunctions'
 
-export {cloudinaryAssetSchema, cloudinaryAssetDerivedSchema}
+export {type CloudinaryAssetContext} from './schema/cloudinaryAssetContext'
+export {type CloudinaryAssetDerived} from './schema/cloudinaryAssetDerived'
+export {type CloudinaryAssetContextCustom} from './schema/cloudinaryAssetContextCustom'
+
+export type {AssetDocument, CloudinaryAsset} from './types'
+
+export {
+  cloudinaryAssetSchema,
+  cloudinaryAssetDerivedSchema,
+  cloudinaryAssetContext,
+  cloudinaryAssetContextCustom,
+}
 
 export const cloudinarySchemaPlugin = definePlugin({
   name: 'cloudinary-schema',
+  form: {
+    components: {
+      input: (props) => {
+        const {schemaType} = props
+        if (isArrayOfObjectsSchemaType(schemaType)) {
+          const arrayProps = props as ArrayOfObjectsInputProps
+          const cloudinaryType = arrayProps.schemaType.of.find(
+            (t: {name: string}) => t.name === cloudinaryAssetSchema.name
+          )
+          if (cloudinaryType) {
+            return arrayProps.renderDefault({...arrayProps, arrayFunctions: AssetListFunctions})
+          }
+        }
+        return props.renderDefault(props)
+      },
+    },
+  },
   schema: {
-    types: [cloudinaryAssetSchema, cloudinaryAssetDerivedSchema],
+    types: [
+      cloudinaryAssetSchema,
+      cloudinaryAssetDerivedSchema,
+      cloudinaryAssetContext,
+      cloudinaryAssetContextCustom,
+    ],
   },
 })
 

package/src/schema/cloudinaryAsset.ts

@@ -74,7 +74,10 @@ export const cloudinaryAssetSchema = defineType({
       type: 'string',
       name: 'access_mode',
     },
-    // context array of unknown content
+    {
+      type: 'cloudinary.assetContext',
+      name: 'context',
+    },
     // metadata array of unknown content
   ],
   ...({

package/src/schema/cloudinaryAssetContext.ts

@@ -0,0 +1,16 @@
+import {defineType} from 'sanity'
+
+export interface CloudinaryAssetContext {
+  custom: object
+}
+
+export const cloudinaryAssetContext = defineType({
+  type: 'object',
+  name: 'cloudinary.assetContext',
+  fields: [
+    {
+      type: 'cloudinary.assetContextCustom',
+      name: 'custom',
+    },
+  ],
+})

package/src/schema/cloudinaryAssetContextCustom.ts

@@ -0,0 +1,21 @@
+import {defineType} from 'sanity'
+
+export type CloudinaryAssetContextCustom = {
+  alt: string
+  caption: string
+}
+
+export const cloudinaryAssetContextCustom = defineType({
+  type: 'object',
+  name: 'cloudinary.assetContextCustom',
+  fields: [
+    {
+      type: 'string',
+      name: 'alt',
+    },
+    {
+      type: 'string',
+      name: 'caption',
+    },
+  ],
+})

package/src/{typings.d.ts → types.ts}

@@ -1,11 +1,5 @@
-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

package/src/utils.ts

@@ -1,10 +1,10 @@
-/* eslint-disable camelcase */
+/* eslint-disable camelcase,@typescript-eslint/explicit-module-boundary-types */
 import {
   CloudinaryAsset,
   CloudinaryAssetResponse,
   CloudinaryMediaLibrary,
   InsertHandlerParams,
-} from './typings'
+} from './types'
 
 const widgetSrc = 'https://media-library.cloudinary.com/global/all.js'
 

package/src/arrayFunctions.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import {Button} from '@sanity/ui'
-import {PatchEvent, setIfMissing, insert} from 'sanity'
-
-import {useSecrets} from '@sanity/studio-secrets'
-import SecretsConfigView, {namespace} from './components/SecretsConfigView'
-import {cloudinaryAssetSchema} from './schema/cloudinaryAsset'
-import {openMediaSelector} from './utils'
-import {InsertHandlerParams} from './typings'
-
-interface ApiConfig {
-  cloudName: string
-  apiKey: string
-}
-
-const AssetListFunctions = (props: any) => {
-  const {secrets, loading} = useSecrets<ApiConfig>(namespace)
-  const [showSettings, setShowSettings] = React.useState(false)
-
-  const cloudinaryType = props.type.of.find(
-    (t: {name: string}) => t.name === cloudinaryAssetSchema.name
-  )
-
-  const handleSelect = (selected: InsertHandlerParams) => {
-    const {onCreateValue, onChange} = props
-    const items = selected.assets.map((asset) =>
-      Object.assign(
-        {},
-        asset,
-        {
-          // Schema version. In case we ever change our schema.
-          _version: 1,
-        },
-        onCreateValue(cloudinaryType)
-      )
-    )
-    onChange(PatchEvent.from([setIfMissing([]), insert(items, 'after', [-1])]))
-  }
-
-  const actions = (
-    <>
-      <Button
-        disabled={props.readOnly || loading}
-        mode="ghost"
-        onClick={() =>
-          secrets &&
-          openMediaSelector(
-            secrets.cloudName,
-            secrets.apiKey,
-            true, // multi-selection
-            handleSelect
-          )
-        }
-      >
-        Add multiple
-      </Button>
-      <Button onClick={() => setShowSettings(true)}>Configure</Button>
-    </>
-  )
-
-  return (
-    <>
-      {showSettings && <SecretsConfigView onClose={() => setShowSettings(false)} />}
-      {/* <DefaultArrayFunctions {...props}>*/}
-      {cloudinaryType && actions}
-      {/*    </DefaultArrayFunctions>*/}
-    </>
-  )
-}
-
-export default AssetListFunctions