@lets-events/react 12.2.10 → 12.2.12

package/src/components/RichEditor/QuillComponent.tsx

@@ -1,457 +1,457 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { useQuill } from "react-quilljs";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-import { RichEditorProps } from "./RichEditor";
-import { useToast } from "../Toast/hooks/useToast";
-import { UploadService } from "../../utils/uploadService";
-import { QuillContainer, QuillEditor } from "./styledComponents";
-
-const QuillComponent: React.FC<RichEditorProps> = ({
-  value = "",
-  onChange,
-  placeholder = "Digite seu texto aqui...",
-  disabled = false,
-  className,
-  uploadConfig,
-  simpleVersion = false,
-  disableVideo = false,
-  onCharacterCountChange,
-  maxLength,
-}) => {
-  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 formatHTML = (html: string) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-
-    return doc.body.innerHTML;
-  };
-  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,
-      },
-    };
-
-  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(
-    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.insertText(index + 1, "\n");
-        quill.setSelection(index + 2, 0);
-
-        quill.focus();
-
-        onChange?.(formatHTML(quill.root.innerHTML));
-      } 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, onChange]
-  );
-
-  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 text = quill.getText().trim()
-          const count = text.length
-
-          if (maxLength !== undefined && count > maxLength) {
-            quill.deleteText(maxLength, count - maxLength)
-            return
-          }
-          onChange?.(formatHTML(quill.root.innerHTML))
-          onCharacterCountChange?.(count)
-        }
-      });
-
-      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;
-          if (headerSelect) {
-            const options = headerSelect.querySelectorAll("option");
-            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";
-              }
-            });
-          }
-        }
-      }, 2000);
-    }
-  }, [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);
-    }
-    onChange?.(formatHTML(quill.root.innerHTML));
-
-    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);
-    onChange?.(formatHTML(quill.root.innerHTML));
-    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;
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { useQuill } from "react-quilljs";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { RichEditorProps } from "./RichEditor";
+import { useToast } from "../Toast/hooks/useToast";
+import { UploadService } from "../../utils/uploadService";
+import { QuillContainer, QuillEditor } from "./styledComponents";
+
+const QuillComponent: React.FC<RichEditorProps> = ({
+  value = "",
+  onChange,
+  placeholder = "Digite seu texto aqui...",
+  disabled = false,
+  className,
+  uploadConfig,
+  simpleVersion = false,
+  disableVideo = false,
+  onCharacterCountChange,
+  maxLength,
+}) => {
+  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 formatHTML = (html: string) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+
+    return doc.body.innerHTML;
+  };
+  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,
+      },
+    };
+
+  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(
+    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.insertText(index + 1, "\n");
+        quill.setSelection(index + 2, 0);
+
+        quill.focus();
+
+        onChange?.(formatHTML(quill.root.innerHTML));
+      } 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, onChange]
+  );
+
+  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 text = quill.getText().trim()
+          const count = text.length
+
+          if (maxLength !== undefined && count > maxLength) {
+            quill.deleteText(maxLength, count - maxLength)
+            return
+          }
+          onChange?.(formatHTML(quill.root.innerHTML))
+          onCharacterCountChange?.(count)
+        }
+      });
+
+      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;
+          if (headerSelect) {
+            const options = headerSelect.querySelectorAll("option");
+            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";
+              }
+            });
+          }
+        }
+      }, 2000);
+    }
+  }, [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);
+    }
+    onChange?.(formatHTML(quill.root.innerHTML));
+
+    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);
+    onChange?.(formatHTML(quill.root.innerHTML));
+    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;