diff --git a/studio/components/StringInputWithCharacterCount.tsx b/studio/components/StringInputWithCharacterCount.tsx new file mode 100644 index 000000000..782b70d19 --- /dev/null +++ b/studio/components/StringInputWithCharacterCount.tsx @@ -0,0 +1,15 @@ +import { Box, Stack, Text } from "@sanity/ui"; +import { StringInputProps } from "sanity"; + +export const StringInputWithCharacterCount = (props: StringInputProps) => { + const characterCount = props.value?.length ?? 0; + + return ( + + {props.renderDefault(props)} + + {characterCount} characters + + + ); +}; diff --git a/studio/schemas/objects/seo.ts b/studio/schemas/objects/seo.ts index af7189e7f..d0afc3042 100644 --- a/studio/schemas/objects/seo.ts +++ b/studio/schemas/objects/seo.ts @@ -1,4 +1,5 @@ import { defineField } from "sanity"; +import { StringInputWithCharacterCount } from "studio/components/StringInputWithCharacterCount"; const seoFieldID = { title: "seoTitle", @@ -28,6 +29,9 @@ const seo = defineField({ .error("A title of minimum 15 characters is required"), Rule.max(70).error("A title cannot exceed 70 characters"), ], + components: { + input: StringInputWithCharacterCount, + }, }), defineField({ name: seoFieldID.description, @@ -43,6 +47,9 @@ const seo = defineField({ "A description of more than 160 characters has a lower chance of converting visitors", ), ], + components: { + input: StringInputWithCharacterCount, + }, }), defineField({ name: seoFieldID.keywords,