@payloadcms/plugin-seo 3.0.0-canary.fb81f02 → 3.0.0

package/dist/fields/MetaTitle/MetaTitleComponent.js

@@ -1,31 +1,44 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldLabel, TextInput, 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 { CustomLabel, hasGenerateTitleFn, label, labelProps, required } = 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) return;
-        const genTitleResponse = await fetch('/api/plugin-seo/generate-title', {
+        if (!hasGenerateTitleFn) {
+            return;
+        }
+        const endpoint = `${serverURL}${api}/plugin-seo/generate-title`;
+        const genTitleResponse = await fetch(endpoint, {
             body: JSON.stringify({
-                ...docInfo,
-                doc: {
-                    ...getData()
-                },
-                locale: typeof locale === 'object' ? locale?.code : locale
+                id: docInfo.id,
+                collectionSlug: docInfo.collectionSlug,
+                doc: getData(),
+                docPermissions: docInfo.docPermissions,
+                globalSlug: docInfo.globalSlug,
+                hasPublishPermission: docInfo.hasPublishPermission,
+                hasSavePermission: docInfo.hasSavePermission,
+                initialData: docInfo.initialData,
+                initialState: reduceToSerializableFields(docInfo.initialState),
+                locale: typeof locale === 'object' ? locale?.code : locale,
+                title: docInfo.title
             }),
             credentials: 'include',
             headers: {
@@ -37,7 +50,17 @@ export const MetaTitleComponent = (props)=>{
         setValue(generatedTitle || '');
     }, [
         hasGenerateTitleFn,
-        docInfo,
+        serverURL,
+        api,
+        docInfo.id,
+        docInfo.collectionSlug,
+        docInfo.docPermissions,
+        docInfo.globalSlug,
+        docInfo.hasPublishPermission,
+        docInfo.hasSavePermission,
+        docInfo.initialData,
+        docInfo.initialState,
+        docInfo.title,
         getData,
         locale,
         setValue
@@ -56,10 +79,10 @@ export const MetaTitleComponent = (props)=>{
                     /*#__PURE__*/ _jsxs("div", {
                         className: "plugin-seo__field",
                         children: [
-                            /*#__PURE__*/ _jsx(FieldLabel, {
-                                CustomLabel: CustomLabel,
+                            Label ?? /*#__PURE__*/ _jsx(FieldLabel, {
                                 label: label,
-                                ...labelProps || {}
+                                path: path,
+                                required: required
                             }),
                             hasGenerateTitleFn && /*#__PURE__*/ _jsxs(React.Fragment, {
                                 children: [
@@ -110,9 +133,11 @@ export const MetaTitleComponent = (props)=>{
                     position: 'relative'
                 },
                 children: /*#__PURE__*/ _jsx(TextInput, {
-                    CustomError: 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 { FormFieldBase } from 'payload'\n\nimport {\n  FieldLabel,\n  TextInput,\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  hasGenerateTitleFn: boolean\n} & FormFieldBase\n\nexport const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {\n  const { CustomLabel, hasGenerateTitleFn, label, labelProps, required } = props || {}\n  const { path: pathFromContext } = useFieldProps()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\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) return\n\n    const genTitleResponse = await fetch('/api/plugin-seo/generate-title', {\n      body: JSON.stringify({\n        ...docInfo,\n        doc: { ...getData() },\n        locale: typeof locale === 'object' ? locale?.code : locale,\n      } satisfies Parameters<GenerateTitle>[0]),\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  }, [hasGenerateTitleFn, docInfo, getData, locale, setValue])\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 CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\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          CustomError={errorMessage}\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","useDocumentInfo","useField","useFieldProps","useForm","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","title","MetaTitleComponent","props","CustomLabel","hasGenerateTitleFn","label","labelProps","required","path","pathFromContext","t","field","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateTitle","genTitleResponse","fetch","body","JSON","stringify","doc","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","CustomError","onChange","alignItems","display","width","text"],"mappings":"AAAA;;AAKA,SACEA,UAAU,EACVC,SAAS,EACTC,eAAe,EACfC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,QAAQ,QAAQ,oBAAmB;AAC5C,SAASC,eAAe,QAAQ,8BAA6B;AAC7D,OAAO,gBAAe;AAEtB,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGH,SAASI,KAAK;AAM/C,OAAO,MAAMC,qBAA+C,CAACC;IAC3D,MAAM,EAAEC,WAAW,EAAEC,kBAAkB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGL,SAAS,CAAC;IACnF,MAAM,EAAEM,MAAMC,eAAe,EAAE,GAAGnB;IAElC,MAAM,EAAEoB,CAAC,EAAE,GAAGjB;IAEd,MAAMkB,QAA2BtB,SAAS;QACxCmB,MAAMC;IACR;IAEA,MAAMG,SAASpB;IACf,MAAM,EAAEqB,OAAO,EAAE,GAAGtB;IACpB,MAAMuB,UAAU1B;IAEhB,MAAM,EAAE2B,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGP;IAErD,MAAMQ,kBAAkBxB,YAAY;QAClC,IAAI,CAACS,oBAAoB;QAEzB,MAAMgB,mBAAmB,MAAMC,MAAM,kCAAkC;YACrEC,MAAMC,KAAKC,SAAS,CAAC;gBACnB,GAAGV,OAAO;gBACVW,KAAK;oBAAE,GAAGZ,SAAS;gBAAC;gBACpBD,QAAQ,OAAOA,WAAW,WAAWA,QAAQc,OAAOd;YACtD;YACAe,aAAa;YACbC,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAEA,MAAM,EAAEC,QAAQC,cAAc,EAAE,GAAG,MAAMX,iBAAiBY,IAAI;QAE9DhB,SAASe,kBAAkB;IAC7B,GAAG;QAAC3B;QAAoBU;QAASD;QAASD;QAAQI;KAAS;IAE3D,qBACE,MAACiB;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,MAACF;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;;kCAEA,MAACH;wBAAII,WAAU;;0CACb,KAACnD;gCAAWiB,aAAaA;gCAAaE,OAAOA;gCAAQ,GAAIC,cAAc,CAAC,CAAC;;4BACxEF,oCACC,MAACV,MAAM4C,QAAQ;;oCAAC;kDAEd,KAACC;wCACCC,SAAS;4CACP,KAAKrB;wCACP;wCACAe,OAAO;4CACLO,YAAY;4CACZC,iBAAiB;4CACjBC,QAAQ;4CACRC,OAAO;4CACPC,QAAQ;4CACRC,SAAS;4CACTC,gBAAgB;wCAClB;wCACAC,MAAK;kDAEJtC,EAAE;;;;;;kCAKX,MAACuB;wBACCC,OAAO;4BACLU,OAAO;wBACT;;4BAEClC,EAAE,6BAA6B;gCAAEZ;gCAAWC;4BAAU;0CACvD,KAACkD;gCACCC,MAAK;gCACLC,KAAI;gCACJC,QAAO;0CAEN1C,EAAE;;4BACD;;;;;0BAIR,KAACuB;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;0BAEA,cAAA,KAACjD;oBACCkE,aAAatC;oBACbuC,UAAUtC;oBACVR,MAAMC;oBACNF,UAAUA;oBACVU,WAAWA;oBACXiB,OAAO;wBACLC,cAAc;oBAChB;oBACAjB,OAAOA;;;0BAGX,KAACe;gBACCC,OAAO;oBACLqB,YAAY;oBACZC,SAAS;oBACTC,OAAO;gBACT;0BAEA,cAAA,KAAC5D;oBAAgBC,WAAWA;oBAAWC,WAAWA;oBAAW2D,MAAMxC;;;;;AAI3E,EAAC"}
+{"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/MetaTitle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAMxC,UAAU,kBAAkB;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAC/B;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,SAAS,CAAA;AAEpF,eAAO,MAAM,cAAc,EAAE,aAkB5B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,UAAU,kBAAkB;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAC/B;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,SAAS,CAAA;AAEpF,eAAO,MAAM,cAAc,EAAE,aAiB5B,CAAA"}

package/dist/fields/MetaTitle/index.js

@@ -1,18 +1,15 @@
-import { withMergedProps } from '@payloadcms/ui/shared';
-import { MetaTitleComponent } from './MetaTitleComponent.js';
 export const MetaTitleField = ({ hasGenerateFn = false, overrides })=>{
     return {
         name: 'title',
         type: 'text',
         admin: {
             components: {
-                Field: withMergedProps({
-                    Component: MetaTitleComponent,
-                    sanitizeServerOnlyProps: true,
-                    toMergeIntoProps: {
+                Field: {
+                    clientProps: {
                         hasGenerateTitleFn: hasGenerateFn
-                    }
-                })
+                    },
+                    path: '@payloadcms/plugin-seo/client#MetaTitleComponent'
+                }
             }
         },
         localized: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaTitle/index.ts"],"sourcesContent":["import type { TextField } from 'payload'\n\nimport { withMergedProps } from '@payloadcms/ui/shared'\n\nimport { MetaTitleComponent } from './MetaTitleComponent.js'\n\ninterface FieldFunctionProps {\n  /**\n   * Tell the component if the generate function is available as configured in the plugin config\n   */\n  hasGenerateFn?: boolean\n  overrides?: Partial<TextField>\n}\n\ntype FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextField\n\nexport const MetaTitleField: FieldFunction = ({ hasGenerateFn = false, overrides }) => {\n  return {\n    name: 'title',\n    type: 'text',\n    admin: {\n      components: {\n        Field: withMergedProps({\n          Component: MetaTitleComponent,\n          sanitizeServerOnlyProps: true,\n          toMergeIntoProps: {\n            hasGenerateTitleFn: hasGenerateFn,\n          },\n        }),\n      },\n    },\n    localized: true,\n    ...((overrides as unknown as TextField) ?? {}),\n  }\n}\n"],"names":["withMergedProps","MetaTitleComponent","MetaTitleField","hasGenerateFn","overrides","name","type","admin","components","Field","Component","sanitizeServerOnlyProps","toMergeIntoProps","hasGenerateTitleFn","localized"],"mappings":"AAEA,SAASA,eAAe,QAAQ,wBAAuB;AAEvD,SAASC,kBAAkB,QAAQ,0BAAyB;AAY5D,OAAO,MAAMC,iBAAgC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAE;IAChF,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAOT,gBAAgB;oBACrBU,WAAWT;oBACXU,yBAAyB;oBACzBC,kBAAkB;wBAChBC,oBAAoBV;oBACtB;gBACF;YACF;QACF;QACAW,WAAW;QACX,GAAI,AAACV,aAAsC,CAAC,CAAC;IAC/C;AACF,EAAC"}
+{"version":3,"sources":["../../../src/fields/MetaTitle/index.ts"],"sourcesContent":["import type { TextField } from 'payload'\n\ninterface FieldFunctionProps {\n  /**\n   * Tell the component if the generate function is available as configured in the plugin config\n   */\n  hasGenerateFn?: boolean\n  overrides?: Partial<TextField>\n}\n\ntype FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextField\n\nexport const MetaTitleField: FieldFunction = ({ hasGenerateFn = false, overrides }) => {\n  return {\n    name: 'title',\n    type: 'text',\n    admin: {\n      components: {\n        Field: {\n          clientProps: {\n            hasGenerateTitleFn: hasGenerateFn,\n          },\n          path: '@payloadcms/plugin-seo/client#MetaTitleComponent',\n        },\n      },\n    },\n    localized: true,\n    ...((overrides as unknown as TextField) ?? {}),\n  }\n}\n"],"names":["MetaTitleField","hasGenerateFn","overrides","name","type","admin","components","Field","clientProps","hasGenerateTitleFn","path","localized"],"mappings":"AAYA,OAAO,MAAMA,iBAAgC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAE;IAChF,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXC,oBAAoBR;oBACtB;oBACAS,MAAM;gBACR;YACF;QACF;QACAC,WAAW;QACX,GAAI,AAACT,aAAsC,CAAC,CAAC;IAC/C;AACF,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,CA4DrD,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,7 +14,10 @@ export const OverviewComponent = ({ descriptionPath: descriptionPathFromContext,
     const [titleIsValid, setTitleIsValid] = useState();
     const [descIsValid, setDescIsValid] = useState();
     const [imageIsValid, setImageIsValid] = useState();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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;
@@ -27,8 +29,12 @@ export const OverviewComponent = ({ descriptionPath: descriptionPathFromContext,
         getFields
     ]);
     useEffect(()=>{
-        if (typeof metaTitle === 'string') setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle);
-        if (typeof metaDesc === 'string') setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc);
+        if (typeof metaTitle === 'string') {
+            setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle);
+        }
+        if (typeof metaDesc === 'string') {
+            setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc);
+        }
         setImageIsValid(Boolean(metaImage));
     }, [
         metaTitle,

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  // eslint-disable-next-line @typescript-eslint/no-unused-vars\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    if (typeof metaDesc === 'string')\n      setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\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,6DAA6D;IAC7D,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,UACvBG,gBAAgBH,UAAUW,MAAM,IAAIvB,YAAYY,UAAUW,MAAM,IAAIxB;QACtE,IAAI,OAAOW,aAAa,UACtBO,eAAeP,SAASa,MAAM,IAAI1B,WAAWa,SAASa,MAAM,IAAI5B;QAClEwB,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;AAMtC,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,aAyB3B,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,20 +1,19 @@
-import { withMergedProps } from '@payloadcms/ui/shared';
-import { OverviewComponent } from './OverviewComponent.js';
-export const OverviewField = ({ descriptionPath, imagePath, overrides, titlePath })=>{
+export const OverviewField = ({ descriptionOverrides, descriptionPath, imagePath, overrides, titleOverrides, titlePath })=>{
     return {
         name: 'overview',
         type: 'ui',
         admin: {
             components: {
-                Field: withMergedProps({
-                    Component: OverviewComponent,
-                    sanitizeServerOnlyProps: true,
-                    toMergeIntoProps: {
+                Field: {
+                    clientProps: {
+                        descriptionOverrides,
                         descriptionPath,
                         imagePath,
+                        titleOverrides,
                         titlePath
-                    }
-                })
+                    },
+                    path: '@payloadcms/plugin-seo/client#OverviewComponent'
+                }
             }
         },
         label: 'Overview',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Overview/index.tsx"],"sourcesContent":["import type { UIField } from 'payload'\n\nimport { withMergedProps } from '@payloadcms/ui/shared'\n\nimport { OverviewComponent } from './OverviewComponent.js'\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: withMergedProps({\n          Component: OverviewComponent,\n          sanitizeServerOnlyProps: true,\n          toMergeIntoProps: {\n            descriptionPath,\n            imagePath,\n            titlePath,\n          },\n        }),\n      },\n    },\n    label: 'Overview',\n    ...((overrides as unknown as UIField) ?? {}),\n  }\n}\n"],"names":["withMergedProps","OverviewComponent","OverviewField","descriptionPath","imagePath","overrides","titlePath","name","type","admin","components","Field","Component","sanitizeServerOnlyProps","toMergeIntoProps","label"],"mappings":"AAEA,SAASA,eAAe,QAAQ,wBAAuB;AAEvD,SAASC,iBAAiB,QAAQ,yBAAwB;AA0B1D,OAAO,MAAMC,gBAA+B,CAAC,EAC3CC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAOX,gBAAgB;oBACrBY,WAAWX;oBACXY,yBAAyB;oBACzBC,kBAAkB;wBAChBX;wBACAC;wBACAE;oBACF;gBACF;YACF;QACF;QACAS,OAAO;QACP,GAAI,AAACV,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

@@ -1,9 +1,9 @@
 import type { UIField } from 'payload';
 import React from 'react';
 type PreviewProps = {
-    descriptionPath?: string;
-    hasGenerateURLFn: boolean;
-    titlePath?: string;
+    readonly descriptionPath?: string;
+    readonly hasGenerateURLFn: boolean;
+    readonly titlePath?: string;
 } & UIField;
 export declare const PreviewComponent: React.FC<PreviewProps>;
 export {};

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,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,OAAO,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuGnD,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,9 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAllFormFields, useDocumentInfo, useForm, useLocale, useTranslation } from '@payloadcms/ui';
+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 = ({ descriptionPath: descriptionPathFromContext, hasGenerateURLFn, titlePath: titlePathFromContext })=>{
+export const PreviewComponent = (props)=>{
+    const { descriptionPath: descriptionPathFromContext, hasGenerateURLFn, titlePath: titlePathFromContext } = props;
     const { t } = useTranslation();
+    const { config: { routes: { api }, serverURL } } = useConfig();
     const locale = useLocale();
     const [fields] = useAllFormFields();
     const { getData } = useForm();
@@ -13,14 +16,21 @@ export const PreviewComponent = ({ descriptionPath: descriptionPathFromContext,
     const { [descriptionPath]: { value: metaDescription } = {}, [titlePath]: { value: metaTitle } = {} } = fields;
     const [href, setHref] = useState();
     useEffect(()=>{
+        const endpoint = `${serverURL}${api}/plugin-seo/generate-url`;
         const getHref = async ()=>{
-            const genURLResponse = await fetch('/api/plugin-seo/generate-url', {
+            const genURLResponse = await fetch(endpoint, {
                 body: JSON.stringify({
-                    ...docInfo,
-                    doc: {
-                        ...getData()
-                    },
-                    locale: typeof locale === 'object' ? locale?.code : locale
+                    id: docInfo.id,
+                    collectionSlug: docInfo.collectionSlug,
+                    doc: getData(),
+                    docPermissions: docInfo.docPermissions,
+                    globalSlug: docInfo.globalSlug,
+                    hasPublishPermission: docInfo.hasPublishPermission,
+                    hasSavePermission: docInfo.hasSavePermission,
+                    initialData: docInfo.initialData,
+                    initialState: reduceToSerializableFields(docInfo.initialState),
+                    locale: typeof locale === 'object' ? locale?.code : locale,
+                    title: docInfo.title
                 }),
                 credentials: 'include',
                 headers: {
@@ -40,9 +50,14 @@ export const PreviewComponent = ({ descriptionPath: descriptionPathFromContext,
         locale,
         docInfo,
         hasGenerateURLFn,
-        getData
+        getData,
+        serverURL,
+        api
     ]);
     return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            marginBottom: '20px'
+        },
         children: [
             /*#__PURE__*/ _jsx("div", {
                 children: t('plugin-seo:preview')

package/dist/fields/Preview/PreviewComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport {\n  useAllFormFields,\n  useDocumentInfo,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { get } from 'http'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateURL } from '../../types.js'\n\ntype PreviewProps = {\n  descriptionPath?: string\n  hasGenerateURLFn: boolean\n  titlePath?: string\n} & UIField\n\nexport const PreviewComponent: React.FC<PreviewProps> = ({\n  descriptionPath: descriptionPathFromContext,\n  hasGenerateURLFn,\n  titlePath: titlePathFromContext,\n}) => {\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const [fields] = useAllFormFields()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n\n  const {\n    [descriptionPath]: { value: metaDescription } = {} as FormField,\n    [titlePath]: { value: metaTitle } = {} as FormField,\n  } = fields\n\n  const [href, setHref] = useState<string>()\n\n  useEffect(() => {\n    const getHref = async () => {\n      const genURLResponse = await fetch('/api/plugin-seo/generate-url', {\n        body: JSON.stringify({\n          ...docInfo,\n          doc: { ...getData() },\n          locale: typeof locale === 'object' ? locale?.code : locale,\n        } satisfies Parameters<GenerateURL>[0]),\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      const { result: newHref } = await genURLResponse.json()\n\n      setHref(newHref)\n    }\n\n    if (hasGenerateURLFn && !href) {\n      void getHref()\n    }\n  }, [fields, href, locale, docInfo, hasGenerateURLFn, getData])\n\n  return (\n    <div>\n      <div>{t('plugin-seo:preview')}</div>\n      <div\n        style={{\n          color: '#9A9A9A',\n          marginBottom: '5px',\n        }}\n      >\n        {t('plugin-seo:previewDescription')}\n      </div>\n      <div\n        style={{\n          background: 'var(--theme-elevation-50)',\n          borderRadius: '5px',\n          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n          maxWidth: '600px',\n          padding: '20px',\n          pointerEvents: 'none',\n          width: '100%',\n        }}\n      >\n        <div>\n          <a\n            href={href}\n            style={{\n              textDecoration: 'none',\n            }}\n          >\n            {href || 'https://...'}\n          </a>\n        </div>\n        <h4\n          style={{\n            margin: 0,\n          }}\n        >\n          <a\n            href=\"/\"\n            style={{\n              textDecoration: 'none',\n            }}\n          >\n            {metaTitle as string}\n          </a>\n        </h4>\n        <p\n          style={{\n            margin: 0,\n          }}\n        >\n          {metaDescription as string}\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useDocumentInfo","useForm","useLocale","useTranslation","React","useEffect","useState","PreviewComponent","descriptionPath","descriptionPathFromContext","hasGenerateURLFn","titlePath","titlePathFromContext","t","locale","fields","getData","docInfo","value","metaDescription","metaTitle","href","setHref","getHref","genURLResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","newHref","json","div","style","color","marginBottom","background","borderRadius","boxShadow","maxWidth","padding","pointerEvents","width","a","textDecoration","h4","margin","p"],"mappings":"AAAA;;AAIA,SACEA,gBAAgB,EAChBC,eAAe,EACfC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AAEvB,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAWlD,OAAO,MAAMC,mBAA2C,CAAC,EACvDC,iBAAiBC,0BAA0B,EAC3CC,gBAAgB,EAChBC,WAAWC,oBAAoB,EAChC;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGV;IAEd,MAAMW,SAASZ;IACf,MAAM,CAACa,OAAO,GAAGhB;IACjB,MAAM,EAAEiB,OAAO,EAAE,GAAGf;IACpB,MAAMgB,UAAUjB;IAEhB,MAAMQ,kBAAkBC,8BAA8B;IACtD,MAAME,YAAYC,wBAAwB;IAE1C,MAAM,EACJ,CAACJ,gBAAgB,EAAE,EAAEU,OAAOC,eAAe,EAAE,GAAG,CAAC,CAAc,EAC/D,CAACR,UAAU,EAAE,EAAEO,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,GAAGL;IAEJ,MAAM,CAACM,MAAMC,QAAQ,GAAGhB;IAExBD,UAAU;QACR,MAAMkB,UAAU;YACd,MAAMC,iBAAiB,MAAMC,MAAM,gCAAgC;gBACjEC,MAAMC,KAAKC,SAAS,CAAC;oBACnB,GAAGX,OAAO;oBACVY,KAAK;wBAAE,GAAGb,SAAS;oBAAC;oBACpBF,QAAQ,OAAOA,WAAW,WAAWA,QAAQgB,OAAOhB;gBACtD;gBACAiB,aAAa;gBACbC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAM,EAAEC,QAAQC,OAAO,EAAE,GAAG,MAAMX,eAAeY,IAAI;YAErDd,QAAQa;QACV;QAEA,IAAIzB,oBAAoB,CAACW,MAAM;YAC7B,KAAKE;QACP;IACF,GAAG;QAACR;QAAQM;QAAMP;QAAQG;QAASP;QAAkBM;KAAQ;IAE7D,qBACE,MAACqB;;0BACC,KAACA;0BAAKxB,EAAE;;0BACR,KAACwB;gBACCC,OAAO;oBACLC,OAAO;oBACPC,cAAc;gBAChB;0BAEC3B,EAAE;;0BAEL,MAACwB;gBACCC,OAAO;oBACLG,YAAY;oBACZC,cAAc;oBACdC,WAAW;oBACXC,UAAU;oBACVC,SAAS;oBACTC,eAAe;oBACfC,OAAO;gBACT;;kCAEA,KAACV;kCACC,cAAA,KAACW;4BACC3B,MAAMA;4BACNiB,OAAO;gCACLW,gBAAgB;4BAClB;sCAEC5B,QAAQ;;;kCAGb,KAAC6B;wBACCZ,OAAO;4BACLa,QAAQ;wBACV;kCAEA,cAAA,KAACH;4BACC3B,MAAK;4BACLiB,OAAO;gCACLW,gBAAgB;4BAClB;sCAEC7B;;;kCAGL,KAACgC;wBACCd,OAAO;4BACLa,QAAQ;wBACV;kCAEChC;;;;;;AAKX,EAAC"}
+{"version":3,"sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport {\n  useAllFormFields,\n  useConfig,\n  useDocumentInfo,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateURL } from '../../types.js'\n\ntype PreviewProps = {\n  readonly descriptionPath?: string\n  readonly hasGenerateURLFn: boolean\n  readonly titlePath?: string\n} & UIField\n\nexport const PreviewComponent: React.FC<PreviewProps> = (props) => {\n  const {\n    descriptionPath: descriptionPathFromContext,\n    hasGenerateURLFn,\n    titlePath: titlePathFromContext,\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 locale = useLocale()\n  const [fields] = useAllFormFields()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n\n  const {\n    [descriptionPath]: { value: metaDescription } = {} as FormField,\n    [titlePath]: { value: metaTitle } = {} as FormField,\n  } = fields\n\n  const [href, setHref] = useState<string>()\n\n  useEffect(() => {\n    const endpoint = `${serverURL}${api}/plugin-seo/generate-url`\n\n    const getHref = async () => {\n      const genURLResponse = 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<GenerateURL>[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: newHref } = await genURLResponse.json()\n\n      setHref(newHref)\n    }\n\n    if (hasGenerateURLFn && !href) {\n      void getHref()\n    }\n  }, [fields, href, locale, docInfo, hasGenerateURLFn, getData, serverURL, api])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>{t('plugin-seo:preview')}</div>\n      <div\n        style={{\n          color: '#9A9A9A',\n          marginBottom: '5px',\n        }}\n      >\n        {t('plugin-seo:previewDescription')}\n      </div>\n      <div\n        style={{\n          background: 'var(--theme-elevation-50)',\n          borderRadius: '5px',\n          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n          maxWidth: '600px',\n          padding: '20px',\n          pointerEvents: 'none',\n          width: '100%',\n        }}\n      >\n        <div>\n          <a\n            href={href}\n            style={{\n              textDecoration: 'none',\n            }}\n          >\n            {href || 'https://...'}\n          </a>\n        </div>\n        <h4\n          style={{\n            margin: 0,\n          }}\n        >\n          <a\n            href=\"/\"\n            style={{\n              textDecoration: 'none',\n            }}\n          >\n            {metaTitle as string}\n          </a>\n        </h4>\n        <p\n          style={{\n            margin: 0,\n          }}\n        >\n          {metaDescription as string}\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useConfig","useDocumentInfo","useForm","useLocale","useTranslation","reduceToSerializableFields","React","useEffect","useState","PreviewComponent","props","descriptionPath","descriptionPathFromContext","hasGenerateURLFn","titlePath","titlePathFromContext","t","config","routes","api","serverURL","locale","fields","getData","docInfo","value","metaDescription","metaTitle","href","setHref","endpoint","getHref","genURLResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","result","newHref","json","div","style","marginBottom","color","background","borderRadius","boxShadow","maxWidth","padding","pointerEvents","width","a","textDecoration","h4","margin","p"],"mappings":"AAAA;;AAIA,SACEA,gBAAgB,EAChBC,SAAS,EACTC,eAAe,EACfC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,0BAA0B,QAAQ,wBAAuB;AAClE,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAWlD,OAAO,MAAMC,mBAA2C,CAACC;IACvD,MAAM,EACJC,iBAAiBC,0BAA0B,EAC3CC,gBAAgB,EAChBC,WAAWC,oBAAoB,EAChC,GAAGL;IAEJ,MAAM,EAAEM,CAAC,EAAE,GAAGZ;IAEd,MAAM,EACJa,QAAQ,EACNC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,EACF,GAAGpB;IAEJ,MAAMqB,SAASlB;IACf,MAAM,CAACmB,OAAO,GAAGvB;IACjB,MAAM,EAAEwB,OAAO,EAAE,GAAGrB;IACpB,MAAMsB,UAAUvB;IAEhB,MAAMU,kBAAkBC,8BAA8B;IACtD,MAAME,YAAYC,wBAAwB;IAE1C,MAAM,EACJ,CAACJ,gBAAgB,EAAE,EAAEc,OAAOC,eAAe,EAAE,GAAG,CAAC,CAAc,EAC/D,CAACZ,UAAU,EAAE,EAAEW,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,GAAGL;IAEJ,MAAM,CAACM,MAAMC,QAAQ,GAAGrB;IAExBD,UAAU;QACR,MAAMuB,WAAW,CAAC,EAAEV,UAAU,EAAED,IAAI,wBAAwB,CAAC;QAE7D,MAAMY,UAAU;YACd,MAAMC,iBAAiB,MAAMC,MAAMH,UAAU;gBAC3CI,MAAMC,KAAKC,SAAS,CAAC;oBACnBC,IAAIb,QAAQa,EAAE;oBACdC,gBAAgBd,QAAQc,cAAc;oBACtCC,KAAKhB;oBACLiB,gBAAgBhB,QAAQgB,cAAc;oBACtCC,YAAYjB,QAAQiB,UAAU;oBAC9BC,sBAAsBlB,QAAQkB,oBAAoB;oBAClDC,mBAAmBnB,QAAQmB,iBAAiB;oBAC5CC,aAAapB,QAAQoB,WAAW;oBAChCC,cAAcxC,2BAA2BmB,QAAQqB,YAAY;oBAC7DxB,QAAQ,OAAOA,WAAW,WAAWA,QAAQyB,OAAOzB;oBACpD0B,OAAOvB,QAAQuB,KAAK;gBACtB;gBAIAC,aAAa;gBACbC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAM,EAAEC,QAAQC,OAAO,EAAE,GAAG,MAAMpB,eAAeqB,IAAI;YAErDxB,QAAQuB;QACV;QAEA,IAAIvC,oBAAoB,CAACe,MAAM;YAC7B,KAAKG;QACP;IACF,GAAG;QAACT;QAAQM;QAAMP;QAAQG;QAASX;QAAkBU;QAASH;QAAWD;KAAI;IAE7E,qBACE,MAACmC;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,KAACF;0BAAKtC,EAAE;;0BACR,KAACsC;gBACCC,OAAO;oBACLE,OAAO;oBACPD,cAAc;gBAChB;0BAECxC,EAAE;;0BAEL,MAACsC;gBACCC,OAAO;oBACLG,YAAY;oBACZC,cAAc;oBACdC,WAAW;oBACXC,UAAU;oBACVC,SAAS;oBACTC,eAAe;oBACfC,OAAO;gBACT;;kCAEA,KAACV;kCACC,cAAA,KAACW;4BACCrC,MAAMA;4BACN2B,OAAO;gCACLW,gBAAgB;4BAClB;sCAECtC,QAAQ;;;kCAGb,KAACuC;wBACCZ,OAAO;4BACLa,QAAQ;wBACV;kCAEA,cAAA,KAACH;4BACCrC,MAAK;4BACL2B,OAAO;gCACLW,gBAAgB;4BAClB;sCAECvC;;;kCAGL,KAAC0C;wBACCd,OAAO;4BACLa,QAAQ;wBACV;kCAEC1C;;;;;;AAKX,EAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAMtC,UAAU,kBAAkB;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,OAAO,CAAA;AAElF,eAAO,MAAM,YAAY,EAAE,aAyB1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/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;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,OAAO,CAAA;AAElF,eAAO,MAAM,YAAY,EAAE,aAwB1B,CAAA"}

package/dist/fields/Preview/index.js

@@ -1,20 +1,17 @@
-import { withMergedProps } from '@payloadcms/ui/shared';
-import { PreviewComponent } from './PreviewComponent.js';
 export const PreviewField = ({ descriptionPath, hasGenerateFn = false, overrides, titlePath })=>{
     return {
         name: 'preview',
         type: 'ui',
         admin: {
             components: {
-                Field: withMergedProps({
-                    Component: PreviewComponent,
-                    sanitizeServerOnlyProps: true,
-                    toMergeIntoProps: {
+                Field: {
+                    clientProps: {
                         descriptionPath,
                         hasGenerateURLFn: hasGenerateFn,
                         titlePath
-                    }
-                })
+                    },
+                    path: '@payloadcms/plugin-seo/client#PreviewComponent'
+                }
             }
         },
         label: 'Preview',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Preview/index.tsx"],"sourcesContent":["import type { UIField } from 'payload'\n\nimport { withMergedProps } from '@payloadcms/ui/shared'\n\nimport { PreviewComponent } from './PreviewComponent.js'\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   * Tell the component if the generate function is available as configured in the plugin config\n   */\n  hasGenerateFn?: boolean\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 = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UIField\n\nexport const PreviewField: FieldFunction = ({\n  descriptionPath,\n  hasGenerateFn = false,\n  overrides,\n  titlePath,\n}) => {\n  return {\n    name: 'preview',\n    type: 'ui',\n    admin: {\n      components: {\n        Field: withMergedProps({\n          Component: PreviewComponent,\n          sanitizeServerOnlyProps: true,\n          toMergeIntoProps: {\n            descriptionPath,\n            hasGenerateURLFn: hasGenerateFn,\n            titlePath,\n          },\n        }),\n      },\n    },\n    label: 'Preview',\n    ...((overrides as unknown as UIField) ?? {}),\n  }\n}\n"],"names":["withMergedProps","PreviewComponent","PreviewField","descriptionPath","hasGenerateFn","overrides","titlePath","name","type","admin","components","Field","Component","sanitizeServerOnlyProps","toMergeIntoProps","hasGenerateURLFn","label"],"mappings":"AAEA,SAASA,eAAe,QAAQ,wBAAuB;AAEvD,SAASC,gBAAgB,QAAQ,wBAAuB;AAwBxD,OAAO,MAAMC,eAA8B,CAAC,EAC1CC,eAAe,EACfC,gBAAgB,KAAK,EACrBC,SAAS,EACTC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAOX,gBAAgB;oBACrBY,WAAWX;oBACXY,yBAAyB;oBACzBC,kBAAkB;wBAChBX;wBACAY,kBAAkBX;wBAClBE;oBACF;gBACF;YACF;QACF;QACAU,OAAO;QACP,GAAI,AAACX,aAAoC,CAAC,CAAC;IAC7C;AACF,EAAC"}
+{"version":3,"sources":["../../../src/fields/Preview/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   * Tell the component if the generate function is available as configured in the plugin config\n   */\n  hasGenerateFn?: boolean\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 = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UIField\n\nexport const PreviewField: FieldFunction = ({\n  descriptionPath,\n  hasGenerateFn = false,\n  overrides,\n  titlePath,\n}) => {\n  return {\n    name: 'preview',\n    type: 'ui',\n    admin: {\n      components: {\n        Field: {\n          clientProps: {\n            descriptionPath,\n            hasGenerateURLFn: hasGenerateFn,\n            titlePath,\n          },\n          path: '@payloadcms/plugin-seo/client#PreviewComponent',\n        },\n      },\n    },\n    label: 'Preview',\n    ...((overrides as unknown as UIField) ?? {}),\n  }\n}\n"],"names":["PreviewField","descriptionPath","hasGenerateFn","overrides","titlePath","name","type","admin","components","Field","clientProps","hasGenerateURLFn","path","label"],"mappings":"AAwBA,OAAO,MAAMA,eAA8B,CAAC,EAC1CC,eAAe,EACfC,gBAAgB,KAAK,EACrBC,SAAS,EACTC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXT;wBACAU,kBAAkBT;wBAClBE;oBACF;oBACAQ,MAAM;gBACR;YACF;QACF;QACAC,OAAO;QACP,GAAI,AAACV,aAAoC,CAAC,CAAC;IAC7C;AACF,EAAC"}

package/dist/fields/index.scss

@@ -1,5 +1,7 @@
-.plugin-seo__field {
-  .field-label {
-    display: inline !important;
+@layer payload-default {
+  .plugin-seo__field {
+    .field-label {
+      display: inline !important;
+    }
   }
 }

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAA2C,MAAM,SAAS,CAAA;AAM9E,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,iBACL,eAAe,cACrB,MAAM,KAAG,MAyRjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAgC,MAAM,SAAS,CAAA;AAInE,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,iBACL,eAAe,cACrB,MAAM,KAAG,MAqRjB,CAAA"}