sanity-plugin-media 4.3.1 → 4.3.2

package/src/modules/uploads/index.ts

@@ -1,10 +1,11 @@
 import {createSelector, createSlice, type PayloadAction} from '@reduxjs/toolkit'
 import type {ClientError, SanityAssetDocument, SanityImageAssetDocument} from '@sanity/client'
-import type {HttpError, MyEpic, SanityUploadProgressEvent, UploadItem} from '../../types'
 import groq from 'groq'
 import type {Selector} from 'react-redux'
 import {empty, merge, of} from 'rxjs'
 import {catchError, delay, filter, mergeMap, takeUntil, withLatestFrom} from 'rxjs/operators'
+
+import type {HttpError, MyEpic, SanityUploadProgressEvent, UploadItem} from '../../types'
 import constructFilter from '../../utils/constructFilter'
 import {generatePreviewBlobUrl$} from '../../utils/generatePreviewBlobUrl'
 import {hashFile$, uploadAsset$} from '../../utils/uploadSanityAsset'
@@ -19,13 +20,13 @@ export type UploadsReducerState = {
 
 const initialState = {
   allIds: [],
-  byIds: {}
+  byIds: {},
 } as UploadsReducerState
 
 const uploadsSlice = createSlice({
   name: 'uploads',
   initialState,
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     builder //
       .addCase(UPLOADS_ACTIONS.uploadComplete, (state, action) => {
         const {asset} = action.payload
@@ -37,7 +38,7 @@ const uploadsSlice = createSlice({
   reducers: {
     checkRequest(
       _state,
-      _action: PayloadAction<{assets: (SanityAssetDocument | SanityImageAssetDocument)[]}>
+      _action: PayloadAction<{assets: (SanityAssetDocument | SanityImageAssetDocument)[]}>,
     ) {
       //
     },
@@ -46,7 +47,7 @@ const uploadsSlice = createSlice({
 
       const assetHashes = Object.keys(results)
 
-      assetHashes.forEach(hash => {
+      assetHashes.forEach((hash) => {
         const deleteIndex = state.allIds.indexOf(hash)
         if (deleteIndex >= 0) {
           state.allIds.splice(deleteIndex, 1)
@@ -88,13 +89,13 @@ const uploadsSlice = createSlice({
     },
     uploadRequest(
       _state,
-      _action: PayloadAction<{file: File; forceAsAssetType?: 'file' | 'image'}>
+      _action: PayloadAction<{file: File; forceAsAssetType?: 'file' | 'image'}>,
     ) {
       //
     },
     uploadProgress(
       state,
-      action: PayloadAction<{event: SanityUploadProgressEvent; uploadHash: string}>
+      action: PayloadAction<{event: SanityUploadProgressEvent; uploadHash: string}>,
     ) {
       const {event, uploadHash} = action.payload
       state.byIds[uploadHash].percent = event.percent
@@ -106,8 +107,8 @@ const uploadsSlice = createSlice({
         state.allIds.push(uploadItem.hash)
       }
       state.byIds[uploadItem.hash] = uploadItem
-    }
-  }
+    },
+  },
 })
 
 // Epics
@@ -115,21 +116,21 @@ const uploadsSlice = createSlice({
 export const uploadsAssetStartEpic: MyEpic = (action$, _state$, {client}) =>
   action$.pipe(
     filter(uploadsActions.uploadStart.match),
-    mergeMap(action => {
+    mergeMap((action) => {
       const {file, uploadItem} = action.payload
 
       return merge(
         // Generate low res preview
         of(null).pipe(
           mergeMap(() => generatePreviewBlobUrl$(file)),
-          mergeMap(url => {
+          mergeMap((url) => {
             return of(
               uploadsActions.previewReady({
                 blobUrl: url,
-                hash: uploadItem.hash
-              })
+                hash: uploadItem.hash,
+              }),
             )
-          })
+          }),
         ),
         // Upload asset and receive progress / complete events
         of(null).pipe(
@@ -138,23 +139,23 @@ export const uploadsAssetStartEpic: MyEpic = (action$, _state$, {client}) =>
           takeUntil(
             action$.pipe(
               filter(uploadsActions.uploadCancel.match),
-              filter(v => v.payload.hash === uploadItem.hash)
-            )
+              filter((v) => v.payload.hash === uploadItem.hash),
+            ),
           ),
-          mergeMap(event => {
+          mergeMap((event) => {
             if (event?.type === 'complete') {
               return of(
                 UPLOADS_ACTIONS.uploadComplete({
-                  asset: event.asset
-                })
+                  asset: event.asset,
+                }),
               )
             }
             if (event?.type === 'progress' && event?.stage === 'upload') {
               return of(
                 uploadsActions.uploadProgress({
                   event,
-                  uploadHash: uploadItem.hash
-                })
+                  uploadHash: uploadItem.hash,
+                }),
               )
             }
             return empty()
@@ -164,15 +165,15 @@ export const uploadsAssetStartEpic: MyEpic = (action$, _state$, {client}) =>
               uploadsActions.uploadError({
                 error: {
                   message: error?.message || 'Internal error',
-                  statusCode: error?.statusCode || 500
+                  statusCode: error?.statusCode || 500,
                 },
-                hash: uploadItem.hash
-              })
-            )
-          )
-        )
+                hash: uploadItem.hash,
+              }),
+            ),
+          ),
+        ),
       )
-    })
+    }),
   )
 
 export const uploadsAssetUploadEpic: MyEpic = (action$, state$) =>
@@ -187,12 +188,12 @@ export const uploadsAssetUploadEpic: MyEpic = (action$, state$) =>
         // This will throw in insecure contexts (non-localhost / https)
         mergeMap(() => hashFile$(file)),
         // Ignore if the file exists and is currently being uploaded
-        filter(hash => {
+        filter((hash) => {
           const exists = !!state.uploads.byIds[hash]
           return !exists
         }),
         // Dispatch start action and begin upload process
-        mergeMap(hash => {
+        mergeMap((hash) => {
           const assetType = forceAsAssetType || (file.type.indexOf('image') >= 0 ? 'image' : 'file')
           const uploadItem = {
             _type: 'upload',
@@ -200,24 +201,24 @@ export const uploadsAssetUploadEpic: MyEpic = (action$, state$) =>
             hash,
             name: file.name,
             size: file.size,
-            status: 'queued'
+            status: 'queued',
           } as UploadItem
           return of(uploadsActions.uploadStart({file, uploadItem}))
-        })
+        }),
       )
-    })
+    }),
   )
 
