@lets-events/react 12.1.6 → 12.1.8

package/.turbo/turbo-build.log

@@ -1,7 +1,6 @@
 
-npm warn cli npm v11.5.1 does not support Node.js v20.10.0. This version of npm supports the following node versions: `^20.17.0 || >=22.9.0`. You can find the latest version at https://nodejs.org/.
 
-> @lets-events/react@12.1.6 build
+> @lets-events/react@12.1.8 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -11,14 +10,14 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/QuillComponent-A5KIFPCL.mjs 13.19 KB
+CJS dist/index.js 375.90 KB
+CJS ⚡️ Build success in 258ms
+ESM dist/QuillComponent-EIWPUIIH.mjs 13.81 KB
 ESM dist/chunk-TU7LKUXZ.mjs          61.98 KB
-ESM dist/index.mjs                   277.16 KB
-ESM ⚡️ Build success in 396ms
-CJS dist/index.js 374.66 KB
-CJS ⚡️ Build success in 397ms
+ESM dist/index.mjs                   277.60 KB
+ESM ⚡️ Build success in 274ms
 DTS Build start
-DTS ⚡️ Build success in 7341ms
-DTS dist/index.d.mts 388.73 KB
-DTS dist/index.d.ts  388.73 KB
+DTS ⚡️ Build success in 5155ms
+DTS dist/index.d.mts 388.87 KB
+DTS dist/index.d.ts  388.87 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.1.8
+
+### Patch Changes
+
+- RG mask and validation
+
+## 12.1.7
+
+### Patch Changes
+
+- Richeditor simpleVersion and MaxLength
+
 ## 12.1.6
 
 ### Patch Changes

package/dist/index.d.mts

@@ -14724,7 +14724,10 @@ interface RichEditorProps {
     label?: string;
     disabled?: boolean;
     className?: string;
-    uploadConfig: UploadConfig$1;
+    uploadConfig?: UploadConfig$1;
+    simpleVersion?: boolean;
+    onCharacterCountChange?: (count: number) => void;
+    maxLength?: number;
 }
 declare const RichEditor: (props: RichEditorProps) => react_jsx_runtime.JSX.Element | null;
 
@@ -14733,10 +14736,11 @@ type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     label?: string;
     required?: boolean;
     validate?: (value: string) => boolean | string;
+    maxLength?: number;
     validationErrorMessage?: string;
     uploadConfig: RichEditorProps["uploadConfig"];
 };
-declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, maxLength, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type CalendarFormFieldProps = Omit<CalendarProps, "selected" | "setSelected"> & {
     name: string;

package/dist/index.d.ts

@@ -14724,7 +14724,10 @@ interface RichEditorProps {
     label?: string;
     disabled?: boolean;
     className?: string;
-    uploadConfig: UploadConfig$1;
+    uploadConfig?: UploadConfig$1;
+    simpleVersion?: boolean;
+    onCharacterCountChange?: (count: number) => void;
+    maxLength?: number;
 }
 declare const RichEditor: (props: RichEditorProps) => react_jsx_runtime.JSX.Element | null;
 
@@ -14733,10 +14736,11 @@ type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     label?: string;
     required?: boolean;
     validate?: (value: string) => boolean | string;
+    maxLength?: number;
     validationErrorMessage?: string;
     uploadConfig: RichEditorProps["uploadConfig"];
 };
-declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, maxLength, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type CalendarFormFieldProps = Omit<CalendarProps, "selected" | "setSelected"> & {
     name: string;

package/dist/index.js

@@ -152,7 +152,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment5 = REACT_FRAGMENT_TYPE;
+        var Fragment6 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -211,7 +211,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment5;
+        exports2.Fragment = Fragment6;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -2053,7 +2053,10 @@ var init_QuillComponent = __esm({
       placeholder = "Digite seu texto aqui...",
       disabled = false,
       className,
-      uploadConfig
+      uploadConfig,
+      simpleVersion = false,
+      onCharacterCountChange,
+      maxLength
     }) => {
       const [showVideoModal, setShowVideoModal] = (0, import_react20.useState)(false);
       const [videoUrl, setVideoUrl] = (0, import_react20.useState)("");
@@ -2062,7 +2065,16 @@ var init_QuillComponent = __esm({
       const videoModalRef = (0, import_react20.useRef)(null);
       const linkModalRef = (0, import_react20.useRef)(null);
       const { addToast, removeToast } = useToast();
-      const modules = {
+      const modules = simpleVersion ? {
+        toolbar: [
+          ["bold", "italic", "underline"],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link"]
+        ],
+        clipboard: {
+          matchVisual: false
+        }
+      } : {
         toolbar: [
           [{ header: [1, 2, false] }],
           ["bold", "italic", "underline", "strike"],
@@ -2075,7 +2087,7 @@ var init_QuillComponent = __esm({
           matchVisual: false
         }
       };
-      const formats = [
+      const formats = simpleVersion ? ["bold", "italic", "underline", "list", "link"] : [
         "header",
         "bold",
         "italic",
@@ -2143,8 +2155,14 @@ var init_QuillComponent = __esm({
         if (quill) {
           quill.on("text-change", (delta, oldDelta, source) => {
             if (source === "user") {
-              const html = quill.root.innerHTML;
-              onChange == null ? void 0 : onChange(html);
+              const text = quill.getText().trim();
+              const count = text.length;
+              if (maxLength !== void 0 && count > maxLength) {
+                quill.deleteText(maxLength, count - maxLength);
+                return;
+              }
+              onChange == null ? void 0 : onChange(quill.root.innerHTML);
+              onCharacterCountChange == null ? void 0 : onCharacterCountChange(count);
             }
           });
           const toolbar = quill.getModule("toolbar");
@@ -2187,7 +2205,7 @@ var init_QuillComponent = __esm({
             }
           }, 2e3);
         }
-      }, [quill, onChange, handleImageUpload]);
+      }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
       (0, import_react20.useEffect)(() => {
         if (quill) {
           quill.enable(!disabled);
@@ -11093,18 +11111,7 @@ var IdentityDocumentNumberFormField = ({
       name,
       label,
       required,
-      placeholder: placeholder || "__.___.___-_",
-      mask: {
-        mask: "__.___.___-_",
-        replacement: { _: /[0-9]/ }
-      },
-      validate: (value) => {
-        const cleaned = value.replace(/[^\d]/g, "");
-        const isEmpty = cleaned.length === 0;
-        if (!required && isEmpty) return true;
-        if (cleaned.length >= 3) return true;
-        return validationErrorMessage;
-      }
+      placeholder: placeholder || "__.___.___-_"
     }
   );
 };
@@ -11746,6 +11753,7 @@ var RichEditor = (props) => {
 var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
+var import_react22 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var RichEditorFormField = (_a) => {
   var _b = _a, {
@@ -11753,13 +11761,15 @@ var RichEditorFormField = (_a) => {
     label,
     required,
     validate,
-    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio."
+    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
+    maxLength
   } = _b, props = __objRest(_b, [
     "name",
     "label",
     "required",
     "validate",
-    "validationErrorMessage"
+    "validationErrorMessage",
+    "maxLength"
   ]);
   const { field, fieldState } = (0, import_react_hook_form12.useController)({
     name,
@@ -11774,11 +11784,28 @@ var RichEditorFormField = (_a) => {
     },
     defaultValue: ""
   });
+  const [caracterQuantity, setCaracterQuantity] = (0, import_react22.useState)(maxLength);
+  const handleCharacterCountChange = (count) => {
+    if (maxLength !== void 0) {
+      setCaracterQuantity(Math.max(0, maxLength - count));
+    }
+  };
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex2, { direction: "column", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex2, { direction: "row", justify: "between", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        FormLabel,
+        {
+          name,
+          label,
+          required,
+          haveError
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Badge, { color: "grey", size: "xs", children: caracterQuantity })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       FormLabel,
       {
         name,
@@ -11786,13 +11813,15 @@ var RichEditorFormField = (_a) => {
         required,
         haveError
       }
-    ),
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
         onChange: field.onChange,
-        "aria-labelledby": `${name}-label`
+        "aria-labelledby": `${name}-label`,
+        onCharacterCountChange: handleCharacterCountChange,
+        maxLength
       })
     ),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorFormMessage, { message: errorMsg })
@@ -11802,7 +11831,7 @@ var RichEditorFormField = (_a) => {
 // src/components/FormFields/CalendarFormField.tsx
 var import_react_hook_form13 = require("react-hook-form");
 init_Flex();
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
@@ -11824,7 +11853,7 @@ var CalendarFormField = (_a) => {
     "onChange",
     "allowPastDates"
   ]);
-  const handleValidate = (0, import_react22.useCallback)(
+  const handleValidate = (0, import_react23.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -11879,7 +11908,7 @@ var CalendarFormField = (_a) => {
 // src/components/FormFields/TimePickerFormField.tsx
 var import_react_hook_form14 = require("react-hook-form");
 init_Flex();
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
@@ -11897,7 +11926,7 @@ var TimePickerFormField = (_a) => {
     "validationErrorMessage",
     "rules"
   ]);
-  const handleValidate = (0, import_react23.useCallback)(
+  const handleValidate = (0, import_react24.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -11949,12 +11978,12 @@ var TimePickerFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 init_uploadService();
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = (0, import_react24.useState)(false);
-  const [progress, setProgress] = (0, import_react24.useState)(null);
-  const [error, setError] = (0, import_react24.useState)(null);
+  const [isUploading, setIsUploading] = (0, import_react25.useState)(false);
+  const [progress, setProgress] = (0, import_react25.useState)(null);
+  const [error, setError] = (0, import_react25.useState)(null);
   const {
     onSuccess,
     onError,
@@ -11964,7 +11993,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = (0, import_react24.useCallback)(
+  const validateFile = (0, import_react25.useCallback)(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -11982,7 +12011,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = (0, import_react24.useCallback)(
+  const uploadFile = (0, import_react25.useCallback)(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -12035,7 +12064,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = (0, import_react24.useCallback)(() => {
+  const reset = (0, import_react25.useCallback)(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);

package/dist/index.mjs

@@ -8530,18 +8530,7 @@ var IdentityDocumentNumberFormField = ({
       name,
       label,
       required,
-      placeholder: placeholder || "__.___.___-_",
-      mask: {
-        mask: "__.___.___-_",
-        replacement: { _: /[0-9]/ }
-      },
-      validate: (value) => {
-        const cleaned = value.replace(/[^\d]/g, "");
-        const isEmpty = cleaned.length === 0;
-        if (!required && isEmpty) return true;
-        if (cleaned.length >= 3) return true;
-        return validationErrorMessage;
-      }
+      placeholder: placeholder || "__.___.___-_"
     }
   );
 };
@@ -9161,7 +9150,7 @@ import { useController as useController3 } from "react-hook-form";
 // src/components/RichEditor/RichEditor.tsx
 import { lazy, useEffect as useEffect6, useState as useState7, Suspense } from "react";
 import { jsx as jsx46 } from "react/jsx-runtime";
-var QuillComponent = lazy(() => import("./QuillComponent-A5KIFPCL.mjs"));
+var QuillComponent = lazy(() => import("./QuillComponent-EIWPUIIH.mjs"));
 var RichEditor = (props) => {
   const [isClient, setIsClient] = useState7(false);
   useEffect6(() => {
@@ -9173,20 +9162,23 @@ var RichEditor = (props) => {
 var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
-import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
     label,
     required,
     validate,
-    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio."
+    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
+    maxLength
   } = _b, props = __objRest(_b, [
     "name",
     "label",
     "required",
     "validate",
-    "validationErrorMessage"
+    "validationErrorMessage",
+    "maxLength"
   ]);
   const { field, fieldState } = useController3({
     name,
@@ -9201,11 +9193,28 @@ var RichEditorFormField = (_a) => {
     },
     defaultValue: ""
   });
+  const [caracterQuantity, setCaracterQuantity] = useState8(maxLength);
+  const handleCharacterCountChange = (count) => {
+    if (maxLength !== void 0) {
+      setCaracterQuantity(Math.max(0, maxLength - count));
+    }
+  };
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   return /* @__PURE__ */ jsxs24(Flex, { direction: "column", children: [
-    label && /* @__PURE__ */ jsx47(
+    maxLength ? /* @__PURE__ */ jsxs24(Flex, { direction: "row", justify: "between", children: [
+      label && /* @__PURE__ */ jsx47(
+        FormLabel,
+        {
+          name,
+          label,
+          required,
+          haveError
+        }
+      ),
+      /* @__PURE__ */ jsx47(Badge, { color: "grey", size: "xs", children: caracterQuantity })
+    ] }) : /* @__PURE__ */ jsx47(Fragment5, { children: label && /* @__PURE__ */ jsx47(
       FormLabel,
       {
         name,
@@ -9213,13 +9222,15 @@ var RichEditorFormField = (_a) => {
         required,
         haveError
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx47(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
         onChange: field.onChange,
-        "aria-labelledby": `${name}-label`
+        "aria-labelledby": `${name}-label`,
+        onCharacterCountChange: handleCharacterCountChange,
+        maxLength
       })
     ),
     /* @__PURE__ */ jsx47(ErrorFormMessage, { message: errorMsg })
@@ -9374,11 +9385,11 @@ var TimePickerFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState8, useCallback as useCallback6 } from "react";
+import { useState as useState9, useCallback as useCallback6 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState8(false);
-  const [progress, setProgress] = useState8(null);
-  const [error, setError] = useState8(null);
+  const [isUploading, setIsUploading] = useState9(false);
+  const [progress, setProgress] = useState9(null);
+  const [error, setError] = useState9(null);
   const {
     onSuccess,
     onError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.1.6",
+  "version": "12.1.8",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/FormFields/IdentityDocumentNumberFormField.tsx

@@ -21,17 +21,6 @@ export const IdentityDocumentNumberFormField = ({
       label={label}
       required={required}
       placeholder={placeholder || "__.___.___-_"}
-      mask={{
-        mask: "__.___.___-_",
-        replacement: { _: /[0-9]/ },
-      }}
-      validate={(value: string) => {
-        const cleaned = value.replace(/[^\d]/g, "");
-        const isEmpty = cleaned.length === 0;
-        if (!required && isEmpty) return true;
-        if (cleaned.length >= 3) return true;
-        return false || validationErrorMessage;
-      }}
     />
   );
 };

package/src/components/FormFields/RichEditorFormField.tsx

@@ -3,6 +3,8 @@ import { Flex } from "../Flex";
 import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { RichEditor, RichEditorProps } from "../RichEditor";
+import { useState } from "react";
+import { Badge } from "../Badge";
 
 export type RichEditorFormFieldProps = Omit<
   RichEditorProps,
@@ -12,6 +14,7 @@ export type RichEditorFormFieldProps = Omit<
   label?: string;
   required?: boolean;
   validate?: (value: string) => boolean | string;
+  maxLength?: number;
   validationErrorMessage?: string;
   uploadConfig: RichEditorProps["uploadConfig"];
 };
@@ -22,6 +25,7 @@ export const RichEditorFormField = ({
   required,
   validate,
   validationErrorMessage = "Este campo é obrigatório.",
+  maxLength,
   ...props
 }: RichEditorFormFieldProps) => {
   const { field, fieldState } = useController({
@@ -40,27 +44,52 @@ export const RichEditorFormField = ({
     },
     defaultValue: "",
   });
-
+  const [caracterQuantity, setCaracterQuantity] = useState(maxLength)
+  const handleCharacterCountChange = (count: number) => {
+    if (maxLength !== undefined) {
+      setCaracterQuantity(Math.max(0, maxLength - count));
+    }
+  };
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError?.message;
 
+
   return (
     <Flex direction="column">
-      {label && (
-        <FormLabel
-          name={name}
-          label={label}
-          required={required}
-          haveError={haveError}
-        />
+      {maxLength ? (
+        <Flex direction="row" justify="between">
+          {label && (
+            <FormLabel
+              name={name}
+              label={label}
+              required={required}
+              haveError={haveError}
+            />
+          )}
+          <Badge color="grey" size="xs">
+            {caracterQuantity}
+          </Badge>
+        </Flex>
+      ) : (
+        <>
+          {label && (
+            <FormLabel
+              name={name}
+              label={label}
+              required={required}
+              haveError={haveError}
+            />
+          )}
+        </>
       )}
-
       <RichEditor
         {...props}
         value={field.value}
         onChange={field.onChange}
         aria-labelledby={`${name}-label`}
+        onCharacterCountChange={handleCharacterCountChange}
+        maxLength={maxLength}
       />
 
       <ErrorFormMessage message={errorMsg} />

package/src/components/RichEditor/QuillComponent.tsx

@@ -6,20 +6,18 @@ import { Text } from "../Text";
 import { RichEditorProps } from "./RichEditor";
 import { useToast } from "../Toast/hooks/useToast";
 import { UploadService } from "../../utils/uploadService";
-import { UploadConfig } from "./RichEditor";
 import { QuillContainer, QuillEditor } from "./styledComponents";
 
-interface QuillComponentProps extends RichEditorProps {
-  uploadConfig: UploadConfig;
-}
-
-const QuillComponent: React.FC<QuillComponentProps> = ({
+const QuillComponent: React.FC<RichEditorProps> = ({
   value = "",
   onChange,
   placeholder = "Digite seu texto aqui...",
   disabled = false,
   className,
   uploadConfig,
+  simpleVersion = false,
+  onCharacterCountChange,
+  maxLength,
 }) => {
   const [showVideoModal, setShowVideoModal] = useState(false);
   const [videoUrl, setVideoUrl] = useState("");
@@ -30,34 +28,47 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
   const linkModalRef = useRef<HTMLDivElement>(null);
   const { addToast, removeToast } = useToast();
 
-  const modules = {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline", "strike"],
-      [{ color: [] }, { background: [] }],
-      [{ align: [] }],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link", "image", "video"],
-    ],
-    clipboard: {
-      matchVisual: false,
-    },
-  };
-
-  const formats = [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "color",
-    "background",
-    "align",
-    "list",
-    "link",
-    "image",
-    "video",
-  ];
+  const modules = simpleVersion
+    ? {
+      toolbar: [
+        ["bold", "italic", "underline"],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link"],
+      ],
+      clipboard: {
+        matchVisual: false,
+      },
+    }
+    : {
+      toolbar: [
+        [{ header: [1, 2, false] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "image", "video"],
+      ],
+      clipboard: {
+        matchVisual: false,
+      },
+    };
+
+  const formats = simpleVersion
+    ? ["bold", "italic", "underline", "list", "link"]
+    : [
+      "header",
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "color",
+      "background",
+      "align",
+      "list",
+      "link",
+      "image",
+      "video",
+    ];
 
   const { quill, quillRef } = useQuill({
     theme: "snow",
@@ -121,8 +132,15 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
     if (quill) {
       quill.on("text-change", (delta: any, oldDelta: any, source: string) => {
         if (source === "user") {
-          const html = quill.root.innerHTML;
-          onChange?.(html);
+          const text = quill.getText().trim();
+          const count = text.length;
+
+          if (maxLength !== undefined && count > maxLength) {
+            quill.deleteText(maxLength, count - maxLength);
+            return;
+          }
+          onChange?.(quill.root.innerHTML);
+          onCharacterCountChange?.(count);
         }
       });
 
@@ -167,7 +185,7 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
         }
       }, 2000);
     }
-  }, [quill, onChange, handleImageUpload]);
+  }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
 
   useEffect(() => {
     if (quill) {

package/src/components/RichEditor/RichEditor.tsx

@@ -23,7 +23,10 @@ export interface RichEditorProps {
   label?: string;
   disabled?: boolean;
   className?: string;
-  uploadConfig: UploadConfig;
+  uploadConfig?: UploadConfig;
+  simpleVersion?: boolean;
+  onCharacterCountChange?: (count: number) => void;
+  maxLength?: number;
 }
 
 const RichEditor = (props: RichEditorProps) => {