sanity-plugin-media 2.3.0 → 2.3.2

package/package.json

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

package/src/components/DialogAssetEdit/index.tsx

@@ -27,6 +27,7 @@ import FormFieldInputText from '../FormFieldInputText'
 import FormFieldInputTextarea from '../FormFieldInputTextarea'
 import FormSubmitButton from '../FormSubmitButton'
 import Image from '../Image'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 type Props = {
   children: ReactNode
@@ -59,10 +60,14 @@ const DialogAssetEdit = (props: Props) => {
 
   const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset))
 
+  // Check if credit line options are configured
+  const {creditLine} = useToolOptions()
+
   const generateDefaultValues = useCallback(
     (asset?: Asset): AssetFormData => {
       return {
         altText: asset?.altText || '',
+        creditLine: asset?.creditLine || '',
         description: asset?.description || '',
         originalFilename: asset?.originalFilename || '',
         opt: {media: {tags: assetTagOptions}},
@@ -342,6 +347,20 @@ const DialogAssetEdit = (props: Props) => {
                           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>
                     </TabPanel>
 

package/src/components/SearchFacetsControl/index.tsx

@@ -7,6 +7,7 @@ import {FACETS} from '../../constants'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 const SearchFacetsControl = () => {
   // Redux
@@ -17,11 +18,18 @@ const SearchFacetsControl = () => {
 
   const popoverProps = usePortalPopoverProps()
 
+  const {creditLine} = useToolOptions()
+
   const isTool = !selectedDocument
 
   const filteredFacets = FACETS
     // Filter facets based on current context, whether it's invoked as a tool, or via selection through via custom asset source.
     .filter(facet => {
+      // Remove credit line filter if it's not enabled
+      if (!creditLine?.enabled && facet?.type === 'string' && facet?.name === 'creditLine') {
+        return false
+      }
+
       if (facet.type === 'group' || facet.type === 'divider') {
         return true
       }

package/src/components/Tool/index.tsx

@@ -1,17 +1,12 @@
 import {Flex} from '@sanity/ui'
-import React, {ComponentProps} from 'react'
+import React from 'react'
 import Browser from '../Browser'
-import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
-import {Tool as SanityTool} from 'sanity'
-import {MediaToolOptions} from '@types'
 
-const Tool = ({tool: {options}}: ComponentProps<SanityTool<MediaToolOptions>['component']>) => {
+const Tool = () => {
   return (
-    <ToolOptionsProvider options={options}>
-      <Flex direction="column" height="fill" flex={1}>
-        <Browser />
-      </Flex>
-    </ToolOptionsProvider>
+    <Flex direction="column" height="fill" flex={1}>
+      <Browser />
+    </Flex>
   )
 }
 

package/src/config/searchFacets.ts

@@ -19,6 +19,16 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     type: 'string',
     value: ''
   },
+  creditLine: {
+    assetTypes: ['file', 'image'],
+    field: 'creditLine',
+    name: 'creditLine',
+    operatorType: 'empty',
+    operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
+    title: 'Credit',
+    type: 'string',
+    value: ''
+  },
   description: {
     assetTypes: ['file', 'image'],
     field: 'description',

package/src/constants.ts

@@ -52,6 +52,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   divider,
   inputs.title,
   inputs.altText,
+  inputs.creditLine,
   inputs.description,
   divider,
   inputs.isOpaque,

package/src/contexts/ToolOptionsContext.tsx

@@ -4,19 +4,37 @@ import {DropzoneOptions} from 'react-dropzone'
 
 type ContextProps = {
   dropzone: Pick<DropzoneOptions, 'maxSize'>
+  creditLine: MediaToolOptions['creditLine']
 }
 
 const ToolOptionsContext = createContext<ContextProps | null>(null)
 
 type Props = {
-  options?: MediaToolOptions
+  options?: MediaToolOptions | void
 }
 
 export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
-  const value = useMemo<ContextProps>(
-    () => ({dropzone: {maxSize: options?.maximumUploadSize}}),
-    [options?.maximumUploadSize]
-  )
+  const value = useMemo<ContextProps>(() => {
+    let creditLineExcludeSources
+
+    if (options?.creditLine?.excludeSources) {
+      creditLineExcludeSources = Array.isArray(options?.creditLine?.excludeSources)
+        ? options.creditLine.excludeSources
+        : [options?.creditLine?.excludeSources]
+    }
+
+    return {
+      dropzone: {maxSize: options?.maximumUploadSize},
+      creditLine: {
+        enabled: options?.creditLine?.enabled || false,
+        excludeSources: creditLineExcludeSources
+      }
+    }
+  }, [
+    options?.creditLine?.enabled,
+    options?.creditLine?.excludeSources,
+    options?.maximumUploadSize
+  ])
 
   return <ToolOptionsContext.Provider value={value}>{children}</ToolOptionsContext.Provider>
 }
@@ -30,5 +48,3 @@ export const useToolOptions = () => {
 
   return context
 }
-
-export default ToolOptionsContext

package/src/formSchema/index.ts

@@ -7,6 +7,7 @@ export const tagOptionSchema = z.object({
 
 export const assetFormSchema = z.object({
   altText: z.string().trim().optional(),
+  creditLine: z.string().trim().optional(),
   description: z.string().trim().optional(),
   opt: z.object({
     media: z.object({

package/src/index.ts

@@ -1,47 +1,2 @@
-import {definePlugin} from 'sanity'
-import {ImageIcon} from '@sanity/icons'
-import type {AssetSource} from 'sanity'
-import FormBuilderTool from './components/FormBuilderTool'
-import Tool from './components/Tool'
-import mediaTag from './schemas/tag'
-import {MediaToolOptions} from '@types'
-
-const plugin = {
-  icon: ImageIcon,
-  name: 'media',
-  title: 'Media'
-}
-
-export const mediaAssetSource: AssetSource = {
-  ...plugin,
-  component: FormBuilderTool
-}
-
-export const media = definePlugin<MediaToolOptions | void>(options => ({
-  name: 'media',
-  form: {
-    file: {
-      assetSources: prev => {
-        return [...prev, mediaAssetSource]
-      }
-    },
-    image: {
-      assetSources: prev => {
-        return [...prev, mediaAssetSource]
-      }
-    }
-  },
-  schema: {
-    types: [mediaTag]
-  },
-  tools: prev => {
-    return [
-      ...prev,
-      {
-        ...plugin,
-        options,
-        component: Tool
-      }
-    ]
-  }
-}))
+export {media, mediaAssetSource} from './plugin'
+export type {MediaToolOptions} from '@types'

package/src/modules/assets/index.ts

@@ -239,6 +239,7 @@ const assetsSlice = createSlice({
               _createdAt,
               _updatedAt,
               altText,
+              creditLine,
               description,
               extension,
               metadata {
@@ -252,6 +253,9 @@ const assetsSlice = createSlice({
               },
               originalFilename,
               size,
+              source {
+                name
+              },
               title,
               url
             } ${pipe} ${sort} ${selector},

package/src/plugin.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {AssetSource, Tool as SanityTool, definePlugin} from 'sanity'
+import {ImageIcon} from '@sanity/icons'
+import FormBuilderTool from './components/FormBuilderTool'
+import Tool from './components/Tool'
+import mediaTag from './schemas/tag'
+import {MediaToolOptions} from '@types'
+import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
+
+const plugin = {
+  icon: ImageIcon,
+  name: 'media',
+  title: 'Media'
+}
+
+export const mediaAssetSource = {
+  ...plugin,
+  component: FormBuilderTool
+} satisfies AssetSource
+
+const tool = {
+  ...plugin,
+  component: Tool
+} satisfies SanityTool
+
+export const media = definePlugin<MediaToolOptions | void>(options => ({
+  name: 'media',
+  studio: {
+    components: {
+      layout: props => (
+        <ToolOptionsProvider options={options}>{props.renderDefault(props)}</ToolOptionsProvider>
+      )
+    }
+  },
+  form: {
+    file: {
+      assetSources: prev => {
+        return [...prev, mediaAssetSource]
+      }
+    },
+    image: {
+      assetSources: prev => {
+        return [...prev, mediaAssetSource]
+      }
+    }
+  },
+  schema: {
+    types: [mediaTag]
+  },
+  tools: prev => {
+    return [...prev, tool]
+  }
+}))

package/src/types/index.ts

@@ -12,6 +12,10 @@ import {RootReducerState} from '../modules/types'
 
 export type MediaToolOptions = {
   maximumUploadSize?: number
+  creditLine: {
+    enabled: boolean
+    excludeSources?: string | string[]
+  }
 }
 
 type CustomFields = {
@@ -152,6 +156,7 @@ export type FileAsset = SanityAssetDocument &
 export type ImageAsset = SanityImageAssetDocument &
   CustomFields & {
     _type: 'sanity.imageAsset'
+    creditLine?: string
   }
 
 export type MarkDef = {_key: string; _type: string}
@@ -238,6 +243,7 @@ export type SearchFacetInputStringProps = SearchFacetInputCommon & {
 
 export type SearchFacetName =
   | 'altText'
+  | 'creditLine'
   | 'description'
   | 'fileName'
   | 'height'

package/src/utils/constructFilter.ts

@@ -85,7 +85,7 @@ const constructFilter = ({
     // references(*[_type == "media.tag" && name.current == "${searchQuery.trim()}"]._id)
     ...(searchQuery
       ? [
-          groq`[_id, altText, assetId, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`
+          groq`[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`
         ]
       : []),
     // Search facets