Fix Datawrapper embed resizing in article-body.js

Author: jocelynshek

web/src/components/article-layouts/article-body.js

@@ -8,46 +8,41 @@ import { DiscussionEmbed } from "disqus-react";
 
 import React, { useEffect, useRef } from "react";
 
-// Define the iframe serializer
-const serializers = {
-  types: {
-    iframe: ({ node }) => {
-      return <DatawrapperEmbed url={node.url} caption={node.caption} />;
-    },
-  },
-};
-
-
-const DatawrapperEmbed = ({ url, caption }) => {
-  const containerRef = useRef(null);
+/*const DatawrapperEmbed = ({ url, caption }) => {
+  const iframeRef = useRef(null);
+  const chartId = url.match(/\/([a-zA-Z0-9]+)\/\d+\/?$/)?.[1];
 
   useEffect(() => {
-    if (!url || !containerRef.current) return;
-
-    const match = url.match(/dwcdn\.net\/([^/]+)/);
-    if (!match) return;
+    window.addEventListener("message", (e) => {
+      console.log("📩 Raw message received:", e.data);
+    });
+    
+    const receiveMessage = (e) => {
+      if (!e.data || !e.data["datawrapper-height"]) return;
 
-    const chartId = match[1];
-    const scriptId = `dw-script-${chartId}`;
+      const heights = e.data["datawrapper-height"];
+      const iframe = iframeRef.current;
 
-    if (!document.getElementById(scriptId)) {
-      const script = document.createElement("script");
-      script.src = `https://datawrapper.dwcdn.net/${chartId}/embed.js`;
-      script.defer = true;
-      script.id = scriptId;
-      document.body.appendChild(script);
-    }
-  }, [url]);
+      Object.keys(heights).forEach((id) => {
+        if (iframe?.id === `datawrapper-chart-${id}`) {
+          const height = heights[id];
+          console.log("🔧 Setting dynamic height for", id, ":", height);
+          iframe.style.setProperty("height", `${height}px`, "important");
+        }
+      });
+    };
 
-  const chartId = url.match(/dwcdn\.net\/([^/]+)/)?.[1];
-  if (!chartId) return <p style={{ color: "red" }}>Invalid Datawrapper URL</p>;
+    window.addEventListener("message", receiveMessage);
+    return () => window.removeEventListener("message", receiveMessage);
+  }, []);
 
   return (
-    <div ref={containerRef} style={{ width: "100%", margin: "2rem 0" }}>
+    <div style={{ width: "100%", margin: "2rem 0" }}>
       <iframe
+        ref={iframeRef}
+        src={url}
+        title={caption || "Datawrapper Chart"}
         id={`datawrapper-chart-${chartId}`}
-        title={caption || "Embedded Datawrapper chart"}
-        src={`https://datawrapper.dwcdn.net/${chartId}/1/`}
         scrolling="no"
         frameBorder="0"
         allowFullScreen
@@ -56,7 +51,7 @@ const DatawrapperEmbed = ({ url, caption }) => {
           width: "0",
           minWidth: "100%",
           border: "none",
-          height: "400px",
+          transition: "height 0.2s ease",
         }}
       />
       {caption && (
@@ -73,9 +68,41 @@ const DatawrapperEmbed = ({ url, caption }) => {
       )}
     </div>
   );
+};*/
+
+const DatawrapperEmbed = ({ chartId }) => {
+  return (
+    <div style={{ minHeight: "400px" }} id={`datawrapper-${chartId}`}>
+      <script
+        type="text/javascript"
+        defer
+        src={`https://datawrapper.dwcdn.net/${chartId}/embed.js`}
+        data-target={`#datawrapper-${chartId}`}
+      ></script>
+      <noscript>
+        <img
+          src={`https://datawrapper.dwcdn.net/${chartId}/full.png`}
+          alt="Chart"
+        />
+      </noscript>
+    </div>
+  );
 };
 
 
+
+const serializers = {
+  types: {
+    iframe: ({ node }) => {
+      const chartId = node.url.match(/\/([a-zA-Z0-9]+)\/?$/)?.[1];
+      if (!chartId) return <p style={{ color: "red" }}>Invalid Datawrapper URL</p>;
+      return <DatawrapperEmbed chartId={chartId} />;
+    },
+  },
+};
+
+
+
 function ArticleBody(props) {
   const {
     _rawExcerpt,