textarea replace editor

src/components/Textarea.tsx

@@ -3,24 +3,27 @@ import Error from './Error'
 import { clx } from '../helpers/utils'
 
 type Props = {
-    label: string,
+    label?: string,
     error_text?: string
 } & InputHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea: FC<Props> = (props: Props) => {
     return (
         <div className='w-full relative'>
-            <label className='text-sm'>
-                {props.label}
-            </label>
+            {
+                props.label &&
+                <label className='text-sm'>
+                    {props.label}
+                </label>
+            }
 
             <textarea
+                {...props}
                 className={clx(
-                    'border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
+                    'border  border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
                     props.readOnly && 'bg-gray-100 border-0 text-description'
                 )}
 
-                {...props}
             >
 
             </textarea>

src/pages/setting/personality/components/TextSidebar.tsx

@@ -2,10 +2,10 @@ import Button from '@/components/Button';
 import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically, Edit, Trash } from 'iconsax-react';
 import { FC, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import ReactQuill from 'react-quill-new';
 import { usePersonalityStore } from '../store/Store';
 import ColorPicker from '@/components/ColorPicker';
 import { HorizontalAlignment, VerticalAlignment, ElementType } from '../types/Types';
+import Textarea from '@/components/Textarea';
 
 const TextSidebar: FC = () => {
 
@@ -66,10 +66,6 @@ const TextSidebar: FC = () => {
         }
     }, [selectedElement, isEditMode, data]);
 
-    const handleChange = (value: string) => {
-        setValue(value);
-    }
-
     const handleAddText = () => {
         if (value.trim()) {
             addTextToActiveItem({
@@ -136,7 +132,7 @@ const TextSidebar: FC = () => {
             </div>
 
             <div className='mt-8'>
-                <ReactQuill
+                {/* <ReactQuill
                     modules={{
                         toolbar: [
                             [{ header: '1' }, { header: '2' }, { font: [] }],
@@ -152,6 +148,12 @@ const TextSidebar: FC = () => {
                     onChange={handleChange}
                     style={{ minHeight: '120px' }}
                     className='text-sm'
+                /> */}
+                <Textarea
+                    placeholder={t('setting.text')}
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    className='text-sm border border-border'
                 />
             </div>