Support creditline

README.md

@@ -95,6 +95,29 @@ export default defineConfig({
 })
 ```
 
+### Plugin Config
+
+```ts
+// sanity.config.ts
+export default defineConfig({
+  //...
+  plugins: [
+    media({
+      creditLine: {
+        enabled: true,
+        // boolean - enables an optional "Credit Line" field in the plugin.
+        // Used to store credits e.g. photographer, licence info
+        excludeSources: ['unsplash'],
+        // string | string[] - when used with 3rd party asset sources, you may
+        // wish to prevent users overwriting the creditLine based on the `source.name`
+      },
+      maximumUploadSize: 10000000
+      // number - maximum file size (in bytes) that can be uploaded through the plugin interface
+    })
+  ],
+})
+```
+
 ## Known issues
 
 <details>

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>
 

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
       }

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',

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,

src/contexts/ToolOptionsContext.tsx

@@ -4,6 +4,7 @@ import {DropzoneOptions} from 'react-dropzone'
 
 type ContextProps = {
   dropzone: Pick<DropzoneOptions, 'maxSize'>
+  creditLine: MediaToolOptions['creditLine']
 }
 
 const ToolOptionsContext = createContext<ContextProps | null>(null)
@@ -13,10 +14,27 @@ type Props = {
 }
 
 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>
 }

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({

src/modules/assets/index.ts

@@ -60,7 +60,7 @@
   field: string
 }
 
 /**
  * NOTE:
  * `fetchCount` returns the number of items retrieved in the most recent fetch.
  * This is a temporary workaround to be able to determine when there are no more items to retrieve.
@@ -239,6 +239,7 @@
               _createdAt,
               _updatedAt,
               altText,
+              creditLine,
               description,
               extension,
               metadata {
@@ -252,6 +253,9 @@
               },
               originalFilename,
               size,
+              source {
+                name
+              },
               title,
               url
             } ${pipe} ${sort} ${selector},

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'

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