sanity-plugin-media 4.2.0 → 4.3.0

package/package.json

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

package/src/components/AutoTagInputWrapper/index.tsx

@@ -0,0 +1,82 @@
+import {useToast} from '@sanity/ui'
+import {useEffect, useRef} from 'react'
+import {type InputProps} from 'sanity'
+import {applyMediaTags} from '../../utils/applyMediaTags'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
+import useVersionedClient from '../../hooks/useVersionedClient'
+
+type AssetValue = {
+  _type: 'image' | 'file'
+  asset?: {
+    _ref: string
+    _type: 'reference'
+  }
+}
+
+export type AutoTagInputProps = InputProps & {
+  mediaTags?: string[]
+}
+
+/**
+ * Input component that automatically applies media tags when an asset is selected or uploaded.
+ *
+ * Apply explicitly to image/file fields that should be auto-tagged:
+ * ```ts
+ * import {AutoTagInput} from 'sanity-plugin-media'
+ *
+ * defineField({
+ *   type: 'image',
+ *   options: { mediaTags: ['product'] },   // also pre-filters the media browser
+ *   components: { input: AutoTagInput },
+ * })
+ * ```
+ *
+ * Pass `mediaTags` as a prop to override or use without `options`:
+ * ```ts
+ * components: { input: (props) => <AutoTagInput {...props} mediaTags={['product']} /> }
+ * ```
+ */
+export function AutoTagInput(props: AutoTagInputProps) {
+  const {renderDefault, schemaType, value, mediaTags: mediaTagsProp} = props
+  const toast = useToast()
+
+  // Prop takes precedence; fall back to schemaType.options.mediaTags (set for browser pre-filtering)
+  const mediaTags =
+    mediaTagsProp ?? (schemaType?.options as {mediaTags?: string[]} | undefined)?.mediaTags
+
+  const client = useVersionedClient()
+  const {createTagsOnUpload} = useToolOptions()
+
+  const prevAssetRef = useRef<string | undefined>(undefined)
+  const isInitialMount = useRef(true)
+
+  const currentAssetRef = (value as AssetValue | undefined)?.asset?._ref
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false
+      prevAssetRef.current = currentAssetRef
+      return
+    }
+
+    const previousRef = prevAssetRef.current
+    prevAssetRef.current = currentAssetRef
+
+    if (!mediaTags?.length || !currentAssetRef || currentAssetRef === previousRef) return
+
+    applyMediaTags({
+      client,
+      assetId: currentAssetRef,
+      mediaTags,
+      createTagsOnUpload
+    }).catch(err => {
+      console.error('[sanity-plugin-media] Failed to apply auto-tags:', err)
+      const label = mediaTags.length === 1 ? 'tag' : 'tags'
+      toast.push({closable: true, status: 'error', title: `Failed to apply the media ${label} ${mediaTags.join(', ')}`})
+    })
+  }, [currentAssetRef, mediaTags, client, createTagsOnUpload])
+
+  return renderDefault(props as InputProps)
+}
+
+export default AutoTagInput

package/src/components/Browser/index.tsx

@@ -1,15 +1,8 @@
-import type {MutationEvent} from '@sanity/client'
 import {Card, Flex, PortalProvider} from '@sanity/ui'
-import type {Asset, Tag} from '../../types'
-import groq from 'groq'
-import {useEffect, useState} from 'react'
-import {useDispatch} from 'react-redux'
+import {useState} from 'react'
 import {type AssetSourceComponentProps, type SanityDocument} from 'sanity'
-import {TAG_DOCUMENT_NAME} from '../../constants'
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
-import {assetsActions} from '../../modules/assets'
-import {tagsActions} from '../../modules/tags'
 import GlobalStyle from '../../styled/GlobalStyles'
 import Controls from '../Controls'
 import DebugControls from '../DebugControls'
@@ -21,6 +14,7 @@ import PickedBar from '../PickedBar'
 import ReduxProvider from '../ReduxProvider'
 import TagsPanel from '../TagsPanel'
 import UploadDropzone from '../UploadDropzone'
