From 173f167134d64bf428bf789be6844c01637a876d Mon Sep 17 00:00:00 2001
From: Lucio Sandrini <lucio.sandrini@quintoandar.com.br>
Date: Fri, 13 Sep 2024 15:22:37 -0300
Subject: [PATCH] feat: use iframe for preview

---
 .../src/App/TemplatePanel/EmailPreview.tsx    | 41 +++++++++++++++++++
 .../src/App/TemplatePanel/index.tsx           |  9 ++--
 2 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx

diff --git a/packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx b/packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx
new file mode 100644
index 0000000..fcacbab
--- /dev/null
+++ b/packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx
@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { useEffect, useRef } from 'react';
+import { useImages } from '../../documents/editor/EditorContext';
+
+interface EmailPreviewProps {
+  html: string;
+}
+
+export const EmailPreview = ({ html }: EmailPreviewProps) => {
+  const images = useImages();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const content = useMemo(() => {
+    let copy = html;
+    images.forEach((image) => {
+      copy = copy.replaceAll(image.file.name, image.base64);
+    })
+    return copy
+  }, [images]);
+
+  useEffect(() => {
+    if (iframeRef.current && content) {
+      const newChild = new DOMParser().parseFromString(content, 'text/html');
+      iframeRef.current?.contentDocument?.replaceChild(
+        newChild.documentElement,
+        iframeRef.current.contentDocument.documentElement
+      );
+    }
+  }, [iframeRef.current, content]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+      title="Email preview"
+    />
+  );
+};
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index 0340cad..e360224 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material';
 import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import { Reader } from '@usewaypoint/email-builder';
+import { Reader, renderToStaticMarkup } from '@usewaypoint/email-builder';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
 import {
@@ -20,11 +20,13 @@ import ImportJson from './ImportJson';
 import JsonPanel from './JsonPanel';
 import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
+import { EmailPreview } from './EmailPreview';
 
 export default function TemplatePanel() {
   const document = useDocument();
   const selectedMainTab = useSelectedMainTab();
   const selectedScreenSize = useSelectedScreenSize();
+  const preview = useMemo(() => renderToStaticMarkup(document, { rootBlockId: 'root' }), [document])
 
   let mainBoxSx: SxProps = {
     height: '100%',
@@ -62,7 +64,8 @@ export default function TemplatePanel() {
       case 'preview':
         return (
           <Box sx={mainBoxSx}>
-            <Reader document={document} rootBlockId="root" />
+            <EmailPreview html={preview}/>
+            {/* <Reader document={document} rootBlockId="root" /> */}
           </Box>
         );
       case 'html':