@mujian/js-sdk 0.0.6-beta.11 → 0.0.6-beta.13

package/dist/react.js

@@ -325,6 +325,9 @@ function adjustIframeHeight(iframe) {
     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)=>{
@@ -337,14 +340,14 @@ const observer = new ResizeObserver((entries)=>{
 function useHeightObserver() {
     return {
         observe: (iframe)=>{
-            if (!iframe.contentWindow || !iframe.contentWindow.document || !iframe.contentWindow.document.body) return;
+            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 || !iframe.contentWindow.document || !iframe.contentWindow.document.body) return;
+            if (!iframe.contentWindow?.document?.body) return;
             const body = iframe.contentWindow.document.body;
             observed_elements.delete(body);
             observer.unobserve(body);
@@ -359,7 +362,6 @@ const MdRendererBase = ({ content })=>{
     useEffect(()=>{
         let mes = messageFormatting(content);
         mes = mes.replace(/<code(.*)>[\s\S]*?<\/code>/g, (match)=>{
-            console.log("match");
             const code = match.replace("<code>", "").replace("</code>", "");
             const srcdoc = createSrcContent(unescapeHTML(code));
             const id = v4();
@@ -374,27 +376,32 @@ const MdRendererBase = ({ content })=>{
       </div>
       `;
         });
-        console.log("mes", mes);
         if (containerRef.current) containerRef.current.innerHTML = mes;
     }, [
         content
     ]);
     useEffect(()=>{
+        document.documentElement.style.setProperty("--MJ-iframe-height", `${window.parent.innerHeight}px`);
+        window.addEventListener("message", function(event) {
+            console.log("event", event);
+            if (event.data?.type === "MJ_UPDATE_VIEWPORT_HEIGHT") document.documentElement.style.setProperty("--MJ-iframe-height", `${window.parent.innerHeight}px`);
+        });
+    }, []);
+    useEffect(()=>{
+        console.log("iframeIdList", iframeIdList.current);
         iframeIdList.current.forEach((id)=>{
             const iframe = document.getElementById("MJ-iframe-" + id);
-            observe(iframe);
+            if (!iframe) return;
             iframe.addEventListener("load", ()=>{
-                console.log("iframe 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;
                 unobserve(iframe);
                 const spinElement = iframe.parentElement?.querySelector("#MJ-spin-" + iframe.id);
                 if (spinElement) spinElement.remove();
@@ -404,8 +411,7 @@ const MdRendererBase = ({ content })=>{
             });
         };
     }, [
-        observe,
-        unobserve
+        iframeIdList.current
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "mes_text",

package/package.json

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