sanity-plugin-media 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",

package/src/components/AssetMetadata/index.tsx

@@ -1,7 +1,7 @@
 import {DownloadIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Stack, Text} from '@sanity/ui'
 import type {Asset, AssetItem} from '../../types'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import filesize from 'filesize'
 import {type ReactNode} from 'react'
 import getAssetResolution from '../../utils/getAssetResolution'

package/src/components/DialogAssetEdit/Details.tsx

@@ -0,0 +1,101 @@
+import {Stack} from '@sanity/ui'
+import type {Asset, AssetFormData, TagSelectOption} from '../../types'
+import {type Control, type FieldErrors, type UseFormRegister} from 'react-hook-form'
+
+import FormFieldInputTags from '../FormFieldInputTags'
+import FormFieldInputText from '../FormFieldInputText'
+import FormFieldInputTextarea from '../FormFieldInputTextarea'
+
+export type DetailsProps = {
+  formUpdating: boolean
+  handleCreateTag: (title: string) => void
+  control: Control<AssetFormData>
+  errors: FieldErrors<AssetFormData>
+  register: UseFormRegister<AssetFormData>
+  allTagOptions: TagSelectOption[]
+  assetTagOptions: TagSelectOption[] | null
+  currentAsset: Asset
+  creditLine?: {
+    enabled: boolean
+    excludeSources?: string | string[] | undefined
+  }
+}
+
+export default function Details({
+  formUpdating,
+  handleCreateTag,
+  control,
+  errors,
+  register,
+  allTagOptions,
+  assetTagOptions,
+  currentAsset,
+  creditLine
+}: DetailsProps) {
+  return (
+    <Stack space={3}>
+      {/* Tags */}
+      <FormFieldInputTags
+        control={control}
+        disabled={formUpdating}
+        error={errors?.opt?.media?.tags?.message}
+        label="Tags"
+        name="opt.media.tags"
+        onCreateTag={handleCreateTag}
+        options={allTagOptions}
+        placeholder="Select or create..."
+        value={assetTagOptions}
+      />
+      {/* Filename */}
+      <FormFieldInputText
+        {...register('originalFilename')}
+        disabled={formUpdating}
+        error={errors?.originalFilename?.message}
+        label="Filename"
+        name="originalFilename"
+        value={currentAsset?.originalFilename}
+      />
+      {/* Title */}
+      <FormFieldInputText
+        {...register('title')}
+        disabled={formUpdating}
+        error={errors?.title?.message}
+        label="Title"
+        name="title"
+        value={currentAsset?.title}
+      />
+      {/* Alt text */}
+      <FormFieldInputText
+        {...register('altText')}
+        disabled={formUpdating}
+        error={errors?.altText?.message}
+        label="Alt Text"
+        name="altText"
+        value={currentAsset?.altText}
+      />
+      {/* Description */}
+      <FormFieldInputTextarea
+        {...register('description')}
+        disabled={formUpdating}
+        error={errors?.description?.message}
+        label="Description"
+        name="description"
+        rows={5}
+        value={currentAsset?.description}
+      />
+      {/* CreditLine */}
+      {creditLine?.enabled && (
+        <FormFieldInputText
+          {...register('creditLine')}
+          error={errors?.creditLine?.message}
+          label="Credit"
+          name="creditLine"
+          value={currentAsset?.creditLine}
+          disabled={
+            formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+          }
+        />
+      )}
+    </Stack>
+  )
+}

package/src/components/DialogAssetEdit/index.tsx

@@ -1,6 +1,6 @@
 import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
