feat(studio): custom string input component with character count

Composes the default string input rendering with a simple character count. Initially only used in SEO fields, but can be later applied where applicable.

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 (
+    <Stack space={3}>
+      <Box>{props.renderDefault(props)}</Box>
+      <Text size={1} muted>
+        {characterCount} characters
+      </Text>
+    </Stack>
+  );
+};

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,