+import {useBrowserInit} from './useBrowserInit'
 
 type Props = {
   assetType?: AssetSourceComponentProps['assetType']
@@ -28,71 +22,20 @@ type Props = {
   onClose?: AssetSourceComponentProps['onClose']
   onSelect?: AssetSourceComponentProps['onSelect']
   selectedAssets?: AssetSourceComponentProps['selectedAssets']
+  schemaType?: AssetSourceComponentProps['schemaType']
 }
 
-const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose']}) => {
+const BrowserContent = ({
+  onClose,
+  schemaType
+}: {
+  onClose?: AssetSourceComponentProps['onClose']
+  schemaType?: AssetSourceComponentProps['schemaType']
+}) => {
   const client = useVersionedClient()
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const dispatch = useDispatch()
-
-  useEffect(() => {
-    const handleAssetUpdate = (update: MutationEvent) => {
-      const {documentId, result, transition} = update
-
-      if (transition === 'appear') {
-        dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
-      }
-
-      if (transition === 'disappear') {
-        dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
-      }
-
-      if (transition === 'update') {
-        dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
-      }
-    }
-
-    const handleTagUpdate = (update: MutationEvent) => {
-      const {documentId, result, transition} = update
-
-      if (transition === 'appear') {
-        dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
-      }
-
-      if (transition === 'disappear') {
-        dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
-      }
-
-      if (transition === 'update') {
-        dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
-      }
-    }
-
-    // Fetch assets: first page
-    dispatch(assetsActions.loadPageIndex({pageIndex: 0}))
-
-    // Fetch all tags
-    dispatch(tagsActions.fetchRequest())
-
-    // Listen for asset and tag changes in published documents.
-    // Remember that Sanity listeners ignore joins, order clauses and projections!
-    // Also note that changes to the selected document (if present) will automatically re-load the media plugin
-    // due to the desk pane re-rendering.
-    const subscriptionAsset = client
-      .listen(
-        groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
-      )
-      .subscribe(handleAssetUpdate)
-
-    const subscriptionTag = client
-      .listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`)
-      .subscribe(handleTagUpdate)
 
-    return () => {
-      subscriptionAsset?.unsubscribe()
-      subscriptionTag?.unsubscribe()
-    }
-  }, [client, dispatch])
+  useBrowserInit(client, schemaType)
 
   return (
     <PortalProvider element={portalElement}>
@@ -137,7 +80,7 @@ const Browser = (props: Props) => {
     >
       <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
         <GlobalStyle />
-        <BrowserContent onClose={props?.onClose} />
+        <BrowserContent onClose={props?.onClose} schemaType={props?.schemaType} />
       </AssetBrowserDispatchProvider>
     </ReduxProvider>
   )

package/src/components/Browser/useBrowserInit.ts

@@ -0,0 +1,126 @@
+import type {MutationEvent, SanityClient} from '@sanity/client'
+import groq from 'groq'
+import {useEffect} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
+import type {AssetSourceComponentProps} from 'sanity'
+import type {Dispatch} from 'redux'
+
+import {inputs} from '../../config/searchFacets'
+import {TAG_DOCUMENT_NAME} from '../../constants'
+import {searchActions} from '../../modules/search'
+import {tagsActions} from '../../modules/tags'
+import type {RootReducerState} from '../../modules/types'
+import type {Asset, Tag} from '../../types'
+import {assetsActions} from '../../modules/assets'
+
+function getMediaTagNames(schemaType?: AssetSourceComponentProps['schemaType']): string[] {
+  const mediaTags = (schemaType?.options as {mediaTags?: string[]} | undefined)?.mediaTags
+  if (!mediaTags?.length) return []
+  const unique = new Set(
+    mediaTags.map(t => t?.trim()).filter((t): t is string => Boolean(t?.length))
+  )
+  return Array.from(unique)
+}
+
+function createAssetHandler(dispatch: Dispatch) {
+  return (update: MutationEvent) => {
+    const {documentId, result, transition} = update
+
+    switch (transition) {
+      case 'appear':
+        dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
+        break
+      case 'disappear':
+        dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
+        break
+      case 'update':
+        dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
+        break
+      default:
+        break
+    }
+  }
+}
+
+function createTagHandler(dispatch: Dispatch) {
+  return (update: MutationEvent) => {
+    const {documentId, result, transition} = update
+
+    switch (transition) {
+      case 'appear':
+        dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
+        break
+      case 'disappear':
+        dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
+        break
+      case 'update':
+        dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
+        break
+      default:
+        break
+    }
+  }
+}
+
+export function useBrowserInit(
+  client: SanityClient,
+  schemaType?: AssetSourceComponentProps['schemaType']
+): void {
+  const dispatch = useDispatch()
+  const tagsByIds = useSelector((state: RootReducerState) => state.tags.byIds)
+  const tagsFetchCount = useSelector((state: RootReducerState) => state.tags.fetchCount)
+
+  const tagNames = getMediaTagNames(schemaType)
+  const hasMediaTags = tagNames.length > 0
+
+  useEffect(() => {
+    if (!hasMediaTags) {
+      dispatch(searchActions.facetsClear())
+    }
+
+    dispatch(tagsActions.fetchRequest())
+
+    const assetSubscription = client
+      .listen(
+        groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
+      )
+      .subscribe(createAssetHandler(dispatch))
+
+    const tagSubscription = client
+      .listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`)
+      .subscribe(createTagHandler(dispatch))
+
+    return () => {
+      assetSubscription.unsubscribe()
+      tagSubscription.unsubscribe()
+    }
+  }, [client, dispatch, hasMediaTags])
+
+  // When mediaTags are configured, wait for the tag fetch to complete then apply facets.
+  // Dispatching clear + add synchronously keeps all actions within assetsSearchEpic's
+  // 400ms debounce window, so the browser performs exactly one asset fetch on open.
+  useEffect(() => {
+    if (!hasMediaTags || tagsFetchCount < 0) return
+
+    const tagFacetInput = inputs.tag
+    if (tagFacetInput.type !== 'searchable') return
+
+    const resolvedTags = tagNames
+      .map(name => Object.values(tagsByIds).find(item => item.tag.name.current === name))
+      .filter((item): item is NonNullable<typeof item> => Boolean(item))
+
+    dispatch(searchActions.facetsClear())
+
+    for (const tagItem of resolvedTags) {
+      dispatch(
+        searchActions.facetsAdd({
+          facet: {
+            ...tagFacetInput,
+            operatorType: 'references',
+            value: {label: tagItem.tag.name.current, value: tagItem.tag._id}
+          }
+        })
+      )
+    }
+  }, [tagsFetchCount, hasMediaTags]) // eslint-disable-line react-hooks/exhaustive-deps
+}

