Use current email content when previewing templates when swapping

[MAILPOET-6336]

packages/js/email-editor/src/components/sidebar/email-type-info.tsx

@@ -23,8 +23,11 @@ import { EditTemplateModal } from './edit-template-modal';
 import { SelectTemplateModal } from '../template-select';
 
 export function EmailTypeInfo() {
-	const template = useSelect(
+	const { template, currentEmailContent } = useSelect(
-		( select ) => select( storeName ).getCurrentTemplate(),
+		( select ) => ( {
+			template: select( storeName ).getCurrentTemplate(),
+			currentEmailContent: select( storeName ).getEditedEmailContent(),
+		} ),
 		[]
 	);
 	const [ isEditTemplateModalOpen, setEditTemplateModalOpen ] =
@@ -113,6 +116,7 @@ export function EmailTypeInfo() {
 						setSelectTemplateModalOpen( false )
 					}
 					closeCallback={ () => setSelectTemplateModalOpen( false ) }
+					previewContent={ currentEmailContent }
 				/>
 			) }
 		</>

packages/js/email-editor/src/components/template-select/select-modal.tsx

@@ -20,15 +20,20 @@ const BLANK_TEMPLATE = 'email-general';
 export function SelectTemplateModal( {
 	onSelectCallback,
 	closeCallback = null,
+	previewContent = '',
 } ) {
-	const [ templates ] = usePreviewTemplates();
+	const [ templates ] = usePreviewTemplates( previewContent );
 
 	const hasTemplates = templates?.length > 0;
 
 	const handleTemplateSelection = ( template: TemplatePreview ) => {
-		void dispatch( editorStore ).resetEditorBlocks(
+		// When we provide previewContent, we don't want to reset the blocks
-			template.patternParsed
+		if ( ! previewContent ) {
-		);
+			void dispatch( editorStore ).resetEditorBlocks(
+				template.emailParsed
+			);
+		}
+
 		void dispatch( storeName ).setTemplateToPost(
 			template.slug,
 			template.template.mailpoet_email_theme ?? {}
@@ -100,7 +105,9 @@ export function SelectTemplateModal( {
 										}
 									>
 										<BlockPreview
-											blocks={ template.contentParsed }
+											blocks={
+												template.previewContentParsed
+											}
 											viewportWidth={ 900 }
 											minHeight={ 300 }
 											additionalStyles={ [

packages/js/email-editor/src/hooks/use-preview-templates.ts

@@ -34,7 +34,9 @@ function setPostContentInnerBlocks(
 	} );
 }
 
-export function usePreviewTemplates(): TemplatePreview[][] {
+export function usePreviewTemplates(
+	customEmailContent = ''
+): TemplatePreview[][] {
 	const { templates, patterns } = useSelect( ( select ) => {
 		const contentBlockId =
 			// @ts-expect-error getBlocksByName is not defined in types
@@ -52,23 +54,35 @@ export function usePreviewTemplates(): TemplatePreview[][] {
 		};
 	}, [] );
 
-	if ( ! templates || ! patterns.length ) {
+	if ( ! templates || ( ! patterns.length && ! customEmailContent ) ) {
 		return [ [] ];
 	}
 
-	// Pick first pattern that comes from mailpoet and is for general email template
+	let contentPatternBlocksGeneral = null;
-	const contentPatternBlocksGeneral = patterns.find(
+	let contentPatternBlocks = null;
-		( pattern ) =>
+	const parsedCustomEmailContent =
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		customEmailContent && parse( customEmailContent );
-			pattern?.templateTypes?.includes( 'email-general-template' )
-	)?.blocks as BlockInstance[];
 
-	// Pick first pattern that comes from mailpoet and is for template with header and footer content separated
+	// If there is a custom email content passed from outside we use it as email content for preview
-	const contentPatternBlocks = patterns.find(
+	// otherwise we pick first suitable from patterns
-		( pattern ) =>
+	if ( parsedCustomEmailContent ) {
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		contentPatternBlocksGeneral = parsedCustomEmailContent;
-			pattern?.templateTypes?.includes( 'email-template' )
+		contentPatternBlocks = parsedCustomEmailContent;
-	)?.blocks as BlockInstance[];
+	} else {
+		// Pick first pattern that comes from mailpoet and is for general email template
+		contentPatternBlocksGeneral = patterns.find(
+			( pattern ) =>
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+				pattern?.templateTypes?.includes( 'email-general-template' )
+		)?.blocks as BlockInstance[];
+
+		// Pick first pattern that comes from mailpoet and is for template with header and footer content separated
+		contentPatternBlocks = patterns.find(
+			( pattern ) =>
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+				pattern?.templateTypes?.includes( 'email-template' )
+		)?.blocks as BlockInstance[];
+	}
 
 	return [
 		templates.map( ( template: EmailTemplatePreview ): TemplatePreview => {
@@ -83,8 +97,8 @@ export function usePreviewTemplates(): TemplatePreview[][] {
 			return {
 				slug: template.slug,
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-				contentParsed: parsedTemplate,
+				previewContentParsed: parsedTemplate,
-				patternParsed:
+				emailParsed:
 					template.slug === 'email-general'
 						? contentPatternBlocksGeneral
 						: contentPatternBlocks,

packages/js/email-editor/src/store/types.ts

@@ -225,8 +225,8 @@ export type EmailTemplatePreview = Omit<
 
 export type TemplatePreview = {
 	slug: string;
-	contentParsed: BlockInstance[];
+	previewContentParsed: BlockInstance[];
-	patternParsed: BlockInstance[];
+	emailParsed: BlockInstance[];
 	template: EmailTemplatePreview;
 };