@lets-events/react 12.1.5 → 12.1.7

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",
@@ -2127,6 +2139,7 @@ var init_QuillComponent = __esm({
       );
       (0, import_react20.useEffect)(() => {
         if (quill && value) {
+          console.log("entrou no quill && value");
           const currentContent = quill.root.innerHTML;
           if (currentContent !== value) {
             const selection = quill.getSelection();
@@ -2143,8 +2156,15 @@ 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;
+              console.log("entrou no quill && user", maxLength !== void 0, count, maxLength, "count > maxLength");
+              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 +2207,7 @@ var init_QuillComponent = __esm({
             }
           }, 2e3);
         }
-      }, [quill, onChange, handleImageUpload]);
+      }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
       (0, import_react20.useEffect)(() => {
         if (quill) {
           quill.enable(!disabled);
@@ -2504,6 +2524,7 @@ __export(index_exports, {
   TimePickerDropdownStyled: () => TimePickerDropdownStyled,
   TimePickerFooterStyled: () => TimePickerFooterStyled,
   TimePickerFormField: () => TimePickerFormField,
+  TimePickerIconButton: () => TimePickerIconButton,
   TimePickerStyled: () => TimePickerStyled,
   TimerPickerContentStyled: () => TimerPickerContentStyled,
   ToastItem: () => ToastItem,
@@ -9093,6 +9114,7 @@ init_styles();
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -9116,7 +9138,7 @@ var TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -9200,6 +9222,9 @@ var TimePickerButtonStyled = styled("button", {
     }
   }
 });
+var TimePickerIconButton = styled(Button, {
+  padding: "0 !important"
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -9281,7 +9306,7 @@ function TimePicker({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -9353,7 +9378,7 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -11741,6 +11766,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, {
@@ -11748,13 +11774,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,
@@ -11769,11 +11797,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,
@@ -11781,13 +11826,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 })
@@ -11797,7 +11844,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, {
@@ -11819,7 +11866,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) {
@@ -11874,7 +11921,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, {
@@ -11892,7 +11939,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 === "") {
@@ -11944,12 +11991,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,
@@ -11959,7 +12006,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";
@@ -11977,7 +12024,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;
@@ -12030,7 +12077,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);
@@ -12135,6 +12182,7 @@ init_uploadService();
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerFormField,
+  TimePickerIconButton,
   TimePickerStyled,
   TimerPickerContentStyled,
   ToastItem,

package/dist/index.mjs

@@ -6557,6 +6557,7 @@ import { useCallback, useRef as useRef5, useState as useState3 } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -6580,7 +6581,7 @@ var TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -6664,6 +6665,9 @@ var TimePickerButtonStyled = styled("button", {
     }
   }
 });
+var TimePickerIconButton = styled(Button, {
+  padding: "0 !important"
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -6745,7 +6749,7 @@ function TimePicker({
                 },
                 children: [
                   /* @__PURE__ */ jsx14(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -6817,7 +6821,7 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ jsx14(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -9157,7 +9161,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-TLIZCM6V.mjs"));
 var RichEditor = (props) => {
   const [isClient, setIsClient] = useState7(false);
   useEffect6(() => {
@@ -9169,20 +9173,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,
@@ -9197,11 +9204,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,
@@ -9209,13 +9233,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 })
@@ -9370,11 +9396,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,
@@ -9556,6 +9582,7 @@ export {
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerFormField,
+  TimePickerIconButton,
   TimePickerStyled,
   TimerPickerContentStyled,
   ToastItem,

package/package.json

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

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",
@@ -103,6 +114,7 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
 
   useEffect(() => {
     if (quill && value) {
+      console.log('entrou no quill && value')
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
         const selection = quill.getSelection();
@@ -121,8 +133,16 @@ 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;
+          console.log('entrou no quill && user', maxLength !== undefined, count, maxLength, 'count > maxLength')
+
+          if (maxLength !== undefined && count > maxLength) {
+            quill.deleteText(maxLength, count - maxLength);
+            return;
+          }
+          onChange?.(quill.root.innerHTML);
+          onCharacterCountChange?.(count);
         }
       });
 
@@ -167,7 +187,7 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
         }
       }, 2000);
     }
-  }, [quill, onChange, handleImageUpload]);
+  }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
 
   useEffect(() => {
     if (quill) {