@lets-events/react 12.10.4 → 12.10.6

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.10.4 build
+> @lets-events/react@12.10.6 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 411.50 KB
-ESM ⚡️ Build success in 519ms
-CJS dist/index.js 427.16 KB
-CJS ⚡️ Build success in 521ms
+ESM dist/index.mjs 413.85 KB
+ESM ⚡️ Build success in 498ms
+CJS dist/index.js 429.51 KB
+CJS ⚡️ Build success in 499ms
 DTS Build start
-DTS ⚡️ Build success in 9718ms
-DTS dist/index.d.mts 404.99 KB
-DTS dist/index.d.ts  404.99 KB
+DTS ⚡️ Build success in 9566ms
+DTS dist/index.d.mts 405.26 KB
+DTS dist/index.d.ts  405.26 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.10.6
+
+### Patch Changes
+
+- RichEditorFormField props
+
+## 12.10.5
+
+### Patch Changes
+
+- rich editor props
+
 ## 12.10.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -15296,6 +15296,8 @@ type EmailFormFieldProps = {
 };
 declare const EmailFormField: ({ name, label, required, placeholder, }: EmailFormFieldProps) => react_jsx_runtime.JSX.Element;
 
+type RichEditorElement = "header" | "bold" | "italic" | "underline" | "color" | "background" | "align" | "list" | "link" | "image" | "video";
+
 interface UploadConfig$1 {
     apiUrl: string;
     s3Bucket: string;
@@ -15317,6 +15319,7 @@ interface RichEditorProps {
     className?: string;
     uploadConfig?: UploadConfig$1;
     simpleVersion?: boolean;
+    richEditorElements?: RichEditorElement[];
     onCharacterCountChange?: (count: number) => void;
     maxLength?: number;
     disableVideo?: boolean;
@@ -15338,8 +15341,9 @@ type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     simpleVersion?: boolean;
     uploadConfig?: RichEditorProps["uploadConfig"];
     disableVideo?: boolean;
+    richEditorElements?: RichEditorElement[];
 };
-declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, maxLength, simpleVersion, disableVideo, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, maxLength, simpleVersion, disableVideo, richEditorElements, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type CalendarFormFieldProps = Omit<CalendarProps, "selected" | "setSelected"> & {
     name: string;
@@ -15447,4 +15451,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, DateAndTimeFormField, type DateAndTimeFormFieldProps, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, ToggleElement, type ToggleElementProps, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, DateAndTimeFormField, type DateAndTimeFormFieldProps, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, type RichEditorElement, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, ToggleElement, type ToggleElementProps, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.d.ts

@@ -15296,6 +15296,8 @@ type EmailFormFieldProps = {
 };
 declare const EmailFormField: ({ name, label, required, placeholder, }: EmailFormFieldProps) => react_jsx_runtime.JSX.Element;
 
+type RichEditorElement = "header" | "bold" | "italic" | "underline" | "color" | "background" | "align" | "list" | "link" | "image" | "video";
+
 interface UploadConfig$1 {
     apiUrl: string;
     s3Bucket: string;
@@ -15317,6 +15319,7 @@ interface RichEditorProps {
     className?: string;
     uploadConfig?: UploadConfig$1;
     simpleVersion?: boolean;
+    richEditorElements?: RichEditorElement[];
     onCharacterCountChange?: (count: number) => void;
     maxLength?: number;
     disableVideo?: boolean;
@@ -15338,8 +15341,9 @@ type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     simpleVersion?: boolean;
     uploadConfig?: RichEditorProps["uploadConfig"];
     disableVideo?: boolean;
+    richEditorElements?: RichEditorElement[];
 };
-declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, maxLength, simpleVersion, disableVideo, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const RichEditorFormField: ({ name, label, required, validate, validationErrorMessage, maxLength, simpleVersion, disableVideo, richEditorElements, ...props }: RichEditorFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type CalendarFormFieldProps = Omit<CalendarProps, "selected" | "setSelected"> & {
     name: string;
@@ -15447,4 +15451,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, DateAndTimeFormField, type DateAndTimeFormFieldProps, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, ToggleElement, type ToggleElementProps, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, DateAndTimeFormField, type DateAndTimeFormFieldProps, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, type RichEditorElement, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, ToggleElement, type ToggleElementProps, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.js

@@ -12921,9 +12921,141 @@ var QuillEditor = styled("div", {
   // Container snow
   "& .ql-container.ql-snow": {
     border: "1px solid #ccc"
+  },
+  "& button.ql-list:first-child": {
+    borderLeft: "1px solid #C2C3C7",
+    paddingLeft: "16px",
+    width: "38px"
   }
 });
 
+// src/components/RichEditor/editorConfig.ts
+var TEXT_FORMATS = ["bold", "italic", "underline"];
+var MEDIA_FORMATS = ["link", "image", "video"];
+var buildToolbarFromElements = (elements) => {
+  const toolbar = [];
+  if (elements.includes("header")) {
+    toolbar.push([{ header: [1, 2, false] }]);
+  }
+  const textGroup = elements.filter(
+    (element) => TEXT_FORMATS.includes(element)
+  );
+  if (textGroup.length > 0) {
+    toolbar.push(textGroup);
+  }
+  const colorGroup = [];
+  if (elements.includes("color")) colorGroup.push({ color: [] });
+  if (elements.includes("background")) colorGroup.push({ background: [] });
+  if (colorGroup.length > 0) {
+    toolbar.push(colorGroup);
+  }
+  if (elements.includes("align")) {
+    toolbar.push([{ align: [] }]);
+  }
+  if (elements.includes("list")) {
+    toolbar.push([{ list: "ordered" }, { list: "bullet" }]);
+  }
+  const mediaGroup = elements.filter(
+    (element) => MEDIA_FORMATS.includes(element)
+  );
+  if (mediaGroup.length > 0) {
+    toolbar.push(mediaGroup);
+  }
+  return toolbar;
+};
+var buildFormatsFromElements = (elements) => elements;
+var getEditorModulesAndFormats = (richEditorElements, simpleVersion = false, disableVideo = false) => {
+  const clipboard = { matchVisual: false };
+  if (richEditorElements && richEditorElements.length > 0) {
+    return {
+      modules: {
+        toolbar: buildToolbarFromElements(richEditorElements),
+        clipboard
+      },
+      formats: buildFormatsFromElements(richEditorElements)
+    };
+  }
+  if (simpleVersion) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }]
+        ],
+        clipboard
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "color",
+        "background",
+        "align",
+        "list"
+      ]
+    };
+  }
+  if (disableVideo) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline", "strike"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link", "image"]
+        ],
+        clipboard
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "color",
+        "background",
+        "align",
+        "list",
+        "link",
+        "image"
+      ]
+    };
+  }
+  return {
+    modules: {
+      toolbar: [
+        [{ header: [1, 2, false] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "image", "video"]
+      ],
+      clipboard
+    },
+    formats: [
+      "header",
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "color",
+      "background",
+      "align",
+      "list",
+      "link",
+      "image",
+      "video"
+    ]
+  };
+};
+
 // src/components/RichEditor/QuillComponent.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var QuillComponent = ({
