Adding Jump Links to Page Modules

export default defineType({
  name: 'module-name',
  ...
  fields: [
    ...
    defineField({
      name: 'uid',
      title: 'Unique Identifier',
      type: 'uid',
      group: 'options',
    }),
  ],
})

export default function ({ uid = undefined, _key }) {
  return uid || _key
}

import uid from '@/lib/uid'

export default function YourModuleComponent({ ...props }) {
  return (
    <section
      id={uid(props)}
      className="..."
    >
      ...
    </section>
  )
}

import { useState } from 'react'
import { defineType } from 'sanity'
import { Box, Button, Flex, Text, TextInput } from '@sanity/ui'
import { VscCheck, VscCopy } from 'react-icons/vsc'

export default defineType({
	name: 'uid',
	title: 'Unique Identifier',
	description: 'Used for anchor/jump links (HTML `id` attribute).',
	type: 'string',
	validation: (Rule) =>
		Rule.regex(/^[a-zA-Z0-9-]+$/g).error(
			'Must not contain spaces or special characters',
		),
	components: {
		input: ({ elementProps, path }) => {
			const indexOfModule = path.indexOf('modules')
			const moduleKey = (path[indexOfModule + 1] as any)?._key
			const [checked, setChecked] = useState(false)

			return (
				<Flex gap={1} align="center">
					<Text muted>#</Text>

					<Box flex={1}>
						<TextInput {...elementProps} placeholder={moduleKey} radius={2} />
					</Box>

					<Button
						title="Click to copy"
						mode="ghost"
						icon={checked ? VscCheck : VscCopy}
						disabled={checked}
						onClick={() => {
							navigator.clipboard.writeText(
								'#' + elementProps.value || moduleKey,
							)

							setChecked(true)
							setTimeout(() => setChecked(false), 1000)
						}}
					/>
				</Flex>
			)
		},
	},
})