Social Previews | Fix Threads preview to add support for caption (#92237

)

* Add explicit caption support to the Threads preview

* Use the updated API in share preview

* Fix media URL for Instagram preview

* Update version and changelog

client/components/share/threads-share-preview/index.jsx

@@ -1,6 +1,6 @@
 import { ThreadsPreviews } from '@automattic/social-previews';
 import { PureComponent } from 'react';
-import { decodeEntities } from 'calypso/lib/formatting';
+import { decodeEntities, stripHTML } from 'calypso/lib/formatting';
 
 export class ThreadsSharePreview extends PureComponent {
 	render() {
@@ -11,23 +11,42 @@ export class ThreadsSharePreview extends PureComponent {
 			message,
 			imageUrl,
 			seoTitle,
-			articleSummary,
+			articleContent,
 			hidePostPreview,
 			media,
 		} = this.props;
 
+		let caption = seoTitle;
+
+		if ( message ) {
+			caption = message;
+		} else if ( seoTitle && articleContent ) {
+			caption = `${ seoTitle }\n\n${ articleContent }`;
+		}
+
+		const captionLength =
+			// 500 characters
+			500 -
+			// Number of characters in the article URL
+			articleUrl.length -
+			// 2 characters for line break
+			2;
+
+		caption = stripHTML( decodeEntities( caption ) ).slice( 0, captionLength );
+
+		caption += `\n\n${ articleUrl }`;
+
 		return (
 			<div className="threads-share-preview">
 				<ThreadsPreviews
 					posts={ [
 						{
-							description: decodeEntities( articleSummary ),
 							title: decodeEntities( seoTitle ),
 							image: imageUrl,
 							url: articleUrl,
 							name: externalName,
 							profileImage: externalProfilePicture,
-							text: message,
+							caption,
 							media,
 						},
 					] }

packages/social-previews/CHANGELOG.md

@@ -3,7 +3,7 @@
 ## v2.1.0
 
 - Added Threads preview
-- Fixed media image URL for Tumblr preview
+- Fixed media image URL for Tumblr and Instagram previews
 
 ## v2.0.1 (2024-06-10)
 

packages/social-previews/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/social-previews",
-	"version": "2.1.0-beta.5",
+	"version": "2.1.0-beta.6",
 	"description": "A suite of components to generate previews for a post for both social and search engines.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",

packages/social-previews/src/instagram-preview/post-preview.tsx

@@ -45,7 +45,7 @@ export function InstagramPostPreview( {
 									<source src={ mediaItem.url } type={ mediaItem.type } />
 								</video>
 							) : (
-								<img className="instagram-preview__media--image" src={ image } alt="" />
+								<img className="instagram-preview__media--image" src={ mediaItem.url } alt="" />
 							) }
 						</div>
 					) : (

packages/social-previews/src/threads-preview/helpers.ts

@@ -2,6 +2,8 @@ import { firstValid, hardTruncation, shortEnough, stripHtmlTags, Formatter } fro
 
 const TITLE_LENGTH = 120;
 
+export const CAPTION_MAX_CHARS = 500;
+
 export const threadsTitle: Formatter = ( text ) =>
 	firstValid(
 		shortEnough( TITLE_LENGTH ),

packages/social-previews/src/threads-preview/link-preview.tsx

@@ -6,7 +6,7 @@ export const ThreadsLinkPreview: React.FC< ThreadsPreviewProps > = ( props ) =>
 		<ThreadsPostPreview
 			{ ...props }
 			// Override the props that are irrelevant to link preview
-			text=""
+			caption=""
 			media={ undefined }
 		/>
 	);

packages/social-previews/src/threads-preview/post-preview.tsx

@@ -2,57 +2,45 @@ import { preparePreviewText } from '../helpers';
 import { Card } from './card';
 import { Footer } from './footer';
 import { Header } from './header';
+import { CAPTION_MAX_CHARS } from './helpers';
 import { Media } from './media';
 import { Sidebar } from './sidebar';
 import { ThreadsPreviewProps } from './types';
 
 import './style.scss';
 
 export const ThreadsPostPreview: React.FC< ThreadsPreviewProps > = ( {
+	caption,
 	date,
-	description,
 	image,
 	media,
 	name,
 	profileImage,
 	showThreadConnector,
-	text,
 	title,
 	url,
 } ) => {
 	const hasMedia = !! media?.length;
 
 	const displayAsCard = url && image && ! hasMedia;
 
-	let textToDisplay = text || title;
-
-	// Attach the URL to the text if not displaying as a card and it's not already in the text.
-	textToDisplay =
-		! displayAsCard && textToDisplay && url && ! textToDisplay.includes( url )
-			? `${ textToDisplay } ${ url }`
-			: textToDisplay;
-
 	return (
 		<div className="threads-preview__wrapper">
 			<div className="threads-preview__container">
 				<Sidebar profileImage={ profileImage } showThreadConnector={ showThreadConnector } />
 				<div className="threads-preview__main">
 					<Header name={ name } date={ date } />
 					<div className="threads-preview__content">
-						{ textToDisplay ? (
+						{ caption ? (
 							<div className="threads-preview__text">
-								{ preparePreviewText( textToDisplay, { platform: 'threads' } ) }
+								{ preparePreviewText( caption, {
+									platform: 'threads',
+									maxChars: CAPTION_MAX_CHARS,
+								} ) }
 							</div>
 						) : null }
 						{ hasMedia ? <Media media={ media } /> : null }
-						{ displayAsCard ? (
-							<Card
-								description={ description || '' }
-								image={ image }
-								title={ title || '' }
-								url={ url }
-							/>
-						) : null }
+						{ displayAsCard ? <Card image={ image } title={ title || '' } url={ url } /> : null }
 					</div>
 					<Footer />
 				</div>

packages/social-previews/src/threads-preview/types.ts

@@ -4,7 +4,7 @@ export type ThreadsPreviewsProps = SocialPreviewsBaseProps & {
 	posts: Array< ThreadsPreviewProps >;
 };
 
-export type ThreadsCardProps = SocialPreviewBaseProps;
+export type ThreadsCardProps = Omit< SocialPreviewBaseProps, 'description' >;
 
 export type SidebarProps = {
 	showThreadConnector?: boolean;
@@ -20,11 +20,4 @@ export type MediaProps = {
 	media: Array< MediaItem >;
 };
 
-export type TextProps = {
-	text: string;
-	url: string;
-};
-
-export type ThreadsPreviewProps = SidebarProps &
-	HeaderProps &
-	Partial< ThreadsCardProps & Pick< TextProps, 'text' > >;
+export type ThreadsPreviewProps = SidebarProps & HeaderProps & Partial< ThreadsCardProps >;

packages/social-previews/src/types.ts

@@ -25,6 +25,11 @@ export interface SocialPreviewBaseProps {
 	 * The array of media items to use in the preview.
 	 */
 	media?: Array< MediaItem >;
+
+	/**
+	 * The caption.
+	 */
+	caption?: string;
 }
 
 export interface SocialPreviewsBaseProps {