Merge pull request #401 from 10up/feature/raw-titles-content-picker

Fix: Raw Titles for Content Picker

Author: fabiankaegy

components/content-picker/SortableList.tsx

@@ -30,6 +30,7 @@ import { Post, User, store as coreStore } from '@wordpress/core-data';
  */
 import PickedItem, { PickedItemType } from './PickedItem';
 import { DraggableChip } from './DraggableChip';
+import { toPlainTextTitle } from '../content-search/utils';
 import { ContentSearchMode, QueryFieldsFilter } from '../content-search/types';
 import type { PickedItemFilter } from './index';
 import { Term } from './types';
@@ -135,7 +136,7 @@ const SortableList: React.FC<SortableListProps> = ({
 						case 'post': {
 							const post = result as Post;
 							newItem = {
-								title: post.title.rendered,
+								title: toPlainTextTitle(post.title.rendered),
 								url: post.link,
 								id: post.id,
 								type: post.type,
@@ -146,7 +147,7 @@ const SortableList: React.FC<SortableListProps> = ({
 						case 'user': {
 							const user = result as User;
 							newItem = {
-								title: user.name,
+								title: toPlainTextTitle(user.name),
 								url: user.link,
 								id: user.id,
 								type: 'user',
@@ -156,7 +157,7 @@ const SortableList: React.FC<SortableListProps> = ({
 						default: {
 							const taxonomy = result as Term;
 							newItem = {
-								title: taxonomy.name,
+								title: toPlainTextTitle(taxonomy.name),
 								url: taxonomy.link,
 								id: taxonomy.id,
 								type: taxonomy.taxonomy,

components/content-search/utils.ts

@@ -9,6 +9,7 @@ import type { WP_REST_API_User, WP_REST_API_Search_Result } from 'wp-types';
  */
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Types
@@ -114,6 +115,23 @@ interface NormalizeResultsArgs {
 	searchResultFilter?: SearchResultFilter;
 }
 
+/**
+ * Convert a WP "rendered" title (which can contain HTML + entities) into plain text.
+ * - Strips any HTML tags.
+ * - Decodes HTML entities.
+ * - Normalizes NBSP and trims.
+ */
+export const toPlainTextTitle = (input: string | undefined | null): string => {
+	if (!input) {
+		return '';
+	}
+
+	const doc = new DOMParser().parseFromString(String(input), 'text/html');
+	const text = doc.body.textContent ?? '';
+
+	return decodeEntities(text).replace(/\u00A0/g, ' ').trim();
+};
+
 /*
  * Depending on the mode value, this method normalizes the format
  * of the result array.
@@ -148,7 +166,7 @@ export const normalizeResults = ({
 				newItem = {
 					id: userItem.id,
 					subtype: mode,
-					title: userItem.name,
+					title: toPlainTextTitle(userItem.name),
 					type: mode,
 					url: userItem.link,
 				};
@@ -158,7 +176,7 @@ export const normalizeResults = ({
 				newItem = {
 					id: searchItem.id as number,
 					subtype: searchItem.subtype,
-					title: searchItem.title,
+					title: toPlainTextTitle(searchItem.title),
 					type: searchItem.type,
 					url: searchItem.url,
 				};