sanity-plugin-media 4.3.0 → 4.3.2

package/src/styled/react-select/single.tsx

@@ -2,14 +2,15 @@ import {CloseIcon} from '@sanity/icons'
 import {Box, Card, rem, studioTheme, Text, type ThemeColorSchemeKey} from '@sanity/ui'
 import {components, type StylesConfig} from 'react-select'
 import {Virtuoso} from 'react-virtuoso'
+
 import {getSchemeColor} from '../../utils/getSchemeColor'
 
 const {
   fonts: {
-    text: {sizes: themeTextSizes}
+    text: {sizes: themeTextSizes},
   },
   radius: themeRadius,
-  space: themeSpace
+  space: themeSpace,
 } = studioTheme
 
 export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
@@ -24,70 +25,70 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
 
       return {
         ...styles,
-        backgroundColor: 'var(--card-bg-color)',
-        color: 'inherit',
-        border: 'none',
-        borderRadius: themeRadius[2],
+        'backgroundColor': 'var(--card-bg-color)',
+        'color': 'inherit',
+        'border': 'none',
+        'borderRadius': themeRadius[2],
         boxShadow,
-        fontSize: themeTextSizes[1].fontSize,
-        minHeight: '25px',
-        opacity: isDisabled ? 0.5 : 'inherit',
-        outline: 'none',
-        transition: 'none',
+        'fontSize': themeTextSizes[1].fontSize,
+        'minHeight': '25px',
+        'opacity': isDisabled ? 0.5 : 'inherit',
+        'outline': 'none',
+        'transition': 'none',
         '&:hover': {
-          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`
-        }
+          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`,
+        },
       }
     },
