@lets-events/react 12.2.1 → 12.2.2

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.2.1 build
+> @lets-events/react@12.2.2 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 378.47 KB
-ESM ⚡️ Build success in 358ms
-CJS dist/index.js 392.42 KB
-CJS ⚡️ Build success in 360ms
+ESM dist/index.mjs 379.06 KB
+ESM ⚡️ Build success in 419ms
+CJS dist/index.js 393.01 KB
+CJS ⚡️ Build success in 420ms
 DTS Build start
-DTS ⚡️ Build success in 7045ms
+DTS ⚡️ Build success in 6505ms
 DTS dist/index.d.mts 389.04 KB
 DTS dist/index.d.ts  389.04 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.2.2
+
+### Patch Changes
+
+- RichEditor HTML Stylization
+
 ## 12.2.1
 
 ### Patch Changes

package/dist/index.js

@@ -8183,7 +8183,7 @@ function Drawer({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, align: "center", children: [
             goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title })
           ] }),
@@ -9466,8 +9466,10 @@ var itemStyle = {
   }
 };
 var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
-var BadgeCloseBtn = styled("div", {
-  cursor: "pointer"
+var CloseBtnStyled = styled("button", {
+  cursor: "pointer",
+  background: "none",
+  border: "none"
 });
 var StyledFlexWithMaxHeight = styled(Flex2, {
   variants: {
@@ -9734,13 +9736,13 @@ var MultiSelect = import_react16.default.forwardRef(
               css: { flexWrap: "wrap" },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  BadgeCloseBtn,
+                  CloseBtnStyled,
                   {
                     onClick: (e) => {
                       e.stopPropagation();
                       handleRemove(value);
                     },
-                    role: "button",
+                    type: "button",
                     children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
                   }
                 ),
@@ -11308,7 +11310,8 @@ var QuillEditor = styled("div", {
       marginBottom: 0
     },
     "& h1": {
-      fontSize: "2em"
+      fontSize: "2em",
+      lineHeight: "2em!important"
     },
     "& h2": {
       fontSize: "1.5em"
@@ -12167,6 +12170,17 @@ var QuillComponent = ({
   const videoModalRef = (0, import_react20.useRef)(null);
   const linkModalRef = (0, import_react20.useRef)(null);
   const { addToast, removeToast } = useToast();
+  const formatHTML = (html) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    doc.querySelectorAll("h1").forEach((h1) => {
+      h1.setAttribute("style", `${h1.getAttribute("style") || ""}line-height: 2em;`);
+    });
+    doc.querySelectorAll("img").forEach((img) => {
+      img.setAttribute("style", `${img.getAttribute("style") || ""}max-width: 100%; height: auto; width: auto;`);
+    });
+    return doc.body.innerHTML;
+  };
   const modules = simpleVersion ? {
     toolbar: [
       ["bold", "italic", "underline"],
@@ -12229,7 +12243,7 @@ var QuillComponent = ({
         const index = selection ? selection.index : quill.getLength();
         quill.insertEmbed(index, "image", uploadedFile.url);
         quill.setSelection(index + 1, 0);
-        onChange == null ? void 0 : onChange(quill.root.innerHTML);
+        onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
       } catch (error) {
         console.error("Erro no upload:", error);
         addToast({
@@ -12264,7 +12278,7 @@ var QuillComponent = ({
             quill.deleteText(maxLength, count - maxLength);
             return;
           }
-          onChange == null ? void 0 : onChange(quill.root.innerHTML);
+          onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
           onCharacterCountChange == null ? void 0 : onCharacterCountChange(count);
         }
       });

package/dist/index.mjs

@@ -8072,7 +8072,7 @@ function Drawer({
       },
       children: [
         /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
-          /* @__PURE__ */ jsxs7(Flex2, { gap: 8, children: [
+          /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
             goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
             /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
           ] }),
@@ -9359,8 +9359,10 @@ var itemStyle = {
   }
 };
 var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
-var BadgeCloseBtn = styled("div", {
-  cursor: "pointer"
+var CloseBtnStyled = styled("button", {
+  cursor: "pointer",
+  background: "none",
+  border: "none"
 });
 var StyledFlexWithMaxHeight = styled(Flex2, {
   variants: {
@@ -9627,13 +9629,13 @@ var MultiSelect = React9.forwardRef(
               css: { flexWrap: "wrap" },
               children: [
                 /* @__PURE__ */ jsx26(
-                  BadgeCloseBtn,
+                  CloseBtnStyled,
                   {
                     onClick: (e) => {
                       e.stopPropagation();
                       handleRemove(value);
                     },
-                    role: "button",
+                    type: "button",
                     children: /* @__PURE__ */ jsx26(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
                   }
                 ),
@@ -11206,7 +11208,8 @@ var QuillEditor = styled("div", {
       marginBottom: 0
     },
     "& h1": {
-      fontSize: "2em"
+      fontSize: "2em",
+      lineHeight: "2em!important"
     },
     "& h2": {
       fontSize: "1.5em"
@@ -12065,6 +12068,17 @@ var QuillComponent = ({
   const videoModalRef = useRef8(null);
   const linkModalRef = useRef8(null);
   const { addToast, removeToast } = useToast();
+  const formatHTML = (html) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    doc.querySelectorAll("h1").forEach((h1) => {
+      h1.setAttribute("style", `${h1.getAttribute("style") || ""}line-height: 2em;`);
+    });
+    doc.querySelectorAll("img").forEach((img) => {
+      img.setAttribute("style", `${img.getAttribute("style") || ""}max-width: 100%; height: auto; width: auto;`);
+    });
+    return doc.body.innerHTML;
+  };
   const modules = simpleVersion ? {
     toolbar: [
       ["bold", "italic", "underline"],
@@ -12127,7 +12141,7 @@ var QuillComponent = ({
         const index = selection ? selection.index : quill.getLength();
         quill.insertEmbed(index, "image", uploadedFile.url);
         quill.setSelection(index + 1, 0);
-        onChange == null ? void 0 : onChange(quill.root.innerHTML);
+        onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
       } catch (error) {
         console.error("Erro no upload:", error);
         addToast({
@@ -12162,7 +12176,7 @@ var QuillComponent = ({
             quill.deleteText(maxLength, count - maxLength);
             return;
           }
-          onChange == null ? void 0 : onChange(quill.root.innerHTML);
+          onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
           onCharacterCountChange == null ? void 0 : onCharacterCountChange(count);
         }
       });

package/package.json

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

package/src/components/Drawer/index.tsx

@@ -123,7 +123,7 @@ export function Drawer({
         }}
       >
         <DrawerHeaderDiv>
-          <Flex gap={8}>
+          <Flex gap={8} align="center">
             {(goBackIcon && goBackIcon) && <GoBackButtonStyled type="button" onClick={goBackAction}>{goBackIcon}</GoBackButtonStyled>}
             <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
           </Flex>

package/src/components/MultiSelect/index.tsx

@@ -11,7 +11,7 @@ import {
 import { colors } from "@lets-events/tokens";
 import { ComponentProps, useMemo } from "react";
 import { Flex } from "../Flex";
-import { BadgeCloseBtn, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
+import { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
 
 export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   placeholder?: string;
@@ -217,15 +217,15 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                 align={"center"}
                 css={{ flexWrap: "wrap" }}
               >
-                <BadgeCloseBtn
+                <CloseBtnStyled
                   onClick={(e) => {
                     e.stopPropagation();
                     handleRemove(value);
                   }}
-                  role="button"
+                  type="button"
                 >
                   <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                </BadgeCloseBtn>
+                </CloseBtnStyled>
                 <Text
                   typography={"captionMedium"}
                   fontWeight={"regular"}

package/src/components/MultiSelect/styledComponents.ts

@@ -67,8 +67,10 @@ export const StyledItem = styled("div", {
   ...itemStyle,
 });
 
-export const BadgeCloseBtn = styled("div", {
+export const CloseBtnStyled = styled("button", {
   cursor: "pointer",
+  background: "none",
+  border: "none",
 });
 
 export const StyledFlexWithMaxHeight = styled(Flex, {

package/src/components/RichEditor/QuillComponent.tsx

@@ -26,7 +26,20 @@ const QuillComponent: React.FC<RichEditorProps> = ({
   const videoModalRef = useRef<HTMLDivElement>(null);
   const linkModalRef = useRef<HTMLDivElement>(null);
   const { addToast, removeToast } = useToast();
+  const formatHTML = (html: string) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
 
+    doc.querySelectorAll("h1").forEach((h1) => {
+      h1.setAttribute("style", `${h1.getAttribute("style") || ""}line-height: 2em;`);
+    });
+
+    doc.querySelectorAll("img").forEach((img) => {
+      img.setAttribute("style", `${img.getAttribute("style") || ""}max-width: 100%; height: auto; width: auto;`);
+    });
+
+    return doc.body.innerHTML;
+  };
   const modules = simpleVersion
     ? {
       toolbar: [
@@ -99,7 +112,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
         const index = selection ? selection.index : quill.getLength();
         quill.insertEmbed(index, "image", uploadedFile.url);
         quill.setSelection(index + 1, 0);
-        onChange?.(quill.root.innerHTML);
+        onChange?.(formatHTML(quill.root.innerHTML));
       } catch (error) {
         console.error("Erro no upload:", error);
         addToast({
@@ -132,15 +145,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?.(quill.root.innerHTML);
-          onCharacterCountChange?.(count);
+          onChange?.(formatHTML(quill.root.innerHTML))
+          onCharacterCountChange?.(count)
         }
       });
 

package/src/components/RichEditor/styledComponents.ts

@@ -89,6 +89,7 @@ export const QuillEditor = styled("div", {
 
     "& h1": {
       fontSize: "2em",
+      lineHeight: '2em!important',
     },
 
     "& h2": {