@@ -12935,6 +13067,7 @@ var QuillComponent = ({
   uploadConfig,
   simpleVersion = false,
   disableVideo = false,
+  richEditorElements,
   onCharacterCountChange,
   maxLength
 }) => {
@@ -12950,65 +13083,11 @@ var QuillComponent = ({
     const doc = parser.parseFromString(html, "text/html");
     return doc.body.innerHTML;
   };
-  const modules = simpleVersion ? {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline"],
-      [{ color: [] }, { background: [] }],
-      [{ align: [] }],
-      [{ list: "ordered" }, { list: "bullet" }]
-    ],
-    clipboard: {
-      matchVisual: false
-    }
-  } : disableVideo ? {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline", "strike"],
-      [{ color: [] }, { background: [] }],
-      [{ align: [] }],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link", "image"]
-    ],
-    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 ? [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "color",
-    "background",
-    "align",
-    "list"
-  ] : [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "color",
-    "background",
-    "align",
-    "list",
-    "link",
-    "image",
-    "video"
-  ];
+  const { modules, formats } = getEditorModulesAndFormats(
+    richEditorElements,
+    simpleVersion,
+    disableVideo
+  );
   const { quill, quillRef } = (0, import_react_quilljs.useQuill)({
     theme: "snow",
     modules,
@@ -13078,21 +13157,27 @@ var QuillComponent = ({
       });
       const toolbar = quill.getModule("toolbar");
       if (toolbar) {
-        toolbar.addHandler("link", () => setShowLinkModal(true));
-        toolbar.addHandler("video", () => setShowVideoModal(true));
-        toolbar.addHandler("image", () => {
-          const input = document.createElement("input");
-          input.setAttribute("type", "file");
-          input.setAttribute("accept", "image/*");
-          input.click();
-          input.onchange = () => __async(null, null, function* () {
-            var _a;
-            const file = (_a = input.files) == null ? void 0 : _a[0];
-            if (file) {
-              yield handleImageUpload(file);
-            }
+        if (formats.includes("link")) {
+          toolbar.addHandler("link", () => setShowLinkModal(true));
+        }
+        if (formats.includes("video")) {
+          toolbar.addHandler("video", () => setShowVideoModal(true));
+        }
+        if (formats.includes("image")) {
+          toolbar.addHandler("image", () => {
+            const input = document.createElement("input");
+            input.setAttribute("type", "file");
+            input.setAttribute("accept", "image/*");
+            input.click();
+            input.onchange = () => __async(null, null, function* () {
+              var _a;
+              const file = (_a = input.files) == null ? void 0 : _a[0];
+              if (file) {
+                yield handleImageUpload(file);
+              }
+            });
           });
-        });
+        }
       }
       setTimeout(() => {
         var _a, _b;
@@ -13116,7 +13201,7 @@ var QuillComponent = ({
         }
       }, 2e3);
     }
-  }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
+  }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
   (0, import_react23.useEffect)(() => {
     if (quill) {
       quill.enable(!disabled);
@@ -13380,7 +13465,8 @@ var RichEditorFormField = (_a) => {
     validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
     maxLength,
     simpleVersion = false,
-    disableVideo = false
+    disableVideo = false,
+    richEditorElements
   } = _b, props = __objRest(_b, [
     "name",
     "label",
@@ -13389,7 +13475,8 @@ var RichEditorFormField = (_a) => {
     "validationErrorMessage",
     "maxLength",
     "simpleVersion",
-    "disableVideo"
+    "disableVideo",
+    "richEditorElements"
   ]);
   const { field, fieldState } = (0, import_react_hook_form12.useController)({
     name,
@@ -13443,7 +13530,8 @@ var RichEditorFormField = (_a) => {
         onCharacterCountChange: handleCharacterCountChange,
         maxLength,
         disableVideo,
-        simpleVersion
+        simpleVersion,
+        richEditorElements
       })
     ),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorFormMessage, { message: errorMsg })

package/dist/index.mjs

@@ -12813,9 +12813,141 @@ var QuillEditor = styled("div", {
   // Container snow
   "& .ql-container.ql-snow": {
     border: "1px solid #ccc"
+  },
+  "& button.ql-list:first-child": {
+    borderLeft: "1px solid #C2C3C7",
+    paddingLeft: "16px",
+    width: "38px"
   }
 });
 
+// src/components/RichEditor/editorConfig.ts
+var TEXT_FORMATS = ["bold", "italic", "underline"];
+var MEDIA_FORMATS = ["link", "image", "video"];
+var buildToolbarFromElements = (elements) => {
+  const toolbar = [];
+  if (elements.includes("header")) {
+    toolbar.push([{ header: [1, 2, false] }]);
+  }
+  const textGroup = elements.filter(
+    (element) => TEXT_FORMATS.includes(element)
+  );
+  if (textGroup.length > 0) {
+    toolbar.push(textGroup);
+  }
+  const colorGroup = [];
+  if (elements.includes("color")) colorGroup.push({ color: [] });
+  if (elements.includes("background")) colorGroup.push({ background: [] });
+  if (colorGroup.length > 0) {
+    toolbar.push(colorGroup);
+  }
+  if (elements.includes("align")) {
+    toolbar.push([{ align: [] }]);
+  }
+  if (elements.includes("list")) {
+    toolbar.push([{ list: "ordered" }, { list: "bullet" }]);
+  }
+  const mediaGroup = elements.filter(
+    (element) => MEDIA_FORMATS.includes(element)
+  );
+  if (mediaGroup.length > 0) {
+    toolbar.push(mediaGroup);
+  }
+  return toolbar;
+};
+var buildFormatsFromElements = (elements) => elements;
+var getEditorModulesAndFormats = (richEditorElements, simpleVersion = false, disableVideo = false) => {
+  const clipboard = { matchVisual: false };
+  if (richEditorElements && richEditorElements.length > 0) {
+    return {
+      modules: {
+        toolbar: buildToolbarFromElements(richEditorElements),
+        clipboard
+      },
+      formats: buildFormatsFromElements(richEditorElements)
+    };
+  }
+  if (simpleVersion) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }]
+        ],
+        clipboard
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "color",
+        "background",
+        "align",
+        "list"
+      ]
+    };
+  }
+  if (disableVideo) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline", "strike"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link", "image"]
+        ],
+        clipboard
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "color",
+        "background",
+        "align",
+        "list",
+        "link",
+        "image"
+      ]
+    };
+  }
+  return {
+    modules: {
+      toolbar: [
+        [{ header: [1, 2, false] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "image", "video"]
+      ],
+      clipboard
+    },
+    formats: [
+      "header",
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "color",
+      "background",
+      "align",
+      "list",
+      "link",
+      "image",
+      "video"
+    ]
+  };
+};
+
 // src/components/RichEditor/QuillComponent.tsx
 import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
 var QuillComponent = ({
@@ -12827,6 +12959,7 @@ var QuillComponent = ({
   uploadConfig,
   simpleVersion = false,
   disableVideo = false,
+  richEditorElements,
   onCharacterCountChange,
   maxLength
 }) => {
@@ -12842,65 +12975,11 @@ var QuillComponent = ({
     const doc = parser.parseFromString(html, "text/html");
     return doc.body.innerHTML;
   };
-  const modules = simpleVersion ? {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline"],
-      [{ color: [] }, { background: [] }],
-      [{ align: [] }],
-      [{ list: "ordered" }, { list: "bullet" }]
-    ],
-    clipboard: {
-      matchVisual: false
-    }
-  } : disableVideo ? {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline", "strike"],
-      [{ color: [] }, { background: [] }],
-      [{ align: [] }],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link", "image"]
-    ],
-    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 ? [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "color",
-    "background",
-    "align",
-    "list"
-  ] : [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "color",
-    "background",
-    "align",
-    "list",
-    "link",
-    "image",
-    "video"
-  ];
+  const { modules, formats } = getEditorModulesAndFormats(
+    richEditorElements,
+    simpleVersion,
+    disableVideo
+  );
   const { quill, quillRef } = useQuill({
     theme: "snow",
     modules,
@@ -12970,21 +13049,27 @@ var QuillComponent = ({
       });
       const toolbar = quill.getModule("toolbar");
       if (toolbar) {
-        toolbar.addHandler("link", () => setShowLinkModal(true));
-        toolbar.addHandler("video", () => setShowVideoModal(true));
-        toolbar.addHandler("image", () => {
-          const input = document.createElement("input");
-          input.setAttribute("type", "file");
-          input.setAttribute("accept", "image/*");
-          input.click();
-          input.onchange = () => __async(null, null, function* () {
-            var _a;
-            const file = (_a = input.files) == null ? void 0 : _a[0];
-            if (file) {
-              yield handleImageUpload(file);
-            }
+        if (formats.includes("link")) {
+          toolbar.addHandler("link", () => setShowLinkModal(true));
+        }
+        if (formats.includes("video")) {
+          toolbar.addHandler("video", () => setShowVideoModal(true));
+        }
+        if (formats.includes("image")) {
+          toolbar.addHandler("image", () => {
+            const input = document.createElement("input");
+            input.setAttribute("type", "file");
+            input.setAttribute("accept", "image/*");
+            input.click();
+            input.onchange = () => __async(null, null, function* () {
+              var _a;
+              const file = (_a = input.files) == null ? void 0 : _a[0];
+              if (file) {
+                yield handleImageUpload(file);
+              }
+            });
           });
-        });
+        }
       }
       setTimeout(() => {
         var _a, _b;
@@ -13008,7 +13093,7 @@ var QuillComponent = ({
         }
       }, 2e3);
     }
-  }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
+  }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
   useEffect9(() => {
     if (quill) {
       quill.enable(!disabled);
@@ -13272,7 +13357,8 @@ var RichEditorFormField = (_a) => {
     validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
     maxLength,
     simpleVersion = false,
-    disableVideo = false
+    disableVideo = false,
+    richEditorElements
   } = _b, props = __objRest(_b, [
     "name",
     "label",
@@ -13281,7 +13367,8 @@ var RichEditorFormField = (_a) => {
     "validationErrorMessage",
     "maxLength",
     "simpleVersion",
-    "disableVideo"
+    "disableVideo",
+    "richEditorElements"
   ]);
   const { field, fieldState } = useController3({
     name,
@@ -13335,7 +13422,8 @@ var RichEditorFormField = (_a) => {
         onCharacterCountChange: handleCharacterCountChange,
         maxLength,
         disableVideo,
-        simpleVersion
+        simpleVersion,
+        richEditorElements
       })
     ),
     /* @__PURE__ */ jsx56(ErrorFormMessage, { message: errorMsg })

package/package.json

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

package/src/components/FormFields/RichEditorFormField.tsx

@@ -5,7 +5,7 @@ import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { RichEditor, RichEditorProps } from "../RichEditor";
 import { useState } from "react";
 import { Badge } from "../Badge";
-
+import { RichEditorElement } from "../RichEditor/types";
 export type RichEditorFormFieldProps = Omit<
   RichEditorProps,
   "value" | "onChange"
@@ -19,6 +19,7 @@ export type RichEditorFormFieldProps = Omit<
   simpleVersion?: boolean;
   uploadConfig?: RichEditorProps["uploadConfig"];
   disableVideo?: boolean
+  richEditorElements?: RichEditorElement[];
 };
 
 export const RichEditorFormField = ({
@@ -30,6 +31,7 @@ export const RichEditorFormField = ({
   maxLength,
   simpleVersion = false,
   disableVideo = false,
+  richEditorElements,
   ...props
 }: RichEditorFormFieldProps) => {
   const { field, fieldState } = useController({
@@ -96,6 +98,7 @@ export const RichEditorFormField = ({
         maxLength={maxLength}
         disableVideo={disableVideo}
         simpleVersion={simpleVersion}
+        richEditorElements={richEditorElements}
       />
       <ErrorFormMessage message={errorMsg} />
     </Flex>

package/src/components/RichEditor/QuillComponent.tsx

@@ -6,6 +6,7 @@ import { RichEditorProps } from "./RichEditor";
 import { useToast } from "../Toast/hooks/useToast";
 import { UploadService } from "../../utils/uploadService";
 import { QuillContainer, QuillEditor } from "./styledComponents";
+import { getEditorModulesAndFormats } from "./editorConfig";
 
 const QuillComponent: React.FC<RichEditorProps> = ({
   value = "",
@@ -16,6 +17,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
   uploadConfig,
   simpleVersion = false,
   disableVideo = false,
+  richEditorElements,
   onCharacterCountChange,
   maxLength,
 }) => {
@@ -33,72 +35,11 @@ const QuillComponent: React.FC<RichEditorProps> = ({
 
     return doc.body.innerHTML;
   };
-  const modules = simpleVersion
-    ? {
-        toolbar: [
-          [{ header: [1, 2, false] }],
-          ["bold", "italic", "underline"],
-          [{ color: [] }, { background: [] }],
-          [{ align: [] }],
-          [{ list: "ordered" }, { list: "bullet" }],
-        ],
-        clipboard: {
-          matchVisual: false,
-        },
-      }
-    : disableVideo
-    ? {
-        toolbar: [
-          [{ header: [1, 2, false] }],
-          ["bold", "italic", "underline", "strike"],
-          [{ color: [] }, { background: [] }],
-          [{ align: [] }],
-          [{ list: "ordered" }, { list: "bullet" }],
-          ["link", "image"],
-        ],
-        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
-    ? [
-        "header",
-        "bold",
-        "italic",
-        "underline",
-        "color",
-        "background",
-        "align",
-        "list",
-      ]
-    : [
-        "header",
-        "bold",
-        "italic",
-        "underline",
-        "strike",
-        "color",
-        "background",
-        "align",
-        "list",
-        "link",
-        "image",
-        "video",
-      ];
+  const { modules, formats } = getEditorModulesAndFormats(
+    richEditorElements,
+    simpleVersion,
+    disableVideo,
+  );
 
   const { quill, quillRef } = useQuill({
     theme: "snow",
@@ -182,21 +123,27 @@ const QuillComponent: React.FC<RichEditorProps> = ({
 
       const toolbar = quill.getModule("toolbar") as any;
       if (toolbar) {
-        toolbar.addHandler("link", () => setShowLinkModal(true));
-        toolbar.addHandler("video", () => setShowVideoModal(true));
-        toolbar.addHandler("image", () => {
-          const input = document.createElement("input");
-          input.setAttribute("type", "file");
-          input.setAttribute("accept", "image/*");
-          input.click();
-
-          input.onchange = async () => {
-            const file = input.files?.[0];
-            if (file) {
-              await handleImageUpload(file);
-            }
-          };
-        });
+        if (formats.includes("link")) {
+          toolbar.addHandler("link", () => setShowLinkModal(true));
+        }
+        if (formats.includes("video")) {
+          toolbar.addHandler("video", () => setShowVideoModal(true));
+        }
+        if (formats.includes("image")) {
+          toolbar.addHandler("image", () => {
+            const input = document.createElement("input");
+            input.setAttribute("type", "file");
+            input.setAttribute("accept", "image/*");
+            input.click();
+
+            input.onchange = async () => {
+              const file = input.files?.[0];
+              if (file) {
+                await handleImageUpload(file);
+              }
+            };
+          });
+        }
       }
 
       setTimeout(() => {
@@ -221,7 +168,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
         }
       }, 2000);
     }
-  }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
+  }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
 
   useEffect(() => {
     if (quill) {

package/src/components/RichEditor/RichEditor.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { ToastProvider } from "../Toast";
 import QuillComponent from "./QuillComponent";
+import { RichEditorElement } from "./types";
+
+export type { RichEditorElement };
 
 export interface UploadConfig {
   apiUrl: string;
@@ -24,9 +27,10 @@ export interface RichEditorProps {
   className?: string;
   uploadConfig?: UploadConfig;
   simpleVersion?: boolean;
+  richEditorElements?: RichEditorElement[];
   onCharacterCountChange?: (count: number) => void;
   maxLength?: number;
-  disableVideo?: boolean
+  disableVideo?: boolean;
 }
 
 const RichEditor = (props: RichEditorProps) => {

package/src/components/RichEditor/editorConfig.ts

@@ -0,0 +1,149 @@
+import { RichEditorElement } from "./types";
+
+const TEXT_FORMATS: RichEditorElement[] = ["bold", "italic", "underline"];
+const MEDIA_FORMATS: RichEditorElement[] = ["link", "image", "video"];
+
+export const buildToolbarFromElements = (
+  elements: RichEditorElement[],
+): unknown[] => {
+  const toolbar: unknown[] = [];
+
+  if (elements.includes("header")) {
+    toolbar.push([{ header: [1, 2, false] }]);
+  }
+
+  const textGroup = elements.filter((element) =>
+    TEXT_FORMATS.includes(element),
+  );
+  if (textGroup.length > 0) {
+    toolbar.push(textGroup);
+  }
+
+  const colorGroup: unknown[] = [];
+  if (elements.includes("color")) colorGroup.push({ color: [] });
+  if (elements.includes("background")) colorGroup.push({ background: [] });
+  if (colorGroup.length > 0) {
+    toolbar.push(colorGroup);
+  }
+
+  if (elements.includes("align")) {
+    toolbar.push([{ align: [] }]);
+  }
+
+  if (elements.includes("list")) {
+    toolbar.push([{ list: "ordered" }, { list: "bullet" }]);
+  }
+
+  const mediaGroup = elements.filter((element) =>
+    MEDIA_FORMATS.includes(element),
+  );
+  if (mediaGroup.length > 0) {
+    toolbar.push(mediaGroup);
+  }
+
+  return toolbar;
+};
+
+export const buildFormatsFromElements = (
+  elements: RichEditorElement[],
+): string[] => elements;
+
+export const getEditorModulesAndFormats = (
+  richEditorElements?: RichEditorElement[],
+  simpleVersion = false,
+  disableVideo = false,
+): { modules: Record<string, unknown>; formats: string[] } => {
+  const clipboard = { matchVisual: false };
+
+  if (richEditorElements && richEditorElements.length > 0) {
+    return {
+      modules: {
+        toolbar: buildToolbarFromElements(richEditorElements),
+        clipboard,
+      },
+      formats: buildFormatsFromElements(richEditorElements),
+    };
+  }
+
+  if (simpleVersion) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+        ],
+        clipboard,
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "color",
+        "background",
+        "align",
+        "list",
+      ],
+    };
+  }
+
+  if (disableVideo) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline", "strike"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link", "image"],
+        ],
+        clipboard,
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "color",
+        "background",
+        "align",
+        "list",
+        "link",
+        "image",
+      ],
+    };
+  }
+
+  return {
+    modules: {
+      toolbar: [
+        [{ header: [1, 2, false] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "image", "video"],
+      ],
+      clipboard,
+    },
+    formats: [
+      "header",
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "color",
+      "background",
+      "align",
+      "list",
+      "link",
+      "image",
+      "video",
+    ],
+  };
+};

package/src/components/RichEditor/index.ts

@@ -1,3 +1,3 @@
 export { default as RichEditor } from "./RichEditor";
-export type { RichEditorProps } from "./RichEditor";
+export type { RichEditorProps, RichEditorElement } from "./RichEditor";
 export { default as RichTextPresenter } from "./RichTextPresenter";

package/src/components/RichEditor/styledComponents.ts

@@ -1167,4 +1167,9 @@ export const QuillEditor = styled("div", {
   "& .ql-container.ql-snow": {
     border: "1px solid #ccc",
   },
+  "& button.ql-list:first-child": {
+    borderLeft:"1px solid #C2C3C7",
+    paddingLeft: "16px",
+    width: "38px",
+  }
 });

package/src/components/RichEditor/types.ts

@@ -0,0 +1,12 @@
+export type RichEditorElement =
+  | "header"
+  | "bold"
+  | "italic"
+  | "underline"
+  | "color"
+  | "background"
+  | "align"
+  | "list"
+  | "link"
+  | "image"
+  | "video";