[pull] main from TryGhost:main

apps/admin-x-framework/src/test/responses/settings.json

@@ -48,6 +48,34 @@
             "key": "twitter",
             "value": "@ghost"
         },
+        {
+            "key": "threads",
+            "value": null
+        },
+        {
+            "key": "bluesky",
+            "value": null
+        },
+        {
+            "key": "mastodon",
+            "value": null
+        },
+        {
+            "key": "tiktok",
+            "value": null
+        },
+        {
+            "key": "youtube",
+            "value": null
+        },
+        {
+            "key": "instagram",
+            "value": null
+        },
+        {
+            "key": "linkedin",
+            "value": null
+        },
         {
             "key": "navigation",
             "value": "[{\"label\":\"Home\",\"url\":\"/\"},{\"label\":\"About\",\"url\":\"/about/\"}]"
@@ -342,4 +370,4 @@
             "group": "site,theme,private,members,portal,newsletter,email,labs,slack,unsplash,views,firstpromoter,editor,comments,analytics,announcement,pintura"
         }
     }
-}
+}

apps/admin-x-settings/src/components/settings/general/general-settings.tsx

@@ -15,7 +15,7 @@ export const searchKeywords = {
     publicationLanguage: ['general', 'publication language', 'locale'],
     users: ['general', 'users and permissions', 'roles', 'staff', 'invite people', 'contributors', 'editors', 'authors', 'administrators'],
     metadata: ['general', 'metadata', 'title', 'description', 'search', 'engine', 'google', 'meta data', 'twitter card', 'structured data', 'rich cards', 'x card', 'social', 'facebook card'],
-    socialAccounts: ['general', 'social accounts', 'facebook', 'twitter', 'structured data', 'rich cards'],
+    socialAccounts: ['general', 'social accounts', 'facebook', 'twitter', 'threads', 'bluesky', 'mastodon', 'tiktok', 'youtube', 'instagram', 'linkedin', 'structured data', 'rich cards'],
     analytics: ['membership', 'analytics', 'tracking', 'privacy', 'membership']
 };
 

apps/admin-x-settings/src/components/settings/general/social-accounts.tsx

@@ -1,9 +1,25 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import useSettingGroup from '../../../hooks/use-setting-group';
+import {SOCIAL_PLATFORM_CONFIGS, SOCIAL_PLATFORM_KEYS, getSocialValidationError, normalizeSocialInput} from '../../../utils/social-urls';
 import {SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
-import {facebookHandleToUrl, facebookUrlToHandle, twitterHandleToUrl, twitterUrlToHandle, validateFacebookUrl, validateTwitterUrl} from '../../../utils/social-urls';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import type {Setting} from '@tryghost/admin-x-framework/api/settings';
+import type {SocialPlatformKey} from '../../../utils/social-urls';
+
+const LEGACY_PLATFORM_KEYS: SocialPlatformKey[] = ['facebook', 'twitter'];
+const NEW_PLATFORM_KEYS: SocialPlatformKey[] = SOCIAL_PLATFORM_KEYS.filter(
+    key => !LEGACY_PLATFORM_KEYS.includes(key)
+);
+
+const getSocialUrls = (localSettings: Setting[] | null) => {
+    const socialHandles = getSettingValues<string | null>(localSettings, [...SOCIAL_PLATFORM_KEYS]);
+
+    return Object.fromEntries(SOCIAL_PLATFORM_CONFIGS.map((config, index) => {
+        const value = socialHandles[index];
+        return [config.key, config.toDisplayValue(value)];
+    })) as Record<SocialPlatformKey, string>;
+};
 
 const SocialAccounts: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const {
@@ -16,85 +32,52 @@ const SocialAccounts: React.FC<{ keywords: string[] }> = ({keywords}) => {
         handleEditingChange
     } = useSettingGroup();
 
-    const [errors, setErrors] = useState<{
-        facebook?: string;
-        twitter?: string;
-    }>({});
+    const [errors, setErrors] = useState<Partial<Record<SocialPlatformKey, string>>>({});
+    const [urls, setUrls] = useState<Record<SocialPlatformKey, string>>(() => getSocialUrls(localSettings));
 
-    const [facebookHandle, twitterHandle] = getSettingValues<string | null>(localSettings, ['facebook', 'twitter']);
+    const handles = getSettingValues<string | null>(localSettings, [...SOCIAL_PLATFORM_KEYS]);
+    const backendSupportsNewPlatforms = NEW_PLATFORM_KEYS.some(key => localSettings?.some(s => s.key === key));
 
-    const [facebookUrl, setFacebookUrl] = useState(facebookHandle ? facebookHandleToUrl(facebookHandle) : '');
-    const [twitterUrl, setTwitterUrl] = useState(twitterHandle ? twitterHandleToUrl(twitterHandle) : '');
+    const visiblePlatforms = useMemo(() => {
+        return backendSupportsNewPlatforms
+            ? SOCIAL_PLATFORM_CONFIGS
+            : SOCIAL_PLATFORM_CONFIGS.filter(config => LEGACY_PLATFORM_KEYS.includes(config.key));
+    }, [backendSupportsNewPlatforms]);
 
-    // Update local state when settings change (e.g., after cancel)
+    // Depend on stored values, not the localSettings reference (which churns on every updateSetting).
     useEffect(() => {
-        setFacebookUrl(facebookHandle ? facebookHandleToUrl(facebookHandle) : '');
-        setTwitterUrl(twitterHandle ? twitterHandleToUrl(twitterHandle) : '');
-    }, [facebookHandle, twitterHandle]);
+        setUrls(getSocialUrls(localSettings));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handles.map(value => value ?? '').join('|')]);
 
