@lets-events/react 12.1.2 → 12.1.4

package/.turbo/turbo-build.log

@@ -1,7 +1,6 @@
 
-npm warn cli npm v11.5.1 does not support Node.js v20.10.0. This version of npm supports the following node versions: `^20.17.0 || >=22.9.0`. You can find the latest version at https://nodejs.org/.
 
-> @lets-events/react@12.1.2 build
+> @lets-events/react@12.1.4 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -11,14 +10,14 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.css 27.00 KB
-ESM dist/index.mjs 350.42 KB
-ESM ⚡️ Build success in 12006ms
-CJS dist/index.css 27.00 KB
-CJS dist/index.js  363.99 KB
-CJS ⚡️ Build success in 12019ms
+ESM dist/QuillComponent-A5KIFPCL.mjs 13.19 KB
+ESM dist/chunk-TU7LKUXZ.mjs          61.98 KB
+ESM dist/index.mjs                   276.08 KB
+ESM ⚡️ Build success in 340ms
+CJS dist/index.js 373.37 KB
+CJS ⚡️ Build success in 340ms
 DTS Build start
-DTS ⚡️ Build success in -4031ms
-DTS dist/index.d.mts 379.16 KB
-DTS dist/index.d.ts  379.16 KB
+DTS ⚡️ Build success in 6489ms
+DTS dist/index.d.mts 379.15 KB
+DTS dist/index.d.ts  379.15 KB
 ⠙

package/CHANGELOG.md

@@ -1,10 +1,22 @@
 # @lets-events/react
 
+## 12.1.4
+
+### Patch Changes
+
+- Quill Lazyload
+
+## 12.1.3
+
+### Patch Changes
+
+- TextareaField maxLength control
+
 ## 12.1.2
 
 ### Patch Changes
 
-- richeditor adjustment
+- added quill
 
 ## 12.1.1
 

package/dist/QuillComponent-A5KIFPCL.mjs

