From d5aee4b0e0d41b5af7983cb4796fb521fbd60d22 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Wed, 9 Oct 2024 22:36:24 -0700
Subject: [PATCH] Social: Added Bluesky to social previews (#39659)

* Update dependencies

* Add Bluesky to social previews

* Add changelogs

* Update social-previews package to fix the Bluesky URL

* Update pnpm-lock.yaml

* Fix dependencies after rebase
---
 pnpm-lock.yaml                                | 18 +++---
 .../changelog/add-bluesky-to-social-previews  |  4 ++
 .../publicize-components/package.json         |  2 +-
 .../social-post-modal/post-preview.tsx        | 24 ++++++++
 .../components/social-previews/bluesky.tsx    | 57 +++++++++++++++++++
 .../components/social-previews/mastodon.js    |  3 -
 .../social-previews/use-available-services.js |  7 +++
 .../src/social-store/index.js                 |  1 +
 .../social-store/selectors/connection-data.js | 13 ++++-
 .../src/social-store/types.ts                 |  1 +
 .../changelog/add-bluesky-to-social-previews  |  4 ++
 projects/plugins/jetpack/package.json         |  2 +-
 .../changelog/add-bluesky-to-social-previews  |  4 ++
 13 files changed, 125 insertions(+), 15 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/add-bluesky-to-social-previews
 create mode 100644 projects/js-packages/publicize-components/src/components/social-previews/bluesky.tsx
 create mode 100644 projects/plugins/jetpack/changelog/add-bluesky-to-social-previews
 create mode 100644 projects/plugins/social/changelog/add-bluesky-to-social-previews

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30e3279b86e04..1d3174aff5090 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -973,8 +973,8 @@ importers:
         specifier: 1.0.2
         version: 1.0.2
       '@automattic/social-previews':
-        specifier: 2.1.0-beta.6
-        version: 2.1.0-beta.6(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 2.1.0-beta.8
+        version: 2.1.0-beta.8(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@wordpress/annotations':
         specifier: 3.9.0
         version: 3.9.0(react@18.3.1)
@@ -3777,8 +3777,8 @@ importers:
         specifier: 1.0.0
         version: 1.0.0
       '@automattic/social-previews':
-        specifier: 2.1.0-beta.6
-        version: 2.1.0-beta.6(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 2.1.0-beta.8
+        version: 2.1.0-beta.8(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@automattic/viewport':
         specifier: 1.0.0
         version: 1.0.0
@@ -5016,12 +5016,12 @@ packages:
   '@automattic/request-external-access@1.0.0':
     resolution: {integrity: sha512-vhN72lwPFzhCVMP1l2ODBqt7fI5jfeJz1JyBnq/AUCg9PpsJfdk4vZxhSOLhSSds8VMkU5WaNnaztkYfkkYOiA==}
 
-  '@automattic/social-previews@2.1.0-beta.6':
-    resolution: {integrity: sha512-QSCzV+qm7v7ZssB8m54EZzvKl8YPFIN2hOxf5r/Jva5m8RN5pg3fIerE3lfTBQJlpChmRlqcxRvQc/1L4tnJrg==}
+  '@automattic/social-previews@2.1.0-beta.8':
+    resolution: {integrity: sha512-DakeRnV8JUhi8eD2Ft3HhrPPSnMgWnQDb0K/fuhrolNNbl/gVNng1gAF8Y8WrpGRVN5h0xdVhuszJeG6r4RotA==}
     peerDependencies:
       '@babel/runtime': ^7.24.5
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: ^18.3.1
+      react-dom: ^18.3.1
     peerDependenciesMeta:
       '@babel/runtime':
         optional: true
@@ -14292,7 +14292,7 @@ snapshots:
     dependencies:
       '@automattic/popup-monitor': 1.0.2
 
-  '@automattic/social-previews@2.1.0-beta.6(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@automattic/social-previews@2.1.0-beta.8(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
       '@wordpress/components': 28.9.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
diff --git a/projects/js-packages/publicize-components/changelog/add-bluesky-to-social-previews b/projects/js-packages/publicize-components/changelog/add-bluesky-to-social-previews
new file mode 100644
index 0000000000000..8ccb859242038
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/add-bluesky-to-social-previews
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Social: Added Bluesky to social previews
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index 46a01b90019c9..cb71c7059c602 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -24,7 +24,7 @@
 		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
-		"@automattic/social-previews": "2.1.0-beta.6",
+		"@automattic/social-previews": "2.1.0-beta.8",
 		"@wordpress/annotations": "3.9.0",
 		"@wordpress/api-fetch": "7.9.0",
 		"@wordpress/block-editor": "14.4.0",
diff --git a/projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx b/projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx
index 66c90805181c6..c651e51b42d92 100644
--- a/projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx
+++ b/projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx
@@ -1,4 +1,5 @@
 import {
+	BlueskyPostPreview,
 	FacebookLinkPreview,
 	FacebookPostPreview,
 	InstagramPostPreview,
@@ -34,6 +35,7 @@ export function PostPreview( { connection }: PostPreviewProps ) {
 		() => ( {
 			displayName: connection.display_name || connection.external_display,
 			profileImage: connection.profile_picture,
+			externalName: connection.external_name,
 		} ),
 		[ connection ]
 	);
@@ -64,6 +66,28 @@ export function PostPreview( { connection }: PostPreviewProps ) {
 	);
 
 	switch ( connection.service_name ) {
+		case 'bluesky': {
+			const firstMediaItem = media?.[ 0 ];
+
+			const customImage = firstMediaItem?.type.startsWith( 'image/' ) ? firstMediaItem.url : null;
+
+			return (
+				<BlueskyPostPreview
+					{ ...commonProps }
+					description={ decodeEntities( excerpt ) }
+					user={ {
+						avatarUrl: user.profileImage,
+						address: user.externalName,
+						displayName: user.displayName,
+					} }
+					customText={ decodeEntities(
+						message || `${ title }\n\n${ excerpt.replaceAll( /[\s\n]/g, ' ' ) }`
+					) }
+					customImage={ customImage }
+				/>
+			);
+		}
+
 		case 'facebook':
 			return hasMedia ? (
 				<FacebookPostPreview
diff --git a/projects/js-packages/publicize-components/src/components/social-previews/bluesky.tsx b/projects/js-packages/publicize-components/src/components/social-previews/bluesky.tsx
new file mode 100644
index 0000000000000..4eba0183c4641
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/components/social-previews/bluesky.tsx
@@ -0,0 +1,57 @@
+import { BlueskyPreviews } from '@automattic/social-previews';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
+import useSocialMediaMessage from '../../hooks/use-social-media-message';
+import { store, CONNECTION_SERVICE_BLUESKY } from '../../social-store';
+
+const BlueskyPreview = props => {
+	const { message } = useSocialMediaMessage();
+	const { content, siteName } = useSelect( select => {
+		// @ts-expect-error -- `@wordpress/editor` is a nightmare to work with TypeScript
+		const { getEditedPostAttribute } = select( editorStore );
+		// @ts-expect-error -- It says, "Property 'getUnstableBase' does not exist..." but it does
+		const { getUnstableBase } = select( coreStore );
+
+		return {
+			content: getEditedPostAttribute( 'content' ).split( '<!--more' )[ 0 ],
+			siteName: decodeEntities( getUnstableBase().name ),
+		};
+	}, [] );
+
+	const user = useSelect( select => {
+		const {
+			displayName,
+			profileImage: avatarUrl,
+			username: address,
+		} = select( store ).getConnectionProfileDetails( CONNECTION_SERVICE_BLUESKY );
+
+		return { displayName, avatarUrl, address };
+	}, [] );
+
+	const firstMediaItem = props.media?.[ 0 ];
+
+	const customImage = firstMediaItem?.type.startsWith( 'image/' ) ? firstMediaItem.url : null;
+
+	const blueskyConnections = useSelect(
+		select => select( store ).getConnectionsByService( CONNECTION_SERVICE_BLUESKY ),
+		[]
+	);
+
+	return (
+		<BlueskyPreviews
+			{ ...props }
+			siteName={ siteName }
+			user={ user }
+			description={ decodeEntities( content ) }
+			customText={ decodeEntities(
+				message || `${ props.title }\n\n${ content.replaceAll( /[\s\n]/g, ' ' ) }`
+			) }
+			customImage={ customImage }
+			hidePostPreview={ ! blueskyConnections.length }
+		/>
+	);
+};
+
+export default BlueskyPreview;
diff --git a/projects/js-packages/publicize-components/src/components/social-previews/mastodon.js b/projects/js-packages/publicize-components/src/components/social-previews/mastodon.js
index d7d7590e13331..2c3e451dfdd68 100644
--- a/projects/js-packages/publicize-components/src/components/social-previews/mastodon.js
+++ b/projects/js-packages/publicize-components/src/components/social-previews/mastodon.js
@@ -1,7 +1,6 @@
 import { MastodonPreviews } from '@automattic/social-previews';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { usePostMeta } from '../../hooks/use-post-meta';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import { SOCIAL_STORE_ID, CONNECTION_SERVICE_MASTODON } from '../../social-store';
 
@@ -16,7 +15,6 @@ const MastodonPreview = props => {
 			siteName: decodeEntities( getUnstableBase().name ),
 		};
 	} );
-	const { attachedMedia } = usePostMeta();
 
 	const user = useSelect( select => {
 		const {
@@ -40,7 +38,6 @@ const MastodonPreview = props => {
 			description={ content }
 			customText={ message }
 			customImage={ customImage }
-			isSocialPost={ attachedMedia.length > 0 }
 		/>
 	);
 };
diff --git a/projects/js-packages/publicize-components/src/components/social-previews/use-available-services.js b/projects/js-packages/publicize-components/src/components/social-previews/use-available-services.js
index a3f575f8c884a..497f5f203b606 100644
--- a/projects/js-packages/publicize-components/src/components/social-previews/use-available-services.js
+++ b/projects/js-packages/publicize-components/src/components/social-previews/use-available-services.js
@@ -3,6 +3,7 @@ import { __, _x } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
 import { CONNECTION_SERVICE_THREADS } from '../../social-store';
 import { getSupportedAdditionalConnections } from '../../utils';
+import BlueskyPreview from './bluesky';
 import FacebookPreview from './facebook';
 import GoogleSearch from './google-search';
 import { Instagram } from './instagram';
@@ -85,6 +86,12 @@ export function useAvailableSerivces() {
 					name: 'mastodon',
 					preview: MastodonPreview,
 				},
+				{
+					title: __( 'Bluesky', 'jetpack' ),
+					icon: props => <SocialServiceIcon serviceName="bluesky" { ...props } />,
+					name: 'bluesky',
+					preview: BlueskyPreview,
+				},
 			].filter( Boolean ),
 		[ isThreadsSupported ]
 	);
diff --git a/projects/js-packages/publicize-components/src/social-store/index.js b/projects/js-packages/publicize-components/src/social-store/index.js
index a909bdd32dbaf..2b68dafa610f0 100644
--- a/projects/js-packages/publicize-components/src/social-store/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/index.js
@@ -23,6 +23,7 @@ export const CONNECTION_SERVICE_FACEBOOK = 'facebook';
 export const CONNECTION_SERVICE_INSTAGRAM_BUSINESS = 'instagram-business';
 export const CONNECTION_SERVICE_LINKEDIN = 'linkedin';
 export const CONNECTION_SERVICE_MASTODON = 'mastodon';
+export const CONNECTION_SERVICE_BLUESKY = 'bluesky';
 export const CONNECTION_SERVICE_NEXTDOOR = 'nextdoor';
 export const CONNECTION_SERVICE_TUMBLR = 'tumblr';
 export const CONNECTION_SERVICE_TWITTER = 'twitter';
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
index 9e38913cfffbd..7cf7db17aba76 100644
--- a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
+++ b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
@@ -141,11 +141,22 @@ export function getConnectionProfileDetails( state, service, { forceDefaults = f
 		);
 
 		if ( connection ) {
-			const { display_name, profile_display_name, profile_picture, external_display } = connection;
+			const {
+				display_name,
+				profile_display_name,
+				profile_picture,
+				external_display,
+				external_name,
+			} = connection;
 
 			displayName = 'twitter' === service ? profile_display_name : display_name || external_display;
 			username = 'twitter' === service ? display_name : connection.username;
 			profileImage = profile_picture;
+
+			// Connections schema is a mess
+			if ( 'bluesky' === service ) {
+				username = external_name;
+			}
 		}
 	}
 
diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts
index 602d61484845e..a391f53024082 100644
--- a/projects/js-packages/publicize-components/src/social-store/types.ts
+++ b/projects/js-packages/publicize-components/src/social-store/types.ts
@@ -6,6 +6,7 @@ export type Connection = {
 	display_name: string;
 	external_display?: string;
 	external_id: string;
+	external_name?: string;
 	username: string;
 	enabled: boolean;
 	done: boolean;
diff --git a/projects/plugins/jetpack/changelog/add-bluesky-to-social-previews b/projects/plugins/jetpack/changelog/add-bluesky-to-social-previews
new file mode 100644
index 0000000000000..d11b991e75edd
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-bluesky-to-social-previews
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Social: Added Bluesky to social previews
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index 366d0268913b7..894c231112315 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -60,7 +60,7 @@
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/request-external-access": "1.0.0",
-		"@automattic/social-previews": "2.1.0-beta.6",
+		"@automattic/social-previews": "2.1.0-beta.8",
 		"@automattic/viewport": "1.0.0",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@wordpress/base-styles": "5.9.0",
diff --git a/projects/plugins/social/changelog/add-bluesky-to-social-previews b/projects/plugins/social/changelog/add-bluesky-to-social-previews
new file mode 100644
index 0000000000000..73211c933517d
--- /dev/null
+++ b/projects/plugins/social/changelog/add-bluesky-to-social-previews
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added Bluesky to social previews