Issue 205: Resolved issue with emoji in page titles.

assets/js/src/simple-page-ordering.js

@@ -41,6 +41,13 @@ function update_simple_ordering_callback(response) {
 				const dom_post_title = inline_key.querySelector('.post_title');
 				if (dom_post_title !== null) {
 					post_title = dom_post_title.innerHTML;
+
+					// Convert emoji img tags back to Unicode emoji characters
+					// See: https://github.com/10up/simple-page-ordering/issues/205
+					post_title = post_title.replace(
+						/<img[^>]*class="emoji"[^>]*alt="([^"]*)"[^>]*>/g,
+						'$1',
+					);
 				}
 
 				let dashes = 0;
@@ -50,7 +57,7 @@ function update_simple_ordering_callback(response) {
 				}
 				const dom_row_title = inline_key.parentNode.querySelector('.row-title');
 				if (dom_row_title !== null && post_title !== null) {
-					dom_row_title.textContent = decodeEntities(post_title);
+					dom_row_title.innerHTML = decodeEntities(post_title);
 				}
 			} else if (dom_menu_order !== null) {
 				dom_menu_order.textContent = new_pos[key];

tests/bin/initialize.sh

@@ -11,6 +11,7 @@ wp-env run tests-cli wp post create --post_status=publish --post_title='Post 3'
 wp-env run tests-cli wp post create --post_status=publish --post_type=page  --post_title='Page 1' --menu_order=10
 wp-env run tests-cli wp post create --post_status=publish --post_type=page  --post_title='Page 2' --menu_order=20
 wp-env run tests-cli wp post create --post_status=publish --post_type=page  --post_title='Page 3' --menu_order=30
+wp-env run tests-cli wp post create --post_status=publish --post_type=page  --post_title='Hey there! 👋' --menu_order=15
 wp-env run tests-cli wp post create --post_status=publish --post_type=page --post_parent=6 --post_title='Child Page 1' --menu_order=10
 wp-env run tests-cli wp post create --post_status=publish --post_type=page --post_parent=6 --post_title='Child Page 2' --menu_order=20
 wp-env run tests-cli wp post create --post_status=publish --post_type=page --post_parent=6 --post_title='Child Page 3' --menu_order=30

tests/cypress/integration/page-ordering.test.js

@@ -47,6 +47,39 @@ describe('Test Page Order Change', () => {
 		} );
 	});
 
+	it('Can preserve emojis in page titles during reordering', () => {
+		// Find the emoji page that was created during setup
+		cy.contains('.row-title', 'Hey there! 👋').should('exist').as('emojiPage');
+
+		// Get the parent row of our emoji page
+		cy.get('@emojiPage').parents('tr').as('emojiPageRow');
+
+		// Store the initial emoji title text
+		cy.get('@emojiPage').invoke('text').as('initialEmojiTitle');
+
+		// Get the ID of the emoji page row for debugging
+		cy.get('@emojiPageRow').invoke('attr', 'id').then(rowId => {
+			cy.log('Emoji page row ID:', rowId);
+		});
+
+		// Perform the drag operation to trigger the callback
+		cy.get('@emojiPageRow').drag(secondTopLevelPage);
+
+		// Wait for the ordering update to complete with a timeout
+		cy.get('.wp-list-table tbody tr .check-column input', { timeout: 10000 }).should('exist');
+
+		// Add a small wait to ensure the callback has completed
+		cy.wait(1000);
+
+		// Verify the emoji is still present and unchanged in the title
+		cy.get('@initialEmojiTitle').then(initialTitle => {
+			cy.log('Initial title was:', initialTitle);
+			cy.contains('.row-title', 'Hey there! 👋')
+				.should('exist')
+				.should('have.text', initialTitle);
+		});
+	});
+
 	// Reset page ordering state.
 	after( () => {
 		cy.login();