fix: dont html encode ampersands in subject (#1686)

* fix: dont html encode amperstands in subject

* fix: decode HTML entities in both editor JS and sync payloads

---------

Co-authored-by: dkoo <derrick.koo@automattic.com>
Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>

includes/service-providers/active_campaign/class-newspack-newsletters-active-campaign.php

@@ -1050,7 +1050,7 @@ public function sync( $post ) {
 				'p[' . $send_list_id . ']' => 1,
 				'fromemail'                => $from_email,
 				'fromname'                 => $from_name,
-				'subject'                  => $post->post_title,
+				'subject'                  => html_entity_decode( $post->post_title ),
 			],
 			$message_data
 		);

includes/service-providers/campaign_monitor/class-newspack-newsletters-campaign-monitor.php

@@ -490,8 +490,8 @@ public function format_campaign_args( $post_id ) {
 		}
 
 		$args = [
-			'Subject'   => get_the_title( $post_id ),
-			'Name'      => get_the_title( $post_id ) . ' ' . gmdate( 'h:i:s A' ), // Name must be unique.
+			'Subject'   => html_entity_decode( get_the_title( $post_id ) ),
+			'Name'      => html_entity_decode( get_the_title( $post_id ) ) . ' ' . gmdate( 'h:i:s A' ), // Name must be unique.
 			'FromName'  => get_post_meta( $post_id, 'senderName', true ),
 			'FromEmail' => get_post_meta( $post_id, 'senderEmail', true ),
 			'ReplyTo'   => get_post_meta( $post_id, 'senderEmail', true ),

includes/service-providers/constant_contact/class-newspack-newsletters-constant-contact.php

@@ -655,7 +655,7 @@ public function sender( $post_id, $from_name, $reply_to ) {
 			$activity = [
 				'format_type'      => 5,
 				'email_content'    => $content,
-				'subject'          => $post->post_title,
+				'subject'          => html_entity_decode( $post->post_title ),
 				'contact_list_ids' => $campaign->activity->contact_list_ids,
 				'from_name'        => $from_name,
 				'from_email'       => $reply_to,

includes/service-providers/mailchimp/class-newspack-newsletters-mailchimp.php

@@ -1004,7 +1004,7 @@ public function get_sync_payload( $post ) {
 			'type'         => 'regular',
 			'content_type' => 'template',
 			'settings'     => [
-				'subject_line' => $post->post_title,
+				'subject_line' => html_entity_decode( $post->post_title ),
 				'title'        => $this->get_campaign_name( $post ),
 			],
 		];

src/newsletter-editor/sidebar/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { Button, Notice, Spinner, TextControl, TextareaControl } from '@wordpress/components';
 
 /**
@@ -40,11 +40,24 @@ const Sidebar = ( {
 	stringifiedCampaignDefaults,
 	postId,
 } ) => {
+	const [ plainTextTitle, setPlainTextTitle ] = useState( title );
 	const isRetrieving = useIsRetrieving();
 	const newsletterData = useNewsletterData();
 	const newsletterDataError = useNewsletterDataError();
 	const campaign = newsletterData?.campaign;
 	const updateMeta = ( toUpdate ) => editPost( { meta: toUpdate } );
+	const entityConverter = useRef( null );
+
+	// Create a temp textarea element that we can use to convert HTML entities like & to unicode characters.
+	useEffect( () => {
+		if ( entityConverter.current ) {
+			entityConverter.current.innerHTML = title;
+			setPlainTextTitle( entityConverter.current.value );
+		} else {
+			entityConverter.current = document.createElement( 'textarea' );
+		}
+		return () => entityConverter?.current?.remove && entityConverter.current.remove(); // Clean up temp element from DOM on unmount.
+	}, [ title ] );
 
 	// Reconcile stored campaign data with data fetched from ESP.
 	useEffect( () => {
@@ -184,7 +197,7 @@ const Sidebar = ( {
 			<TextControl
 				label={ __( 'Subject', 'newspack-newsletters' ) }
 				className="newspack-newsletters__subject-textcontrol"
-				value={ title }
+				value={ plainTextTitle }
 				disabled={ inFlight }
 				onChange={ value => editPost( { title: value } ) }
 			/>