fix: adjust types throughout and add missing ones

src/components/LinkField.tsx → src/components/LinkInput.tsx

@@ -1,14 +1,9 @@
 import {Box, Flex, Stack, Text} from '@sanity/ui'
-import {
-  type FieldMember,
-  FormFieldValidationStatus,
-  ObjectInputMember,
-  type ObjectInputProps,
-} from 'sanity'
+import {type FieldMember, FormFieldValidationStatus, ObjectInputMember} from 'sanity'
 import styled from 'styled-components'
 
 import {isCustomLink} from '../helpers/typeGuards'
-import {CustomLinkType, LinkValue} from '../types'
+import {LinkInputProps} from '../types'
 
 const ValidationErrorWrapper = styled(Box)`
   contain: size;
@@ -22,13 +17,13 @@ const FullWidthStack = styled(Stack)`
 `
 
 /**
- * Custom field component for the link object.
+ * Custom input component for the link object.
  * Nicely renders the type and link fields next to each other, with the
  * description and any validation errors for the link field below them.
  *
  * The rest of the fields ("blank" and "advanced") are rendered as usual.
  */
-export function LinkField(props: ObjectInputProps & {customLinkTypes: CustomLinkType[]}) {
+export function LinkInput(props: LinkInputProps) {
   const [textField, typeField, linkField, ...otherFields] = props.members as FieldMember[]
   const {options} = props.schemaType
 
@@ -41,9 +36,8 @@ export function LinkField(props: ObjectInputProps & {customLinkTypes: CustomLink
 
   const description =
     // If a custom link type is used, use its description if it has one.
-    props.value && isCustomLink(props.value as LinkValue)
-      ? props.customLinkTypes.find((type) => type.value === (props.value as LinkValue).type)
-          ?.description
+    props.value && isCustomLink(props.value)
+      ? props.customLinkTypes.find((type) => type.value === props.value?.type)?.description
       : // Fallback to the description of the current link type field.
         linkFieldDescription
 

src/components/LinkTypeInput.tsx

@@ -4,7 +4,7 @@ import {AtSignIcon, GlobeIcon, LinkIcon, PhoneIcon} from 'lucide-react'
 import {set, type StringInputProps} from 'sanity'
 import styled from 'styled-components'
 
-import {CustomLinkType, LinkFieldOptions, LinkType} from '../types'
+import {CustomLinkType, LinkFieldPluginOptions, LinkType} from '../types'
 
 const defaultLinkTypes: LinkType[] = [
   {title: 'Internal', value: 'internal', icon: LinkIcon},
@@ -40,7 +40,7 @@ export function LinkTypeInput({
   linkableSchemaTypes,
 }: StringInputProps & {
   customLinkTypes?: CustomLinkType[]
-  linkableSchemaTypes: LinkFieldOptions['linkableSchemaTypes']
+  linkableSchemaTypes: LinkFieldPluginOptions['linkableSchemaTypes']
 }) {
   const linkTypes = [
     // Disable internal links if not enabled for any schema types

src/index.ts

@@ -8,12 +8,17 @@ export {
 } from './helpers/typeGuards'
 export {linkField} from './linkField'
 export type {
+  CustomizableLink,
   CustomLink,
   CustomLinkType,
   CustomLinkTypeOptions,
   EmailLink,
   ExternalLink,
   InternalLink,
+  LinkFieldOptions,
+  LinkFieldPluginOptions,
+  LinkInputProps,
+  LinkSchemaType,
   LinkType,
   LinkValue,
   PhoneLink,

src/linkField.tsx

@@ -1,16 +1,16 @@
 import {defineField, definePlugin, defineType, type ObjectInputProps} from 'sanity'
 
 import {CustomLinkInput} from './components/CustomLinkInput'
-import {LinkField} from './components/LinkField'
+import {LinkInput} from './components/LinkInput'
 import {LinkTypeInput} from './components/LinkTypeInput'
 import {isCustomLink} from './helpers/typeGuards'
-import type {LinkFieldOptions, LinkValue} from './types'
+import type {LinkFieldPluginOptions, LinkValue} from './types'
 
 /**
  * A plugin that adds a custom Link field for creating internal and external links,
  * as well as `mailto` and `tel`-links, all using the same intuitive UI.
  *
- * @param options - Options for the plugin. See {@link LinkFieldOptions}
+ * @param options - Options for the plugin. See {@link LinkFieldPluginOptions}
  *
  * @example Minimal example
  * ```ts
@@ -41,7 +41,7 @@ import type {LinkFieldOptions, LinkValue} from './types'
  *});
  * ```
  */
-export const linkField = definePlugin<LinkFieldOptions>(
+export const linkField = definePlugin<LinkFieldPluginOptions>(
   ({
     linkableSchemaTypes = ['page'],
     descriptions = {
@@ -248,7 +248,8 @@ export const linkField = definePlugin<LinkFieldOptions>(
           : []),
       ],
       components: {
-        input: (props: ObjectInputProps) => LinkField({customLinkTypes, ...props}),
+        input: (props: ObjectInputProps) =>
+          LinkInput({customLinkTypes, ...props, value: props.value as LinkValue}),
       },
     }
 

src/types.ts

@@ -1,5 +1,5 @@
 import {ComponentType} from 'react'
-import type {CurrentUser, Path, SanityDocument} from 'sanity'
+import type {CurrentUser, ObjectInputProps, ObjectSchemaType, Path, SanityDocument} from 'sanity'
 
 export interface CustomizableLink {
   parameters?: string
@@ -67,12 +67,13 @@ export interface CustomLinkType extends LinkType {
 }
 
 /**
- * Options for the link field plugin
+ * Global options for the link field plugin
  *
  * @todo: Should be overridable on the field level
  */
-export interface LinkFieldOptions {
-  /** An array of schema types that should be allowed in internal links.
+export interface LinkFieldPluginOptions {
+  /**
+   * An array of schema types that should be allowed in internal links.
    * @defaultValue ['page']
    */
   linkableSchemaTypes: string[]
@@ -90,7 +91,8 @@ export interface LinkFieldOptions {
     anchor?: string
   }
 
-  /** Whether the user should be able to set custom URL parameters for internal and external links.
+  /**
+   * Whether the user should be able to set custom URL parameters for internal and external links.
    * @defaultValue true
    */
   enableLinkParameters?: boolean
@@ -136,3 +138,28 @@ export interface LinkFieldOptions {
    */
   customLinkTypes?: CustomLinkType[]
 }
+
+/**
+ * Options for an individual link field
+ */
+export interface LinkFieldOptions {
+  /**
+   * Whether the link should include an optional field for setting the link text/label.
+   * @defaultValue false
+   */
+  enableText?: boolean
+
+  /**
+   * The label for the text input field, if enabled using the `enableText` option.
+   * @defaultValue Text
+   */
+  textLabel?: string
+}
+
+export type LinkSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: LinkFieldOptions
+}
+
+export type LinkInputProps = ObjectInputProps<LinkValue, LinkSchemaType> & {
+  customLinkTypes: CustomLinkType[]
+}