diff --git a/src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx b/src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx index 10f8b74..f299f93 100644 --- a/src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx +++ b/src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx @@ -7,7 +7,7 @@ import { getPresignedUrl, uploadFileToS3, } from "@/service/mediaService"; -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import Image from "next/image"; import Lightbox from "yet-another-react-lightbox"; import Zoom from "yet-another-react-lightbox/plugins/zoom"; @@ -37,6 +37,37 @@ export default function RoleUpgrade() { const [lightboxIndex, setLightboxIndex] = useState(-1); const [isPreparingFiles, setIsPreparingFiles] = useState(false); const [showPreview, setShowPreview] = useState(false); + const iframeRef = useRef(null); + + const handleIframeLoad = () => { + const iframe = iframeRef.current; + // Đảm bảo iframe và nội dung bên trong đã sẵn sàng và cùng nguồn gốc (same-origin) + if (!iframe || !iframe.contentDocument) return; + + const updateHeight = () => { + if (iframe.contentDocument) { + // Mẹo: Reset height về 'auto' trước để lấy được chiều cao thực tế + // (đặc biệt khi người dùng xóa bớt nội dung làm chiều cao ngắn lại) + iframe.style.height = "auto"; + const scrollHeight = + iframe.contentDocument.documentElement.scrollHeight; + iframe.style.height = `${scrollHeight}px`; + } + }; + + // 1. Cập nhật chiều cao ngay khi iframe load xong HTML + updateHeight(); + + // 2. Dùng ResizeObserver để theo dõi những thay đổi sau khi load + // (VD: ảnh bên trong tải xong làm nội dung dài ra) + const resizeObserver = new ResizeObserver(() => { + updateHeight(); + }); + + if (iframe.contentDocument.body) { + resizeObserver.observe(iframe.contentDocument.body); + } + }; const cleanHTMLContent = (rawHtml: string) => { if (!rawHtml) return ""; @@ -198,13 +229,34 @@ export default function RoleUpgrade() { ) : (
{content ? ( -
-
-
+