From 0ac0df036b5c38bbcecffe244142d1c1f7d057c0 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 12 Jul 2022 11:12:00 +0100
Subject: [PATCH] [fix] hydration bug in iframe (#813)

* Fixes hydration bug in iframe

* Update [id].tsx
---
 apps/www/components/IFrameWarning.tsx  | 4 +++-
 apps/www/pages/r/[id].tsx              | 6 +++++-
 apps/www/pages/v/[id].tsx              | 6 +++++-
 examples/tldraw-example/src/iframe.tsx | 7 +++++--
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/www/components/IFrameWarning.tsx b/apps/www/components/IFrameWarning.tsx
index b0baed3c8..cb0da33fc 100644
--- a/apps/www/components/IFrameWarning.tsx
+++ b/apps/www/components/IFrameWarning.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { styled } from 'styles'
 
-export function IFrameWarning({ url = 'https://tldraw.com' }: { url?: string }) {
+export default function IFrameWarning({ url = 'https://tldraw.com' }: { url?: string }) {
   const [copied, setCopied] = React.useState(false)
   const rTimeout = React.useRef<any>(0)
 
@@ -93,6 +93,8 @@ const StyledContainer = styled('div', {
   fontSize: '$3',
   gap: '$5',
   flexDirection: 'column',
+  border: '1px solid $hover',
+  borderRadius: '$2',
 })
 
 const StyledUrlLink = styled('a', {
diff --git a/apps/www/pages/r/[id].tsx b/apps/www/pages/r/[id].tsx
index 014c3f511..77f65bb93 100644
--- a/apps/www/pages/r/[id].tsx
+++ b/apps/www/pages/r/[id].tsx
@@ -2,7 +2,11 @@ import * as React from 'react'
 import type { GetServerSideProps } from 'next'
 import { getSession } from 'next-auth/react'
 import dynamic from 'next/dynamic'
-import { IFrameWarning } from 'components/IFrameWarning'
+
+const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
+  ssr: false,
+}) as any
+
 const MultiplayerEditor = dynamic(() => import('components/MultiplayerEditor'), {
   ssr: false,
 }) as any
diff --git a/apps/www/pages/v/[id].tsx b/apps/www/pages/v/[id].tsx
index 55d745b80..3b62ad001 100644
--- a/apps/www/pages/v/[id].tsx
+++ b/apps/www/pages/v/[id].tsx
@@ -3,7 +3,11 @@ import type { GetServerSideProps } from 'next'
 import { getSession } from 'next-auth/react'
 import dynamic from 'next/dynamic'
 import { Utils } from '@tldraw/core'
-import { IFrameWarning } from 'components/IFrameWarning'
+
+const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
+  ssr: false,
+}) as any
+
 const ReadOnlyMultiplayerEditor = dynamic(() => import('components/ReadOnlyMultiplayerEditor'), {
   ssr: false,
 }) as any
diff --git a/examples/tldraw-example/src/iframe.tsx b/examples/tldraw-example/src/iframe.tsx
index adc16d412..fd6087be9 100644
--- a/examples/tldraw-example/src/iframe.tsx
+++ b/examples/tldraw-example/src/iframe.tsx
@@ -2,8 +2,11 @@ import * as React from 'react'
 
 export default function IFrame() {
   return (
-    <div className="tldraw">
-      <iframe src="http://localhost:3000/r/hello" style={{ width: '100%', height: '50%' }} />
+    <div className="tldraw" style={{ padding: 32 }}>
+      <iframe
+        src="http://localhost:3000/r/hello"
+        style={{ width: '100%', height: '50%', border: 'none' }}
+      />
     </div>
   )
 }