@lets-events/react 12.6.3 → 12.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.6.3 build
+> @lets-events/react@12.7.0 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,11 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 389.21 KB
-ESM ⚡️ Build success in 204ms
-CJS dist\index.js 404.22 KB
-CJS ⚡️ Build success in 205ms
+CJS dist\index.js 404.80 KB
+CJS ⚡️ Build success in 204ms
+ESM dist\index.mjs 389.71 KB
+ESM ⚡️ Build success in 205ms
 DTS Build start
-DTS ⚡️ Build success in 4468ms
-DTS dist\index.d.mts 402.87 KB
-DTS dist\index.d.ts  402.87 KB
+DTS ⚡️ Build success in 4513ms
+DTS dist\index.d.mts 403.02 KB
+DTS dist\index.d.ts  403.02 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.7.0
+
+### Minor Changes
+
+- rich text presenter
+
+## 12.6.4
+
+### Patch Changes
+
+- fix simple richeditor formats
+
 ## 12.6.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -15298,6 +15298,11 @@ interface RichEditorProps {
 }
 declare const RichEditor: (props: RichEditorProps) => react_jsx_runtime.JSX.Element | null;
 
+type Props = {
+    richText: string;
+};
+declare const RichTextPresenter: ({ richText }: Props) => react_jsx_runtime.JSX.Element;
+
 type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     name: string;
     label?: string;
@@ -15400,4 +15405,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, 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, 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, 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, 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, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.d.ts

@@ -15298,6 +15298,11 @@ interface RichEditorProps {
 }
 declare const RichEditor: (props: RichEditorProps) => react_jsx_runtime.JSX.Element | null;
 
+type Props = {
+    richText: string;
+};
+declare const RichTextPresenter: ({ richText }: Props) => react_jsx_runtime.JSX.Element;
+
 type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     name: string;
     label?: string;
@@ -15400,4 +15405,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, 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, 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, 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, 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, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.js

