From abe134c3a3c467c6facc51d063fc39cec9e94514 Mon Sep 17 00:00:00 2001
From: Miguel Peixe <miguel@peixe.co>
Date: Tue, 15 Mar 2022 14:22:43 -0300
Subject: [PATCH 1/2] feat: minify and notify clipable email body

---
 src/components/with-api-handler/index.js |  1 +
 src/editor/api/index.js                  |  2 +-
 src/newsletter-editor/editor/index.js    | 30 ++++++++++++++++++++++--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/with-api-handler/index.js b/src/components/with-api-handler/index.js
index e5bf02791..7faeed88e 100644
--- a/src/components/with-api-handler/index.js
+++ b/src/components/with-api-handler/index.js
@@ -13,6 +13,7 @@ const successNote = __( 'Campaign sent on ', 'newspack-newsletters' );
 const shouldRemoveNotice = notice => {
 	return (
 		notice.id !== SHARE_BLOCK_NOTICE_ID &&
+		notice.id !== 'newspack-newsletters-email-content-too-large' &&
 		'error' !== notice.status &&
 		( 'success' !== notice.status || -1 === notice.content.indexOf( successNote ) )
 	);
diff --git a/src/editor/api/index.js b/src/editor/api/index.js
index 87aeb10b2..1a123a756 100644
--- a/src/editor/api/index.js
+++ b/src/editor/api/index.js
@@ -63,7 +63,7 @@ apiFetch.use( async ( options, next ) => {
 			.then( ( { mjml } ) => {
 				// Once received MJML markup, convert it to email-compliant HTML
 				// and save as post meta for later retrieval.
-				const { html } = mjml2html( mjml );
+				const { html } = mjml2html( mjml, { keepComments: false, minify: true } );
 				return apiFetch( {
 					data: { meta: { [ emailHTMLMetaName ]: html } },
 					method: 'POST',
diff --git a/src/newsletter-editor/editor/index.js b/src/newsletter-editor/editor/index.js
index d226bce98..d1429dda8 100644
--- a/src/newsletter-editor/editor/index.js
+++ b/src/newsletter-editor/editor/index.js
@@ -6,6 +6,7 @@ import { get, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { createPortal, useEffect, useState } from '@wordpress/element';
@@ -60,14 +61,22 @@ const Editor = compose( [
 			status,
 			sentDate,
 			isPublic: meta.is_public,
+			html: meta[ window.newspack_email_editor_data.email_html_meta ],
 		};
 	} ),
 	withDispatch( dispatch => {
 		const { lockPostAutosaving, lockPostSaving, unlockPostSaving, editPost } = dispatch(
 			'core/editor'
 		);
-		const { createNotice } = dispatch( 'core/notices' );
-		return { lockPostAutosaving, lockPostSaving, unlockPostSaving, editPost, createNotice };
+		const { createNotice, removeNotice } = dispatch( 'core/notices' );
+		return {
+			lockPostAutosaving,
+			lockPostSaving,
+			unlockPostSaving,
+			editPost,
+			createNotice,
+			removeNotice,
+		};
 	} ),
 ] )( props => {
 	const [ publishEl ] = useState( document.createElement( 'div' ) );
@@ -133,6 +142,23 @@ const Editor = compose( [
 		}
 	}, [ props.status ] );
 
+	// Notify if email content is larger than ~100kb.
+	useEffect( () => {
+		const noticeId = 'newspack-newsletters-email-content-too-large';
+		const message = __(
+			'Email content is too large and may get clipped by email clients.',
+			'newspack-newsletters'
+		);
+		if ( props.html.length > 100000 ) {
+			props.createNotice( 'warning', message, {
+				id: noticeId,
+				isDismissible: false,
+			} );
+		} else {
+			props.removeNotice( noticeId );
+		}
+	}, [ props.html ] );
+
 	return createPortal( <SendButton />, publishEl );
 } );
 

From ce607527eb31d1041b9c0e3dcd9d9b68239775ce Mon Sep 17 00:00:00 2001
From: Miguel Peixe <miguel@peixe.co>
Date: Mon, 21 Mar 2022 14:58:38 -0300
Subject: [PATCH 2/2] Update src/newsletter-editor/editor/index.js

Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>
---
 src/newsletter-editor/editor/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/newsletter-editor/editor/index.js b/src/newsletter-editor/editor/index.js
index d1429dda8..9891f136f 100644
--- a/src/newsletter-editor/editor/index.js
+++ b/src/newsletter-editor/editor/index.js
@@ -146,7 +146,7 @@ const Editor = compose( [
 	useEffect( () => {
 		const noticeId = 'newspack-newsletters-email-content-too-large';
 		const message = __(
-			'Email content is too large and may get clipped by email clients.',
+			'Email content is too long and may get clipped by email clients.',
 			'newspack-newsletters'
 		);
 		if ( props.html.length > 100000 ) {