Merge pull request #405 from Yoast/535-add-and-implement-safecreateinterpolateelement-in-duplicate-post

use safeCreateInterpolateElement

Author: igorschoester

js/src/duplicate-post-strings.js

@@ -1,6 +1,6 @@
 /* global duplicatePostStrings */
 
-import { createInterpolateElement } from "@wordpress/element";
+import { safeCreateInterpolateElement } from "./helpers/safe-create-interpolate-element";
 import { Button } from "@wordpress/components";
 import { __, setLocaleData } from "@wordpress/i18n";
 import { dispatch, subscribe } from "@wordpress/data";
@@ -34,7 +34,7 @@ const republishStrings = {
 
 	'Are you ready to publish?'	: __( 'Are you ready to republish your post?', 'duplicate-post' ),
 	'Double-check your settings before publishing.':
-		createInterpolateElement(
+		safeCreateInterpolateElement(
 			__( 'After republishing your changes will be merged into the original post and you\'ll be redirected there.<br /><br />Do you want to compare your changes with the original version before merging?<br /><br /><button>Save changes and compare</button>',
 				'duplicate-post' ),
 			{
@@ -49,7 +49,7 @@ const republishStrings = {
 
 	'Are you ready to schedule?' : __( 'Are you ready to schedule the republishing of your post?', 'duplicate-post' ),
 	'Your work will be published at the specified date and time.':
-		createInterpolateElement(
+		safeCreateInterpolateElement(
 			__( 'You\'re about to replace the original with this rewritten post at the specified date and time.<br /><br />Do you want to compare your changes with the original version before merging?<br /><br /><button>Save changes and compare</button>',
 				'duplicate-post' ),
 			{

js/src/helpers/safe-create-interpolate-element.js

@@ -0,0 +1,17 @@
+import { createInterpolateElement } from "@wordpress/element";
+
+/**
+ * Wrapper function for `createInterpolateElement` to catch errors.
+ *
+ * @param {string} interpolatedString The interpolated string.
+ * @param {Object<string, JSX.Element>} conversionMap The conversion map object.
+ * @returns {JSX.Element|string} The interpolated element or string if it failed.
+ */
+export const safeCreateInterpolateElement = ( interpolatedString, conversionMap ) => {
+	try {
+		return createInterpolateElement( interpolatedString, conversionMap );
+	} catch ( error ) {
+		console.error( "Error in translation for:", interpolatedString, error );
+		return interpolatedString;
+	}
+};