-import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
+import {Box, Button, Card, Flex, Tab, TabList, TabPanel, Text} from '@sanity/ui'
 import type {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '../../types'
 import groq from 'groq'
 import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
@@ -22,12 +22,14 @@ import AssetMetadata from '../AssetMetadata'
 import Dialog from '../Dialog'
 import DocumentList from '../DocumentList'
 import FileAssetPreview from '../FileAssetPreview'
-import FormFieldInputTags from '../FormFieldInputTags'
-import FormFieldInputText from '../FormFieldInputText'
-import FormFieldInputTextarea from '../FormFieldInputTextarea'
 import FormSubmitButton from '../FormSubmitButton'
 import Image from '../Image'
 import {useToolOptions} from '../../contexts/ToolOptionsContext'
+import Details, {type DetailsProps} from './Details'
+
+function renderDefaultDetails(props: DetailsProps) {
+  return <Details {...props} />
+}
 
 type Props = {
   children: ReactNode
@@ -61,7 +63,7 @@ const DialogAssetEdit = (props: Props) => {
   const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset))
 
   // Check if credit line options are configured
-  const {creditLine} = useToolOptions()
+  const {creditLine, components: {details: CustomDetails} = {}} = useToolOptions()
 
   const generateDefaultValues = useCallback(
     (asset?: Asset): AssetFormData => {
@@ -239,6 +241,19 @@ const DialogAssetEdit = (props: Props) => {
     return null
   }
 
+  const detailsProps = {
+    control,
+    errors,
+    formUpdating,
+    register,
+    setValue,
+    assetTagOptions,
+    allTagOptions,
+    handleCreateTag,
+    currentAsset,
+    creditLine
+  }
+
   return (
     <Dialog
       animate
@@ -304,71 +319,14 @@ const DialogAssetEdit = (props: Props) => {
                       hidden={tabSection !== 'details'}
                       id="details-panel"
                     >
-                      <Stack space={3}>
-                        {/* Tags */}
-                        <FormFieldInputTags
-                          control={control}
-                          disabled={formUpdating}
-                          error={errors?.opt?.media?.tags?.message}
-                          label="Tags"
-                          name="opt.media.tags"
-                          onCreateTag={handleCreateTag}
-                          options={allTagOptions}
-                          placeholder="Select or create..."
-                          value={assetTagOptions}
+                      {CustomDetails ? (
+                        <CustomDetails
+                          {...detailsProps}
+                          renderDefaultDetails={renderDefaultDetails}
                         />
-                        {/* Filename */}
-                        <FormFieldInputText
-                          {...register('originalFilename')}
-                          disabled={formUpdating}
-                          error={errors?.originalFilename?.message}
-                          label="Filename"
-                          name="originalFilename"
-                          value={currentAsset?.originalFilename}
-                        />
-                        {/* Title */}
-                        <FormFieldInputText
-                          {...register('title')}
-                          disabled={formUpdating}
-                          error={errors?.title?.message}
-                          label="Title"
-                          name="title"
-                          value={currentAsset?.title}
-                        />
-                        {/* Alt text */}
-                        <FormFieldInputText
-                          {...register('altText')}
-                          disabled={formUpdating}
-                          error={errors?.altText?.message}
-                          label="Alt Text"
-                          name="altText"
-                          value={currentAsset?.altText}
-                        />
-                        {/* Description */}
-                        <FormFieldInputTextarea
-                          {...register('description')}
-                          disabled={formUpdating}
-                          error={errors?.description?.message}
-                          label="Description"
-                          name="description"
-                          rows={5}
-                          value={currentAsset?.description}
-                        />
-                        {/* CreditLine */}
-                        {creditLine?.enabled && (
-                          <FormFieldInputText
-                            {...register('creditLine')}
-                            error={errors?.creditLine?.message}
-                            label="Credit"
-                            name="creditLine"
-                            value={currentAsset?.creditLine}
-                            disabled={
-                              formUpdating ||
-                              creditLine?.excludeSources?.includes(currentAsset?.source?.name)
-                            }
-                          />
-                        )}
-                      </Stack>
+                      ) : (
+                        <Details {...detailsProps} />
+                      )}
                     </TabPanel>
 
                     {/* Panel: References */}

package/src/components/FormSubmitButton/index.tsx

@@ -1,5 +1,5 @@
 import {Box, Button, Text, Tooltip} from '@sanity/ui'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import {type ReactNode} from 'react'
 
 type Props = {

package/src/components/Header/index.tsx

@@ -5,6 +5,7 @@ import pluralize from 'pluralize'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import {useDropzoneActions} from '../../contexts/DropzoneDispatchContext'
 import useTypedSelector from '../../hooks/useTypedSelector'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 type Props = {
   onClose?: () => void
@@ -20,6 +21,8 @@ const Header = (props: Props) => {
   const assetTypes = useTypedSelector(state => state.assets.assetTypes)
   const selectedDocument = useTypedSelector(state => state.selected.document)
 
+  const {directUploads} = useToolOptions()
+
   // Row: Current document / close button
   return (
     <Box paddingY={2}>
@@ -46,14 +49,15 @@ const Header = (props: Props) => {
 
         <Flex marginX={2}>
           {/* Upload */}
-          <Button
-            fontSize={1}
-            icon={UploadIcon}
-            mode="bleed"
-            onClick={open}
-            text={`Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : 'assets'}`}
-            tone="primary"
-          />
+          {directUploads && (
+            <Button
+              fontSize={1}
+              icon={UploadIcon}
+              mode="bleed"
+              onClick={open}
+              text={`Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : 'assets'}`}
+            />
+          )}
 
           {/* Close */}
           {onClose && (

package/src/components/TableRowAsset/index.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip,
   useMediaIndex
 } from '@sanity/ui'
-import formatRelative from 'date-fns/formatRelative'
+import { formatRelative } from 'date-fns'
 import filesize from 'filesize'
 import {
   memo,

package/src/components/UploadDropzone/index.tsx

@@ -64,7 +64,8 @@ const UploadDropzone = (props: Props) => {
   const {children} = props
 
   const {
-    dropzone: {maxSize}
+    dropzone: {maxSize},
+    directUploads
   } = useToolOptions()
 
   const {onSelect} = useAssetSourceActions()
@@ -143,7 +144,8 @@ const UploadDropzone = (props: Props) => {
     noDrag: !!onSelect,
     onDrop: handleDrop,
     maxSize,
-    onDropRejected: handleDropRejected
+    onDropRejected: handleDropRejected,
+    disabled: !directUploads
   })
 
   return (

package/src/contexts/ToolOptionsContext.tsx

@@ -4,7 +4,9 @@ import type {DropzoneOptions} from 'react-dropzone'
 
 type ContextProps = {
   dropzone: Pick<DropzoneOptions, 'maxSize'>
+  components: MediaToolOptions['components']
   creditLine: MediaToolOptions['creditLine']
+  directUploads: MediaToolOptions['directUploads']
 }
 
 const ToolOptionsContext = createContext<ContextProps | null>(null)
@@ -25,15 +27,21 @@ export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props
 
     return {
       dropzone: {maxSize: options?.maximumUploadSize},
+      components: {
+        details: options?.components?.details
+      },
       creditLine: {
         enabled: options?.creditLine?.enabled || false,
         excludeSources: creditLineExcludeSources
-      }
+      },
+      directUploads: options?.directUploads ?? true
     }
   }, [
     options?.creditLine?.enabled,
+    options?.components,
     options?.creditLine?.excludeSources,
-    options?.maximumUploadSize
+    options?.maximumUploadSize,
+    options?.directUploads
   ])
 
   return <ToolOptionsContext.Provider value={value}>{children}</ToolOptionsContext.Provider>

package/src/modules/assets/index.ts

@@ -254,7 +254,9 @@ const assetsSlice = createSlice({
               originalFilename,
               size,
               source {
-                name
+                name,
+                id,
+                url,
               },
               title,
               url

package/src/types/index.ts

@@ -5,17 +5,25 @@ import type {
   SanityDocument,
   SanityImageAssetDocument
 } from '@sanity/client'
+import type {ComponentType, JSX} from 'react'
 import type {Epic} from 'redux-observable'
 import * as z from 'zod'
 import {assetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
 import type {RootReducerState} from '../modules/types'
+import type {DetailsProps} from '../components/DialogAssetEdit/Details'
 
 export type MediaToolOptions = {
   maximumUploadSize?: number
+  components?: {
+    details?: ComponentType<
+      DetailsProps & {renderDefaultDetails: (props: DetailsProps) => JSX.Element}
+    >
+  }
   creditLine: {
     enabled: boolean
     excludeSources?: string | string[]
   }
+  directUploads?: boolean
 }
 
 type CustomFields = {