fixed editor styling

src/Components/Input/TextAreaInput.tsx

@@ -13,6 +13,7 @@ interface TextAreaProps {
   defaultValue: string
   placeholder?: string
   required?: boolean
+  size?: string
   updateFormValue?: (value: string) => void
 }
 
@@ -28,11 +29,23 @@ export function TextAreaInput({
   defaultValue,
   placeholder,
   required = true,
+  size,
   updateFormValue,
 }: TextAreaProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [inputValue, setInputValue] = useState<string>(defaultValue)
 
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const [containerHeight, setContainerHeight] = useState<string>('100%')
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const height = containerRef.current.offsetHeight
+      setContainerHeight(`${height - 200}px`)
+    }
+  }, [])
+
   useEffect(() => {
     setInputValue(defaultValue)
   }, [defaultValue])
@@ -49,7 +62,8 @@ export function TextAreaInput({
     return {
       status: false,
       lineNumbers: false,
-      minHeight: '150px',
+      minHeight: size === 'small' ? '100%' : '100%',
+      maxHeight: size === 'small' ? '30px' : containerHeight,
       forceSync: true,
       /*
           autoDownloadFontAwesome?: boolean;
@@ -113,10 +127,10 @@ export function TextAreaInput({
           direction?: 'ltr' | 'rtl';
           */
     } as SimpleMDE.Options
-  }, [])
+  }, [containerHeight, size])
 
   return (
-    <div className={`tw:form-control ${containerStyle ?? ''}`}>
+    <div ref={containerRef} className={`tw:form-control ${containerStyle ?? ''}`}>
       {labelTitle ? (
         <label className='tw:label'>
           <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>

src/Components/Profile/Subcomponents/ProfileTextForm.tsx

@@ -61,6 +61,7 @@ export const ProfileTextForm = ({
         containerStyle={size === 'full' ? 'tw:grow tw:h-full' : ''}
         inputStyle={size === 'full' ? 'tw:h-full' : 'tw:h-24'}
         required={required}
+        size={size}
       />
     </div>
   )

src/Components/Profile/Templates/TabsForm.tsx

@@ -100,7 +100,8 @@ export const TabsForm = ({
                   text: v,
                 }))
               }
-              // containerStyle='tw:grow'
+              size='full'
+              containerStyle='tw:grow'
               inputStyle={`tw:h-full  ${!item.layer.itemType.show_start_end_input && 'tw:border-t-0 tw:rounded-tl-none'}`}
             />
             <TextAreaInput
@@ -115,6 +116,7 @@ export const TabsForm = ({
               }
               inputStyle=''
               containerStyle='tw:pt-4'
+              size='small'
               // containerStyle='tw:pt-4 tw:h-24 tw:flex-none'
               required={false}
             />

src/assets/css/easymde.css

@@ -4,23 +4,23 @@
 
 @layer easymde {
   .EasyMDEContainer h1 {
-    @apply tw:text-4xl;
-    @apply tw:font-bold;
-  }
-  .EasyMDEContainer h2 {
     @apply tw:text-3xl;
     @apply tw:font-bold;
   }
-  .EasyMDEContainer h3 {
+  .EasyMDEContainer h2 {
     @apply tw:text-2xl;
     @apply tw:font-bold;
   }
-  .EasyMDEContainer h4 {
+  .EasyMDEContainer h3 {
     @apply tw:text-xl;
+    @apply tw:font-bold;
+  }
+  .EasyMDEContainer h4 {
+    @apply tw:text-lg;
     @apply tw:font-semibold;
   }
   .EasyMDEContainer h5 {
-    @apply tw:text-lg;
+    @apply tw:text-base;
     @apply tw:font-semibold;
   }
   .EasyMDEContainer h6 {
@@ -38,4 +38,15 @@
   .EasyMDEContainer button.active, button:hover{
     background: var(--color-base-100) !important;
   }
+
+  .CodeMirror {
+    background-color: var(--color-base-100) !important;
+    color: var(--color-base-content) !important;
+    caret-color: var(--color-base-content) !important;
+  }
+
+  .editor-preview-side {
+    background-color: var(--color-base-100) !important;
+    color: var(--color-base-content) !important;
+  }
 }