diff --git a/studio/components/StringInputWithCharacterCount.tsx b/studio/components/StringInputWithCharacterCount.tsx index 782b70d19..852581088 100644 --- a/studio/components/StringInputWithCharacterCount.tsx +++ b/studio/components/StringInputWithCharacterCount.tsx @@ -1,14 +1,22 @@ import { Box, Stack, Text } from "@sanity/ui"; import { StringInputProps } from "sanity"; -export const StringInputWithCharacterCount = (props: StringInputProps) => { - const characterCount = props.value?.length ?? 0; +type StringInputWithCharacterCountProps = StringInputProps & { + maxCount?: number; +}; + +export const StringInputWithCharacterCount = ({ + maxCount, + ...defaultProps +}: StringInputWithCharacterCountProps) => { + const characterCount = defaultProps.value?.length ?? 0; return ( - {props.renderDefault(props)} + {defaultProps.renderDefault(defaultProps)} - {characterCount} characters + {characterCount} + {maxCount && `/${maxCount}`} characters ); diff --git a/studio/schemas/objects/seo.ts b/studio/schemas/objects/seo.ts index d0afc3042..0aa9b1bda 100644 --- a/studio/schemas/objects/seo.ts +++ b/studio/schemas/objects/seo.ts @@ -30,7 +30,8 @@ const seo = defineField({ Rule.max(70).error("A title cannot exceed 70 characters"), ], components: { - input: StringInputWithCharacterCount, + input: (props) => + StringInputWithCharacterCount({ ...props, maxCount: 70 }), }, }), defineField({ @@ -48,7 +49,8 @@ const seo = defineField({ ), ], components: { - input: StringInputWithCharacterCount, + input: (props) => + StringInputWithCharacterCount({ ...props, maxCount: 160 }), }, }), defineField({