diff --git a/packages/plugin-seo/src/fields/MetaDescription.tsx b/packages/plugin-seo/src/fields/MetaDescription.tsx index cdaef08ae..49284ea1d 100644 --- a/packages/plugin-seo/src/fields/MetaDescription.tsx +++ b/packages/plugin-seo/src/fields/MetaDescription.tsx @@ -5,10 +5,10 @@ import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui' import { FieldLabel, TextareaInput, - useAllFormFields, useDocumentInfo, useField, useFieldProps, + useForm, useLocale, useTranslation, } from '@payloadcms/ui' @@ -35,7 +35,7 @@ export const MetaDescription: React.FC = (props) => { const { t } = useTranslation() const locale = useLocale() - const [fields] = useAllFormFields() + const { getData } = useForm() const docInfo = useDocumentInfo() const field: FieldType = useField({ @@ -50,7 +50,7 @@ export const MetaDescription: React.FC = (props) => { const genDescriptionResponse = await fetch('/api/plugin-seo/generate-description', { body: JSON.stringify({ ...docInfo, - doc: { ...fields }, + doc: { ...getData() }, locale: typeof locale === 'object' ? locale?.code : locale, } satisfies Parameters[0]), credentials: 'include', @@ -63,7 +63,7 @@ export const MetaDescription: React.FC = (props) => { const { result: generatedDescription } = await genDescriptionResponse.json() setValue(generatedDescription || '') - }, [fields, setValue, hasGenerateDescriptionFn, locale, docInfo]) + }, [hasGenerateDescriptionFn, docInfo, getData, locale, setValue]) return (
= (props) => { const { t } = useTranslation() const locale = useLocale() - const [fields] = useAllFormFields() + const { getData } = useForm() const docInfo = useDocumentInfo() const { errorMessage, setValue, showError, value } = field @@ -43,7 +43,7 @@ export const MetaImage: React.FC = (props) => { const genImageResponse = await fetch('/api/plugin-seo/generate-image', { body: JSON.stringify({ ...docInfo, - doc: { ...fields }, + doc: { ...getData() }, locale: typeof locale === 'object' ? locale?.code : locale, } satisfies Parameters[0]), credentials: 'include', @@ -56,7 +56,7 @@ export const MetaImage: React.FC = (props) => { const { result: generatedImage } = await genImageResponse.json() setValue(generatedImage || '') - }, [fields, setValue, hasGenerateImageFn, locale, docInfo]) + }, [hasGenerateImageFn, docInfo, getData, locale, setValue]) const hasImage = Boolean(value) diff --git a/packages/plugin-seo/src/fields/MetaTitle.tsx b/packages/plugin-seo/src/fields/MetaTitle.tsx index df3d85c2c..486927d1b 100644 --- a/packages/plugin-seo/src/fields/MetaTitle.tsx +++ b/packages/plugin-seo/src/fields/MetaTitle.tsx @@ -5,10 +5,10 @@ import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui' import { FieldLabel, TextInput, - useAllFormFields, useDocumentInfo, useField, useFieldProps, + useForm, useLocale, useTranslation, } from '@payloadcms/ui' @@ -39,7 +39,7 @@ export const MetaTitle: React.FC = (props) => { } as Options) const locale = useLocale() - const [fields] = useAllFormFields() + const { getData } = useForm() const docInfo = useDocumentInfo() const { errorMessage, setValue, showError, value } = field @@ -50,7 +50,7 @@ export const MetaTitle: React.FC = (props) => { const genTitleResponse = await fetch('/api/plugin-seo/generate-title', { body: JSON.stringify({ ...docInfo, - doc: { ...fields }, + doc: { ...getData() }, locale: typeof locale === 'object' ? locale?.code : locale, } satisfies Parameters[0]), credentials: 'include', @@ -63,7 +63,7 @@ export const MetaTitle: React.FC = (props) => { const { result: generatedTitle } = await genTitleResponse.json() setValue(generatedTitle || '') - }, [fields, setValue, hasGenerateTitleFn, locale, docInfo]) + }, [hasGenerateTitleFn, docInfo, getData, locale, setValue]) return (
( +export type GenerateTitle = ( args: DocumentInfoContext & { doc: T; locale?: string }, ) => Promise | string -export type GenerateDescription = ( +export type GenerateDescription = ( args: DocumentInfoContext & { doc: T locale?: string }, ) => Promise | string -export type GenerateImage = ( +export type GenerateImage = ( args: DocumentInfoContext & { doc: T; locale?: string }, ) => Promise | string -export type GenerateURL = ( +export type GenerateURL = ( args: DocumentInfoContext & { doc: T; locale?: string }, ) => Promise | string diff --git a/packages/plugin-seo/src/ui/Preview.tsx b/packages/plugin-seo/src/ui/Preview.tsx index 6fdc700cc..c8e7352c7 100644 --- a/packages/plugin-seo/src/ui/Preview.tsx +++ b/packages/plugin-seo/src/ui/Preview.tsx @@ -2,7 +2,13 @@ import type { FormField, UIField } from 'payload' -import { useAllFormFields, useDocumentInfo, useLocale, useTranslation } from '@payloadcms/ui' +import { + useAllFormFields, + useDocumentInfo, + useForm, + useLocale, + useTranslation, +} from '@payloadcms/ui' import React, { useEffect, useState } from 'react' import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js' @@ -17,6 +23,7 @@ export const Preview: React.FC = ({ hasGenerateURLFn }) => { const locale = useLocale() const [fields] = useAllFormFields() + const { getData } = useForm() const docInfo = useDocumentInfo() const { @@ -31,7 +38,7 @@ export const Preview: React.FC = ({ hasGenerateURLFn }) => { const genURLResponse = await fetch('/api/plugin-seo/generate-url', { body: JSON.stringify({ ...docInfo, - doc: { ...fields }, + doc: { ...getData() }, locale: typeof locale === 'object' ? locale?.code : locale, } satisfies Parameters[0]), credentials: 'include', @@ -49,7 +56,7 @@ export const Preview: React.FC = ({ hasGenerateURLFn }) => { if (hasGenerateURLFn && !href) { void getHref() } - }, [fields, href, locale, docInfo, hasGenerateURLFn]) + }, [fields, href, locale, docInfo, hasGenerateURLFn, getData]) return (
diff --git a/test/plugin-seo/config.ts b/test/plugin-seo/config.ts index d4d6b16d8..3dd619f72 100644 --- a/test/plugin-seo/config.ts +++ b/test/plugin-seo/config.ts @@ -2,6 +2,9 @@ import { fileURLToPath } from 'node:url' import path from 'path' const filename = fileURLToPath(import.meta.url) const dirname = path.dirname(filename) +import type { GenerateDescription, GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types' +import type { Page } from 'plugin-seo/payload-types.js' + import { seoPlugin } from '@payloadcms/plugin-seo' import { en } from '@payloadcms/translations/languages/en' import { es } from '@payloadcms/translations/languages/es' @@ -13,6 +16,18 @@ import { Pages } from './collections/Pages.js' import { Users } from './collections/Users.js' import { seed } from './seed/index.js' +const generateTitle: GenerateTitle = ({ doc }) => { + return `Website.com — ${doc?.title}` +} + +const generateDescription: GenerateDescription = ({ doc }) => { + return doc?.excerpt || 'generated description' +} + +const generateURL: GenerateURL = ({ doc, locale }) => { + return `https://yoursite.com/${locale ? locale + '/' : ''}${doc?.slug || ''}` +} + export default buildConfigWithDefaults({ collections: [Users, Pages, Media], i18n: { @@ -59,10 +74,9 @@ export default buildConfigWithDefaults({ label: 'og:title', }, ], - generateDescription: ({ doc }: any) => doc?.excerpt?.value || 'generated description', - generateTitle: (data: any) => `Website.com — ${data?.doc?.title?.value}`, - generateURL: ({ doc, locale }: any) => - `https://yoursite.com/${locale ? locale + '/' : ''}${doc?.slug?.value || ''}`, + generateDescription, + generateTitle, + generateURL, tabbedUI: true, uploadsCollection: 'media', }), diff --git a/test/plugin-seo/payload-types.ts b/test/plugin-seo/payload-types.ts index eeafaf489..6bdb006e7 100644 --- a/test/plugin-seo/payload-types.ts +++ b/test/plugin-seo/payload-types.ts @@ -46,9 +46,11 @@ export interface Page { title: string; excerpt?: string | null; slug: string; - meta?: { - title?: string | null; + meta: { + title: string; description?: string | null; + image?: string | Media | null; + ogTitle?: string | null; }; updatedAt: string; createdAt: string;