@payloadcms/plugin-seo 3.0.0-canary.96477cf → 3.0.0-canary.98e0119

package/dist/fields/MetaDescription/MetaDescriptionComponent.js

@@ -1,22 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldLabel, TextareaInput, useConfig, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { FieldLabel, TextareaInput, useConfig, useDocumentInfo, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import React, { useCallback } from 'react';
 import { defaults } from '../../defaults.js';
 import { LengthIndicator } from '../../ui/LengthIndicator.js';
-const { maxLength, minLength } = defaults.description;
+const { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description;
 export const MetaDescriptionComponent = (props)=>{
-    const { field: { admin: { components: { Label } }, label, required }, hasGenerateDescriptionFn, labelProps } = props;
-    const { path: pathFromContext } = useFieldProps();
+    const { field: { label, localized, maxLength: maxLengthFromProps, minLength: minLengthFromProps, required }, hasGenerateDescriptionFn, path } = props;
     const { config: { routes: { api }, serverURL } } = useConfig();
     const { t } = useTranslation();
     const locale = useLocale();
     const { getData } = useForm();
     const docInfo = useDocumentInfo();
-    const field = useField({
-        path: pathFromContext
+    const maxLength = maxLengthFromProps || maxLengthDefault;
+    const minLength = minLengthFromProps || minLengthDefault;
+    const { customComponents: { AfterInput, BeforeInput, Label }, errorMessage, setValue, showError, value } = useField({
+        path
     });
-    const { errorMessage, setValue, showError, value } = field;
     const regenerateDescription = useCallback(async ()=>{
         if (!hasGenerateDescriptionFn) {
             return;
@@ -32,7 +33,7 @@ export const MetaDescriptionComponent = (props)=>{
                 hasPublishPermission: docInfo.hasPublishPermission,
                 hasSavePermission: docInfo.hasSavePermission,
                 initialData: docInfo.initialData,
-                initialState: docInfo.initialState,
+                initialState: reduceToSerializableFields(docInfo.initialState),
                 locale: typeof locale === 'object' ? locale?.code : locale,
                 title: docInfo.title
             }),
@@ -75,12 +76,11 @@ export const MetaDescriptionComponent = (props)=>{
                     /*#__PURE__*/ _jsxs("div", {
                         className: "plugin-seo__field",
                         children: [
-                            /*#__PURE__*/ _jsx(FieldLabel, {
-                                field: null,
-                                Label: Label,
+                            Label ?? /*#__PURE__*/ _jsx(FieldLabel, {
                                 label: label,
-                                required: required,
-                                ...labelProps || {}
+                                localized: localized,
+                                path: path,
+                                required: required
                             }),
                             hasGenerateDescriptionFn && /*#__PURE__*/ _jsxs(React.Fragment, {
                                 children: [
@@ -130,13 +130,11 @@ export const MetaDescriptionComponent = (props)=>{
                     position: 'relative'
                 },
                 children: /*#__PURE__*/ _jsx(TextareaInput, {
-                    Error: {
-                        type: 'client',
-                        Component: null,
-                        RenderedComponent: errorMessage
-                    },
+                    AfterInput: AfterInput,
+                    BeforeInput: BeforeInput,
+                    Error: errorMessage,
                     onChange: setValue,
-                    path: pathFromContext,
+                    path: path,
                     required: required,
                     showError: showError,
                     style: {

package/dist/fields/MetaDescription/MetaDescriptionComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextareaInput,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useFieldProps,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateDescription } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\n\nconst { maxLength, minLength } = defaults.description\n\ntype MetaDescriptionProps = {\n  readonly hasGenerateDescriptionFn: boolean\n} & TextareaFieldClientProps\n\nexport const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {\n  const {\n    field: {\n      admin: {\n        components: { Label },\n      },\n      label,\n      required,\n    },\n    hasGenerateDescriptionFn,\n    labelProps,\n  } = props\n  const { path: pathFromContext } = useFieldProps()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const field: FieldType<string> = useField({\n    path: pathFromContext,\n  } as Options)\n\n  const { errorMessage, setValue, showError, value } = field\n\n  const regenerateDescription = useCallback(async () => {\n    if (!hasGenerateDescriptionFn) {\n      return\n    }\n\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-description`\n\n    const genDescriptionResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: docInfo.initialState,\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title: docInfo.title,\n      } satisfies Omit<\n        Parameters<GenerateDescription>[0],\n        'collectionConfig' | 'globalConfig' | 'req'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedDescription } = await genDescriptionResponse.json()\n\n    setValue(generatedDescription || '')\n  }, [\n    hasGenerateDescriptionFn,\n    serverURL,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    docInfo.title,\n    getData,\n    locale,\n    setValue,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          <FieldLabel\n            field={null}\n            Label={Label}\n            label={label}\n            required={required}\n            {...(labelProps || {})}\n          />\n          {hasGenerateDescriptionFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                onClick={() => {\n                  void regenerateDescription()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: '#9A9A9A',\n          }}\n        >\n          {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextareaInput\n          Error={{\n            type: 'client',\n            Component: null,\n            RenderedComponent: errorMessage,\n          }}\n          onChange={setValue}\n          path={pathFromContext}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useConfig","useDocumentInfo","useField","useFieldProps","useForm","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","description","MetaDescriptionComponent","props","field","admin","components","Label","label","required","hasGenerateDescriptionFn","labelProps","path","pathFromContext","config","routes","api","serverURL","t","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateDescription","endpoint","genDescriptionResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","Component","RenderedComponent","onChange","alignItems","display","width","text"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextareaInput,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateDescription } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description\n\ntype MetaDescriptionProps = {\n  readonly hasGenerateDescriptionFn: boolean\n} & TextareaFieldClientProps\n\nexport const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {\n  const {\n    field: {\n      label,\n      localized,\n      maxLength: maxLengthFromProps,\n      minLength: minLengthFromProps,\n      required,\n    },\n    hasGenerateDescriptionFn,\n    path,\n  } = props\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const maxLength = maxLengthFromProps || maxLengthDefault\n  const minLength = minLengthFromProps || minLengthDefault\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Label },\n    errorMessage,\n    setValue,\n    showError,\n    value,\n  }: FieldType<string> = useField({\n    path,\n  } as Options)\n\n  const regenerateDescription = useCallback(async () => {\n    if (!hasGenerateDescriptionFn) {\n      return\n    }\n\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-description`\n\n    const genDescriptionResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState),\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title: docInfo.title,\n      } satisfies Omit<\n        Parameters<GenerateDescription>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedDescription } = await genDescriptionResponse.json()\n\n    setValue(generatedDescription || '')\n  }, [\n    hasGenerateDescriptionFn,\n    serverURL,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    docInfo.title,\n    getData,\n    locale,\n    setValue,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          {Label ?? (\n            <FieldLabel label={label} localized={localized} path={path} required={required} />\n          )}\n          {hasGenerateDescriptionFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                onClick={() => {\n                  void regenerateDescription()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: '#9A9A9A',\n          }}\n        >\n          {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextareaInput\n          AfterInput={AfterInput}\n          BeforeInput={BeforeInput}\n          Error={errorMessage}\n          onChange={setValue}\n          path={path}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useConfig","useDocumentInfo","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","description","MetaDescriptionComponent","props","field","label","localized","maxLengthFromProps","minLengthFromProps","required","hasGenerateDescriptionFn","path","config","routes","api","serverURL","t","locale","getData","docInfo","customComponents","AfterInput","BeforeInput","Label","errorMessage","setValue","showError","value","regenerateDescription","endpoint","genDescriptionResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"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"}

package/dist/fields/MetaImage/MetaImageComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaImageComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAarD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgMvD,CAAA"}
+{"version":3,"file":"MetaImageComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAcrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyLvD,CAAA"}

package/dist/fields/MetaImage/MetaImageComponent.js

@@ -1,21 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldLabel, UploadInput, useConfig, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { FieldLabel, RenderCustomComponent, UploadInput, useConfig, useDocumentInfo, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import React, { useCallback } from 'react';
 import { Pill } from '../../ui/Pill.js';
 export const MetaImageComponent = (props)=>{
-    const { field: { admin: { components: { Label } }, label, relationTo, required }, hasGenerateImageFn, labelProps } = props || {};
-    const { path: pathFromContext } = useFieldProps();
+    const { field: { label, localized, relationTo, required }, hasGenerateImageFn, path } = props || {};
     const { config: { collections, routes: { api }, serverURL } } = useConfig();
     const field = useField({
         ...props,
-        path: pathFromContext
+        path
     });
+    const { customComponents: { Error, Label } } = field;
     const { t } = useTranslation();
     const locale = useLocale();
     const { getData } = useForm();
     const docInfo = useDocumentInfo();
-    const { errorMessage, setValue, showError, value } = field;
+    const { setValue, showError, value } = field;
     const regenerateImage = useCallback(async ()=>{
         if (!hasGenerateImageFn) {
             return;
@@ -31,7 +32,7 @@ export const MetaImageComponent = (props)=>{
                 hasPublishPermission: docInfo.hasPublishPermission,
                 hasSavePermission: docInfo.hasSavePermission,
                 initialData: docInfo.initialData,
-                initialState: docInfo.initialState,
+                initialState: reduceToSerializableFields(docInfo.initialState),
                 locale: typeof locale === 'object' ? locale?.code : locale,
                 title: docInfo.title
             }),
@@ -76,12 +77,14 @@ export const MetaImageComponent = (props)=>{
                     /*#__PURE__*/ _jsxs("div", {
                         className: "plugin-seo__field",
                         children: [
-                            /*#__PURE__*/ _jsx(FieldLabel, {
-                                field: null,
-                                Label: Label,
-                                label: label,
-                                required: required,
-                                ...labelProps || {}
+                            /*#__PURE__*/ _jsx(RenderCustomComponent, {
+                                CustomComponent: Label,
+                                Fallback: /*#__PURE__*/ _jsx(FieldLabel, {
+                                    label: label,
+                                    localized: localized,
+                                    path: path,
+                                    required: required
+                                })
                             }),
                             hasGenerateImageFn && /*#__PURE__*/ _jsxs(React.Fragment, {
                                 children: [
@@ -122,11 +125,7 @@ export const MetaImageComponent = (props)=>{
                 children: /*#__PURE__*/ _jsx(UploadInput, {
                     api: api,
                     collection: collection,
-                    Error: {
-                        type: 'client',
-                        Component: null,
-                        RenderedComponent: errorMessage
-                    },
+                    Error: Error,
                     filterOptions: field.filterOptions,
                     onChange: (incomingImage)=>{
                         if (incomingImage !== null) {
@@ -140,7 +139,7 @@ export const MetaImageComponent = (props)=>{
                             setValue(null);
                         }
                     },
-                    path: field.path,
+                    path: path,
                     relationTo: relationTo,
                     required: required,
                     serverURL: serverURL,

package/dist/fields/MetaImage/MetaImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { UploadFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  UploadInput,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useFieldProps,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateImage } from '../../types.js'\n\nimport { Pill } from '../../ui/Pill.js'\n\ntype MetaImageProps = {\n  readonly hasGenerateImageFn: boolean\n} & UploadFieldClientProps\n\nexport const MetaImageComponent: React.FC<MetaImageProps> = (props) => {\n  const {\n    field: {\n      admin: {\n        components: { Label },\n      },\n      label,\n      relationTo,\n      required,\n    },\n    hasGenerateImageFn,\n    labelProps,\n  } = props || {}\n  const { path: pathFromContext } = useFieldProps()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const field: FieldType<string> = useField({ ...props, path: pathFromContext } as Options)\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const { errorMessage, setValue, showError, value } = field\n\n  const regenerateImage = useCallback(async () => {\n    if (!hasGenerateImageFn) {\n      return\n    }\n\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-image`\n\n    const genImageResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: docInfo.initialState,\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title: docInfo.title,\n      } satisfies Omit<Parameters<GenerateImage>[0], 'collectionConfig' | 'globalConfig' | 'req'>),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const generatedImage = await genImageResponse.text()\n\n    setValue(generatedImage || '')\n  }, [\n    hasGenerateImageFn,\n    serverURL,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    docInfo.title,\n    getData,\n    locale,\n    setValue,\n  ])\n\n  const hasImage = Boolean(value)\n\n  const collection = collections?.find((coll) => coll.slug === relationTo) || undefined\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          <FieldLabel\n            field={null}\n            Label={Label}\n            label={label}\n            required={required}\n            {...(labelProps || {})}\n          />\n          {hasGenerateImageFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                onClick={() => {\n                  void regenerateImage()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        {hasGenerateImageFn && (\n          <div\n            style={{\n              color: '#9A9A9A',\n            }}\n          >\n            {t('plugin-seo:imageAutoGenerationTip')}\n          </div>\n        )}\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <UploadInput\n          api={api}\n          collection={collection}\n          Error={{\n            type: 'client',\n            Component: null,\n            RenderedComponent: errorMessage,\n          }}\n          filterOptions={field.filterOptions}\n          onChange={(incomingImage) => {\n            if (incomingImage !== null) {\n              if (typeof incomingImage === 'object') {\n                const { id: incomingID } = incomingImage\n                setValue(incomingID)\n              } else {\n                setValue(incomingImage)\n              }\n            } else {\n              setValue(null)\n            }\n          }}\n          path={field.path}\n          relationTo={relationTo}\n          required={required}\n          serverURL={serverURL}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <Pill\n          backgroundColor={hasImage ? 'green' : 'red'}\n          color=\"white\"\n          label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","UploadInput","useConfig","useDocumentInfo","useField","useFieldProps","useForm","useLocale","useTranslation","React","useCallback","Pill","MetaImageComponent","props","field","admin","components","Label","label","relationTo","required","hasGenerateImageFn","labelProps","path","pathFromContext","config","collections","routes","api","serverURL","t","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateImage","endpoint","genImageResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","generatedImage","text","hasImage","Boolean","collection","find","coll","slug","undefined","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","Error","Component","RenderedComponent","filterOptions","onChange","incomingImage","incomingID","alignItems","display","width"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { UploadFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  RenderCustomComponent,\n  UploadInput,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateImage } from '../../types.js'\n\nimport { Pill } from '../../ui/Pill.js'\n\ntype MetaImageProps = {\n  readonly hasGenerateImageFn: boolean\n} & UploadFieldClientProps\n\nexport const MetaImageComponent: React.FC<MetaImageProps> = (props) => {\n  const {\n    field: { label, localized, relationTo, required },\n    hasGenerateImageFn,\n    path,\n  } = props || {}\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const field: FieldType<string> = useField({ ...props, path } as Options)\n  const {\n    customComponents: { Error, Label },\n  } = field\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const { setValue, showError, value } = field\n\n  const regenerateImage = useCallback(async () => {\n    if (!hasGenerateImageFn) {\n      return\n    }\n\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-image`\n\n    const genImageResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState),\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title: docInfo.title,\n      } satisfies Omit<\n        Parameters<GenerateImage>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const generatedImage = await genImageResponse.text()\n\n    setValue(generatedImage || '')\n  }, [\n    hasGenerateImageFn,\n    serverURL,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    docInfo.title,\n    getData,\n    locale,\n    setValue,\n  ])\n\n  const hasImage = Boolean(value)\n\n  const collection = collections?.find((coll) => coll.slug === relationTo) || undefined\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          <RenderCustomComponent\n            CustomComponent={Label}\n            Fallback={\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            }\n          />\n          {hasGenerateImageFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                onClick={() => {\n                  void regenerateImage()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        {hasGenerateImageFn && (\n          <div\n            style={{\n              color: '#9A9A9A',\n            }}\n          >\n            {t('plugin-seo:imageAutoGenerationTip')}\n          </div>\n        )}\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <UploadInput\n          api={api}\n          collection={collection}\n          Error={Error}\n          filterOptions={field.filterOptions}\n          onChange={(incomingImage) => {\n            if (incomingImage !== null) {\n              if (typeof incomingImage === 'object') {\n                const { id: incomingID } = incomingImage\n                setValue(incomingID)\n              } else {\n                setValue(incomingImage)\n              }\n            } else {\n              setValue(null)\n            }\n          }}\n          path={path}\n          relationTo={relationTo}\n          required={required}\n          serverURL={serverURL}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <Pill\n          backgroundColor={hasImage ? 'green' : 'red'}\n          color=\"white\"\n          label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","RenderCustomComponent","UploadInput","useConfig","useDocumentInfo","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","React","useCallback","Pill","MetaImageComponent","props","field","label","localized","relationTo","required","hasGenerateImageFn","path","config","collections","routes","api","serverURL","customComponents","Error","Label","t","locale","getData","docInfo","setValue","showError","value","regenerateImage","endpoint","genImageResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","generatedImage","text","hasImage","Boolean","collection","find","coll","slug","undefined","div","style","marginBottom","position","className","CustomComponent","Fallback","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","filterOptions","onChange","incomingImage","incomingID","alignItems","display","width"],"mappings":"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"}

package/dist/fields/MetaTitle/MetaTitleComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaTitleComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAanD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,eAAe,CAAA;AAItB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,oBAAoB,CAAA;AAExB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8KvD,CAAA"}
+{"version":3,"file":"MetaTitleComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAanD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,eAAe,CAAA;AAItB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,oBAAoB,CAAA;AAExB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoKvD,CAAA"}

package/dist/fields/MetaTitle/MetaTitleComponent.js

@@ -1,22 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldLabel, TextInput, useConfig, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { FieldLabel, TextInput, useConfig, useDocumentInfo, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import React, { useCallback } from 'react';
 import { defaults } from '../../defaults.js';
 import { LengthIndicator } from '../../ui/LengthIndicator.js';
 import '../index.scss';
-const { maxLength, minLength } = defaults.title;
+const { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.title;
 export const MetaTitleComponent = (props)=>{
-    const { field: { admin: { components: { Label } }, label, required }, field: fieldFromProps, hasGenerateTitleFn, labelProps } = props || {};
-    const { path: pathFromContext } = useFieldProps();
+    const { field: { label, maxLength: maxLengthFromProps, minLength: minLengthFromProps, required }, hasGenerateTitleFn, path } = props || {};
     const { t } = useTranslation();
     const { config: { routes: { api }, serverURL } } = useConfig();
     const field = useField({
-        path: pathFromContext
+        path
     });
+    const { customComponents: { AfterInput, BeforeInput, Label } = {} } = field;
     const locale = useLocale();
     const { getData } = useForm();
     const docInfo = useDocumentInfo();
+    const minLength = minLengthFromProps || minLengthDefault;
+    const maxLength = maxLengthFromProps || maxLengthDefault;
     const { errorMessage, setValue, showError, value } = field;
     const regenerateTitle = useCallback(async ()=>{
         if (!hasGenerateTitleFn) {
@@ -33,7 +36,7 @@ export const MetaTitleComponent = (props)=>{
                 hasPublishPermission: docInfo.hasPublishPermission,
                 hasSavePermission: docInfo.hasSavePermission,
                 initialData: docInfo.initialData,
-                initialState: docInfo.initialState,
+                initialState: reduceToSerializableFields(docInfo.initialState),
                 locale: typeof locale === 'object' ? locale?.code : locale,
                 title: docInfo.title
             }),
@@ -76,12 +79,10 @@ export const MetaTitleComponent = (props)=>{
                     /*#__PURE__*/ _jsxs("div", {
                         className: "plugin-seo__field",
                         children: [
-                            /*#__PURE__*/ _jsx(FieldLabel, {
-                                field: fieldFromProps,
-                                Label: Label,
+                            Label ?? /*#__PURE__*/ _jsx(FieldLabel, {
                                 label: label,
-                                required: required,
-                                ...labelProps || {}
+                                path: path,
+                                required: required
                             }),
                             hasGenerateTitleFn && /*#__PURE__*/ _jsxs(React.Fragment, {
                                 children: [
@@ -132,13 +133,11 @@ export const MetaTitleComponent = (props)=>{
                     position: 'relative'
                 },
                 children: /*#__PURE__*/ _jsx(TextInput, {
-                    Error: {
-                        type: 'client',
-                        Component: null,
-                        RenderedComponent: errorMessage
-                    },
+                    AfterInput: AfterInput,
+                    BeforeInput: BeforeInput,
+                    Error: errorMessage,
                     onChange: setValue,
-                    path: pathFromContext,
+                    path: path,
                     required: required,
                     showError: showError,
                     style: {

package/dist/fields/MetaTitle/MetaTitleComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextInput,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useFieldProps,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateTitle } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\nimport '../index.scss'\n\nconst { maxLength, minLength } = defaults.title\n\ntype MetaTitleProps = {\n  readonly hasGenerateTitleFn: boolean\n} & TextFieldClientProps\n\nexport const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {\n  const {\n    field: {\n      admin: {\n        components: { Label },\n      },\n      label,\n      required,\n    },\n    field: fieldFromProps,\n    hasGenerateTitleFn,\n    labelProps,\n  } = props || {}\n  const { path: pathFromContext } = useFieldProps()\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const field: FieldType<string> = useField({\n    path: pathFromContext,\n  } as Options)\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const { errorMessage, setValue, showError, value } = field\n\n  const regenerateTitle = useCallback(async () => {\n    if (!hasGenerateTitleFn) {\n      return\n    }\n\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-title`\n\n    const genTitleResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: docInfo.initialState,\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title: docInfo.title,\n      } satisfies Omit<Parameters<GenerateTitle>[0], 'collectionConfig' | 'globalConfig' | 'req'>),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedTitle } = await genTitleResponse.json()\n\n    setValue(generatedTitle || '')\n  }, [\n    hasGenerateTitleFn,\n    serverURL,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    docInfo.title,\n    getData,\n    locale,\n    setValue,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          <FieldLabel\n            field={fieldFromProps}\n            Label={Label}\n            label={label}\n            required={required}\n            {...(labelProps || {})}\n          />\n          {hasGenerateTitleFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                onClick={() => {\n                  void regenerateTitle()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: '#9A9A9A',\n          }}\n        >\n          {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n          .\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextInput\n          Error={{\n            type: 'client',\n            Component: null,\n            RenderedComponent: errorMessage,\n          }}\n          onChange={setValue}\n          path={pathFromContext}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextInput","useConfig","useDocumentInfo","useField","useFieldProps","useForm","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","title","MetaTitleComponent","props","field","admin","components","Label","label","required","fieldFromProps","hasGenerateTitleFn","labelProps","path","pathFromContext","t","config","routes","api","serverURL","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateTitle","endpoint","genTitleResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","Component","RenderedComponent","onChange","alignItems","display","width","text"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextInput,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateTitle } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\nimport '../index.scss'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.title\n\ntype MetaTitleProps = {\n  readonly hasGenerateTitleFn: boolean\n} & TextFieldClientProps\n\nexport const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {\n  const {\n    field: { label, maxLength: maxLengthFromProps, minLength: minLengthFromProps, required },\n    hasGenerateTitleFn,\n    path,\n  } = props || {}\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const field: FieldType<string> = useField({ path } as Options)\n  const { customComponents: { AfterInput, BeforeInput, Label } = {} } = field\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const minLength = minLengthFromProps || minLengthDefault\n  const maxLength = maxLengthFromProps || maxLengthDefault\n\n  const { errorMessage, setValue, showError, value } = field\n\n  const regenerateTitle = useCallback(async () => {\n    if (!hasGenerateTitleFn) {\n      return\n    }\n\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-title`\n\n    const genTitleResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState),\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title: docInfo.title,\n      } satisfies Omit<\n        Parameters<GenerateTitle>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedTitle } = await genTitleResponse.json()\n\n    setValue(generatedTitle || '')\n  }, [\n    hasGenerateTitleFn,\n    serverURL,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    docInfo.title,\n    getData,\n    locale,\n    setValue,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          {Label ?? <FieldLabel label={label} path={path} required={required} />}\n          {hasGenerateTitleFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                onClick={() => {\n                  void regenerateTitle()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: '#9A9A9A',\n          }}\n        >\n          {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n          .\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextInput\n          AfterInput={AfterInput}\n          BeforeInput={BeforeInput}\n          Error={errorMessage}\n          onChange={setValue}\n          path={path}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextInput","useConfig","useDocumentInfo","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","title","MetaTitleComponent","props","field","label","maxLengthFromProps","minLengthFromProps","required","hasGenerateTitleFn","path","t","config","routes","api","serverURL","customComponents","AfterInput","BeforeInput","Label","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateTitle","endpoint","genTitleResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"AAAA;;AAKA,SACEA,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,eAAe,EACfC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,0BAA0B,QAAQ,wBAAuB;AAClE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,QAAQ,QAAQ,oBAAmB;AAC5C,SAASC,eAAe,QAAQ,8BAA6B;AAC7D,OAAO,gBAAe;AAEtB,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,WAAWC,gBAAgB,EAAE,GAAGL,SAASM,KAAK;AAMnF,OAAO,MAAMC,qBAA+C,CAACC;IAC3D,MAAM,EACJC,OAAO,EAAEC,KAAK,EAAER,WAAWS,kBAAkB,EAAEP,WAAWQ,kBAAkB,EAAEC,QAAQ,EAAE,EACxFC,kBAAkB,EAClBC,IAAI,EACL,GAAGP,SAAS,CAAC;IAEd,MAAM,EAAEQ,CAAC,EAAE,GAAGpB;IAEd,MAAM,EACJqB,QAAQ,EACNC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,EACF,GAAG7B;IAEJ,MAAMkB,QAA2BhB,SAAS;QAAEsB;IAAK;IACjD,MAAM,EAAEM,kBAAkB,EAAEC,UAAU,EAAEC,WAAW,EAAEC,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,GAAGf;IAEtE,MAAMgB,SAAS9B;IACf,MAAM,EAAE+B,OAAO,EAAE,GAAGhC;IACpB,MAAMiC,UAAUnC;IAEhB,MAAMY,YAAYQ,sBAAsBP;IACxC,MAAMH,YAAYS,sBAAsBR;IAExC,MAAM,EAAEyB,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGtB;IAErD,MAAMuB,kBAAkBjC,YAAY;QAClC,IAAI,CAACe,oBAAoB;YACvB;QACF;QAEA,MAAMmB,WAAW,CAAC,EAAEb,UAAU,EAAED,IAAI,0BAA0B,CAAC;QAE/D,MAAMe,mBAAmB,MAAMC,MAAMF,UAAU;YAC7CG,MAAMC,KAAKC,SAAS,CAAC;gBACnBC,IAAIZ,QAAQY,EAAE;gBACdC,gBAAgBb,QAAQa,cAAc;gBACtCC,KAAKf;gBACLgB,gBAAgBf,QAAQe,cAAc;gBACtCC,YAAYhB,QAAQgB,UAAU;gBAC9BC,sBAAsBjB,QAAQiB,oBAAoB;gBAClDC,mBAAmBlB,QAAQkB,iBAAiB;gBAC5CC,aAAanB,QAAQmB,WAAW;gBAChCC,cAAclD,2BAA2B8B,QAAQoB,YAAY;gBAC7DtB,QAAQ,OAAOA,WAAW,WAAWA,QAAQuB,OAAOvB;gBACpDnB,OAAOqB,QAAQrB,KAAK;YACtB;YAIA2C,aAAa;YACbC,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAEA,MAAM,EAAEC,QAAQC,cAAc,EAAE,GAAG,MAAMnB,iBAAiBoB,IAAI;QAE9DzB,SAASwB,kBAAkB;IAC7B,GAAG;QACDvC;QACAM;QACAD;QACAQ,QAAQY,EAAE;QACVZ,QAAQa,cAAc;QACtBb,QAAQe,cAAc;QACtBf,QAAQgB,UAAU;QAClBhB,QAAQiB,oBAAoB;QAC5BjB,QAAQkB,iBAAiB;QACzBlB,QAAQmB,WAAW;QACnBnB,QAAQoB,YAAY;QACpBpB,QAAQrB,KAAK;QACboB;QACAD;QACAI;KACD;IAED,qBACE,MAAC0B;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,MAACF;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;;kCAEA,MAACH;wBAAII,WAAU;;4BACZnC,uBAAS,KAACnC;gCAAWqB,OAAOA;gCAAOK,MAAMA;gCAAMF,UAAUA;;4BACzDC,oCACC,MAAChB,MAAM8D,QAAQ;;oCAAC;kDAEd,KAACC;wCACCC,SAAS;4CACP,KAAK9B;wCACP;wCACAwB,OAAO;4CACLO,YAAY;4CACZC,iBAAiB;4CACjBC,QAAQ;4CACRC,OAAO;4CACPC,QAAQ;4CACRC,SAAS;4CACTC,gBAAgB;wCAClB;wCACAC,MAAK;kDAEJtD,EAAE;;;;;;kCAKX,MAACuC;wBACCC,OAAO;4BACLU,OAAO;wBACT;;4BAEClD,EAAE,6BAA6B;gCAAEd;gCAAWE;4BAAU;0CACvD,KAACmE;gCACCC,MAAK;gCACLC,KAAI;gCACJC,QAAO;0CAEN1D,EAAE;;4BACD;;;;;0BAIR,KAACuC;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;0BAEA,cAAA,KAACpE;oBACCgC,YAAYA;oBACZC,aAAaA;oBACboD,OAAO/C;oBACPgD,UAAU/C;oBACVd,MAAMA;oBACNF,UAAUA;oBACViB,WAAWA;oBACX0B,OAAO;wBACLC,cAAc;oBAChB;oBACA1B,OAAOA;;;0BAGX,KAACwB;gBACCC,OAAO;oBACLqB,YAAY;oBACZC,SAAS;oBACTC,OAAO;gBACT;0BAEA,cAAA,KAAC9E;oBAAgBC,WAAWA;oBAAWE,WAAWA;oBAAW4E,MAAMjD;;;;;AAI3E,EAAC"}

package/dist/fields/Overview/OverviewComponent.d.ts

@@ -1,8 +1,16 @@
 import type { UIField } from 'payload';
 import React from 'react';
 type OverviewProps = {
+    descriptionOverrides?: {
+        maxLength?: number;
+        minLength?: number;
+    };
     descriptionPath?: string;
     imagePath?: string;
+    titleOverrides?: {
+        maxLength?: number;
+        minLength?: number;
+    };
     titlePath?: string;
 } & UIField;
 export declare const OverviewComponent: React.FC<OverviewProps>;

package/dist/fields/Overview/OverviewComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAGjD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAW/D,KAAK,aAAa,GAAG;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6DrD,CAAA"}
+{"version":3,"file":"OverviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAGjD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAW/D,KAAK,aAAa,GAAG;IACnB,oBAAoB,CAAC,EAAE;QACrB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiErD,CAAA"}

package/dist/fields/Overview/OverviewComponent.js

@@ -3,10 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { defaults } from '../../defaults.js';
-const { description: { maxLength: maxDesc, minLength: minDesc }, title: { maxLength: maxTitle, minLength: minTitle } } = defaults;
-export const OverviewComponent = ({ descriptionPath: descriptionPathFromContext, imagePath: imagePathFromContext, titlePath: titlePathFromContext })=>{
-    const { //  dispatchFields,
-    getFields } = useForm();
+const { description: { maxLength: maxDescDefault, minLength: minDescDefault }, title: { maxLength: maxTitleDefault, minLength: minTitleDefault } } = defaults;
+export const OverviewComponent = ({ descriptionOverrides, descriptionPath: descriptionPathFromContext, imagePath: imagePathFromContext, titleOverrides, titlePath: titlePathFromContext })=>{
+    const { getFields } = useForm();
     const descriptionPath = descriptionPathFromContext || 'meta.description';
     const titlePath = titlePathFromContext || 'meta.title';
     const imagePath = imagePathFromContext || 'meta.image';
@@ -15,6 +14,10 @@ export const OverviewComponent = ({ descriptionPath: descriptionPathFromContext,
     const [titleIsValid, setTitleIsValid] = useState();
     const [descIsValid, setDescIsValid] = useState();
     const [imageIsValid, setImageIsValid] = useState();
+    const minDesc = descriptionOverrides?.minLength || minDescDefault;
+    const maxDesc = descriptionOverrides?.maxLength || maxDescDefault;
+    const minTitle = titleOverrides?.minLength || minTitleDefault;
+    const maxTitle = titleOverrides?.maxLength || maxTitleDefault;
     const resetAll = useCallback(()=>{
         const fields = getFields();
         const fieldsWithoutMeta = fields;

package/dist/fields/Overview/OverviewComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\n\nimport { defaults } from '../../defaults.js'\n\nconst {\n  description: { maxLength: maxDesc, minLength: minDesc },\n  title: { maxLength: maxTitle, minLength: minTitle },\n} = defaults\n\ntype OverviewProps = {\n  descriptionPath?: string\n  imagePath?: string\n  titlePath?: string\n} & UIField\n\nexport const OverviewComponent: React.FC<OverviewProps> = ({\n  descriptionPath: descriptionPathFromContext,\n  imagePath: imagePathFromContext,\n  titlePath: titlePathFromContext,\n}) => {\n  const {\n    //  dispatchFields,\n    getFields,\n  } = useForm()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n  const imagePath = imagePathFromContext || 'meta.image'\n\n  const [\n    {\n      [descriptionPath]: { value: metaDesc } = {} as FormField,\n      [imagePath]: { value: metaImage } = {} as FormField,\n      [titlePath]: { value: metaTitle } = {} as FormField,\n    },\n  ] = useAllFormFields()\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()\n  const [descIsValid, setDescIsValid] = useState<boolean | undefined>()\n  const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()\n\n  const resetAll = useCallback(() => {\n    const fields = getFields()\n    const fieldsWithoutMeta = fields\n    fieldsWithoutMeta['meta.title'].value = ''\n    fieldsWithoutMeta['meta.description'].value = ''\n    fieldsWithoutMeta['meta.image'].value = ''\n    // dispatchFields(fieldsWithoutMeta);\n  }, [getFields])\n\n  useEffect(() => {\n    if (typeof metaTitle === 'string') {\n      setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n    }\n    if (typeof metaDesc === 'string') {\n      setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n    }\n    setImageIsValid(Boolean(metaImage))\n  }, [metaTitle, metaDesc, metaImage])\n\n  const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n  const numberOfPasses = testResults.filter(Boolean).length\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>\n        {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useCallback","useEffect","useState","defaults","description","maxLength","maxDesc","minLength","minDesc","title","maxTitle","minTitle","OverviewComponent","descriptionPath","descriptionPathFromContext","imagePath","imagePathFromContext","titlePath","titlePathFromContext","getFields","value","metaDesc","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","resetAll","fields","fieldsWithoutMeta","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAgB;AAC1E,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,oBAAmB;AAE5C,MAAM,EACJC,aAAa,EAAEC,WAAWC,OAAO,EAAEC,WAAWC,OAAO,EAAE,EACvDC,OAAO,EAAEJ,WAAWK,QAAQ,EAAEH,WAAWI,QAAQ,EAAE,EACpD,GAAGR;AAQJ,OAAO,MAAMS,oBAA6C,CAAC,EACzDC,iBAAiBC,0BAA0B,EAC3CC,WAAWC,oBAAoB,EAC/BC,WAAWC,oBAAoB,EAChC;IACC,MAAM,EACJ,mBAAmB;IACnBC,SAAS,EACV,GAAGtB;IAEJ,MAAMgB,kBAAkBC,8BAA8B;IACtD,MAAMG,YAAYC,wBAAwB;IAC1C,MAAMH,YAAYC,wBAAwB;IAE1C,MAAM,CACJ,EACE,CAACH,gBAAgB,EAAE,EAAEO,OAAOC,QAAQ,EAAE,GAAG,CAAC,CAAc,EACxD,CAACN,UAAU,EAAE,EAAEK,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACnD,CAACL,UAAU,EAAE,EAAEG,OAAOG,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,CACF,GAAG3B;IACJ,MAAM,EAAE4B,CAAC,EAAE,GAAG1B;IAEd,MAAM,CAAC2B,cAAcC,gBAAgB,GAAGxB;IACxC,MAAM,CAACyB,aAAaC,eAAe,GAAG1B;IACtC,MAAM,CAAC2B,cAAcC,gBAAgB,GAAG5B;IAExC,MAAM6B,WAAW/B,YAAY;QAC3B,MAAMgC,SAASb;QACf,MAAMc,oBAAoBD;QAC1BC,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;QACxCa,iBAAiB,CAAC,mBAAmB,CAACb,KAAK,GAAG;QAC9Ca,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;IACxC,qCAAqC;IACvC,GAAG;QAACD;KAAU;IAEdlB,UAAU;QACR,IAAI,OAAOsB,cAAc,UAAU;YACjCG,gBAAgBH,UAAUW,MAAM,IAAIvB,YAAYY,UAAUW,MAAM,IAAIxB;QACtE;QACA,IAAI,OAAOW,aAAa,UAAU;YAChCO,eAAeP,SAASa,MAAM,IAAI1B,WAAWa,SAASa,MAAM,IAAI5B;QAClE;QACAwB,gBAAgBK,QAAQb;IAC1B,GAAG;QAACC;QAAWF;QAAUC;KAAU;IAEnC,MAAMc,cAAc;QAACX;QAAcE;QAAaE;KAAa;IAE7D,MAAMQ,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,KAACK;QACCC,OAAO;YACLC,cAAc;QAChB;kBAEA,cAAA,KAACF;sBACEf,EAAE,4BAA4B;gBAAEkB,SAASL;gBAAgBM,KAAKP,YAAYF,MAAM;YAAC;;;AAI1F,EAAC"}
+{"version":3,"sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\n\nimport { defaults } from '../../defaults.js'\n\nconst {\n  description: { maxLength: maxDescDefault, minLength: minDescDefault },\n  title: { maxLength: maxTitleDefault, minLength: minTitleDefault },\n} = defaults\n\ntype OverviewProps = {\n  descriptionOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  descriptionPath?: string\n  imagePath?: string\n  titleOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  titlePath?: string\n} & UIField\n\nexport const OverviewComponent: React.FC<OverviewProps> = ({\n  descriptionOverrides,\n  descriptionPath: descriptionPathFromContext,\n  imagePath: imagePathFromContext,\n  titleOverrides,\n  titlePath: titlePathFromContext,\n}) => {\n  const { getFields } = useForm()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n  const imagePath = imagePathFromContext || 'meta.image'\n\n  const [\n    {\n      [descriptionPath]: { value: metaDesc } = {} as FormField,\n      [imagePath]: { value: metaImage } = {} as FormField,\n      [titlePath]: { value: metaTitle } = {} as FormField,\n    },\n  ] = useAllFormFields()\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()\n  const [descIsValid, setDescIsValid] = useState<boolean | undefined>()\n  const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()\n\n  const minDesc = descriptionOverrides?.minLength || minDescDefault\n  const maxDesc = descriptionOverrides?.maxLength || maxDescDefault\n  const minTitle = titleOverrides?.minLength || minTitleDefault\n  const maxTitle = titleOverrides?.maxLength || maxTitleDefault\n\n  const resetAll = useCallback(() => {\n    const fields = getFields()\n    const fieldsWithoutMeta = fields\n    fieldsWithoutMeta['meta.title'].value = ''\n    fieldsWithoutMeta['meta.description'].value = ''\n    fieldsWithoutMeta['meta.image'].value = ''\n    // dispatchFields(fieldsWithoutMeta);\n  }, [getFields])\n\n  useEffect(() => {\n    if (typeof metaTitle === 'string') {\n      setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n    }\n    if (typeof metaDesc === 'string') {\n      setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n    }\n    setImageIsValid(Boolean(metaImage))\n  }, [metaTitle, metaDesc, metaImage])\n\n  const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n  const numberOfPasses = testResults.filter(Boolean).length\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>\n        {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useCallback","useEffect","useState","defaults","description","maxLength","maxDescDefault","minLength","minDescDefault","title","maxTitleDefault","minTitleDefault","OverviewComponent","descriptionOverrides","descriptionPath","descriptionPathFromContext","imagePath","imagePathFromContext","titleOverrides","titlePath","titlePathFromContext","getFields","value","metaDesc","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","minDesc","maxDesc","minTitle","maxTitle","resetAll","fields","fieldsWithoutMeta","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAgB;AAC1E,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,oBAAmB;AAE5C,MAAM,EACJC,aAAa,EAAEC,WAAWC,cAAc,EAAEC,WAAWC,cAAc,EAAE,EACrEC,OAAO,EAAEJ,WAAWK,eAAe,EAAEH,WAAWI,eAAe,EAAE,EAClE,GAAGR;AAgBJ,OAAO,MAAMS,oBAA6C,CAAC,EACzDC,oBAAoB,EACpBC,iBAAiBC,0BAA0B,EAC3CC,WAAWC,oBAAoB,EAC/BC,cAAc,EACdC,WAAWC,oBAAoB,EAChC;IACC,MAAM,EAAEC,SAAS,EAAE,GAAGxB;IAEtB,MAAMiB,kBAAkBC,8BAA8B;IACtD,MAAMI,YAAYC,wBAAwB;IAC1C,MAAMJ,YAAYC,wBAAwB;IAE1C,MAAM,CACJ,EACE,CAACH,gBAAgB,EAAE,EAAEQ,OAAOC,QAAQ,EAAE,GAAG,CAAC,CAAc,EACxD,CAACP,UAAU,EAAE,EAAEM,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACnD,CAACL,UAAU,EAAE,EAAEG,OAAOG,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,CACF,GAAG7B;IACJ,MAAM,EAAE8B,CAAC,EAAE,GAAG5B;IAEd,MAAM,CAAC6B,cAAcC,gBAAgB,GAAG1B;IACxC,MAAM,CAAC2B,aAAaC,eAAe,GAAG5B;IACtC,MAAM,CAAC6B,cAAcC,gBAAgB,GAAG9B;IAExC,MAAM+B,UAAUpB,sBAAsBN,aAAaC;IACnD,MAAM0B,UAAUrB,sBAAsBR,aAAaC;IACnD,MAAM6B,WAAWjB,gBAAgBX,aAAaI;IAC9C,MAAMyB,WAAWlB,gBAAgBb,aAAaK;IAE9C,MAAM2B,WAAWrC,YAAY;QAC3B,MAAMsC,SAASjB;QACf,MAAMkB,oBAAoBD;QAC1BC,iBAAiB,CAAC,aAAa,CAACjB,KAAK,GAAG;QACxCiB,iBAAiB,CAAC,mBAAmB,CAACjB,KAAK,GAAG;QAC9CiB,iBAAiB,CAAC,aAAa,CAACjB,KAAK,GAAG;IACxC,qCAAqC;IACvC,GAAG;QAACD;KAAU;IAEdpB,UAAU;QACR,IAAI,OAAOwB,cAAc,UAAU;YACjCG,gBAAgBH,UAAUe,MAAM,IAAIL,YAAYV,UAAUe,MAAM,IAAIJ;QACtE;QACA,IAAI,OAAOb,aAAa,UAAU;YAChCO,eAAeP,SAASiB,MAAM,IAAIP,WAAWV,SAASiB,MAAM,IAAIN;QAClE;QACAF,gBAAgBS,QAAQjB;IAC1B,GAAG;QAACC;QAAWF;QAAUC;KAAU;IAEnC,MAAMkB,cAAc;QAACf;QAAcE;QAAaE;KAAa;IAE7D,MAAMY,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,KAACK;QACCC,OAAO;YACLC,cAAc;QAChB;kBAEA,cAAA,KAACF;sBACEnB,EAAE,4BAA4B;gBAAEsB,SAASL;gBAAgBM,KAAKP,YAAYF,MAAM;YAAC;;;AAI1F,EAAC"}

package/dist/fields/Overview/index.d.ts

@@ -1,5 +1,9 @@
 import type { UIField } from 'payload';
 interface FieldFunctionProps {
+    descriptionOverrides?: {
+        maxLength?: number;
+        minLength?: number;
+    };
     /**
      * Path to the description field to use for the preview
      *
@@ -13,6 +17,10 @@ interface FieldFunctionProps {
      */
     imagePath?: string;
     overrides?: Partial<UIField>;
+    titleOverrides?: {
+        maxLength?: number;
+        minLength?: number;
+    };
     /**
      * Path to the title field to use for the preview
      *

package/dist/fields/Overview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Overview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,UAAU,kBAAkB;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,OAAO,CAAA;AAEnE,eAAO,MAAM,aAAa,EAAE,aAwB3B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Overview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,UAAU,kBAAkB;IAC1B,oBAAoB,CAAC,EAAE;QACrB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5B,cAAc,CAAC,EAAE;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,OAAO,CAAA;AAEnE,eAAO,MAAM,aAAa,EAAE,aA4B3B,CAAA"}

package/dist/fields/Overview/index.js

@@ -1,4 +1,4 @@
-export const OverviewField = ({ descriptionPath, imagePath, overrides, titlePath })=>{
+export const OverviewField = ({ descriptionOverrides, descriptionPath, imagePath, overrides, titleOverrides, titlePath })=>{
     return {
         name: 'overview',
         type: 'ui',
@@ -6,8 +6,10 @@ export const OverviewField = ({ descriptionPath, imagePath, overrides, titlePath
             components: {
                 Field: {
                     clientProps: {
+                        descriptionOverrides,
                         descriptionPath,
                         imagePath,
+                        titleOverrides,
                         titlePath
                     },
                     path: '@payloadcms/plugin-seo/client#OverviewComponent'

package/dist/fields/Overview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Overview/index.tsx"],"sourcesContent":["import type { UIField } from 'payload'\n\ninterface FieldFunctionProps {\n  /**\n   * Path to the description field to use for the preview\n   *\n   * @default 'meta.description'\n   */\n  descriptionPath?: string\n  /**\n   * Path to the image field to use for the preview\n   *\n   * @default 'meta.image'\n   */\n  imagePath?: string\n  overrides?: Partial<UIField>\n  /**\n   * Path to the title field to use for the preview\n   *\n   * @default 'meta.title'\n   */\n  titlePath?: string\n}\n\ntype FieldFunction = ({ overrides }: FieldFunctionProps) => UIField\n\nexport const OverviewField: FieldFunction = ({\n  descriptionPath,\n  imagePath,\n  overrides,\n  titlePath,\n}) => {\n  return {\n    name: 'overview',\n    type: 'ui',\n    admin: {\n      components: {\n        Field: {\n          clientProps: {\n            descriptionPath,\n            imagePath,\n            titlePath,\n          },\n          path: '@payloadcms/plugin-seo/client#OverviewComponent',\n        },\n      },\n    },\n    label: 'Overview',\n    ...((overrides as unknown as UIField) ?? {}),\n  }\n}\n"],"names":["OverviewField","descriptionPath","imagePath","overrides","titlePath","name","type","admin","components","Field","clientProps","path","label"],"mappings":"AA0BA,OAAO,MAAMA,gBAA+B,CAAC,EAC3CC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXT;wBACAC;wBACAE;oBACF;oBACAO,MAAM;gBACR;YACF;QACF;QACAC,OAAO;QACP,GAAI,AAACT,aAAoC,CAAC,CAAC;IAC7C;AACF,EAAC"}
+{"version":3,"sources":["../../../src/fields/Overview/index.tsx"],"sourcesContent":["import type { UIField } from 'payload'\n\ninterface FieldFunctionProps {\n  descriptionOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  /**\n   * Path to the description field to use for the preview\n   *\n   * @default 'meta.description'\n   */\n  descriptionPath?: string\n  /**\n   * Path to the image field to use for the preview\n   *\n   * @default 'meta.image'\n   */\n  imagePath?: string\n  overrides?: Partial<UIField>\n  titleOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  /**\n   * Path to the title field to use for the preview\n   *\n   * @default 'meta.title'\n   */\n  titlePath?: string\n}\n\ntype FieldFunction = ({ overrides }: FieldFunctionProps) => UIField\n\nexport const OverviewField: FieldFunction = ({\n  descriptionOverrides,\n  descriptionPath,\n  imagePath,\n  overrides,\n  titleOverrides,\n  titlePath,\n}) => {\n  return {\n    name: 'overview',\n    type: 'ui',\n    admin: {\n      components: {\n        Field: {\n          clientProps: {\n            descriptionOverrides,\n            descriptionPath,\n            imagePath,\n            titleOverrides,\n            titlePath,\n          },\n          path: '@payloadcms/plugin-seo/client#OverviewComponent',\n        },\n      },\n    },\n    label: 'Overview',\n    ...((overrides as unknown as UIField) ?? {}),\n  }\n}\n"],"names":["OverviewField","descriptionOverrides","descriptionPath","imagePath","overrides","titleOverrides","titlePath","name","type","admin","components","Field","clientProps","path","label"],"mappings":"AAkCA,OAAO,MAAMA,gBAA+B,CAAC,EAC3CC,oBAAoB,EACpBC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXX;wBACAC;wBACAC;wBACAE;wBACAC;oBACF;oBACAO,MAAM;gBACR;YACF;QACF;QACAC,OAAO;QACP,GAAI,AAACV,aAAoC,CAAC,CAAC;IAC7C;AACF,EAAC"}

package/dist/fields/Preview/PreviewComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAUjD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8HnD,CAAA"}
+{"version":3,"file":"PreviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAWjD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiInD,CAAA"}

package/dist/fields/Preview/PreviewComponent.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAllFormFields, useConfig, useDocumentInfo, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import React, { useEffect, useState } from 'react';
 export const PreviewComponent = (props)=>{
     const { descriptionPath: descriptionPathFromContext, hasGenerateURLFn, titlePath: titlePathFromContext } = props;
@@ -27,7 +28,7 @@ export const PreviewComponent = (props)=>{
                     hasPublishPermission: docInfo.hasPublishPermission,
                     hasSavePermission: docInfo.hasSavePermission,
                     initialData: docInfo.initialData,
-                    initialState: docInfo.initialState,
+                    initialState: reduceToSerializableFields(docInfo.initialState),
                     locale: typeof locale === 'object' ? locale?.code : locale,
                     title: docInfo.title
                 }),