sanity-plugin-media 4.3.5 → 5.0.0

package/src/utils/constructFilter.ts

@@ -1,98 +0,0 @@
-import groq from 'groq'
-
-import {operators} from '../config/searchFacets'
-import type {AssetType, SearchFacetInputProps} from '../types'
-
-const constructFilter = ({
-  assetTypes,
-  searchFacets,
-  searchQuery,
-}: {
-  assetTypes: AssetType[]
-  searchFacets: SearchFacetInputProps[]
-  searchQuery?: string
-}): string => {
-  // 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 baseFilter = groq`
-    _type in ${JSON.stringify(documentAssetTypes)} && !(_id in path("drafts.**"))
-  `
-
-  const searchFacetFragments = searchFacets.reduce((acc: string[], facet) => {
-    if (facet.type === 'number') {
-      const {field, modifier, modifiers, operatorType, value} = facet
-      const operator = operators[operatorType]
-
-      // Get current modifier
-      const currentModifier = modifiers?.find((m) => m.name === modifier)
-
-      // Apply field modifier function (if present)
-      const facetField = currentModifier?.fieldModifier
-        ? currentModifier.fieldModifier(field)
-        : field
-
-      const fragment = operator.fn(value, facetField)
-      if (fragment) {
-        acc.push(fragment)
-      }
-    }
-
-    if (facet.type === 'searchable') {
-      const {field, operatorType, value} = facet
-      const operator = operators[operatorType]
-
-      const fragment = operator.fn(value?.value, field)
-      if (fragment) {
-        acc.push(fragment)
-      }
-    }
-
-    if (facet.type === 'select') {
-      const {field, operatorType, options, value} = facet
-      const operator = operators[operatorType]
-
-      const currentOptionValue = options?.find((l) => l.name === value)?.value
-
-      const fragment = operator.fn(currentOptionValue, field)
-      if (fragment) {
-        acc.push(fragment)
-      }
-    }
-
-    if (facet.type === 'string') {
-      const {field, operatorType, value} = facet
-      const operator = operators[operatorType]
-
-      const fragment = operator.fn(value, field)
-      if (fragment) {
-        acc.push(fragment)
-      }
-    }
-
-    return acc
-  }, [])
-
-  // Join separate filter fragments
-  const constructedQuery = [
-    // Base filter
-    baseFilter,
-    // Search query (if present)
-    // NOTE: Currently this only searches direct fields on sanity.fileAsset/sanity.imageAsset and NOT referenced tags
-    // It's possible to add this by adding the following line to the searchQuery, but it's quite slow
-    // references(*[_type == "media.tag" && name.current == "${searchQuery.trim()}"]._id)
-    ...(searchQuery
-      ? [
-          groq`[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`,
-        ]
-      : []),
-    // Search facets
-    ...searchFacetFragments,
-  ].join(' && ')
-
-  return constructedQuery
-}
-
-export default constructFilter

package/src/utils/generatePreviewBlobUrl.test.ts

@@ -1,70 +0,0 @@
-import {firstValueFrom} from 'rxjs'
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {generatePreviewBlobUrl$} from './generatePreviewBlobUrl'
-
-describe('generatePreviewBlobUrl$', () => {
-  const origCreateElement = document.createElement.bind(document)
-
-  beforeEach(() => {
-    class MockImage {
-      onload: (() => void) | null = null
-      width = 400
-      height = 200
-      private _src = ''
-      get src() {
-        return this._src
-      }
-      set src(v: string) {
-        this._src = v
-        queueMicrotask(() => this.onload?.())
-      }
-    }
-    vi.stubGlobal('Image', MockImage)
-
-    vi.spyOn(document, 'createElement').mockImplementation((tagName: string) => {
-      if (tagName === 'canvas') {
-        const el = origCreateElement('canvas')
-        vi.spyOn(el, 'getContext').mockReturnValue({
-          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) {
-          if (cb) {
-            cb(new Blob(['x'], {type: 'image/jpeg'}))
-          }
-        }
-        /* eslint-enable callback-return, consistent-return */
-        return el
-      }
-      return origCreateElement(tagName)
-    })
-
-    const createObjectURL = vi.fn(() => 'blob:mock-preview')
-    const revokeObjectURL = vi.fn()
-    Object.defineProperty(URL, 'createObjectURL', {
-      configurable: true,
-      writable: true,
-      value: createObjectURL,
-    })
-    Object.defineProperty(URL, 'revokeObjectURL', {
-      configurable: true,
-      writable: true,
-      value: revokeObjectURL,
-    })
-  })
-
-  afterEach(() => {
-    vi.unstubAllGlobals()
-    vi.restoreAllMocks()
-    delete (URL as Partial<typeof URL> & {createObjectURL?: unknown}).createObjectURL
-    delete (URL as Partial<typeof URL> & {revokeObjectURL?: unknown}).revokeObjectURL
-  })
-
-  it('emits a blob URL when canvas preview succeeds', async () => {
-    const url = await firstValueFrom(
-      generatePreviewBlobUrl$(new File(['x'], 'photo.jpg', {type: 'image/jpeg'})),
-    )
-    expect(url).toBe('blob:mock-preview')
-  })
-})

package/src/utils/generatePreviewBlobUrl.ts

@@ -1,53 +0,0 @@
-import {Observable, from, of} from 'rxjs'
-import {mergeMap} from 'rxjs/operators'
-
-const PREVIEW_WIDTH = 180 // px
-
-const createBlob = (img: HTMLImageElement): Promise<Blob | null> => {
-  return new Promise((resolve) => {
-    const imageAspect = img.width / img.height
-
-    // Create a canvas element which we'll use to generate a low resolution preview.
-    // Ensure that the canvas is at least 1 pixel high as blob generation will fail otherwise.
-    const canvas: HTMLCanvasElement = document.createElement('canvas')
-    canvas.width = PREVIEW_WIDTH
-    canvas.height = Math.max(PREVIEW_WIDTH / imageAspect, 1)
-
-    // Fail silently if we're unable to generate a preview image.
-    // This can often be the case when trying to render SVGs containing `<foreignObject>` elements.
-    try {
-      const ctx = canvas.getContext('2d')
-      ctx?.drawImage(img, 0, 0, PREVIEW_WIDTH, PREVIEW_WIDTH / imageAspect)
-      canvas.toBlob(resolve, 'image/jpeg')
-    } catch (err) {
-      console.warn(`Unable to generate preview image:`, err)
-    }
-  })
-}
-
-const createImageEl = (file: File): Promise<HTMLImageElement> => {
-  return new Promise((resolve) => {
-    const blobUrlLarge = window.URL.createObjectURL(file)
-    const img = new Image()
-    img.onload = () => {
-      window.URL.revokeObjectURL(blobUrlLarge)
-      resolve(img)
-    }
-    img.src = blobUrlLarge
-  })
-}
-
-const generatePreviewBlobUrl = async (file: File): Promise<string> => {
-  const imageEl = await createImageEl(file)
-  const blob = await createBlob(imageEl)
-
-  if (!blob) {
-    throw Error('Unable to generate file Blob')
-  }
-
-  return window.URL.createObjectURL(blob)
-}
-
-export const generatePreviewBlobUrl$ = (file: File): Observable<string> => {
-  return of(null).pipe(mergeMap(() => from(generatePreviewBlobUrl(file))))
-}

package/src/utils/getAssetResolution.test.ts

@@ -1,13 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-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}},
-    } as ImageAsset
-    expect(getAssetResolution(asset)).toBe('1920x1080px')
-  })
-})

package/src/utils/getAssetResolution.ts

@@ -1,7 +0,0 @@
-import type {ImageAsset} from '../types'
-
-const getAssetResolution = (asset: ImageAsset) => {
-  return `${asset.metadata.dimensions.width}x${asset.metadata.dimensions.height}px`
-}
-
-export default getAssetResolution

package/src/utils/getDocumentAssetIds.test.ts

@@ -1,50 +0,0 @@
-// @vitest-environment node
-
-import {describe, expect, it} from 'vitest'
-
-import getDocumentAssetIds from './getDocumentAssetIds'
-
-describe('getDocumentAssetIds', () => {
-  it('returns empty array for document without asset refs', () => {
-    expect(getDocumentAssetIds({_id: 'doc1', _type: 'post'} as any)).toEqual([])
-  })
-
-  it('collects asset _ref from nested portable text–like structures', () => {
-    const doc = {
-      _id: 'doc1',
-      _type: 'post',
-      body: [
-        {
-          _type: 'block',
-          asset: {_type: 'reference', _ref: 'image-asset-1'},
-        },
-      ],
-    } as any
-
-    expect(getDocumentAssetIds(doc)).toEqual(['image-asset-1'])
-  })
-
-  it('dedupes and sorts refs', () => {
-    const doc = {
-      _id: 'doc1',
-      _type: 'post',
-      modules: [
-        {image: {asset: {_type: 'reference', _ref: 'b'}}},
-        {image: {asset: {_type: 'reference', _ref: 'a'}}},
-        {image: {asset: {_type: 'reference', _ref: 'b'}}},
-      ],
-    } as any
-
-    expect(getDocumentAssetIds(doc)).toEqual(['a', 'b'])
-  })
-
-  it('ignores reference nodes that are not asset references', () => {
-    const doc = {
-      _id: 'doc1',
-      _type: 'post',
-      author: {_type: 'reference', _ref: 'person-1'},
-    } as any
-
-    expect(getDocumentAssetIds(doc)).toEqual([])
-  })
-})

package/src/utils/getDocumentAssetIds.ts

@@ -1,35 +0,0 @@
-import type {SanityDocument} from '@sanity/client'
-
-const isPlainObject = (value: any) =>
-  value !== null && typeof value === 'object' && !Array.isArray(value)
-
-// 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) => {
-      getAssetIds(v, acc)
-    })
-  }
-
-  if (isPlainObject(node)) {
-    if (node?.asset?._type === 'reference' && node?.asset?._ref) {
-      acc.push(node.asset._ref)
-    }
-
-    Object.values(node).forEach((val) => {
-      getAssetIds(val, acc)
-    })
-  }
-
-  return acc
-}
-
-// Retrieve all linked asset ids from a Sanity document
-const getDocumentAssetIds = (document: SanityDocument): string[] => {
-  const assetIds = getAssetIds(document)
-
-  // Sort and dedupe
-  return [...new Set(assetIds.sort())]
-}
-
-export default getDocumentAssetIds

package/src/utils/getSchemeColor.test.ts

@@ -1,12 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-import {getSchemeColor} from './getSchemeColor'
-
-describe('getSchemeColor', () => {
-  it('returns a hex or theme string for light and dark schemes', () => {
-    expect(getSchemeColor('light', 'bg')).toMatch(/^#/)
-    expect(getSchemeColor('dark', 'bg')).toMatch(/^#/)
-    expect(getSchemeColor('light', 'spotBlue')).toBeTruthy()
-    expect(getSchemeColor('dark', 'inputEnabledBorder')).toBeTruthy()
-  })
-})

package/src/utils/getSchemeColor.ts

@@ -1,43 +0,0 @@
-import {hues} from '@sanity/color'
-import {type ThemeColorSchemeKey, studioTheme} from '@sanity/ui'
-
-const SCHEME_COLORS = {
-  bg: {
-    dark: hues.gray[950].hex,
-    light: hues.gray[50].hex,
-  },
-  bg2: {
-    dark: hues.gray[900].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,
-  },
-  inputHoveredBorder: {
-    dark: studioTheme.color.dark.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,
-  },
-  mutedHoveredFg: {
-    dark: studioTheme.color.dark.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,
-  },
-  spotBlue: {
-    dark: studioTheme.color.dark.primary.spot.blue,
-    light: studioTheme.color.light.primary.spot.blue,
-  },
-}
-
-type SchemeColorKey = keyof typeof SCHEME_COLORS
-
-export function getSchemeColor(scheme: ThemeColorSchemeKey, colorKey: SchemeColorKey): string {
-  return SCHEME_COLORS[colorKey]?.[scheme]
-}

package/src/utils/getTagSelectOptions.test.ts

@@ -1,44 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-import type {Tag, TagItem} from '../types'
-import getTagSelectOptions from './getTagSelectOptions'
-
-function tagItem(partial: Partial<TagItem> & Pick<TagItem, 'tag'>): TagItem {
-  return {
-    _type: 'tag',
-    picked: false,
-    updating: false,
-    ...partial,
-  }
-}
-
-const makeTag = (id: string, name: string): Tag => ({
-  _id: id,
-  _type: 'media.tag',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  name: {_type: 'slug', current: name},
-})
-
-describe('getTagSelectOptions', () => {
-  it('maps tag items to label/value options', () => {
-    const tags = [tagItem({tag: makeTag('t1', 'alpha')}), tagItem({tag: makeTag('t2', 'beta')})]
-    expect(getTagSelectOptions(tags)).toEqual([
-      {label: 'alpha', value: 't1'},
-      {label: 'beta', value: 't2'},
-    ])
-  })
-
-  it('returns an empty array for an empty list', () => {
-    expect(getTagSelectOptions([])).toEqual([])
-  })
-
-  it('skips items without a tag', () => {
-    const tags = [
-      tagItem({tag: makeTag('t1', 'ok')}),
-      {_type: 'tag', tag: undefined, picked: false, updating: false} as unknown as TagItem,
-    ]
-    expect(getTagSelectOptions(tags)).toEqual([{label: 'ok', value: 't1'}])
-  })
-})

package/src/utils/getTagSelectOptions.ts

@@ -1,16 +0,0 @@
-import type {TagSelectOption, TagItem} from '../types'
-
-const getTagSelectOptions = (tags: TagItem[]): TagSelectOption[] => {
-  return tags.reduce((acc: TagSelectOption[], val) => {
-    const tag = val?.tag
-    if (tag) {
-      acc.push({
-        label: tag?.name?.current,
-        value: tag?._id,
-      })
-    }
-    return acc
-  }, [])
-}
-
-export default getTagSelectOptions

package/src/utils/getUniqueDocuments.test.ts

@@ -1,26 +0,0 @@
-import type {SanityDocument} from '@sanity/client'
-import {describe, expect, it} from 'vitest'
-
-import {getUniqueDocuments} from './getUniqueDocuments'
-
-describe('getUniqueDocuments', () => {
-  it('drops published documents when a drafts.* sibling exists', () => {
-    const docs: SanityDocument[] = [
-      {_id: 'drafts.post1', _type: 'post'} as SanityDocument,
-      {_id: 'post1', _type: 'post'} as SanityDocument,
-    ]
-    expect(getUniqueDocuments(docs)).toEqual([{_id: 'drafts.post1', _type: 'post'}])
-  })
-
-  it('keeps published-only and draft-only ids', () => {
-    const docs: SanityDocument[] = [
-      {_id: 'onlyPub', _type: 'x'} as SanityDocument,
-      {_id: 'drafts.onlyDraft', _type: 'x'} as SanityDocument,
-    ]
-    expect(getUniqueDocuments(docs)).toEqual(docs)
-  })
-
-  it('returns an empty array for an empty list', () => {
-    expect(getUniqueDocuments([])).toEqual([])
-  })
-})

package/src/utils/getUniqueDocuments.ts

@@ -1,15 +0,0 @@
-import type {SanityDocument} from '@sanity/client'
-
-export function getUniqueDocuments(documents: SanityDocument[]): SanityDocument[] {
-  const draftIds = documents.reduce(
-    (acc: string[], doc: SanityDocument) =>
-      doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
-    [],
-  )
-
-  const filteredDocuments: SanityDocument[] = documents.filter(
-    (doc: SanityDocument) => !draftIds.includes(doc._id),
-  )
-
-  return filteredDocuments
-}

package/src/utils/imageDprUrl.test.ts

@@ -1,46 +0,0 @@
-import {afterEach, describe, expect, it} from 'vitest'
-
-import type {ImageAsset} from '../types'
-import imageDprUrl from './imageDprUrl'
-
-const asset = {
-  _id: 'a1',
-  _type: 'sanity.imageAsset',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  originalFilename: 'x.png',
-  size: 1,
-  mimeType: 'image/png',
-  url: 'https://cdn.test/image.png',
-  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true},
-} as ImageAsset
-
-describe('imageDprUrl', () => {
-  const dpr = window.devicePixelRatio
-
-  afterEach(() => {
-    Object.defineProperty(window, 'devicePixelRatio', {value: dpr, configurable: true})
-  })
-
-  it('scales width by devicePixelRatio and sets fit=max', () => {
-    Object.defineProperty(window, 'devicePixelRatio', {value: 2, configurable: true})
-    const url = imageDprUrl(asset, {width: 400})
-    expect(url).toBe('https://cdn.test/image.png?fit=max&w=800')
-  })
-
-  it('includes height when provided, scaled by dpr', () => {
-    Object.defineProperty(window, 'devicePixelRatio', {value: 2, configurable: true})
-    const url = imageDprUrl(asset, {width: 300, height: 200})
-    expect(url).toBe('https://cdn.test/image.png?fit=max&w=600&h=400')
-  })
-
-  it('uses multiplier 1 when devicePixelRatio is missing', () => {
-    Object.defineProperty(window, 'devicePixelRatio', {
-      value: undefined as unknown as number,
-      configurable: true,
-    })
-    const url = imageDprUrl(asset, {width: 100})
-    expect(url).toBe('https://cdn.test/image.png?fit=max&w=100')
-  })
-})

package/src/utils/imageDprUrl.ts

@@ -1,27 +0,0 @@
-import type {ImageAsset} from '../types'
-
-const imageDprUrl = (
-  asset: ImageAsset,
-  options: {
-    width: number
-    height?: number
-  },
-): string => {
-  const dpi =
-    typeof window === 'undefined' || !window.devicePixelRatio
-      ? 1
-      : Math.round(window.devicePixelRatio)
-  const imgH = options?.height ? options?.height * Math.max(1, dpi) : undefined
-  const imgW = options.width * Math.max(1, dpi)
-
-  const urlParams = new URLSearchParams()
-  urlParams.append('fit', 'max')
-  urlParams.append('w', imgW.toString())
-  if (imgH) {
-    urlParams.append('h', imgH.toString())
-  }
-
-  return `${asset.url}?${urlParams.toString()}`
-}
-
-export default imageDprUrl

package/src/utils/isSupportedAssetType.test.ts

@@ -1,16 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-import {isSupportedAssetType} from './isSupportedAssetType'
-
-describe('isSupportedAssetType', () => {
-  it('returns true for file and image', () => {
-    expect(isSupportedAssetType('file')).toBe(true)
-    expect(isSupportedAssetType('image')).toBe(true)
-  })
-
-  it('returns false for unsupported or missing types', () => {
-    expect(isSupportedAssetType('video')).toBe(false)
-    expect(isSupportedAssetType('')).toBe(false)
-    expect(isSupportedAssetType(undefined)).toBe(false)
-  })
-})

package/src/utils/isSupportedAssetType.ts

@@ -1,15 +0,0 @@
-import {SUPPORTED_ASSET_TYPES} from '../constants'
-import type {AssetType} from '../types'
-
-/**
- * Determines whether or not the provided asset type (eg 'image', 'file', 'arbitrary')
- * is a supported asset type for this plugin.
- *
- * @param assetType - The asset type to check.
- * @returns True if the asset type is supported, false otherwise.
- * @internal
- */
-export function isSupportedAssetType(assetType?: string): assetType is AssetType {
-  const supported: string[] = SUPPORTED_ASSET_TYPES
-  return assetType ? supported.includes(assetType) : false
-}

package/src/utils/mediaField.ts

@@ -1,73 +0,0 @@
-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
-}