feat: use iframe for preview

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"
+ />
+ );
+};

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':