-    const handleFacebookChange = (value: string) => {
-        setFacebookUrl(value);
-        try {
-            const newUrl = validateFacebookUrl(value);
-            updateSetting('facebook', facebookUrlToHandle(newUrl));
-            if (!isEditing) {
-                handleEditingChange(true);
-            }
-            if (errors.facebook) {
-                setErrors({...errors, facebook: ''});
-            }
-        } catch (err) {
-            if (err instanceof Error) {
-                setErrors({...errors, facebook: err.message});
-            }
-            updateSetting('facebook', null);
-        }
-    };
+    const handleSocialChange = (key: SocialPlatformKey, value: string) => {
+        setUrls(current => ({...current, [key]: value}));
 
-    const handleTwitterChange = (value: string) => {
-        setTwitterUrl(value);
         try {
-            const newUrl = validateTwitterUrl(value);
-            updateSetting('twitter', twitterUrlToHandle(newUrl));
+            const {storedValue} = normalizeSocialInput(key, value);
+            updateSetting(key, storedValue);
+
             if (!isEditing) {
                 handleEditingChange(true);
             }
-            if (errors.twitter) {
-                setErrors({...errors, twitter: ''});
-            }
-        } catch (err) {
-            if (err instanceof Error) {
-                setErrors({...errors, twitter: err.message});
+
+            if (errors[key]) {
+                setErrors(current => ({...current, [key]: ''}));
             }
-            updateSetting('twitter', null);
+        } catch {
+            setErrors(current => ({...current, [key]: getSocialValidationError(key, value)}));
+            updateSetting(key, null);
         }
     };
 
     const handleSaveClick = () => {
-        const formErrors: {
-            facebook?: string;
-            twitter?: string;
-        } = {};
-
-        if (facebookUrl) {
-            try {
-                validateFacebookUrl(facebookUrl);
-            } catch (e) {
-                if (e instanceof Error) {
-                    formErrors.facebook = e.message;
-                }
+        const formErrors = visiblePlatforms.reduce<Partial<Record<SocialPlatformKey, string>>>((current, config) => {
+            const error = getSocialValidationError(config.key, urls[config.key]);
+            if (error) {
+                current[config.key] = error;
             }
-        }
-
-        if (twitterUrl) {
-            try {
-                validateTwitterUrl(twitterUrl);
-            } catch (e) {
-                if (e instanceof Error) {
-                    formErrors.twitter = e.message;
-                }
-            }
-        }
+            return current;
+        }, {});
 
         setErrors(formErrors);
 
@@ -118,22 +101,18 @@ const SocialAccounts: React.FC<{ keywords: string[] }> = ({keywords}) => {
             onSave={handleSaveClick}
         >
             <SettingGroupContent>
-                <TextField
-                    error={!!errors.facebook}
-                    hint={errors.facebook}
-                    placeholder="https://www.facebook.com/ghost"
-                    title={`URL of your publication's Facebook Page`}
-                    value={facebookUrl}
-                    onChange={e => handleFacebookChange(e.target.value)}
-                />
-                <TextField
-                    error={!!errors.twitter}
-                    hint={errors.twitter}
-                    placeholder="https://x.com/ghost"
-                    title="URL of your X profile"
-                    value={twitterUrl}
-                    onChange={e => handleTwitterChange(e.target.value)}
-                />
+                {visiblePlatforms.map(config => (
+                    <TextField
+                        key={config.key}
+                        data-testid={config.testId}
+                        error={!!errors[config.key]}
+                        hint={errors[config.key]}
+                        placeholder={config.placeholder}
+                        title={config.publicationTitle}
+                        value={urls[config.key]}
+                        onChange={event => handleSocialChange(config.key, event.target.value)}
+                    />
+                ))}
             </SettingGroupContent>
         </TopLevelGroup>
     );

apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx

@@ -12,10 +12,10 @@ import {ConfirmationModal, Heading, Icon, ImageUpload, LimitModal, Menu, type Me
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
+import {SOCIAL_PLATFORM_CONFIGS, getSocialValidationError} from '../../../utils/social-urls/index';
 import {type User, canAccessSettings, hasAdminAccess, isAdminUser, isAuthorOrContributor, isEditorUser, isOwnerUser, useDeleteUser, useEditUser, useGetUserBySlug, useMakeOwner} from '@tryghost/admin-x-framework/api/users';
 import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
 import {useGlobalData} from '../../providers/global-data-provider';
-import {validateBlueskyUrl, validateFacebookUrl, validateInstagramUrl, validateLinkedInUrl, validateMastodonUrl, validateThreadsUrl, validateTikTokUrl, validateTwitterUrl, validateYouTubeUrl} from '../../../utils/social-urls/index';
 
 const validators: Record<string, (u: Partial<User>) => string> = {
     name: ({name}) => {
@@ -52,105 +52,10 @@ const validators: Record<string, (u: Partial<User>) => string> = {
         const valid = !website || (validator.isURL(website) && website.length <= 2000);
         return valid ? '' : 'Enter a valid URL';
     },
-    facebook: ({facebook}) => {
-        try {
-            validateFacebookUrl(facebook || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    twitter: ({twitter}) => {
-        try {
-            validateTwitterUrl(twitter || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    threads: ({threads}) => {
-        try {
-            validateThreadsUrl(threads || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    bluesky: ({bluesky}) => {
-        try {
-            validateBlueskyUrl(bluesky || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    linkedin: ({linkedin}) => {
-        try {
-            validateLinkedInUrl(linkedin || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    instagram: ({instagram}) => {
-        try {
-            validateInstagramUrl(instagram || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    youtube: ({youtube}) => {
-        try {
-            validateYouTubeUrl(youtube || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    tiktok: ({tiktok}) => {
-        try {
-            validateTikTokUrl(tiktok || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    },
-    mastodon: ({mastodon}) => {
-        try {
-            validateMastodonUrl(mastodon || '');
-            return '';
-        } catch (e) {
-            if (e instanceof Error) {
-                return e.message;
-            }
-            return '';
-        }
-    }
+    ...Object.fromEntries(SOCIAL_PLATFORM_CONFIGS.map(config => [
+        config.key,
+        (values: Partial<User>) => getSocialValidationError(config.key, values[config.key] as string | null | undefined)
+    ]))
 };
 
 export interface UserDetailProps {