From e765b54baa518be04fafa17dd6176992dce8b675 Mon Sep 17 00:00:00 2001
From: Michael Fix <mrfix84@gmail.com>
Date: Sun, 21 Jun 2020 17:14:16 -0700
Subject: [PATCH] read container width and height at copy time (#1041)

---
 components/CopyMenu.js | 13 +++++++++----
 components/Editor.js   |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/CopyMenu.js b/components/CopyMenu.js
index 12e14f5..d624fe0 100644
--- a/components/CopyMenu.js
+++ b/components/CopyMenu.js
@@ -8,10 +8,12 @@ import Button from './Button'
 import Popout, { managePopout } from './Popout'
 import CopySVG from './svg/Copy'
 
-const toIFrame = url =>
+const toIFrame = (url, width, height) =>
   `<iframe
   src="${location.origin}/embed${url.replace(/^\/\?/, '?')}"
-  style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;"
+  style="width: ${width || 1024}px; height: ${
+    height || 473
+  }px; border:0; transform: scale(1); overflow:hidden;"
   sandbox="allow-scripts allow-same-origin">
 </iframe>
 `
@@ -52,7 +54,7 @@ function useClipboardSupport() {
   return isClipboardSupports
 }
 
-function CopyMenu({ isVisible, toggleVisibility, copyImage }) {
+function CopyMenu({ isVisible, toggleVisibility, copyImage, carbonRef }) {
   const clipboardSupported = useClipboardSupport()
 
   const [showCopied, { loading: copied }] = useAsyncCallback(
@@ -93,7 +95,10 @@ function CopyMenu({ isVisible, toggleVisibility, copyImage }) {
             </CopyButton>
           )}
           <CopyEmbed title="Medium.com" mapper={toEncodedURL} />
-          <CopyEmbed title="IFrame" mapper={toIFrame} />
+          <CopyEmbed
+            title="IFrame"
+            mapper={url => toIFrame(url, carbonRef.clientWidth, carbonRef.clientHeight)}
+          />
           <CopyEmbed title="Plain URL" mapper={toURL} />
         </div>
       </Popout>
diff --git a/components/Editor.js b/components/Editor.js
index 88963c6..56b2328 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -415,7 +415,7 @@ class Editor extends React.Component {
             />
             <div id="style-editor-button" />
             <div className="buttons">
-              <CopyMenu copyImage={this.copyImage} />
+              <CopyMenu copyImage={this.copyImage} carbonRef={this.carbonNode.current} />
               <TweetButton onClick={this.tweet} />
               <ExportMenu
                 onChange={this.updateSetting}