From 6ca7cbe1f304830ce8843920d8e09465f2b722f8 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 13 Sep 2024 15:34:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20compactblockeditor=20and?=
 =?UTF-8?q?=20reuse=20charactercount=20#2521?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../schemas/components/CompactBlockEditor.tsx | 10 +++----
 sanityv3/schemas/objects/titleAndMeta.tsx     | 26 +++----------------
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/sanityv3/schemas/components/CompactBlockEditor.tsx b/sanityv3/schemas/components/CompactBlockEditor.tsx
index 7de1a4501..48296d7fd 100644
--- a/sanityv3/schemas/components/CompactBlockEditor.tsx
+++ b/sanityv3/schemas/components/CompactBlockEditor.tsx
@@ -5,17 +5,17 @@ import styled from 'styled-components'
 
 // How future proof will this be?
 // - not so far #753
-const Wrapper = styled.div`
-  div[data-wrapper] > div {
-    height: unset;
+const Container = styled.div`
+  [data-testid='pt-editor'][data-fullscreen='false'] {
+    height: 100px;
   }
 `
 
 const SingleLineEditor = forwardRef((props: any, ref) => {
   return (
-    <Wrapper>
+    <Container>
       <BlockEditor ref={ref} {...props} />
-    </Wrapper>
+    </Container>
   )
 })
 export default SingleLineEditor
diff --git a/sanityv3/schemas/objects/titleAndMeta.tsx b/sanityv3/schemas/objects/titleAndMeta.tsx
index cea967fad..1d63e01ca 100644
--- a/sanityv3/schemas/objects/titleAndMeta.tsx
+++ b/sanityv3/schemas/objects/titleAndMeta.tsx
@@ -1,26 +1,6 @@
-import { useCallback } from 'react'
-import { Stack, TextArea, Label } from '@sanity/ui'
-import { set, unset, Rule } from 'sanity'
+import { Rule } from 'sanity'
 import { SchemaType } from '../../types'
-
-export const TextAreaWithChars = (props: any) => {
-  const { elementProps, onChange, value = '' } = props
-
-  const handleChange = useCallback(
-    (event: any) => {
-      const nextValue = event.currentTarget.value
-      onChange(nextValue ? set(nextValue) : unset())
-    },
-    [onChange],
-  )
-
-  return (
-    <Stack space={2}>
-      <TextArea {...elementProps} onChange={handleChange} value={value} rows={5} />
-      <Label size={1}>Characters: {value.length}</Label>
-    </Stack>
-  )
-}
+import { CharCounterEditor } from '../components/CharCounterEditor'
 
 export default {
   title: 'Fields for title and description meta',
@@ -52,7 +32,7 @@ export default {
       It shows up in search results and in social media. Should be max. 160 chars`,
       type: 'text',
       components: {
-        input: TextAreaWithChars,
+        input: CharCounterEditor,
       },
     },
   ],