@@ -925,6 +925,7 @@ __export(index_exports, {
   RadioItem: () => RadioItem,
   RichEditor: () => RichEditor_default,
   RichEditorFormField: () => RichEditorFormField,
+  RichTextPresenter: () => RichTextPresenter_default,
   Section: () => Section,
   SectionStyled: () => SectionStyled,
   SelectFormField: () => SelectFormField,
@@ -12548,7 +12549,16 @@ var QuillComponent = ({
       matchVisual: false
     }
   };
-  const formats = simpleVersion ? ["bold", "italic", "underline", "list", "link"] : [
+  const formats = simpleVersion ? [
+    "header",
+    "bold",
+    "italic",
+    "underline",
+    "color",
+    "background",
+    "align",
+    "list"
+  ] : [
     "header",
     "bold",
     "italic",
@@ -12908,9 +12918,22 @@ var RichEditor = (props) => {
 };
 var RichEditor_default = RichEditor;
 
+// src/components/RichEditor/RichTextPresenter.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var RichTextPresenter = ({ richText }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(QuillEditor, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "div",
+    {
+      className: "ql-editor",
+      dangerouslySetInnerHTML: { __html: richText }
+    }
+  ) });
+};
+var RichTextPresenter_default = RichTextPresenter;
+
 // src/components/FormFields/RichEditorFormField.tsx
 var import_react24 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12953,9 +12976,9 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex, { direction: "column", children: [
-    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex, { direction: "row", justify: "between", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "column", children: [
+    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "row", justify: "between", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         FormLabel,
         {
           name,
@@ -12964,8 +12987,8 @@ var RichEditorFormField = (_a) => {
           haveError
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Badge, { color: "grey", size: "xs", children: caracterQuantity })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       FormLabel,
       {
         name,
@@ -12974,7 +12997,7 @@ var RichEditorFormField = (_a) => {
         haveError
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
@@ -12986,14 +13009,14 @@ var RichEditorFormField = (_a) => {
         simpleVersion
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/CalendarFormField.tsx
 var import_react_hook_form13 = require("react-hook-form");
 var import_react25 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13042,8 +13065,8 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       FormLabel,
       {
         name,
@@ -13052,7 +13075,7 @@ var CalendarFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       Calendar,
       __spreadValues({
         selected,
@@ -13065,14 +13088,14 @@ var CalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/DoubleCalendarFormField.tsx
 var import_react26 = require("react");
 var import_react_hook_form14 = require("react-hook-form");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DoubleCalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13121,9 +13144,9 @@ var DoubleCalendarFormField = (_a) => {
   const handleCalendarChange = (range) => {
     setSelected(range);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FormLabel, { name, label, required, haveError }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormLabel, { name, label, required, haveError }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       DoubleCalendar,
       __spreadValues({
         selected,
@@ -13137,14 +13160,14 @@ var DoubleCalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TimePickerFormField.tsx
 var import_react_hook_form15 = require("react-hook-form");
 var import_react27 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13187,8 +13210,8 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       FormLabel,
       {
         name,
@@ -13197,7 +13220,7 @@ var TimePickerFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       TimePicker,
       __spreadValues({
         selected,
@@ -13208,7 +13231,7 @@ var TimePickerFormField = (_a) => {
         hasError: haveError
       }, timePickerProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -13376,6 +13399,7 @@ var useImageUpload = (options) => {
   RadioItem,
   RichEditor,
   RichEditorFormField,
+  RichTextPresenter,
   Section,
   SectionStyled,
   SelectFormField,

package/dist/index.mjs

@@ -12443,7 +12443,16 @@ var QuillComponent = ({
       matchVisual: false
     }
   };
-  const formats = simpleVersion ? ["bold", "italic", "underline", "list", "link"] : [
+  const formats = simpleVersion ? [
+    "header",
+    "bold",
+    "italic",
+    "underline",
+    "color",
+    "background",
+    "align",
+    "list"
+  ] : [
     "header",
     "bold",
     "italic",
@@ -12803,9 +12812,22 @@ var RichEditor = (props) => {
 };
 var RichEditor_default = RichEditor;
 
+// src/components/RichEditor/RichTextPresenter.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+var RichTextPresenter = ({ richText }) => {
+  return /* @__PURE__ */ jsx54(QuillEditor, { children: /* @__PURE__ */ jsx54(
+    "div",
+    {
+      className: "ql-editor",
+      dangerouslySetInnerHTML: { __html: richText }
+    }
+  ) });
+};
+var RichTextPresenter_default = RichTextPresenter;
+
 // src/components/FormFields/RichEditorFormField.tsx
 import { useState as useState12 } from "react";
-import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12850,7 +12872,7 @@ var RichEditorFormField = (_a) => {
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   return /* @__PURE__ */ jsxs29(Flex, { direction: "column", children: [
     maxLength ? /* @__PURE__ */ jsxs29(Flex, { direction: "row", justify: "between", children: [
-      label && /* @__PURE__ */ jsx54(
+      label && /* @__PURE__ */ jsx55(
         FormLabel,
         {
           name,
@@ -12859,8 +12881,8 @@ var RichEditorFormField = (_a) => {
           haveError
         }
       ),
-      /* @__PURE__ */ jsx54(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ jsx54(Fragment5, { children: label && /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx55(Badge, { color: "grey", size: "xs", children: caracterQuantity })
+    ] }) : /* @__PURE__ */ jsx55(Fragment5, { children: label && /* @__PURE__ */ jsx55(
       FormLabel,
       {
         name,
@@ -12869,7 +12891,7 @@ var RichEditorFormField = (_a) => {
         haveError
       }
     ) }),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
@@ -12881,14 +12903,14 @@ var RichEditorFormField = (_a) => {
         simpleVersion
       })
     ),
-    /* @__PURE__ */ jsx54(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx55(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/CalendarFormField.tsx
 import { useController as useController4 } from "react-hook-form";
 import { useCallback as useCallback5 } from "react";
-import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12938,7 +12960,7 @@ var CalendarFormField = (_a) => {
     setSelected(date);
   };
   return /* @__PURE__ */ jsxs30(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx55(
+    label && /* @__PURE__ */ jsx56(
       FormLabel,
       {
         name,
@@ -12947,7 +12969,7 @@ var CalendarFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       Calendar,
       __spreadValues({
         selected,
@@ -12960,14 +12982,14 @@ var CalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ jsx55(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx56(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/DoubleCalendarFormField.tsx
 import { useCallback as useCallback6 } from "react";
 import { useController as useController5 } from "react-hook-form";
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var DoubleCalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13017,8 +13039,8 @@ var DoubleCalendarFormField = (_a) => {
     setSelected(range);
   };
   return /* @__PURE__ */ jsxs31(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx56(FormLabel, { name, label, required, haveError }),
-    /* @__PURE__ */ jsx56(
+    label && /* @__PURE__ */ jsx57(FormLabel, { name, label, required, haveError }),
+    /* @__PURE__ */ jsx57(
       DoubleCalendar,
       __spreadValues({
         selected,
@@ -13032,14 +13054,14 @@ var DoubleCalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ jsx56(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx57(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TimePickerFormField.tsx
 import { useController as useController6 } from "react-hook-form";
 import { useCallback as useCallback7 } from "react";
-import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13083,7 +13105,7 @@ var TimePickerFormField = (_a) => {
     setSelected(time);
   };
   return /* @__PURE__ */ jsxs32(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx57(
+    label && /* @__PURE__ */ jsx58(
       FormLabel,
       {
         name,
@@ -13092,7 +13114,7 @@ var TimePickerFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(
       TimePicker,
       __spreadValues({
         selected,
@@ -13103,7 +13125,7 @@ var TimePickerFormField = (_a) => {
         hasError: haveError
       }, timePickerProps)
     ),
-    /* @__PURE__ */ jsx57(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx58(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -13270,6 +13292,7 @@ export {
   RadioItem,
   RichEditor_default as RichEditor,
   RichEditorFormField,
+  RichTextPresenter_default as RichTextPresenter,
   Section,
   SectionStyled,
   SelectFormField,

package/package.json

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

package/src/components/RichEditor/QuillComponent.tsx

@@ -35,59 +35,70 @@ const QuillComponent: React.FC<RichEditorProps> = ({
   };
   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,
-      },
-    };
+        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
-    ? ["bold", "italic", "underline", "list", "link"]
+    ? [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "color",
+        "background",
+        "align",
+        "list",
+      ]
     : [
-      "header",
-      "bold",
-      "italic",
-      "underline",
-      "strike",
-      "color",
-      "background",
-      "align",
-      "list",
-      "link",
-      "image",
-      "video",
-    ];
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "color",
+        "background",
+        "align",
+        "list",
+        "link",
+        "image",
+        "video",
+      ];
 
   const { quill, quillRef } = useQuill({
     theme: "snow",
@@ -134,7 +145,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
         });
       }
     },
-    [disabled, quill, addToast, removeToast, uploadConfig, onChange]
+    [disabled, quill, addToast, removeToast, uploadConfig, onChange],
   );
 
   useEffect(() => {
@@ -157,15 +168,15 @@ const QuillComponent: React.FC<RichEditorProps> = ({
     if (quill) {
       quill.on("text-change", (delta: any, oldDelta: any, source: string) => {
         if (source === "user") {
-          const text = quill.getText().trim()
-          const count = text.length
+          const text = quill.getText().trim();
+          const count = text.length;
 
           if (maxLength !== undefined && count > maxLength) {
-            quill.deleteText(maxLength, count - maxLength)
-            return
+            quill.deleteText(maxLength, count - maxLength);
+            return;
           }
-          onChange?.(formatHTML(quill.root.innerHTML))
-          onCharacterCountChange?.(count)
+          onChange?.(formatHTML(quill.root.innerHTML));
+          onCharacterCountChange?.(count);
         }
       });
 
@@ -193,7 +204,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
           quillRef.current?.parentElement?.querySelector(".ql-toolbar");
         if (toolbarElement) {
           const headerSelect = toolbarElement.querySelector(
-            "select[data-value]"
+            "select[data-value]",
           ) as HTMLSelectElement;
           if (headerSelect) {
             const options = headerSelect.querySelectorAll("option");

package/src/components/RichEditor/RichTextPresenter.tsx

@@ -0,0 +1,18 @@
+import { QuillEditor } from "./styledComponents";
+
+type Props = {
+  richText: string;
+};
+
+const RichTextPresenter = ({ richText }: Props) => {
+  return (
+    <QuillEditor>
+      <div
+        className="ql-editor"
+        dangerouslySetInnerHTML={{ __html: richText }}
+      />
+    </QuillEditor>
+  );
+};
+
+export default RichTextPresenter;

package/src/components/RichEditor/index.ts

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