From e56fe9a95ef93149f74992879bbf75f33dabb848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Tue, 17 Dec 2024 19:00:51 +0100
Subject: [PATCH] Add support for replacing written Personalization Tags with
 attributes

[MAILPOET-6376]
---
 .../personalization-tags/rich-text-utils.ts   | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/js/email-editor/src/components/personalization-tags/rich-text-utils.ts b/packages/js/email-editor/src/components/personalization-tags/rich-text-utils.ts
index 5b72d26ee9..92cb91598a 100644
--- a/packages/js/email-editor/src/components/personalization-tags/rich-text-utils.ts
+++ b/packages/js/email-editor/src/components/personalization-tags/rich-text-utils.ts
@@ -195,17 +195,26 @@ const replacePersonalizationTagsWithHTMLComments = (
 	tags: PersonalizationTag[]
 ) => {
 	tags.forEach( ( tag ) => {
-		if ( ! content.includes( tag.token ) ) {
-			// Skip if the token is not in the content
+		// Skip if the token is not in the content
+		if (
+			! content.includes( tag.token.slice( 0, tag.token.length - 1 ) )
+		) {
 			return;
 		}
 
-		const escapedRegExp = tag.token.replace(
-			/[.*+?^${}()|[\]\\]/g,
-			'\\$&'
-		); // Escape special characters
-		const regex = new RegExp( `(?<!<!--)${ escapedRegExp }(?!-->)`, 'g' ); // Match token not inside HTML comments
-		content = content.replace( regex, `<!--${ tag.token }-->` );
+		// Match the token with optional attributes like [mailpoet/subscriber-firstname default="user"]
+		const baseToken = tag.token
+			.substring( 1, tag.token.length - 1 )
+			.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ); // Escape base token and remove brackets
+		const regex = new RegExp(
+			`(?<!<!--)\\[(${ baseToken }(\\s[^\\]]*)?)\\](?!-->)`, // Match full token with optional attributes
+			'g'
+		);
+
+		content = content.replace( regex, ( match ) => {
+			// Use the exact text inside the brackets for the replacement
+			return `<!--${ match }-->`;
+		} );
 	} );
 	return content;
 };