textarea replace editor

package.json

@@ -41,7 +41,7 @@
     "react-loading-skeleton": "^3.5.0",
     "react-multi-date-picker": "^4.5.2",
     "react-quill": "^2.0.0",
-    "react-quill-new": "^3.4.6",
+    "react-quill-new": "^3.6.0",
     "react-router-dom": "^7.5.2",
     "react-spinners": "^0.17.0",
     "swiper": "^11.2.6",

pnpm-lock.yaml

@@ -99,8 +99,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-quill-new:
-        specifier: ^3.4.6
+        specifier: ^3.6.0
-        version: 3.4.6(quill-delta@5.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 3.6.0(quill-delta@5.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-router-dom:
         specifier: ^7.5.2
         version: 7.6.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2640,8 +2640,8 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  react-quill-new@3.4.6:
+  react-quill-new@3.6.0:
-    resolution: {integrity: sha512-S2kEAwoKRo+xUIAEpb94fwiPe2QU3FmwIfQ+7Lkchf+izPa2nRu1mr4i4QxyVYg8TjHDryDUiOEYZuFEV45QFA==}
+    resolution: {integrity: sha512-weU6YfB2+7Cujw5Hjgmi0aN/qJd3B6ADWrxgUJMp2MO3tEvKX5kfB0sg3P0UdOVfU0z8icsKFzlnEIpeW1mLhw==}
     peerDependencies:
       quill-delta: ^5.1.0
       react: ^16 || ^17 || ^18 || ^19
@@ -5895,7 +5895,7 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       react-element-popper: 2.1.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
 
-  react-quill-new@3.4.6(quill-delta@5.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  react-quill-new@3.6.0(quill-delta@5.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       lodash-es: 4.17.21
       quill: 2.0.3

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'>
+            {
+                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',
                     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>