From f40bcb6586797dfeafe48dba85624fe4204ba62b Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 28 May 2025 16:51:31 +0200
Subject: [PATCH] hide toolbar

---
 src/Components/Input/TextAreaInput.tsx | 13 ++++++++++++-
 src/assets/css/easymde.css             |  8 ++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index b24c62ad..c21e5968 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -32,6 +32,7 @@ export function TextAreaInput({
 }: TextAreaProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [inputValue, setInputValue] = useState<string>(defaultValue)
+  const [showToolbar, setShowToolbar] = useState<boolean>(false)
 
   useEffect(() => {
     setInputValue(defaultValue)
@@ -45,6 +46,14 @@ export function TextAreaInput({
     }
   }
 
+  const handleFocus = () => {
+    setShowToolbar(true)
+  }
+
+  const handleBlur = () => {
+    setShowToolbar(false)
+  }
+
   const options = useMemo(() => {
     return {
       status: false,
@@ -136,8 +145,10 @@ export function TextAreaInput({
         value={inputValue}
         placeholder={placeholder ?? ''}
         onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         options={options}
-        className={`${inputStyle ?? ''}`}
+        className={`${inputStyle ?? ''} ${showToolbar ? '' : 'hide-toolbar'}`}
       />
     </div>
   )
diff --git a/src/assets/css/easymde.css b/src/assets/css/easymde.css
index e7266f00..032d87b6 100644
--- a/src/assets/css/easymde.css
+++ b/src/assets/css/easymde.css
@@ -1,8 +1,8 @@
 @import 'tailwindcss' prefix(tw);
 
-@import 'easymde/dist/easymde.min.css';
-
 @layer easymde {
+  @import 'easymde/dist/easymde.min.css';
+
   .EasyMDEContainer h1 {
     @apply tw:text-4xl;
     @apply tw:font-bold;
@@ -38,4 +38,8 @@
   .EasyMDEContainer button.active, button:hover{
     background: var(--color-base-100) !important;
   }
+
+  .hide-toolbar .EasyMDEContainer .editor-toolbar {
+    display: none;
+  }
 }