ReadOnlyIfPublishedInput.tsx

import * as React from 'react'
import {StringInputProps, useClient, useFormValue} from 'sanity'

export const ReadOnlyIfPublished = (props: StringInputProps) => {
  const client = useClient({ apiVersion: '2021-03-25', })

  const docId = useFormValue(['_id']) as string
  const createdAt = useFormValue(['_createdAt'])
  const [readOnly, setReadOnly] = React.useState(createdAt !== undefined)

  React.useEffect(() => {
    if (docId && docId.startsWith('drafts.')) {
      const publishedId = docId.split('drafts.')[1]
      client.getDocument(publishedId).then((result) => {
        setReadOnly(result !== undefined)
      })
    } else {
      setReadOnly(createdAt !== undefined)
    }
  }, [client, docId, createdAt])

  return props.renderDefault({
    ...props,
    elementProps: {
      ...props.elementProps,
      readOnly,
    },
  })
}