hide toolbar

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>
   )

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;
+  }
 }