Merge branch 'main' into feedbin-inbox-link

Author: EvanHahn

.env.example

@@ -16,3 +16,9 @@
 #STRIPE_PUBLISHABLE_KEY=
 ## Stripe Account ID: acct_1*******
 #STRIPE_ACCOUNT_ID=
+
+# Mailgun SMTP credentials - used with `yarn dev:mailgun`
+## SMTP username from Mailgun (often starts with `postmaster@`)
+# MAILGUN_SMTP_USER=
+## SMTP password from Mailgun
+# MAILGUN_SMTP_PASS=

apps/admin-x-design-system/src/utils/format-url.ts

@@ -1,4 +1,4 @@
-import isEmail from 'validator/es/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail.js';
 
 export const formatUrl = (value: string, baseUrl?: string, nullable?: boolean) => {
     if (nullable && !value) {

apps/admin-x-framework/src/hooks.ts

@@ -4,4 +4,5 @@ export type {Dirtyable, ErrorMessages, FormHook, OkProps, SaveHandler, SaveState
 export {default as useHandleError} from './hooks/use-handle-error';
 export {usePermission} from './hooks/use-permissions';
 export {useKoenigFileUpload, koenigFileUploadTypes} from './hooks/use-koenig-file-upload';
+export {useKoenigFetchEmbed} from './hooks/use-koenig-fetch-embed';
 export type {KoenigFileUploadType} from './hooks/use-koenig-file-upload';

apps/admin-x-framework/src/hooks/use-koenig-fetch-embed.ts

@@ -0,0 +1,21 @@
+import {useCallback} from 'react';
+import {getGhostPaths} from '../utils/helpers';
+import {useFetchApi} from '../utils/api/fetch-api';
+
+interface KoenigFetchEmbedOptions {
+    type?: string;
+}
+
+export const useKoenigFetchEmbed = () => {
+    const fetchApi = useFetchApi();
+
+    return useCallback(async (url: string, {type}: KoenigFetchEmbedOptions = {}) => {
+        const oembedUrl = new URL(`${getGhostPaths().apiRoot}/oembed/`, window.location.origin);
+        oembedUrl.searchParams.set('url', url);
+        if (type) {
+            oembedUrl.searchParams.set('type', type);
+        }
+
+        return await fetchApi(oembedUrl);
+    }, [fetchApi]);
+};

apps/admin-x-framework/src/index.ts

@@ -17,6 +17,7 @@ export type {UseTinybirdTokenResult} from './hooks/use-tinybird-token';
 export {useTinybirdQuery} from './hooks/use-tinybird-query';
 export type {UseTinybirdQueryOptions} from './hooks/use-tinybird-query';
 export {useKoenigFileUpload, koenigFileUploadTypes} from './hooks/use-koenig-file-upload';
+export {useKoenigFetchEmbed} from './hooks/use-koenig-fetch-embed';
 export type {KoenigFileUploadType} from './hooks/use-koenig-file-upload';
 
 // Currency utilities

apps/admin-x-framework/src/test/render.tsx

@@ -3,6 +3,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {TopLevelFrameworkProps} from '../providers/framework-provider';
 
+const fetchKoenigLexical: DesignSystemAppProps['fetchKoenigLexical'] = async () => {
+    // @ts-expect-error koenig-lexical doesn't currently ship TypeScript declarations.
+    return await import('@tryghost/koenig-lexical');
+};
+
 export default function renderStandaloneApp<Props extends object>(
     App: React.ComponentType<Props & {
         framework: TopLevelFrameworkProps;
@@ -36,7 +41,7 @@ export default function renderStandaloneApp<Props extends object>(
     ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <React.StrictMode>
             <App
-                designSystem={{darkMode: false, fetchKoenigLexical: async () => {}}}
+                designSystem={{darkMode: false, fetchKoenigLexical}}
                 framework={{
                     externalNavigate: (link) => {
                         // Use the expectExternalNavigate helper to test this dummy external linking

apps/admin-x-framework/test/unit/hooks/use-koenig-fetch-embed.test.ts

@@ -0,0 +1,100 @@
+/// <reference types="vitest/globals" />
+import {renderHook} from '@testing-library/react';
+import {type AddressInfo} from 'node:net';
+import http from 'node:http';
+import {promisify} from 'node:util';
+import * as helpers from '../../../src/utils/helpers';
+import {useKoenigFetchEmbed} from '../../../src/hooks/use-koenig-fetch-embed';
+
+interface OEmbedResponse {
+    type: string;
+    html: string;
+}
+
+interface RequestLog {
+    method?: string;
+    url?: string;
+    headers?: http.IncomingHttpHeaders;
+}
+
+describe('useKoenigFetchEmbed', () => {
+    let server: http.Server;
+    let baseUrl: string;
+    let requestLog: RequestLog[];
+    let responseStatus: number;
+    let responseBody: OEmbedResponse | {errors: Array<{message: string}>};
+
+    beforeEach(async () => {
+        requestLog = [];
+        responseStatus = 200;
+        responseBody = {
+            type: 'video',
+            html: '<iframe src="https://example.com/embed"></iframe>'
+        };
+
+        server = http.createServer((req, res) => {
+            requestLog.push({method: req.method, url: req.url, headers: req.headers});
+            res.writeHead(responseStatus, {'Content-Type': 'application/json'});
+            res.end(JSON.stringify(responseBody));
+        });
+
+        await new Promise<void>((resolve) => {
+            server.listen(0, '127.0.0.1', () => {
+                resolve();
+            });
+        });
+
+        const address = server.address() as AddressInfo;
+        baseUrl = `http://127.0.0.1:${address.port}`;
+
+        vi.spyOn(helpers, 'getGhostPaths').mockReturnValue({
+            subdir: '',
+            adminRoot: '/ghost/',
+            assetRoot: '/ghost/assets/',
+            apiRoot: `${baseUrl}/ghost/api/admin`,
+            activityPubRoot: '/.ghost/activitypub'
+        });
+    });
+
+    afterEach(async () => {
+        const close = promisify(server.close.bind(server));
+        await close();
+        vi.restoreAllMocks();
+    });
+
+    it('requests oembed with url parameter', async () => {
+        const {result} = renderHook(() => useKoenigFetchEmbed());
+
+        const embedResult = await result.current('https://ghost.org/');
+        expect(embedResult).toEqual(responseBody);
+
+        const request = requestLog[0];
+        expect(request?.method).toBe('GET');
+        expect(request?.headers?.['app-pragma']).toBe('no-cache');
+
+        const requestUrl = new URL(request?.url || '', baseUrl);
+        expect(requestUrl.pathname).toBe('/ghost/api/admin/oembed/');
+        expect(requestUrl.searchParams.get('url')).toBe('https://ghost.org/');
+        expect(requestUrl.searchParams.get('type')).toBeNull();
+    });
+
+    it('includes type parameter when provided', async () => {
+        const {result} = renderHook(() => useKoenigFetchEmbed());
+
+        await result.current('https://ghost.org/', {type: 'bookmark'});
+
+        const requestUrl = new URL(requestLog[0]?.url || '', baseUrl);
+        expect(requestUrl.searchParams.get('url')).toBe('https://ghost.org/');
+        expect(requestUrl.searchParams.get('type')).toBe('bookmark');
+    });
+
+    it('throws when the oembed request fails', async () => {
+        responseStatus = 500;
+        responseBody = {
+            errors: [{message: 'Server failure'}]
+        };
+
+        const {result} = renderHook(() => useKoenigFetchEmbed());
+        await expect(result.current('https://ghost.org/')).rejects.toThrow(/oembed/i);
+    });
+});

apps/admin-x-settings/package.json

@@ -42,7 +42,7 @@
     "@codemirror/lang-html": "6.4.11",
     "@tryghost/color-utils": "0.2.10",
     "@tryghost/i18n": "0.0.0",
-    "@tryghost/kg-unsplash-selector": "0.3.18",
+    "@tryghost/kg-unsplash-selector": "0.3.19",
     "@tryghost/limit-service": "1.4.1",
     "@tryghost/nql": "0.12.10",
     "@tryghost/timezone-data": "0.4.12",

apps/admin-x-settings/src/components/settings/membership/member-emails/member-email-editor.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useMemo} from 'react';
 import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import {KoenigEditorBase, type KoenigInstance, LoadingIndicator} from '@tryghost/admin-x-design-system';
 import {cn} from '@tryghost/shade';
-import {koenigFileUploadTypes, useKoenigFileUpload} from '@tryghost/admin-x-framework/hooks';
+import {koenigFileUploadTypes, useKoenigFetchEmbed, useKoenigFileUpload} from '@tryghost/admin-x-framework/hooks';
 import {useFramework} from '@tryghost/admin-x-framework';
 
 export interface MemberEmailsEditorProps {
@@ -27,8 +27,12 @@ const MemberEmailsEditor: React.FC<MemberEmailsEditorProps> = ({
 }) => {
     const welcomeEmailEditorEnabled = useFeatureFlag('welcomeEmailEditor');
     const {unsplashConfig} = useFramework();
+    const fetchEmbed = useKoenigFetchEmbed();
 
-    const cardConfig = useMemo(() => ({unsplash: unsplashConfig}), [unsplashConfig]);
+    const cardConfig = useMemo(() => ({
+        unsplash: unsplashConfig,
+        fetchEmbed
+    }), [unsplashConfig, fetchEmbed]);
 
     const baseEditorStyles = cn(
         // Base typography

apps/admin-x-settings/test/acceptance/membership/member-welcome-emails.test.ts

@@ -1,5 +1,6 @@
 import {expect, test} from '@playwright/test';
 import {globalDataRequests, mockApi, responseFixtures} from '@tryghost/admin-x-framework/test/acceptance';
+import type {Page} from '@playwright/test';
 
 const automatedEmailsFixture = {
     automated_emails: [{
@@ -22,6 +23,32 @@ const newslettersRequest = {
     browseNewslettersLimit: {method: 'GET', path: '/newsletters/?filter=status%3Aactive&limit=1', response: responseFixtures.newsletters}
 };
 
+const configWithWelcomeEmailEditorEnabled = {
+    ...responseFixtures.config,
+    config: {
+        ...responseFixtures.config.config,
+        labs: {
+            ...responseFixtures.config.config.labs,
+            welcomeEmailEditor: true
+        }
+    }
+};
+
+const pasteText = async (page: Page, content: string) => {
+    await page.evaluate((text: string) => {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.setData('text/plain', text);
+
+        document.activeElement?.dispatchEvent(new ClipboardEvent('paste', {
+            clipboardData: dataTransfer,
+            bubbles: true,
+            cancelable: true
+        }));
+
+        dataTransfer.clearData();
+    }, content);
+};
+
 test.describe('Member emails settings', async () => {
     test.describe('Welcome email modal', async () => {
         test('Escape key closes test email dropdown without closing modal', async ({page}) => {
@@ -196,6 +223,94 @@ test.describe('Member emails settings', async () => {
             });
         });
 
+        test('welcome email editor pastes URL and fetches embed metadata', async ({page}) => {
+            const {lastApiRequests} = await mockApi({page, requests: {
+                ...globalDataRequests,
+                ...newslettersRequest,
+                browseConfig: {method: 'GET', path: '/config/', response: configWithWelcomeEmailEditorEnabled},
+                browseAutomatedEmails: {method: 'GET', path: '/automated_emails/', response: automatedEmailsFixture},
+                fetchOembed: {
+                    method: 'GET',
+                    path: /^\/oembed\/\?/,
+                    response: {
+                        type: 'video',
+                        html: '<iframe width="200" height="113" src="https://www.youtube.com/embed/8YWl7tDGUPA?feature=oembed" frameborder="0" allowfullscreen></iframe>'
+                    }
+                }
+            }});
+
+            await page.goto('/#/memberemails');
+            await page.waitForLoadState('networkidle');
+
+            const section = page.getByTestId('memberemails');
+            await expect(section).toBeVisible({timeout: 10000});
+            await section.getByTestId('free-welcome-email-preview').click();
+
+            const modal = page.getByTestId('welcome-email-modal');
+            await expect(modal).toBeVisible();
+
+            const editor = modal.locator('[data-kg="editor"] div[contenteditable="true"]').first();
+            await editor.click({timeout: 5000});
+            await page.keyboard.press('ControlOrMeta+a');
+            await page.keyboard.press('Backspace');
+
+            await pasteText(page, 'https://ghost.org/');
+
+            await expect(modal.getByTestId('embed-iframe')).toBeVisible();
+
+            await expect.poll(() => lastApiRequests.fetchOembed?.url || '').toContain('/oembed/?');
+            await expect.poll(() => lastApiRequests.fetchOembed?.url || '').toContain('url=https%3A%2F%2Fghost.org%2F');
+        });
+
+        test('welcome email editor bookmark card fetches bookmark metadata', async ({page}) => {
+            const {lastApiRequests} = await mockApi({page, requests: {
+                ...globalDataRequests,
+                ...newslettersRequest,
+                browseConfig: {method: 'GET', path: '/config/', response: configWithWelcomeEmailEditorEnabled},
+                browseAutomatedEmails: {method: 'GET', path: '/automated_emails/', response: automatedEmailsFixture},
+                fetchOembed: {
+                    method: 'GET',
+                    path: /^\/oembed\/\?/,
+                    response: {
+                        url: 'https://ghost.org/',
+                        metadata: {
+                            icon: 'https://ghost.org/favicon.ico',
+                            title: 'Ghost: The Creator Economy Platform',
+                            description: 'Build independent publishing businesses and memberships.',
+                            publisher: 'Ghost.org',
+                            author: 'Ghost',
+                            thumbnail: 'https://ghost.org/images/meta/ghost.png'
+                        }
+                    }
+                }
+            }});
+
+            await page.goto('/#/memberemails');
+            await page.waitForLoadState('networkidle');
+
+            const section = page.getByTestId('memberemails');
+            await expect(section).toBeVisible({timeout: 10000});
+            await section.getByTestId('free-welcome-email-preview').click();
+
+            const modal = page.getByTestId('welcome-email-modal');
+            await expect(modal).toBeVisible();
+
+            const editor = modal.locator('[data-kg="editor"] div[contenteditable="true"]').first();
+            await editor.click({timeout: 5000});
+            await page.keyboard.press('ControlOrMeta+a');
+            await page.keyboard.press('Backspace');
+            await page.keyboard.type('/bookmark');
+            await page.keyboard.press('Enter');
+
+            const bookmarkUrlInput = modal.getByTestId('bookmark-url');
+            await expect(bookmarkUrlInput).toBeVisible();
+            await bookmarkUrlInput.fill('https://ghost.org/');
+            await bookmarkUrlInput.press('Enter');
+
+            await expect(modal.getByTestId('bookmark-title')).toContainText('Ghost: The Creator Economy Platform');
+            await expect.poll(() => lastApiRequests.fetchOembed?.url || '').toContain('type=bookmark');
+        });
+
         test('uses automated email sender fields when populated, even if newsletter differs', async ({page}) => {
             const populatedAutomatedEmailsFixture = {
                 automated_emails: [{