Discussion on displaying file URLs for a custom component in a Sanity.io project

import React from 'react'
import { withDocument } from 'part:@sanity/form-builder'

// build a file url
export function fileUrl(reference) {
  const project = {
    projectId: process.env.SANITY_STUDIO_API_PROJECT_ID,
    dataset: process.env.SANITY_STUDIO_API_DATASET || 'production'
  }
  
  const referenceArray = reference.split('-')
  const asset = {
    assetId: referenceArray[1],
    extension: referenceArray[2]
  }

  return `<https://cdn.sanity.io/files/${project.projectId}/${project.dataset}/${asset.assetId}.${asset.extension}>`
}

const FontUrl = React.forwardRef((props) => {
  for(let i=0; i<props.document.fontFiles.length; i++) {
    const reference = props.document.fontFiles[i].asset._ref

    return (
      <p>{fileUrl(reference)}</p>
    )
  }
})

export default withDocument(FontUrl)

{
      name: 'fontFiles',
      title: 'Font files',
      description: 'Upload font files, add below with @font-face. Accepted formats: .woff, .woff2',
      type: 'array',
      of: [
        {
          type: 'file',
          options: {
            accept: '.woff2, .woff',
          },
          fields: [{
            name: 'fontUrl',
            title: 'Font URL',
            description: 'Use in CSS @font-face',
            type: 'url',
            // below adding a component
            inputComponent: FontUrl,
            readOnly: true,
            options: {
              isHighlighted: true,
            }
          }],
        }
      ]
    },

const FontUrl = React.forwardRef((props) => {
  const { fontFiles } = props.document
  return (
    <>
      <p>{fontFiles.map(fontFile => fileUrl(fontFile.asset._ref)})}</p>
    </>
  )
})

import { withDocument, withValuePath } from 'part:@sanity/form-builder'

export const FontUrl = withValuePath(withDocument(({ document, getValuePath }) => {
  console.log(document) // { _id: ... }
  console.log(getValuePath()) // ["content", { _key: ... }]
}))

const FontUrl = React.forwardRef((props, ref) => {
  const matchingUrl = props.document.fontFiles.find(fontFile => fontFile._key === props.getValuePath()[1]._key);

  return (
    <p>{matchingUrl.asset ? fileUrl(matchingUrl.asset._ref) : null}</p>
  )
})

export default withValuePath(withDocument(FontUrl))