@lets-events/react 11.8.1 → 12.0.0

package/src/components/RichEditor/QuillComponent.tsx

@@ -0,0 +1,415 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { useQuill } from "react-quilljs";
+import "quill/dist/quill.snow.css";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { RichEditorProps } from "./RichEditor";
+import { useToast } from "../Toast/hooks/useToast";
+import { UploadService } from "../../utils/uploadService";
+import { UploadConfig } from "./RichEditor";
+import { QuillContainer, QuillEditor } from "./styledComponents";
+
+interface QuillComponentProps extends RichEditorProps {
+  uploadConfig: UploadConfig;
+}
+
+const QuillComponent: React.FC<QuillComponentProps> = ({
+  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<HTMLDivElement>(null);
+  const linkModalRef = useRef<HTMLDivElement>(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(
+    async (file: File) => {
+      if (disabled || !quill || !uploadConfig) return;
+
+      try {
+        addToast({
+          type: "info",
+          message: "Carregando imagem...",
+          duration: 2000,
+        });
+
+        const uploadedFile = await 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ão foi possível 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: any, oldDelta: any, source: string) => {
+        if (source === "user") {
+          const html = quill.root.innerHTML;
+          onChange?.(html);
+        }
+      });
+
+      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);
+            }
+          };
+        });
+      }
+
+      setTimeout(() => {
+        const toolbarElement =
+          quillRef.current?.parentElement?.querySelector(".ql-toolbar");
+        if (toolbarElement) {
+          const headerSelect = toolbarElement.querySelector(
+            "select[data-value]"
+          ) as HTMLSelectElement;
+          console.log(headerSelect, "headerSelect");
+          if (headerSelect) {
+            const options = headerSelect.querySelectorAll("option");
+            console.log(options, "options");
+            options.forEach((option) => {
+              if (option.value === "1") {
+                option.textContent = "Título 1";
+              } else if (option.value === "2") {
+                option.textContent = "Título 2";
+              } else if (option.value === "") {
+                option.textContent = "Normal";
+              }
+            });
+          }
+        }
+      }, 100);
+    }
+  }, [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(() => {
+    if (!videoUrl.trim() || !quill) return;
+
+    let processedUrl = videoUrl.trim();
+
+    if (processedUrl.includes("youtube.com/watch")) {
+      const videoId = processedUrl.match(/[?&]v=([^&]+)/)?.[1];
+      if (videoId) {
+        processedUrl = `https://www.youtube.com/embed/${videoId}`;
+      }
+    } else if (processedUrl.includes("youtu.be/")) {
+      const videoId = processedUrl.split("youtu.be/")[1]?.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: MouseEvent) => {
+      if (
+        showVideoModal &&
+        videoModalRef.current &&
+        !videoModalRef.current.contains(event.target as Node)
+      ) {
+        handleVideoCancel();
+      }
+
+      if (
+        showLinkModal &&
+        linkModalRef.current &&
+        !linkModalRef.current.contains(event.target as Node)
+      ) {
+        handleLinkCancel();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
+
+  return (
+    <QuillContainer className={className}>
+      <QuillEditor style={{ position: "relative" }}>
+        <div ref={quillRef} />
+
+        {/* Video Modal */}
+        {showVideoModal && (
+          <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: 1000,
+              width: "fit-content",
+            }}
+          >
+            <Flex gap={8} align="center">
+              <Text
+                style={{ fontSize: "14px", fontWeight: "500", color: "#333" }}
+              >
+                Vídeo:
+              </Text>
+              <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
+              />
+              <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,
+                }}
+              >
+                Ok
+              </button>
+            </Flex>
+          </div>
+        )}
+
+        {/* Link Modal */}
+        {showLinkModal && (
+          <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: 1000,
+              width: "fit-content",
+            }}
+          >
+            <Flex gap={8} align="center">
+              <Text
+                style={{ fontSize: "14px", fontWeight: "500", color: "#333" }}
+              >
+                Link:
+              </Text>
+              <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
+              />
+              <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,
+                }}
+              >
+                Ok
+              </button>
+            </Flex>
+          </div>
+        )}
+      </QuillEditor>
+    </QuillContainer>
+  );
+};
+
+export default QuillComponent;

package/src/components/RichEditor/RichEditor.tsx

@@ -0,0 +1,38 @@
+import { ToastProvider } from "../Toast";
+import QuillComponent from "./QuillComponent";
+
+export interface UploadConfig {
+  apiUrl: string;
+  s3Bucket: string;
+  s3Region: string;
+  s3Url: string;
+  timeout?: number;
+  maxFileSize?: number;
+  endpoints?: {
+    presignedUrl: string;
+    upload: string;
+  };
+}
+
+export interface RichEditorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  uploadConfig: UploadConfig;
+}
+
+const RichEditor = (props: RichEditorProps) => {
+  return (
+    <div>
+      <ToastProvider>
+        <QuillComponent {...props} />
+      </ToastProvider>
+    </div>
+  );
+};
+
+export default RichEditor;

package/src/components/RichEditor/index.ts

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

package/src/components/RichEditor/styledComponents.ts

@@ -0,0 +1,62 @@
+import { styled } from "../../styles";
+
+export const QuillContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const 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ítulo 1",
+  },
+  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before": {
+    content: "Título 2",
+  },
+});

package/src/components/Section.tsx

@@ -1,34 +1,34 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles';
-import { Section as SectionRadix } from '@radix-ui/themes';
-
-export const SectionStyled = styled(SectionRadix, {
-  variants: {
-    size: {
-      xs: { maxWidth: '576px' },
-      sm: { minWidth: '577px', maxWidth: '767px' },
-      md: { mixWidth: '768px', maxWidth: '991px' },
-      lg: { mixWidth: '992px', maxWidth: '1199px' },
-      xl: { mixWidth: '1200px', maxWidth: '1399px' },
-      xxl: { mixWidth: '1400px' },
-      responsive: { width: '100%', maxWidth: '100%', minWidth: '100%' }
-    },
-    display: {
-      none: { display: 'none' },
-      initial: { display: 'initial' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    display: 'initial'
-  },
-});
-
-export type SectionProps = ComponentProps<typeof SectionStyled> & {
-  as?: ElementType;
-  children: React.ReactNode;
-};
-
-export function Section({ children, ...props }: SectionProps) {
-  return <SectionStyled {...props}>{children}</SectionStyled>;
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles';
+import { Section as SectionRadix } from '@radix-ui/themes';
+
+export const SectionStyled = styled(SectionRadix, {
+  variants: {
+    size: {
+      xs: { maxWidth: '576px' },
+      sm: { minWidth: '577px', maxWidth: '767px' },
+      md: { mixWidth: '768px', maxWidth: '991px' },
+      lg: { mixWidth: '992px', maxWidth: '1199px' },
+      xl: { mixWidth: '1200px', maxWidth: '1399px' },
+      xxl: { mixWidth: '1400px' },
+      responsive: { width: '100%', maxWidth: '100%', minWidth: '100%' }
+    },
+    display: {
+      none: { display: 'none' },
+      initial: { display: 'initial' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    display: 'initial'
+  },
+});
+
+export type SectionProps = ComponentProps<typeof SectionStyled> & {
+  as?: ElementType;
+  children: React.ReactNode;
+};
+
+export function Section({ children, ...props }: SectionProps) {
+  return <SectionStyled {...props}>{children}</SectionStyled>;
 }