-    input: styles => ({
+    input: (styles) => ({
       ...styles,
       color: 'var(--card-fg-color)',
       fontFamily: studioTheme.fonts.text.family,
       fontSize: themeTextSizes[1].fontSize,
-      marginLeft: rem(themeSpace[2])
+      marginLeft: rem(themeSpace[2]),
     }),
-    menuList: styles => ({
+    menuList: (styles) => ({
       ...styles,
-      padding: 0
+      padding: 0,
     }),
-    noOptionsMessage: styles => ({
+    noOptionsMessage: (styles) => ({
       ...styles,
       fontFamily: studioTheme.fonts.text.family,
       fontSize: themeTextSizes[1].fontSize,
-      lineHeight: '1em'
+      lineHeight: '1em',
     }),
     option: (styles, {isFocused}) => ({
       ...styles,
-      backgroundColor: isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
-      borderRadius: themeRadius[2],
-      color: isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
-      fontSize: themeTextSizes[1].fontSize,
-      lineHeight: '1em',
-      margin: 0,
-      padding: rem(themeSpace[1]),
+      'backgroundColor': isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
+      'borderRadius': themeRadius[2],
+      'color': isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
+      'fontSize': themeTextSizes[1].fontSize,
+      'lineHeight': '1em',
+      'margin': 0,
+      'padding': rem(themeSpace[1]),
       '&:hover': {
         backgroundColor: getSchemeColor(scheme, 'spotBlue'),
-        color: getSchemeColor(scheme, 'bg')
-      }
+        color: getSchemeColor(scheme, 'bg'),
+      },
     }),
-    placeholder: styles => ({
+    placeholder: (styles) => ({
       ...styles,
       fontSize: themeTextSizes[1].fontSize,
       marginLeft: rem(themeSpace[2]),
-      paddingLeft: 0
+      paddingLeft: 0,
     }),
-    singleValue: styles => ({
+    singleValue: (styles) => ({
       ...styles,
       alignItems: 'center',
       display: 'inline-flex',
       height: '100%',
-      marginLeft: rem(themeSpace[2])
+      marginLeft: rem(themeSpace[2]),
     }),
-    valueContainer: styles => ({
+    valueContainer: (styles) => ({
       ...styles,
       margin: 0,
-      padding: 0
-    })
+      padding: 0,
+    }),
   }
 }
 
@@ -97,7 +98,7 @@ const ClearIndicator = (props: any) => {
       <Box
         paddingRight={1}
         style={{
-          transform: 'scale(0.85)'
+          transform: 'scale(0.85)',
         }}
       >
         <Text muted size={0}>
@@ -131,7 +132,7 @@ const MenuList = (props: any) => {
     return (
       <Virtuoso
         className="media__custom-scrollbar"
-        itemContent={index => {
+        itemContent={(index) => {
           const item = children[index]
           return <Option {...item.props} />
         }}
@@ -179,5 +180,5 @@ export const reactSelectComponents = {
   MenuList,
   NoOptionsMessage,
   Option,
-  SingleValue
+  SingleValue,
 }

package/src/types/index.ts

@@ -3,15 +3,16 @@ import type {
   SanityAssetDocument,
   SanityClient,
   SanityDocument,
-  SanityImageAssetDocument
+  SanityImageAssetDocument,
 } from '@sanity/client'
 import type {ComponentType, JSX} from 'react'
 import type {Epic} from 'redux-observable'
 import * as z from 'zod'
-import {getAssetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
-import type {RootReducerState} from '../modules/types'
+
 import type {DetailsProps} from '../components/DialogAssetEdit/Details'
 import type {SUPPORTED_ASSET_TYPES} from '../constants'
+import {getAssetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
+import type {RootReducerState} from '../modules/types'
 
 export type AssetTypes = (typeof SUPPORTED_ASSET_TYPES)[number]
 

package/src/utils/applyMediaTags.ts

@@ -1,6 +1,7 @@
 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'
 
@@ -18,7 +19,7 @@ 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)
+    doApplyMediaTags(options),
   )
   const cleanup = chain
     .catch(() => {})
@@ -33,26 +34,26 @@ async function doApplyMediaTags({
   client,
   assetId,
   mediaTags,
-  createTagsOnUpload = true
+  createTagsOnUpload = true,
 }: ApplyMediaTagsOptions): Promise<void> {
   if (!mediaTags || mediaTags.length === 0) return
 
   const resolvedTags = await Promise.all(
-    mediaTags.map(async tagName => {
+    mediaTags.map(async (tagName) => {
       const existingTag = await client.fetch<Tag | null>(
         groq`*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $tagName][0]`,
-        {tagName}
+        {tagName},
       )
       if (existingTag) return existingTag
       if (createTagsOnUpload) {
         const newTag = await client.create({
           _type: TAG_DOCUMENT_NAME,
-          name: {_type: 'slug', current: tagName}
+          name: {_type: 'slug', current: tagName},
         })
         return newTag as Tag
       }
       return null
-    })
+    }),
   )
 
   const validTags = resolvedTags.filter((tag): tag is Tag => tag !== null)
@@ -61,17 +62,17 @@ async function doApplyMediaTags({
   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
+    {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 => ({
+    .filter((tag) => !existingIds.has(tag._id))
+    .map((tag) => ({
       _key: nanoid(),
       _ref: tag._id,
       _type: 'reference' as const,
-      _weak: true
+      _weak: true,
     }))
 
   if (tagReferences.length === 0) return

package/src/utils/blocksToText.test.ts

@@ -1,6 +1,7 @@
 import {describe, expect, it} from 'vitest'
-import blocksToText from './blocksToText'
+
 import type {Block} from '../types'
+import blocksToText from './blocksToText'
 
 describe('blocksToText', () => {
   it('returns plain strings unchanged', () => {
@@ -18,14 +19,14 @@ describe('blocksToText', () => {
         _type: 'block',
         _key: 'a',
         markDefs: [],
-        children: [{_key: 'a1', text: 'Line one', marks: []}]
+        children: [{_key: 'a1', text: 'Line one', marks: []}],
       },
       {
         _type: 'block',
         _key: 'b',
         markDefs: [],
-        children: [{_key: 'b1', text: 'Line two', marks: []}]
-      }
+        children: [{_key: 'b1', text: 'Line two', marks: []}],
+      },
     ]
     expect(blocksToText(blocks)).toBe('Line one\n\nLine two')
   })

package/src/utils/blocksToText.ts

@@ -16,12 +16,12 @@ export default function (blocks: string | Block[] = '', opts = {}) {
 
   const options = Object.assign({}, defaults, opts)
   return blocks
-    .map(block => {
+    .map((block) => {
       if (block._type !== 'block' || !block.children) {
         return options.nonTextBehavior === 'remove' ? '' : `[${block._type} block]`
       }
 
-      return block.children.map(child => child.text).join('')
+      return block.children.map((child) => child.text).join('')
     })
     .join('\n\n')
 }

package/src/utils/constructFilter.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment node
 
 import {describe, expect, it} from 'vitest'
+
 import {inputs} from '../config/searchFacets'
 import type {SearchFacetInputProps} from '../types'
 import constructFilter from './constructFilter'
@@ -10,7 +11,7 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['image', 'file'],
       searchFacets: [],
-      searchQuery: undefined
+      searchQuery: undefined,
     })
 
     expect(q).toContain('_type in ["sanity.imageAsset","sanity.fileAsset"]')
@@ -21,7 +22,7 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['image'],
       searchFacets: [],
-      searchQuery: undefined
+      searchQuery: undefined,
     })
 
     expect(q).toContain('_type in ["sanity.imageAsset"]')
@@ -31,11 +32,11 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['file', 'image'],
       searchFacets: [],
-      searchQuery: '  hello  '
+      searchQuery: '  hello  ',
     })
 
     expect(q).toContain(
-      "[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*hello*'"
+      "[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*hello*'",
     )
   })
 
@@ -43,7 +44,7 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['image'],
       searchFacets: [{...inputs.size, value: 500} as SearchFacetInputProps],
-      searchQuery: undefined
+      searchQuery: undefined,
     })
 
     expect(q.replace(/\s+/g, ' ')).toContain('round(size / 1000) > 500')
@@ -53,13 +54,13 @@ describe('constructFilter', () => {
     const facet = {
       ...inputs.tag,
       operatorType: 'references' as const,
-      value: {label: 'T', value: 'tag-id-1'}
+      value: {label: 'T', value: 'tag-id-1'},
     } as SearchFacetInputProps
 
     const q = constructFilter({
       assetTypes: ['image', 'file'],
       searchFacets: [facet],
-      searchQuery: undefined
+      searchQuery: undefined,
     })
 
     expect(q).toContain("references('tag-id-1')")
@@ -69,7 +70,7 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['image', 'file'],
       searchFacets: [structuredClone(inputs.inUse)],
-      searchQuery: undefined
+      searchQuery: undefined,
     })
 
     expect(q).toContain('count(*[references(^._id)]) > 0')
@@ -79,7 +80,7 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['image', 'file'],
       searchFacets: [{...inputs.title}, {...inputs.inUse}],
-      searchQuery: 'x'
+      searchQuery: 'x',
     })
 
     const parts = q.split(' && ')
@@ -94,16 +95,16 @@ describe('constructFilter', () => {
         {
           ...inputs.tag,
           operatorType: 'references',
-          value: {label: 'Example', value: 'abc123'}
-        } as SearchFacetInputProps
+          value: {label: 'Example', value: 'abc123'},
+        } as SearchFacetInputProps,
       ],
-      searchQuery: 'portrait'
+      searchQuery: 'portrait',
     })
 
     const normalized = q.replace(/\s+/g, ' ').trim()
 
     expect(normalized).toBe(
-      '_type in ["sanity.fileAsset","sanity.imageAsset"] && !(_id in path("drafts.**")) && [_id, altText, assetId, creditLine, description, originalFilename, title, url] match \'*portrait*\' && round(size / 1000) > 100 && references(\'abc123\')'
+      '_type in ["sanity.fileAsset","sanity.imageAsset"] && !(_id in path("drafts.**")) && [_id, altText, assetId, creditLine, description, originalFilename, title, url] match \'*portrait*\' && round(size / 1000) > 100 && references(\'abc123\')',
     )
   })
 
@@ -111,7 +112,7 @@ describe('constructFilter', () => {
     const q = constructFilter({
       assetTypes: ['image', 'file'],
       searchFacets: [],
-      searchQuery: undefined
+      searchQuery: undefined,
     })
 
     expect(q).not.toContain('match ')

package/src/utils/constructFilter.ts

@@ -1,12 +1,12 @@
-import type {AssetType, SearchFacetInputProps} from '../types'
 import groq from 'groq'
 
 import {operators} from '../config/searchFacets'
+import type {AssetType, SearchFacetInputProps} from '../types'
 
 const constructFilter = ({
   assetTypes,
   searchFacets,
-  searchQuery
+  searchQuery,
 }: {
   assetTypes: AssetType[]
   searchFacets: SearchFacetInputProps[]
@@ -15,7 +15,7 @@ const constructFilter = ({
   // Fetch asset types depending on current context.
   // Either limit to a specific type (if being used as a custom asset source) or fetch both files and images (if being used as a tool)
   // Sanity will crash if you try and insert incompatible asset types into fields!
-  const documentAssetTypes = assetTypes.map(type => `sanity.${type}Asset`)
+  const documentAssetTypes = assetTypes.map((type) => `sanity.${type}Asset`)
 
   const baseFilter = groq`
     _type in ${JSON.stringify(documentAssetTypes)} && !(_id in path("drafts.**"))
@@ -27,7 +27,7 @@ const constructFilter = ({
       const operator = operators[operatorType]
 
       // Get current modifier
-      const currentModifier = modifiers?.find(m => m.name === modifier)
+      const currentModifier = modifiers?.find((m) => m.name === modifier)
 
       // Apply field modifier function (if present)
       const facetField = currentModifier?.fieldModifier
@@ -54,7 +54,7 @@ const constructFilter = ({
       const {field, operatorType, options, value} = facet
       const operator = operators[operatorType]
 
-      const currentOptionValue = options?.find(l => l.name === value)?.value
+      const currentOptionValue = options?.find((l) => l.name === value)?.value
 
       const fragment = operator.fn(currentOptionValue, field)
       if (fragment) {
@@ -85,11 +85,11 @@ const constructFilter = ({
     // references(*[_type == "media.tag" && name.current == "${searchQuery.trim()}"]._id)
     ...(searchQuery
       ? [
-          groq`[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`
+          groq`[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`,
         ]
       : []),
     // Search facets
-    ...searchFacetFragments
+    ...searchFacetFragments,
   ].join(' && ')
 
   return constructedQuery

package/src/utils/generatePreviewBlobUrl.test.ts

@@ -1,5 +1,6 @@
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {firstValueFrom} from 'rxjs'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
 import {generatePreviewBlobUrl$} from './generatePreviewBlobUrl'
 
 describe('generatePreviewBlobUrl$', () => {
@@ -25,7 +26,7 @@ describe('generatePreviewBlobUrl$', () => {
       if (tagName === 'canvas') {
         const el = origCreateElement('canvas')
         vi.spyOn(el, 'getContext').mockReturnValue({
-          drawImage: vi.fn()
+          drawImage: vi.fn(),
         } as unknown as CanvasRenderingContext2D)
         /* eslint-disable callback-return, consistent-return -- HTMLCanvasElement#toBlob sync test stub */
         el.toBlob = function toBlob(cb: ((blob: Blob | null) => void) | null | undefined) {
@@ -44,12 +45,12 @@ describe('generatePreviewBlobUrl$', () => {
     Object.defineProperty(URL, 'createObjectURL', {
       configurable: true,
       writable: true,
-      value: createObjectURL
+      value: createObjectURL,
     })
     Object.defineProperty(URL, 'revokeObjectURL', {
       configurable: true,
       writable: true,
-      value: revokeObjectURL
+      value: revokeObjectURL,
     })
   })
 
@@ -62,7 +63,7 @@ describe('generatePreviewBlobUrl$', () => {
 
   it('emits a blob URL when canvas preview succeeds', async () => {
     const url = await firstValueFrom(
-      generatePreviewBlobUrl$(new File(['x'], 'photo.jpg', {type: 'image/jpeg'}))
+      generatePreviewBlobUrl$(new File(['x'], 'photo.jpg', {type: 'image/jpeg'})),
     )
     expect(url).toBe('blob:mock-preview')
   })

package/src/utils/generatePreviewBlobUrl.ts

@@ -4,7 +4,7 @@ import {mergeMap} from 'rxjs/operators'
 const PREVIEW_WIDTH = 180 // px
 
 const createBlob = (img: HTMLImageElement): Promise<Blob | null> => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const imageAspect = img.width / img.height
 
     // Create a canvas element which we'll use to generate a low resolution preview.
@@ -26,7 +26,7 @@ const createBlob = (img: HTMLImageElement): Promise<Blob | null> => {
 }
 
 const createImageEl = (file: File): Promise<HTMLImageElement> => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const blobUrlLarge = window.URL.createObjectURL(file)
     const img = new Image()
     img.onload = () => {

package/src/utils/getAssetResolution.test.ts

@@ -1,11 +1,12 @@
 import {describe, expect, it} from 'vitest'
-import getAssetResolution from './getAssetResolution'
+
 import type {ImageAsset} from '../types'
+import getAssetResolution from './getAssetResolution'
 
 describe('getAssetResolution', () => {
   it('formats width x height with px suffix', () => {
     const asset = {
-      metadata: {dimensions: {width: 1920, height: 1080}}
+      metadata: {dimensions: {width: 1920, height: 1080}},
     } as ImageAsset
     expect(getAssetResolution(asset)).toBe('1920x1080px')
   })

package/src/utils/getDocumentAssetIds.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment node
 
 import {describe, expect, it} from 'vitest'
+
 import getDocumentAssetIds from './getDocumentAssetIds'
 
 describe('getDocumentAssetIds', () => {
@@ -15,9 +16,9 @@ describe('getDocumentAssetIds', () => {
       body: [
         {
           _type: 'block',
-          asset: {_type: 'reference', _ref: 'image-asset-1'}
-        }
-      ]
+          asset: {_type: 'reference', _ref: 'image-asset-1'},
+        },
+      ],
     } as any
 
     expect(getDocumentAssetIds(doc)).toEqual(['image-asset-1'])
@@ -30,8 +31,8 @@ describe('getDocumentAssetIds', () => {
       modules: [
         {image: {asset: {_type: 'reference', _ref: 'b'}}},
         {image: {asset: {_type: 'reference', _ref: 'a'}}},
-        {image: {asset: {_type: 'reference', _ref: 'b'}}}
-      ]
+        {image: {asset: {_type: 'reference', _ref: 'b'}}},
+      ],
     } as any
 
     expect(getDocumentAssetIds(doc)).toEqual(['a', 'b'])
@@ -41,7 +42,7 @@ describe('getDocumentAssetIds', () => {
     const doc = {
       _id: 'doc1',
       _type: 'post',
-      author: {_type: 'reference', _ref: 'person-1'}
+      author: {_type: 'reference', _ref: 'person-1'},
     } as any
 
     expect(getDocumentAssetIds(doc)).toEqual([])

package/src/utils/getDocumentAssetIds.ts

@@ -6,7 +6,7 @@ const isPlainObject = (value: any) =>
 // Recursively search node for any linked asset ids (`asset._type === 'reference'`)
 const getAssetIds = (node: Record<string, any>, acc: string[] = []) => {
   if (Array.isArray(node)) {
-    node.forEach(v => {
+    node.forEach((v) => {
       getAssetIds(v, acc)
     })
   }
@@ -16,7 +16,7 @@ const getAssetIds = (node: Record<string, any>, acc: string[] = []) => {
       acc.push(node.asset._ref)
     }
 
-    Object.values(node).forEach(val => {
+    Object.values(node).forEach((val) => {
       getAssetIds(val, acc)
     })
   }

package/src/utils/getSchemeColor.test.ts

@@ -1,4 +1,5 @@
 import {describe, expect, it} from 'vitest'
+
 import {getSchemeColor} from './getSchemeColor'
 
 describe('getSchemeColor', () => {

package/src/utils/getSchemeColor.ts

@@ -4,36 +4,36 @@ import {type ThemeColorSchemeKey, studioTheme} from '@sanity/ui'
 const SCHEME_COLORS = {
   bg: {
     dark: hues.gray[950].hex,
-    light: hues.gray[50].hex
+    light: hues.gray[50].hex,
   },
   bg2: {
     dark: hues.gray[900].hex,
-    light: hues.gray[100].hex
+    light: hues.gray[100].hex,
   },
   inputEnabledBorder: {
     dark: studioTheme.color.dark.default.input.default.enabled.border,
-    light: studioTheme.color.light.default.input.default.enabled.border
+    light: studioTheme.color.light.default.input.default.enabled.border,
   },
   inputHoveredBorder: {
     dark: studioTheme.color.dark.default.input.default.hovered.border,
-    light: studioTheme.color.light.default.input.default.hovered.border
+    light: studioTheme.color.light.default.input.default.hovered.border,
   },
   mutedHoveredBg: {
     dark: studioTheme.color.dark.primary.muted.primary.hovered.bg,
-    light: studioTheme.color.light.primary.muted.primary.hovered.bg
+    light: studioTheme.color.light.primary.muted.primary.hovered.bg,
   },
   mutedHoveredFg: {
     dark: studioTheme.color.dark.primary.muted.primary.hovered.fg,
-    light: studioTheme.color.light.primary.muted.primary.hovered.fg
+    light: studioTheme.color.light.primary.muted.primary.hovered.fg,
   },
   mutedSelectedBg: {
     dark: studioTheme.color.dark.primary.muted.primary.selected.bg,
-    light: studioTheme.color.light.primary.muted.primary.selected.bg
+    light: studioTheme.color.light.primary.muted.primary.selected.bg,
   },
   spotBlue: {
     dark: studioTheme.color.dark.primary.spot.blue,
-    light: studioTheme.color.light.primary.spot.blue
-  }
+    light: studioTheme.color.light.primary.spot.blue,
+  },
 }
 
 type SchemeColorKey = keyof typeof SCHEME_COLORS