replace id

Author: torounit

packages/core-data/src/footnotes/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { v4 as createId } from 'uuid';
+
 /**
  * WordPress dependencies
  */
@@ -24,14 +29,29 @@ export function updateFootnotesFromMeta( blocks, meta ) {
 
 	if ( currentOrder.join( '' ) === newOrder.join( '' ) ) return output;
 
-	const newFootnotes = newOrder.map(
-		( fnId ) =>
-			footnotes.find( ( fn ) => fn.id === fnId ) ||
-			oldFootnotes[ fnId ] || {
-				id: fnId,
-				content: '',
+	const newFootnotes = newOrder
+		.map(
+			( fnId ) =>
+				footnotes.find( ( fn ) => fn.id === fnId ) ||
+				oldFootnotes[ fnId ] || {
+					id: fnId,
+					content: '',
+				}
+		)
+		.reduce( ( acc, fn ) => {
+			if ( acc.map( ( { id } ) => id ).includes( fn.id ) ) {
+				acc.push( { ...fn, id: createId() } );
+			} else {
+				acc.push( fn );
 			}
-	);
+			return acc;
+		}, [] );
+
+	const idMap = newOrder.map( ( currentValue, i ) => ( {
+		currentValue,
+		newValue: newFootnotes[ i ].id,
+		used: false,
+	} ) );
 
 	function updateAttributes( attributes ) {
 		// Only attempt to update attributes, if attributes is an object.
@@ -69,10 +89,18 @@ export function updateFootnotesFromMeta( blocks, meta ) {
 			richTextValue.replacements.forEach( ( replacement ) => {
 				if ( replacement.type === 'core/footnote' ) {
 					const id = replacement.attributes[ 'data-fn' ];
-					const index = newOrder.indexOf( id );
+					const index = idMap.findIndex(
+						( { currentValue, used } ) => {
+							return currentValue === id && ! used;
+						}
+					);
+					idMap[ index ].used = true;
 					// The innerHTML contains the count wrapped in a link.
 					const countValue = create( {
-						html: replacement.innerHTML,
+						html: replacement.innerHTML.replace(
+							idMap[ index ].currentValue,
+							idMap[ index ].newValue
+						),
 					} );
 					countValue.text = String( index + 1 );
 					countValue.formats = Array.from(
@@ -83,9 +111,14 @@ export function updateFootnotesFromMeta( blocks, meta ) {
 						{ length: countValue.text.length },
 						() => countValue.replacements[ 0 ]
 					);
+					replacement.attributes[ 'data-fn' ] =
+						idMap[ index ].newValue;
 					replacement.innerHTML = toHTMLString( {
 						value: countValue,
-					} );
+					} ).replace(
+						idMap[ index ].currentValue,
+						idMap[ index ].newValue
+					);
 				}
 			} );