@lets-events/react 12.2.2 → 12.2.3

package/dist/QuillComponent-QFVVQA6K.mjs

@@ -1,459 +0,0 @@
-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"
-    },
-    "& h1 span, & h1, & h2, & h2 span ": {
-      lineHeight: "1.5rem"
-    },
-    "& 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,
-  simpleVersion = false,
-  onCharacterCountChange,
-  maxLength
-}) => {
-  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 = simpleVersion ? {
-    toolbar: [
-      ["bold", "italic", "underline"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link"]
-    ],
-    clipboard: {
-      matchVisual: false
-    }
-  } : {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline", "strike"],
-      [{ color: [] }, { background: [] }],
-      [{ align: [] }],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link", "image", "video"]
-    ],
-    clipboard: {
-      matchVisual: false
-    }
-  };
-  const formats = simpleVersion ? ["bold", "italic", "underline", "list", "link"] : [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "color",
-    "background",
-    "align",
-    "list",
-    "link",
-    "image",
-    "video"
-  ];
-  const { quill, quillRef } = useQuill({
-    theme: "snow",
-    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 text = quill.getText().trim();
-          const count = text.length;
-          if (maxLength !== void 0 && count > maxLength) {
-            quill.deleteText(maxLength, count - maxLength);
-            return;
-          }
-          onChange == null ? void 0 : onChange(quill.root.innerHTML);
-          onCharacterCountChange == null ? void 0 : onCharacterCountChange(count);
-        }
-      });
-      const toolbar = quill.getModule("toolbar");
-      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, onCharacterCountChange]);
-  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
-};