package/src/components/FormBuilderTool/index.tsx

@@ -44,7 +44,7 @@ const FormBuilderTool = (props: AssetSourceComponentProps) => {
             zIndex
           }}
         >
-          <Browser document={currentDocument} {...props} />
+          <Browser document={currentDocument} schemaType={props.schemaType} {...props} />
         </Box>
       </Portal>
     </PortalProvider>

package/src/contexts/ToolOptionsContext.tsx

@@ -5,6 +5,7 @@ import type {DropzoneOptions} from 'react-dropzone'
 type ContextProps = {
   dropzone: Pick<DropzoneOptions, 'maxSize'>
   components: MediaToolOptions['components']
+  createTagsOnUpload: boolean
   creditLine: MediaToolOptions['creditLine']
   directUploads: MediaToolOptions['directUploads']
   locales?: Locale[]
@@ -31,6 +32,7 @@ export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props
       components: {
         details: options?.components?.details
       },
+      createTagsOnUpload: options?.createTagsOnUpload ?? true,
       creditLine: {
         enabled: options?.creditLine?.enabled || false,
         excludeSources: creditLineExcludeSources
@@ -41,6 +43,7 @@ export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props
   }, [
     options?.creditLine?.enabled,
     options?.components,
+    options?.createTagsOnUpload,
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
     options?.directUploads,

package/src/index.ts

@@ -1,2 +1,5 @@
 export {media, mediaAssetSource} from './plugin'
-export type {MediaToolOptions} from './types'
+export {AutoTagInput} from './components/AutoTagInputWrapper'
+export type {AutoTagInputProps} from './components/AutoTagInputWrapper'
+export {mediaField} from './utils/mediaField'
+export type {MediaTagsOptions, MediaToolOptions} from './types'

package/src/types/index.ts

@@ -15,8 +15,13 @@ import type {SUPPORTED_ASSET_TYPES} from '../constants'
 
 export type AssetTypes = (typeof SUPPORTED_ASSET_TYPES)[number]
 
+export type MediaTagsOptions = {
+  mediaTags?: string[]
+}
+
 export type MediaToolOptions = {
   maximumUploadSize?: number
+  createTagsOnUpload?: boolean
   components?: {
     details?: ComponentType<
       DetailsProps & {renderDefaultDetails: (props: DetailsProps) => JSX.Element}

package/src/utils/applyMediaTags.ts

@@ -0,0 +1,86 @@
+import type {SanityClient} from '@sanity/client'
+import groq from 'groq'
+import {nanoid} from 'nanoid'
+import {TAG_DOCUMENT_NAME} from '../constants'
+import type {Tag} from '../types'
+
+type ApplyMediaTagsOptions = {
+  client: SanityClient
+  assetId: string
+  mediaTags: string[]
+  createTagsOnUpload?: boolean
+}
+
+// Serialize calls per asset so concurrent fields reading the same asset
+// don't race each other — the second call always runs after the first commits.
+const pendingByAsset = new Map<string, Promise<void>>()
+
+export function applyMediaTags(options: ApplyMediaTagsOptions): Promise<void> {
+  const {assetId} = options
+  const chain = (pendingByAsset.get(assetId) ?? Promise.resolve()).then(() =>
+    doApplyMediaTags(options)
+  )
+  const cleanup = chain
+    .catch(() => {})
+    .finally(() => {
+      if (pendingByAsset.get(assetId) === cleanup) pendingByAsset.delete(assetId)
+    })
+  pendingByAsset.set(assetId, cleanup)
+  return chain
+}
+
+async function doApplyMediaTags({
+  client,
+  assetId,
+  mediaTags,
+  createTagsOnUpload = true
+}: ApplyMediaTagsOptions): Promise<void> {
+  if (!mediaTags || mediaTags.length === 0) return
+
+  const resolvedTags = await Promise.all(
+    mediaTags.map(async tagName => {
+      const existingTag = await client.fetch<Tag | null>(
+        groq`*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $tagName][0]`,
+        {tagName}
+      )
+      if (existingTag) return existingTag
+      if (createTagsOnUpload) {
+        const newTag = await client.create({
+          _type: TAG_DOCUMENT_NAME,
+          name: {_type: 'slug', current: tagName}
+        })
+        return newTag as Tag
+      }
+      return null
+    })
+  )
+
+  const validTags = resolvedTags.filter((tag): tag is Tag => tag !== null)
+  if (validTags.length === 0) return
+
+  const existing = await client.fetch<{tagIds: string[]} | null>(
+    groq`*[_id == $assetId][0]{'tagIds': opt.media.tags[]._ref}`,
+    {assetId},
+    {useCdn: false} // bypass CDN cache so we see the latest committed tag refs
+  )
+  const existingIds = new Set(existing?.tagIds ?? [])
+
+  const tagReferences = validTags
+    .filter(tag => !existingIds.has(tag._id))
+    .map(tag => ({
+      _key: nanoid(),
+      _ref: tag._id,
+      _type: 'reference' as const,
+      _weak: true
+    }))
+
+  if (tagReferences.length === 0) return
+
+  await client
+    .patch(assetId)
+    .setIfMissing({opt: {}})
+    .setIfMissing({'opt.media': {}})
+    .setIfMissing({'opt.media.tags': []})
+    .append('opt.media.tags', tagReferences)
+    .commit()
+}

package/src/utils/mediaField.ts

@@ -0,0 +1,72 @@
+import type {
+  FieldDefinitionBase,
+  FileDefinition,
+  ImageDefinition,
+  WidenInitialValue,
+  WidenValidation
+} from 'sanity'
+import {AutoTagInput} from '../components/AutoTagInputWrapper'
+
+type ImageMediaFieldConfig = Omit<ImageDefinition, 'options'> &
+  FieldDefinitionBase & {
+    name: string
+    mediaTags: string[]
+    options?: ImageDefinition['options']
+  }
+
+type FileMediaFieldConfig = Omit<FileDefinition, 'options'> &
+  FieldDefinitionBase & {
+    name: string
+    mediaTags: string[]
+    options?: FileDefinition['options']
+  }
+
+type ImageMediaFieldResult = Omit<ImageDefinition, 'options'> &
+  FieldDefinitionBase & {
+    options?: ImageDefinition['options'] & {mediaTags: string[]}
+    components: {input: typeof AutoTagInput}
+  } & WidenValidation &
+  WidenInitialValue
+
+type FileMediaFieldResult = Omit<FileDefinition, 'options'> &
+  FieldDefinitionBase & {
+    options?: FileDefinition['options'] & {mediaTags: string[]}
+    components: {input: typeof AutoTagInput}
+  } & WidenValidation &
+  WidenInitialValue
+
+/**
+ * Defines an image or file field with automatic media tag application when an asset is selected.
+ *
+ * Pass `mediaTags` at the top level — they are moved into `options.mediaTags` (for media browser
+ * pre-filtering) and wire up {@link AutoTagInput} as the field component automatically:
+ * ```ts
+ * import {mediaField} from 'sanity-plugin-media'
+ *
+ * mediaField({
+ *   name: 'coverImage',
+ *   type: 'image',
+ *   mediaTags: ['product-cover'],
+ *   options: { hotspot: true },
+ * })
+ * ```
+ *
+ * For file fields, set `type: 'file'`:
+ * ```ts
+ * mediaField({ name: 'drawing', type: 'file', mediaTags: ['model-drawing'] })
+ * ```
+ */
+export function mediaField(config: ImageMediaFieldConfig): ImageMediaFieldResult
+export function mediaField(config: FileMediaFieldConfig): FileMediaFieldResult
+export function mediaField(
+  config: ImageMediaFieldConfig | FileMediaFieldConfig
+): ImageMediaFieldResult | FileMediaFieldResult {
+  const {mediaTags, options, components, ...rest} = config as ImageMediaFieldConfig & {
+    components?: Record<string, unknown>
+  }
+  return {
+    ...rest,
+    options: {...options, mediaTags},
+    components: {...components, input: AutoTagInput}
+  } as unknown as ImageMediaFieldResult
+}