-export const uploadsCompleteQueueEpic: MyEpic = action$ =>
+export const uploadsCompleteQueueEpic: MyEpic = (action$) =>
   action$.pipe(
     filter(UPLOADS_ACTIONS.uploadComplete.match),
-    mergeMap(action => {
+    mergeMap((action) => {
       return of(
         uploadsActions.checkRequest({
-          assets: [action.payload.asset]
-        })
+          assets: [action.payload.asset],
+        }),
       )
-    })
+    }),
   )
 
 export const uploadsCheckRequestEpic: MyEpic = (action$, state$, {client}) =>
@@ -227,12 +228,12 @@ export const uploadsCheckRequestEpic: MyEpic = (action$, state$, {client}) =>
     mergeMap(([action, state]) => {
       const {assets} = action.payload
 
-      const documentIds = assets.map(asset => asset._id)
+      const documentIds = assets.map((asset) => asset._id)
 
       const constructedFilter = constructFilter({
         assetTypes: state.assets.assetTypes,
         searchFacets: state.search.facets,
-        searchQuery: state.search.query
+        searchQuery: state.search.query,
       })
 
       const query = groq`
@@ -242,7 +243,7 @@ export const uploadsCheckRequestEpic: MyEpic = (action$, state$, {client}) =>
       return of(action).pipe(
         delay(1000), // give Sanity some time to register the recently uploaded asset
         mergeMap(() => client.observable.fetch<string[]>(query, {documentIds})),
-        mergeMap(resultHashes => {
+        mergeMap((resultHashes) => {
           const checkedResults = assets.reduce((acc: Record<string, string | null>, asset) => {
             acc[asset.sha1hash] = resultHashes.includes(asset.sha1hash) ? asset._id : null
             return acc
@@ -250,11 +251,11 @@ export const uploadsCheckRequestEpic: MyEpic = (action$, state$, {client}) =>
 
           return of(
             uploadsActions.checkComplete({results: checkedResults}), //
-            assetsActions.insertUploads({results: checkedResults})
+            assetsActions.insertUploads({results: checkedResults}),
           )
-        })
+        }),
       )
-    })
+    }),
   )
 
 // Selectors
@@ -266,14 +267,14 @@ const selectUploadsAllIds = (state: RootReducerState) => state.uploads.allIds
 export const selectUploadById = createSelector(
   [
     (state: RootReducerState) => state.uploads.byIds,
-    (_state: RootReducerState, uploadId: string) => uploadId
+    (_state: RootReducerState, uploadId: string) => uploadId,
   ],
-  (byIds, uploadId) => byIds[uploadId]
+  (byIds, uploadId) => byIds[uploadId],
 )
 
 export const selectUploads: Selector<RootReducerState, UploadItem[]> = createSelector(
   [selectUploadsByIds, selectUploadsAllIds],
-  (byIds, allIds) => allIds.map(id => byIds[id])
+  (byIds, allIds) => allIds.map((id) => byIds[id]),
 )
 
 export const uploadsActions = {...uploadsSlice.actions}

package/src/operators/checkTagName.test.ts

@@ -1,28 +1,29 @@
 // @vitest-environment node
 
-import {describe, expect, it, vi} from 'vitest'
-import {firstValueFrom, of} from 'rxjs'
 import type {SanityClient} from '@sanity/client'
+import {firstValueFrom, of} from 'rxjs'
+import {describe, expect, it, vi} from 'vitest'
+
 import checkTagName from './checkTagName'
 
 describe('checkTagName', () => {
   it('errors with 409 when a tag with the same slug exists', async () => {
     const client = {
-      fetch: vi.fn().mockResolvedValue(1)
+      fetch: vi.fn().mockResolvedValue(1),
     } as unknown as SanityClient
 
     await expect(
-      firstValueFrom(of(null).pipe(checkTagName(client, 'existing')))
+      firstValueFrom(of(null).pipe(checkTagName(client, 'existing'))),
     ).rejects.toMatchObject({statusCode: 409, message: 'Tag already exists'})
   })
 
   it('emits true when name is available', async () => {
     const client = {
-      fetch: vi.fn().mockResolvedValue(0)
+      fetch: vi.fn().mockResolvedValue(0),
     } as unknown as SanityClient
 
     await expect(firstValueFrom(of(null).pipe(checkTagName(client, 'fresh-name')))).resolves.toBe(
-      true
+      true,
     )
   })
 })

package/src/operators/checkTagName.ts

@@ -1,9 +1,10 @@
 import type {SanityClient} from '@sanity/client'
-import type {HttpError} from '../types'
 import groq from 'groq'
 import {from, Observable, of, throwError} from 'rxjs'
 import {mergeMap} from 'rxjs/operators'
+
 import {TAG_DOCUMENT_NAME} from '../constants'
+import type {HttpError} from '../types'
 
 const checkTagName = (client: SanityClient, name: string) => {
   return function <T>(source: Observable<T>): Observable<boolean> {
@@ -11,20 +12,20 @@ const checkTagName = (client: SanityClient, name: string) => {
       mergeMap(() => {
         return from(
           client.fetch(groq`count(*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $name])`, {
-            name
-          })
+            name,
+          }),
         ) as Observable<number>
       }),
       mergeMap((existingTagCount: number) => {
         if (existingTagCount > 0) {
           return throwError({
             message: 'Tag already exists',
-            statusCode: 409
+            statusCode: 409,
           } as HttpError)
         }
 
         return of(true)
-      })
+      }),
     )
   }
 }

package/src/operators/debugThrottle.ts

@@ -7,17 +7,17 @@ const debugThrottle = (throttled?: boolean) => {
       () => !!throttled,
       source.pipe(
         delay(3000),
-        mergeMap(v => {
+        mergeMap((v) => {
           if (Math.random() > 0.5) {
             return throwError({
               message: 'Test error',
-              statusCode: 500
+              statusCode: 500,
             })
           }
           return of(v)
-        })
+        }),
       ),
-      source
+      source,
     )
   }
 }

package/src/plugin.tsx

@@ -1,54 +1,54 @@
-import {type AssetSource, type Tool as SanityTool, definePlugin} from 'sanity'
 import {ImageIcon} from '@sanity/icons'
+import {type AssetSource, type Tool as SanityTool, definePlugin} from 'sanity'
+
 import FormBuilderTool from './components/FormBuilderTool'
 import Tool from './components/Tool'
+import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
 import mediaTag from './schemas/tag'
 import type {MediaToolOptions} from './types'
-import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
 
 const plugin = {
   icon: ImageIcon,
   name: 'media',
-  title: 'Media'
+  title: 'Media',
 }
 
 export const mediaAssetSource = {
   ...plugin,
-  component: FormBuilderTool
+  component: FormBuilderTool,
 } satisfies AssetSource
 
 const tool = {
   ...plugin,
   component: Tool,
-  // @ts-expect-error TS doesn't know about this internal field see https://github.com/sanity-io/sanity/pull/7980
-  __internalApplicationType: 'sanity/media'
+  __internalApplicationType: 'sanity/media',
 } satisfies SanityTool
 
-export const media = definePlugin<MediaToolOptions | void>(options => ({
+export const media = definePlugin<MediaToolOptions | void>((options) => ({
   name: 'media',
   studio: {
     components: {
-      layout: props => (
+      layout: (props) => (
         <ToolOptionsProvider options={options}>{props.renderDefault(props)}</ToolOptionsProvider>
-      )
-    }
+      ),
+    },
   },
   form: {
     file: {
-      assetSources: prev => {
+      assetSources: (prev) => {
         return [...prev, mediaAssetSource]
-      }
+      },
     },
     image: {
-      assetSources: prev => {
+      assetSources: (prev) => {
         return [...prev, mediaAssetSource]
-      }
-    }
+      },
+    },
   },
   schema: {
-    types: [mediaTag]
+    types: [mediaTag],
   },
-  tools: prev => {
+  tools: (prev) => {
     return [...prev, tool]
-  }
+  },
 }))

package/src/schemas/tag.ts

@@ -1,5 +1,5 @@
-import {TAG_DOCUMENT_NAME} from '../constants'
 import TagIcon from '../components/TagIcon'
+import {TAG_DOCUMENT_NAME} from '../constants'
 
 export default {
   title: 'Media Tag',
@@ -10,19 +10,19 @@ export default {
     {
       title: 'Name',
       name: 'name',
-      type: 'slug'
-    }
+      type: 'slug',
+    },
   ],
   preview: {
     select: {
-      name: 'name'
+      name: 'name',
     },
     prepare(selection: any) {
       const {name} = selection
       return {
         media: TagIcon,
-        title: name?.current
+        title: name?.current,
       }
-    }
-  }
+    },
+  },
 }

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

@@ -2,6 +2,7 @@ import {AddIcon, ChevronDownIcon, CloseIcon} from '@sanity/icons'
 import {Box, Card, Flex, 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 {radius: themeRadius, space: themeSpace} = studioTheme
@@ -18,79 +19,79 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
 
       return {
         ...styles,
-        backgroundColor: 'var(--card-bg-color)',
-        color: 'inherit',
-        border: 'none',
-        borderRadius: themeRadius[1],
+        'backgroundColor': 'var(--card-bg-color)',
+        'color': 'inherit',
+        'border': 'none',
+        'borderRadius': themeRadius[1],
         boxShadow,
-        margin: 0,
-        minHeight: '35px',
-        outline: 'none',
-        padding: rem(themeSpace[1]),
-        transition: 'none',
+        'margin': 0,
+        'minHeight': '35px',
+        'outline': 'none',
+        'padding': rem(themeSpace[1]),
+        'transition': 'none',
         '&:hover': {
-          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`
-        }
+          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`,
+        },
       }
     },
     indicatorsContainer: (styles, {isDisabled}) => ({
       ...styles,
-      opacity: isDisabled ? 0.25 : 1
+      opacity: isDisabled ? 0.25 : 1,
     }),
-    input: styles => ({
+    input: (styles) => ({
       ...styles,
       color: 'var(--card-fg-color)',
       fontFamily: studioTheme.fonts.text.family,
-      marginLeft: rem(themeSpace[2])
+      marginLeft: rem(themeSpace[2]),
     }),
-    menuList: styles => ({
-      ...styles
+    menuList: (styles) => ({
+      ...styles,
     }),
     multiValue: (styles, {isDisabled}) => ({
       ...styles,
       backgroundColor: getSchemeColor(scheme, 'mutedHoveredBg'),
       borderRadius: themeRadius[2],
-      opacity: isDisabled ? 0.5 : 1
+      opacity: isDisabled ? 0.5 : 1,
     }),
     multiValueLabel: () => ({
       color: getSchemeColor(scheme, 'mutedHoveredFg'),
       fontSize: 'inherit',
-      padding: 0
+      padding: 0,
     }),
-    multiValueRemove: styles => ({
+    multiValueRemove: (styles) => ({
       ...styles,
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-      svg: {color: getSchemeColor(scheme, 'mutedHoveredFg')},
+      'borderTopLeftRadius': 0,
+      'borderBottomLeftRadius': 0,
+      'svg': {color: getSchemeColor(scheme, 'mutedHoveredFg')},
       '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'mutedSelectedBg')
-      }
+        backgroundColor: getSchemeColor(scheme, 'mutedSelectedBg'),
+      },
     }),
-    noOptionsMessage: styles => ({
+    noOptionsMessage: (styles) => ({
       ...styles,
       fontFamily: studioTheme.fonts.text.family,
-      lineHeight: '1em'
+      lineHeight: '1em',
     }),
     option: (styles, {isFocused}) => ({
       ...styles,
-      backgroundColor: isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
-      borderRadius: themeRadius[2],
-      color: isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
-      padding: `${rem(themeSpace[1])} ${rem(themeSpace[2])}`,
+      'backgroundColor': isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
+      'borderRadius': themeRadius[2],
+      'color': isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
+      'padding': `${rem(themeSpace[1])} ${rem(themeSpace[2])}`,
       '&:hover': {
         backgroundColor: getSchemeColor(scheme, 'spotBlue'),
-        color: getSchemeColor(scheme, 'bg')
-      }
+        color: getSchemeColor(scheme, 'bg'),
+      },
     }),
-    placeholder: styles => ({
+    placeholder: (styles) => ({
       ...styles,
-      marginLeft: rem(themeSpace[2])
+      marginLeft: rem(themeSpace[2]),
     }),
-    valueContainer: styles => ({
+    valueContainer: (styles) => ({
       ...styles,
       margin: 0,
-      padding: 0
-    })
+      padding: 0,
+    }),
   }
 }
 
@@ -129,7 +130,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,
   MultiValueLabel,
   MultiValueRemove,
-  Option
+  Option,
 }