From 41c49ebd41510c7f345628729bec32bdb377e496 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 27 Aug 2024 09:21:19 +0200
Subject: [PATCH] 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.
---
 .../components/StringInputWithCharacterCount.tsx  | 15 +++++++++++++++
 studio/schemas/objects/seo.ts                     |  7 +++++++
 2 files changed, 22 insertions(+)
 create mode 100644 studio/components/StringInputWithCharacterCount.tsx

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