From 7f2cd38bea2a86345b4e11e5d9ba61fa7160383b Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 18 Mar 2024 08:21:01 +0000
Subject: [PATCH] fix: typing card description removes placeholder

---
 src/app/cards/[cardId]/page.tsx | 3 ++-
 src/styles/globals.css          | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/cards/[cardId]/page.tsx b/src/app/cards/[cardId]/page.tsx
index 02d14ed9..7d0b2205 100644
--- a/src/app/cards/[cardId]/page.tsx
+++ b/src/app/cards/[cardId]/page.tsx
@@ -124,7 +124,8 @@ export default function CardPage() {
           <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
             <div className="mt-2">
               <ContentEditable
-                html={formik.values.description || "Add description..."}
+                placeholder="Add description..."
+                html={formik.values.description}
                 disabled={false}
                 onChange={(e) =>
                   formik.setFieldValue("description", e.target.value)
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c95..4906ef66 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+[contenteditable=true]:empty:before {
+  content: attr(placeholder);
+  display: block;
+  color: #707070;
+}