@@ -0,0 +1,438 @@
+import {
+  Flex,
+  Text,
+  UploadService,
+  __async,
+  styled,
+  useToast
+} from "./chunk-TU7LKUXZ.mjs";
+
+// src/components/RichEditor/QuillComponent.tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useQuill } from "react-quilljs";
+import "quill/dist/quill.snow.css";
+
+// src/components/RichEditor/styledComponents.ts
+var QuillContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column"
+});
+var QuillEditor = styled("div", {
+  "& .ql-editor": {
+    minHeight: "200px",
+    padding: "$12",
+    fontSize: "$14",
+    lineHeight: "$base",
+    fontFamily: "$default",
+    color: "$neutral900",
+    backgroundColor: "$white",
+    border: "none",
+    outline: "none",
+    cursor: "text",
+    caretColor: "$primary500",
+    "&:focus": {
+      borderColor: "$primary500",
+      boxShadow: "0 0 0 1px $primary500"
+    },
+    "& p": {
+      margin: "0 0 $8 0"
+    },
+    "& p:last-child": {
+      marginBottom: 0
+    },
+    "& .ql-cursor": {
+      borderLeft: "2px solid $primary500"
+    }
+  },
+  "& .ql-toolbar": {
+    backgroundColor: "$grey100",
+    border: "1px solid $neutral300",
+    borderBottom: "none",
+    borderTopLeftRadius: "$sm",
+    borderTopRightRadius: "$sm",
+    padding: "$8 $12"
+  },
+  "& .ql-container": {
+    border: "1px solid $neutral300",
+    borderTop: "none",
+    borderBottomLeftRadius: "$sm",
+    borderBottomRightRadius: "$sm",
+    fontFamily: "$default"
+  },
+  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before": {
+    content: "T\xEDtulo 1"
+  },
+  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before": {
+    content: "T\xEDtulo 2"
+  }
+});
+
+// src/components/RichEditor/QuillComponent.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var QuillComponent = ({
+  value = "",
+  onChange,
+  placeholder = "Digite seu texto aqui...",
+  disabled = false,
+  className,
+  uploadConfig
+}) => {
+  const [showVideoModal, setShowVideoModal] = useState(false);
+  const [videoUrl, setVideoUrl] = useState("");
+  const [showLinkModal, setShowLinkModal] = useState(false);
+  const [linkUrl, setLinkUrl] = useState("");
+  const videoModalRef = useRef(null);
+  const linkModalRef = useRef(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 { quill, quillRef } = useQuill({
+    theme: "snow",
+    modules,
+    formats,
+    placeholder,
+    readOnly: disabled
+  });
+  const handleImageUpload = useCallback(
+    (file) => __async(null, null, function* () {
+      if (disabled || !quill || !uploadConfig) return;
+      try {
+        addToast({
+          type: "info",
+          message: "Carregando imagem...",
+          duration: 2e3
+        });
+        const uploadedFile = yield UploadService.uploadToS3(file, uploadConfig);
+        removeToast("info");
+        addToast({
+          type: "success",
+          message: "Imagem adicionada com sucesso!"
+        });
+        const selection = quill.getSelection();
+        const index = selection ? selection.index : quill.getLength();
+        quill.insertEmbed(index, "image", uploadedFile.url);
+        quill.setSelection(index + 1, 0);
+      } catch (error) {
+        console.error("Erro no upload:", error);
+        addToast({
+          type: "error",
+          message: "Erro no upload: N\xE3o foi poss\xEDvel enviar a imagem. Tente novamente."
+        });
+      }
+    }),
+    [disabled, quill, addToast, removeToast, uploadConfig]
+  );
+  useEffect(() => {
+    if (quill && value) {
+      const currentContent = quill.root.innerHTML;
+      if (currentContent !== value) {
+        const selection = quill.getSelection();
+        quill.clipboard.dangerouslyPasteHTML(value);
+        if (selection) {
+          quill.setSelection(selection.index, selection.length);
+        } else {
+          quill.setSelection(quill.getLength(), 0);
+        }
+      }
+    }
+  }, [quill, value]);
+  useEffect(() => {
+    if (quill) {
+      quill.on("text-change", (delta, oldDelta, source) => {
+        if (source === "user") {
+          const html = quill.root.innerHTML;
+          onChange == null ? void 0 : onChange(html);
+        }
+      });
+      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);
+            }
+          });
+        });
+      }
+      setTimeout(() => {
+        var _a, _b;
+        const toolbarElement = (_b = (_a = quillRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.querySelector(".ql-toolbar");
+        if (toolbarElement) {
+          const headerSelect = toolbarElement.querySelector(
+            "select[data-value]"
+          );
+          if (headerSelect) {
+            const options = headerSelect.querySelectorAll("option");
+            options.forEach((option) => {
+              if (option.value === "1") {
+                option.textContent = "T\xEDtulo 1";
+              } else if (option.value === "2") {
+                option.textContent = "T\xEDtulo 2";
+              } else if (option.value === "") {
+                option.textContent = "Normal";
+              }
+            });
+          }
+        }
+      }, 2e3);
+    }
+  }, [quill, onChange, handleImageUpload]);
+  useEffect(() => {
+    if (quill) {
+      quill.enable(!disabled);
+      if (!disabled) {
+        if (quill.getLength() <= 1) {
+          quill.focus();
+          quill.setSelection(0, 0);
+        }
+      }
+    }
+  }, [quill, disabled]);
+  const handleLinkCancel = useCallback(() => {
+    setLinkUrl("");
+    setShowLinkModal(false);
+  }, []);
+  const handleLinkSubmit = useCallback(() => {
+    if (!linkUrl.trim() || !quill) return;
+    const url = linkUrl.trim();
+    const selection = quill.getSelection();
+    if (selection && selection.length > 0) {
+      quill.format("link", url);
+    } else {
+      const index = quill.getLength();
+      quill.insertText(index, url, "link", url);
+      quill.setSelection(index + url.length, 0);
+    }
+    setLinkUrl("");
+    setShowLinkModal(false);
+  }, [linkUrl, quill]);
+  const handleVideoCancel = useCallback(() => {
+    setVideoUrl("");
+    setShowVideoModal(false);
+  }, []);
+  const handleVideoSubmit = useCallback(() => {
+    var _a, _b;
+    if (!videoUrl.trim() || !quill) return;
+    let processedUrl = videoUrl.trim();
+    if (processedUrl.includes("youtube.com/watch")) {
+      const videoId = (_a = processedUrl.match(/[?&]v=([^&]+)/)) == null ? void 0 : _a[1];
+      if (videoId) {
+        processedUrl = `https://www.youtube.com/embed/${videoId}`;
+      }
+    } else if (processedUrl.includes("youtu.be/")) {
+      const videoId = (_b = processedUrl.split("youtu.be/")[1]) == null ? void 0 : _b.split("?")[0];
+      if (videoId) {
+        processedUrl = `https://www.youtube.com/embed/${videoId}`;
+      }
+    }
+    const videoHTML = `
+      <iframe 
+        src="${processedUrl}"
+        style="max-width:100%; height:315px; border:0;"
+        title="Video player" 
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+        allowfullscreen>
+      </iframe>
+      <br/>
+    `;
+    const selection = quill.getSelection();
+    const insertIndex = selection ? selection.index : quill.getLength();
+    quill.clipboard.dangerouslyPasteHTML(insertIndex, videoHTML);
+    quill.setSelection(insertIndex + 1, 0);
+    setVideoUrl("");
+    setShowVideoModal(false);
+  }, [videoUrl, quill]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
+        handleVideoCancel();
+      }
+      if (showLinkModal && linkModalRef.current && !linkModalRef.current.contains(event.target)) {
+        handleLinkCancel();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
+  return /* @__PURE__ */ jsx(QuillContainer, { className, children: /* @__PURE__ */ jsxs(QuillEditor, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: quillRef }),
+    showVideoModal && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: videoModalRef,
+        style: {
+          position: "absolute",
+          top: "20px",
+          left: "20px",
+          right: "20px",
+          backgroundColor: "white",
+          border: "1px solid #e0e0e0",
+          borderRadius: "4px",
+          padding: "12px",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+          zIndex: 1e3,
+          width: "fit-content"
+        },
+        children: /* @__PURE__ */ jsxs(Flex, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: { fontSize: "14px", fontWeight: "500", color: "#333" },
+              children: "V\xEDdeo:"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: videoUrl,
+              onChange: (e) => setVideoUrl(e.target.value),
+              placeholder: "Embed URL",
+              style: {
+                padding: "8px 12px",
+                border: "1px solid #d0d0d0",
+                borderRadius: "4px",
+                fontSize: "14px",
+                backgroundColor: "#f8f8f8"
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleVideoSubmit();
+                } else if (e.key === "Escape") {
+                  handleVideoCancel();
+                }
+              },
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleVideoSubmit,
+              disabled: !videoUrl.trim(),
+              style: {
+                padding: "8px 16px",
+                backgroundColor: "#007bff",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                fontSize: "14px",
+                cursor: videoUrl.trim() ? "pointer" : "not-allowed",
+                opacity: videoUrl.trim() ? 1 : 0.6
+              },
+              children: "Ok"
+            }
+          )
+        ] })
+      }
+    ),
+    showLinkModal && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: linkModalRef,
+        style: {
+          position: "absolute",
+          top: "20px",
+          left: "20px",
+          right: "20px",
+          backgroundColor: "white",
+          border: "1px solid #e0e0e0",
+          borderRadius: "4px",
+          padding: "12px",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+          zIndex: 1e3,
+          width: "fit-content"
+        },
+        children: /* @__PURE__ */ jsxs(Flex, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: { fontSize: "14px", fontWeight: "500", color: "#333" },
+              children: "Link:"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: linkUrl,
+              onChange: (e) => setLinkUrl(e.target.value),
+              placeholder: "URL do link",
+              style: {
+                padding: "8px 12px",
+                border: "1px solid #d0d0d0",
+                borderRadius: "4px",
+                fontSize: "14px",
+                backgroundColor: "#f8f8f8",
+                width: "300px"
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleLinkSubmit();
+                } else if (e.key === "Escape") {
+                  handleLinkCancel();
+                }
+              },
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleLinkSubmit,
+              disabled: !linkUrl.trim(),
+              style: {
+                padding: "8px 16px",
+                backgroundColor: "#007bff",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                fontSize: "14px",
+                cursor: linkUrl.trim() ? "pointer" : "not-allowed",
+                opacity: linkUrl.trim() ? 1 : 0.6
+              },
+              children: "Ok"
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
+};
+var QuillComponent_default = QuillComponent;
+export {
+  QuillComponent_default as default
+};