@mujian/js-sdk 0.0.6-beta.12 → 0.0.6-beta.14

package/dist/react.js

@@ -319,10 +319,46 @@ ${content}
 </html>
   `;
 }
+function adjustIframeHeight(iframe) {
+    if (!iframe.contentWindow) return;
+    const document1 = iframe.contentWindow.document;
+    const height = Math.max(document1.body.offsetHeight, document1.documentElement.offsetHeight);
+    if (!Number.isFinite(height) || height <= 0) return;
+    iframe.style.height = `${height}px`;
+    iframe.contentWindow.postMessage({
+        type: "MJ_UPDATE_VIEWPORT_HEIGHT"
+    }, "*");
+}
+const observed_elements = new Map();
+const observer = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const element = entry.target;
+        const iframe = observed_elements.get(element);
+        if (iframe) adjustIframeHeight(iframe);
+    }
+});
+function useHeightObserver() {
+    return {
+        observe: (iframe)=>{
+            if (!iframe?.contentWindow?.document?.body) return;
+            const body = iframe.contentWindow.document.body;
+            observed_elements.set(body, iframe);
+            observer.observe(body);
+            adjustIframeHeight(iframe);
+        },
+        unobserve: (iframe)=>{
+            if (!iframe.contentWindow?.document?.body) return;
+            const body = iframe.contentWindow.document.body;
+            observed_elements.delete(body);
+            observer.unobserve(body);
+        }
+    };
+}
 const MdRendererBase = ({ content })=>{
     const containerRef = useRef(null);
     useRef([]);
     const iframeIdList = useRef([]);
+    const { observe, unobserve } = useHeightObserver();
     useEffect(()=>{
         let mes = messageFormatting(content);
         mes = mes.replace(/<code(.*)>[\s\S]*?<\/code>/g, (match)=>{
@@ -350,19 +386,16 @@ const MdRendererBase = ({ content })=>{
             const iframe = document.getElementById("MJ-iframe-" + id);
             if (!iframe) return;
             iframe.addEventListener("load", ()=>{
-                console.log("ifrddame loaded", id);
+                observe(iframe);
                 const spinElement = iframe.parentElement?.querySelector("#MJ-spin-" + id);
                 if (spinElement) spinElement.remove();
-                var iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
-                var height = iframeDoc?.body?.scrollHeight || 0;
-                iframe.style.height = height + "px";
             });
         });
         return ()=>{
             iframeIdList.current.forEach((id)=>{
                 const iframe = document.getElementById("MJ-iframe-" + id);
                 if (!iframe) return;
-                console.log("ifraaameaas2", id);
+                unobserve(iframe);
                 const spinElement = iframe.parentElement?.querySelector("#MJ-spin-" + iframe.id);
                 if (spinElement) spinElement.remove();
                 iframe.removeEventListener("load", ()=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mujian/js-sdk",
-  "version": "0.0.6-beta.12",
+  "version": "0.0.6-beta.14",
   "type": "module",
   "exports": {
     ".": {