@payloadcms/plugin-seo 3.0.0-canary.f1db24e → 3.0.0-canary.f1f97ff
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/defaults.js.map +1 -1
- package/dist/exports/fields.d.ts +6 -0
- package/dist/exports/fields.d.ts.map +1 -0
- package/dist/exports/fields.js +7 -0
- package/dist/exports/fields.js.map +1 -0
- package/dist/exports/types.js.map +1 -1
- package/dist/fields/MetaDescription/MetaDescriptionComponent.d.ts +9 -0
- package/dist/fields/MetaDescription/MetaDescriptionComponent.d.ts.map +1 -0
- package/dist/fields/{MetaDescription.js → MetaDescription/MetaDescriptionComponent.js} +15 -20
- package/dist/fields/MetaDescription/MetaDescriptionComponent.js.map +1 -0
- package/dist/fields/MetaDescription/index.d.ts +12 -0
- package/dist/fields/MetaDescription/index.d.ts.map +1 -0
- package/dist/fields/MetaDescription/index.js +23 -0
- package/dist/fields/MetaDescription/index.js.map +1 -0
- package/dist/fields/MetaImage/MetaImageComponent.d.ts +8 -0
- package/dist/fields/MetaImage/MetaImageComponent.d.ts.map +1 -0
- package/dist/fields/{MetaImage.js → MetaImage/MetaImageComponent.js} +17 -18
- package/dist/fields/MetaImage/MetaImageComponent.js.map +1 -0
- package/dist/fields/MetaImage/index.d.ts +13 -0
- package/dist/fields/MetaImage/index.d.ts.map +1 -0
- package/dist/fields/MetaImage/index.js +26 -0
- package/dist/fields/MetaImage/index.js.map +1 -0
- package/dist/fields/MetaTitle/MetaTitleComponent.d.ts +9 -0
- package/dist/fields/MetaTitle/MetaTitleComponent.d.ts.map +1 -0
- package/dist/fields/{MetaTitle.js → MetaTitle/MetaTitleComponent.js} +16 -21
- package/dist/fields/MetaTitle/MetaTitleComponent.js.map +1 -0
- package/dist/fields/MetaTitle/index.d.ts +12 -0
- package/dist/fields/MetaTitle/index.d.ts.map +1 -0
- package/dist/fields/MetaTitle/index.js +23 -0
- package/dist/fields/MetaTitle/index.js.map +1 -0
- package/dist/fields/Overview/OverviewComponent.d.ts +10 -0
- package/dist/fields/Overview/OverviewComponent.d.ts.map +1 -0
- package/dist/{ui/Overview.js → fields/Overview/OverviewComponent.js} +8 -6
- package/dist/fields/Overview/OverviewComponent.js.map +1 -0
- package/dist/fields/Overview/index.d.ts +26 -0
- package/dist/fields/Overview/index.d.ts.map +1 -0
- package/dist/fields/Overview/index.js +25 -0
- package/dist/fields/Overview/index.js.map +1 -0
- package/dist/fields/Preview/PreviewComponent.d.ts +10 -0
- package/dist/fields/Preview/PreviewComponent.d.ts.map +1 -0
- package/dist/{ui/Preview.js → fields/Preview/PreviewComponent.js} +10 -9
- package/dist/fields/Preview/PreviewComponent.js.map +1 -0
- package/dist/fields/Preview/index.d.ts +24 -0
- package/dist/fields/Preview/index.d.ts.map +1 -0
- package/dist/fields/Preview/index.js +25 -0
- package/dist/fields/Preview/index.js.map +1 -0
- package/dist/fields/index.scss +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +22 -34
- package/dist/index.js.map +1 -1
- package/dist/translations/index.d.ts +22 -0
- package/dist/translations/index.d.ts.map +1 -1
- package/dist/translations/index.js +22 -0
- package/dist/translations/index.js.map +1 -1
- package/dist/translations/ru.json +22 -0
- package/dist/types.d.ts +10 -10
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/ui/LengthIndicator.js +1 -1
- package/dist/ui/LengthIndicator.js.map +1 -1
- package/dist/ui/Pill.js.map +1 -1
- package/package.json +28 -23
- package/dist/fields/MetaDescription.d.ts +0 -9
- package/dist/fields/MetaDescription.d.ts.map +0 -1
- package/dist/fields/MetaDescription.js.map +0 -1
- package/dist/fields/MetaImage.d.ts +0 -8
- package/dist/fields/MetaImage.d.ts.map +0 -1
- package/dist/fields/MetaImage.js.map +0 -1
- package/dist/fields/MetaTitle.d.ts +0 -9
- package/dist/fields/MetaTitle.d.ts.map +0 -1
- package/dist/fields/MetaTitle.js.map +0 -1
- package/dist/ui/Overview.d.ts +0 -3
- package/dist/ui/Overview.d.ts.map +0 -1
- package/dist/ui/Overview.js.map +0 -1
- package/dist/ui/Preview.d.ts +0 -8
- package/dist/ui/Preview.d.ts.map +0 -1
- package/dist/ui/Preview.js.map +0 -1
package/dist/defaults.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/defaults.ts"],"sourcesContent":["export const defaults = {\n description: {\n maxLength: 150,\n minLength: 100,\n },\n title: {\n maxLength: 60,\n minLength: 50,\n },\n}\n"],"names":["defaults","description","maxLength","minLength","title"],"
|
|
1
|
+
{"version":3,"sources":["../src/defaults.ts"],"sourcesContent":["export const defaults = {\n description: {\n maxLength: 150,\n minLength: 100,\n },\n title: {\n maxLength: 60,\n minLength: 50,\n },\n}\n"],"names":["defaults","description","maxLength","minLength","title"],"mappings":"AAAA,OAAO,MAAMA,WAAW;IACtBC,aAAa;QACXC,WAAW;QACXC,WAAW;IACb;IACAC,OAAO;QACLF,WAAW;QACXC,WAAW;IACb;AACF,EAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { MetaDescriptionField } from '../fields/MetaDescription/index.js';
|
|
2
|
+
export { MetaImageField } from '../fields/MetaImage/index.js';
|
|
3
|
+
export { MetaTitleField } from '../fields/MetaTitle/index.js';
|
|
4
|
+
export { OverviewField } from '../fields/Overview/index.js';
|
|
5
|
+
export { PreviewField } from '../fields/Preview/index.js';
|
|
6
|
+
//# sourceMappingURL=fields.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../src/exports/fields.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { MetaDescriptionField } from '../fields/MetaDescription/index.js';
|
|
2
|
+
export { MetaImageField } from '../fields/MetaImage/index.js';
|
|
3
|
+
export { MetaTitleField } from '../fields/MetaTitle/index.js';
|
|
4
|
+
export { OverviewField } from '../fields/Overview/index.js';
|
|
5
|
+
export { PreviewField } from '../fields/Preview/index.js';
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=fields.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/exports/fields.ts"],"sourcesContent":["export { MetaDescriptionField } from '../fields/MetaDescription/index.js'\nexport { MetaImageField } from '../fields/MetaImage/index.js'\nexport { MetaTitleField } from '../fields/MetaTitle/index.js'\nexport { OverviewField } from '../fields/Overview/index.js'\nexport { PreviewField } from '../fields/Preview/index.js'\n"],"names":["MetaDescriptionField","MetaImageField","MetaTitleField","OverviewField","PreviewField"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,qCAAoC;AACzE,SAASC,cAAc,QAAQ,+BAA8B;AAC7D,SAASC,cAAc,QAAQ,+BAA8B;AAC7D,SAASC,aAAa,QAAQ,8BAA6B;AAC3D,SAASC,YAAY,QAAQ,6BAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/exports/types.ts"],"sourcesContent":["export type {\n GenerateDescription,\n GenerateImage,\n GenerateTitle,\n GenerateURL,\n Meta,\n SEOPluginConfig,\n} from '../types.js'\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../../src/exports/types.ts"],"sourcesContent":["export type {\n GenerateDescription,\n GenerateImage,\n GenerateTitle,\n GenerateURL,\n Meta,\n SEOPluginConfig,\n} from '../types.js'\n"],"names":[],"mappings":"AAAA,WAOoB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { FormFieldBase } from 'payload';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
type MetaDescriptionProps = {
|
|
4
|
+
hasGenerateDescriptionFn: boolean;
|
|
5
|
+
path: string;
|
|
6
|
+
} & FormFieldBase;
|
|
7
|
+
export declare const MetaDescriptionComponent: React.FC<MetaDescriptionProps>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=MetaDescriptionComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MetaDescriptionComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAY5C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,KAAK,oBAAoB,GAAG;IAC1B,wBAAwB,EAAE,OAAO,CAAA;IACjC,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,aAAa,CAAA;AAEjB,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsHnE,CAAA"}
|
|
@@ -1,26 +1,19 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { TextareaInput } from '@payloadcms/ui
|
|
4
|
-
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
|
|
5
|
-
import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
|
|
6
|
-
import { useAllFormFields } from '@payloadcms/ui/forms/Form';
|
|
7
|
-
import { useField } from '@payloadcms/ui/forms/useField';
|
|
8
|
-
import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
|
|
9
|
-
import { useLocale } from '@payloadcms/ui/providers/Locale';
|
|
10
|
-
import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
3
|
+
import { FieldLabel, TextareaInput, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
|
|
11
4
|
import React, { useCallback } from 'react';
|
|
12
|
-
import { defaults } from '
|
|
13
|
-
import { LengthIndicator } from '
|
|
5
|
+
import { defaults } from '../../defaults.js';
|
|
6
|
+
import { LengthIndicator } from '../../ui/LengthIndicator.js';
|
|
14
7
|
const { maxLength, minLength } = defaults.description;
|
|
15
|
-
export const
|
|
16
|
-
const { CustomLabel, hasGenerateDescriptionFn, label, labelProps,
|
|
8
|
+
export const MetaDescriptionComponent = (props)=>{
|
|
9
|
+
const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, required } = props;
|
|
17
10
|
const { path: pathFromContext } = useFieldProps();
|
|
18
11
|
const { t } = useTranslation();
|
|
19
12
|
const locale = useLocale();
|
|
20
|
-
const
|
|
13
|
+
const { getData } = useForm();
|
|
21
14
|
const docInfo = useDocumentInfo();
|
|
22
15
|
const field = useField({
|
|
23
|
-
path
|
|
16
|
+
path: pathFromContext
|
|
24
17
|
});
|
|
25
18
|
const { errorMessage, setValue, showError, value } = field;
|
|
26
19
|
const regenerateDescription = useCallback(async ()=>{
|
|
@@ -29,7 +22,7 @@ export const MetaDescription = (props)=>{
|
|
|
29
22
|
body: JSON.stringify({
|
|
30
23
|
...docInfo,
|
|
31
24
|
doc: {
|
|
32
|
-
...
|
|
25
|
+
...getData()
|
|
33
26
|
},
|
|
34
27
|
locale: typeof locale === 'object' ? locale?.code : locale
|
|
35
28
|
}),
|
|
@@ -42,11 +35,11 @@ export const MetaDescription = (props)=>{
|
|
|
42
35
|
const { result: generatedDescription } = await genDescriptionResponse.json();
|
|
43
36
|
setValue(generatedDescription || '');
|
|
44
37
|
}, [
|
|
45
|
-
fields,
|
|
46
|
-
setValue,
|
|
47
38
|
hasGenerateDescriptionFn,
|
|
39
|
+
docInfo,
|
|
40
|
+
getData,
|
|
48
41
|
locale,
|
|
49
|
-
|
|
42
|
+
setValue
|
|
50
43
|
]);
|
|
51
44
|
return /*#__PURE__*/ _jsxs("div", {
|
|
52
45
|
style: {
|
|
@@ -71,7 +64,9 @@ export const MetaDescription = (props)=>{
|
|
|
71
64
|
children: [
|
|
72
65
|
" — ",
|
|
73
66
|
/*#__PURE__*/ _jsx("button", {
|
|
74
|
-
onClick:
|
|
67
|
+
onClick: ()=>{
|
|
68
|
+
void regenerateDescription();
|
|
69
|
+
},
|
|
75
70
|
style: {
|
|
76
71
|
background: 'none',
|
|
77
72
|
backgroundColor: 'transparent',
|
|
@@ -140,4 +135,4 @@ export const MetaDescription = (props)=>{
|
|
|
140
135
|
});
|
|
141
136
|
};
|
|
142
137
|
|
|
143
|
-
//# sourceMappingURL=
|
|
138
|
+
//# sourceMappingURL=MetaDescriptionComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { FormFieldBase } from 'payload'\n\nimport {\n FieldLabel,\n TextareaInput,\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 hasGenerateDescriptionFn: boolean\n path: string\n} & FormFieldBase\n\nexport const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {\n const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, required } = props\n const { path: pathFromContext } = useFieldProps()\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) return\n\n const genDescriptionResponse = await fetch('/api/plugin-seo/generate-description', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...getData() },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateDescription>[0]),\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 }, [hasGenerateDescriptionFn, 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 {hasGenerateDescriptionFn && (\n <React.Fragment>\n — \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 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","TextareaInput","useDocumentInfo","useField","useFieldProps","useForm","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","description","MetaDescriptionComponent","props","CustomLabel","hasGenerateDescriptionFn","label","labelProps","required","path","pathFromContext","t","locale","getData","docInfo","field","errorMessage","setValue","showError","value","regenerateDescription","genDescriptionResponse","fetch","body","JSON","stringify","doc","code","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","CustomError","onChange","alignItems","display","width","text"],"mappings":"AAAA;;AAKA,SACEA,UAAU,EACVC,aAAa,EACbC,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;AAE7D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGH,SAASI,WAAW;AAOrD,OAAO,MAAMC,2BAA2D,CAACC;IACvE,MAAM,EAAEC,WAAW,EAAEC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGL;IAC/E,MAAM,EAAEM,MAAMC,eAAe,EAAE,GAAGnB;IAElC,MAAM,EAAEoB,CAAC,EAAE,GAAGjB;IAEd,MAAMkB,SAASnB;IACf,MAAM,EAAEoB,OAAO,EAAE,GAAGrB;IACpB,MAAMsB,UAAUzB;IAEhB,MAAM0B,QAA2BzB,SAAS;QACxCmB,MAAMC;IACR;IAEA,MAAM,EAAEM,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IAErD,MAAMK,wBAAwBxB,YAAY;QACxC,IAAI,CAACS,0BAA0B;QAE/B,MAAMgB,yBAAyB,MAAMC,MAAM,wCAAwC;YACjFC,MAAMC,KAAKC,SAAS,CAAC;gBACnB,GAAGX,OAAO;gBACVY,KAAK;oBAAE,GAAGb,SAAS;gBAAC;gBACpBD,QAAQ,OAAOA,WAAW,WAAWA,QAAQe,OAAOf;YACtD;YACAgB,aAAa;YACbC,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAEA,MAAM,EAAEC,QAAQC,oBAAoB,EAAE,GAAG,MAAMX,uBAAuBY,IAAI;QAE1EhB,SAASe,wBAAwB;IACnC,GAAG;QAAC3B;QAA0BS;QAASD;QAASD;QAAQK;KAAS;IAEjE,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,0CACC,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,mCAAmC;gCAAEZ;gCAAWC;4BAAU;0CAC7D,KAACkD;gCACCC,MAAK;gCACLC,KAAI;gCACJC,QAAO;0CAEN1C,EAAE;;;;;;0BAIT,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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { TextareaField } from 'payload';
|
|
2
|
+
interface FieldFunctionProps {
|
|
3
|
+
/**
|
|
4
|
+
* Tell the component if the generate function is available as configured in the plugin config
|
|
5
|
+
*/
|
|
6
|
+
hasGenerateFn?: boolean;
|
|
7
|
+
overrides?: Partial<TextareaField>;
|
|
8
|
+
}
|
|
9
|
+
type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextareaField;
|
|
10
|
+
export declare const MetaDescriptionField: FieldFunction;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,UAAU,kBAAkB;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;CACnC;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,aAAa,CAAA;AAExF,eAAO,MAAM,oBAAoB,EAAE,aAkBlC,CAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { withMergedProps } from '@payloadcms/ui/shared';
|
|
2
|
+
import { MetaDescriptionComponent } from './MetaDescriptionComponent.js';
|
|
3
|
+
export const MetaDescriptionField = ({ hasGenerateFn = false, overrides })=>{
|
|
4
|
+
return {
|
|
5
|
+
name: 'description',
|
|
6
|
+
type: 'textarea',
|
|
7
|
+
admin: {
|
|
8
|
+
components: {
|
|
9
|
+
Field: withMergedProps({
|
|
10
|
+
Component: MetaDescriptionComponent,
|
|
11
|
+
sanitizeServerOnlyProps: true,
|
|
12
|
+
toMergeIntoProps: {
|
|
13
|
+
hasGenerateDescriptionFn: hasGenerateFn
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
localized: true,
|
|
19
|
+
...overrides ?? {}
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/MetaDescription/index.ts"],"sourcesContent":["import type { TextareaField } from 'payload'\n\nimport { withMergedProps } from '@payloadcms/ui/shared'\n\nimport { MetaDescriptionComponent } from './MetaDescriptionComponent.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<TextareaField>\n}\n\ntype FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextareaField\n\nexport const MetaDescriptionField: FieldFunction = ({ hasGenerateFn = false, overrides }) => {\n return {\n name: 'description',\n type: 'textarea',\n admin: {\n components: {\n Field: withMergedProps({\n Component: MetaDescriptionComponent,\n sanitizeServerOnlyProps: true,\n toMergeIntoProps: {\n hasGenerateDescriptionFn: hasGenerateFn,\n },\n }),\n },\n },\n localized: true,\n ...((overrides as unknown as TextareaField) ?? {}),\n }\n}\n"],"names":["withMergedProps","MetaDescriptionComponent","MetaDescriptionField","hasGenerateFn","overrides","name","type","admin","components","Field","Component","sanitizeServerOnlyProps","toMergeIntoProps","hasGenerateDescriptionFn","localized"],"mappings":"AAEA,SAASA,eAAe,QAAQ,wBAAuB;AAEvD,SAASC,wBAAwB,QAAQ,gCAA+B;AAYxE,OAAO,MAAMC,uBAAsC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAE;IACtF,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAOT,gBAAgB;oBACrBU,WAAWT;oBACXU,yBAAyB;oBACzBC,kBAAkB;wBAChBC,0BAA0BV;oBAC5B;gBACF;YACF;QACF;QACAW,WAAW;QACX,GAAI,AAACV,aAA0C,CAAC,CAAC;IACnD;AACF,EAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { UploadInputProps } from '@payloadcms/ui';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
type MetaImageProps = {
|
|
4
|
+
hasGenerateImageFn: boolean;
|
|
5
|
+
} & UploadInputProps;
|
|
6
|
+
export declare const MetaImageComponent: React.FC<MetaImageProps>;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=MetaImageComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MetaImageComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAa1E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,KAAK,cAAc,GAAG;IACpB,kBAAkB,EAAE,OAAO,CAAA;CAC5B,GAAG,gBAAgB,CAAA;AAEpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuIvD,CAAA"}
|
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { UploadInput } from '@payloadcms/ui
|
|
4
|
-
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
|
|
5
|
-
import { useAllFormFields } from '@payloadcms/ui/forms/Form';
|
|
6
|
-
import { useField } from '@payloadcms/ui/forms/useField';
|
|
7
|
-
import { useConfig } from '@payloadcms/ui/providers/Config';
|
|
8
|
-
import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
|
|
9
|
-
import { useLocale } from '@payloadcms/ui/providers/Locale';
|
|
10
|
-
import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
3
|
+
import { FieldLabel, UploadInput, useConfig, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
|
|
11
4
|
import React, { useCallback } from 'react';
|
|
12
|
-
import { Pill } from '
|
|
13
|
-
export const
|
|
5
|
+
import { Pill } from '../../ui/Pill.js';
|
|
6
|
+
export const MetaImageComponent = (props)=>{
|
|
14
7
|
const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {};
|
|
15
|
-
const
|
|
8
|
+
const { path: pathFromContext } = useFieldProps();
|
|
9
|
+
const field = useField({
|
|
10
|
+
...props,
|
|
11
|
+
path: pathFromContext
|
|
12
|
+
});
|
|
16
13
|
const { t } = useTranslation();
|
|
17
14
|
const locale = useLocale();
|
|
18
|
-
const
|
|
15
|
+
const { getData } = useForm();
|
|
19
16
|
const docInfo = useDocumentInfo();
|
|
20
17
|
const { errorMessage, setValue, showError, value } = field;
|
|
21
18
|
const regenerateImage = useCallback(async ()=>{
|
|
@@ -24,7 +21,7 @@ export const MetaImage = (props)=>{
|
|
|
24
21
|
body: JSON.stringify({
|
|
25
22
|
...docInfo,
|
|
26
23
|
doc: {
|
|
27
|
-
...
|
|
24
|
+
...getData()
|
|
28
25
|
},
|
|
29
26
|
locale: typeof locale === 'object' ? locale?.code : locale
|
|
30
27
|
}),
|
|
@@ -37,11 +34,11 @@ export const MetaImage = (props)=>{
|
|
|
37
34
|
const { result: generatedImage } = await genImageResponse.json();
|
|
38
35
|
setValue(generatedImage || '');
|
|
39
36
|
}, [
|
|
40
|
-
fields,
|
|
41
|
-
setValue,
|
|
42
37
|
hasGenerateImageFn,
|
|
38
|
+
docInfo,
|
|
39
|
+
getData,
|
|
43
40
|
locale,
|
|
44
|
-
|
|
41
|
+
setValue
|
|
45
42
|
]);
|
|
46
43
|
const hasImage = Boolean(value);
|
|
47
44
|
const config = useConfig();
|
|
@@ -70,7 +67,9 @@ export const MetaImage = (props)=>{
|
|
|
70
67
|
children: [
|
|
71
68
|
" — ",
|
|
72
69
|
/*#__PURE__*/ _jsx("button", {
|
|
73
|
-
onClick:
|
|
70
|
+
onClick: ()=>{
|
|
71
|
+
void regenerateImage();
|
|
72
|
+
},
|
|
74
73
|
style: {
|
|
75
74
|
background: 'none',
|
|
76
75
|
backgroundColor: 'transparent',
|
|
@@ -140,4 +139,4 @@ export const MetaImage = (props)=>{
|
|
|
140
139
|
});
|
|
141
140
|
};
|
|
142
141
|
|
|
143
|
-
//# sourceMappingURL=
|
|
142
|
+
//# sourceMappingURL=MetaImageComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options, UploadInputProps } from '@payloadcms/ui'\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 hasGenerateImageFn: boolean\n} & UploadInputProps\n\nexport const MetaImageComponent: React.FC<MetaImageProps> = (props) => {\n const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {}\n const { path: pathFromContext } = useFieldProps()\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) return\n\n const genImageResponse = await fetch('/api/plugin-seo/generate-image', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...getData() },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateImage>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedImage } = await genImageResponse.json()\n\n setValue(generatedImage || '')\n }, [hasGenerateImageFn, docInfo, getData, locale, setValue])\n\n const hasImage = Boolean(value)\n\n const config = useConfig()\n\n const { collections, routes: { api } = {}, serverURL } = config\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 CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateImageFn && (\n <React.Fragment>\n — \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 CustomError={errorMessage}\n api={api}\n collection={collection}\n filterOptions={field.filterOptions}\n label={undefined}\n onChange={(incomingImage) => {\n if (incomingImage !== null) {\n const { id: incomingID } = incomingImage\n setValue(incomingID)\n } else {\n setValue(null)\n }\n }}\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","CustomLabel","hasGenerateImageFn","label","labelProps","relationTo","required","path","pathFromContext","field","t","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateImage","genImageResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedImage","json","hasImage","Boolean","config","collections","routes","api","serverURL","collection","find","coll","slug","undefined","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","CustomError","filterOptions","onChange","incomingImage","id","incomingID","alignItems","display","width"],"mappings":"AAAA;;AAIA,SACEA,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,eAAe,EACfC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,IAAI,QAAQ,mBAAkB;AAMvC,OAAO,MAAMC,qBAA+C,CAACC;IAC3D,MAAM,EAAEC,WAAW,EAAEC,kBAAkB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGN,SAAS,CAAC;IAC/F,MAAM,EAAEO,MAAMC,eAAe,EAAE,GAAGhB;IAElC,MAAMiB,QAA2BlB,SAAS;QAAE,GAAGS,KAAK;QAAEO,MAAMC;IAAgB;IAE5E,MAAM,EAAEE,CAAC,EAAE,GAAGf;IAEd,MAAMgB,SAASjB;IACf,MAAM,EAAEkB,OAAO,EAAE,GAAGnB;IACpB,MAAMoB,UAAUvB;IAEhB,MAAM,EAAEwB,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGR;IAErD,MAAMS,kBAAkBrB,YAAY;QAClC,IAAI,CAACK,oBAAoB;QAEzB,MAAMiB,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;QAAC5B;QAAoBW;QAASD;QAASD;QAAQI;KAAS;IAE3D,MAAMiB,WAAWC,QAAQhB;IAEzB,MAAMiB,SAAS7C;IAEf,MAAM,EAAE8C,WAAW,EAAEC,QAAQ,EAAEC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAGJ;IAEzD,MAAMK,aAAaJ,aAAaK,KAAK,CAACC,OAASA,KAAKC,IAAI,KAAKrC,eAAesC;IAE5E,qBACE,MAACC;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,MAACF;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;;kCAEA,MAACH;wBAAII,WAAU;;0CACb,KAAC7D;gCAAWc,aAAaA;gCAAaE,OAAOA;gCAAQ,GAAIC,cAAc,CAAC,CAAC;;4BACxEF,oCACC,MAACN,MAAMqD,QAAQ;;oCAAC;kDAEd,KAACC;wCACCC,SAAS;4CACP,KAAKjC;wCACP;wCACA2B,OAAO;4CACLO,YAAY;4CACZC,iBAAiB;4CACjBC,QAAQ;4CACRC,OAAO;4CACPC,QAAQ;4CACRC,SAAS;4CACTC,gBAAgB;wCAClB;wCACAC,MAAK;kDAEJjD,EAAE;;;;;;oBAKVR,oCACC,KAAC0C;wBACCC,OAAO;4BACLU,OAAO;wBACT;kCAEC7C,EAAE;;;;0BAIT,KAACkC;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;0BAEA,cAAA,KAAC3D;oBACCwE,aAAa9C;oBACbuB,KAAKA;oBACLE,YAAYA;oBACZsB,eAAepD,MAAMoD,aAAa;oBAClC1D,OAAOwC;oBACPmB,UAAU,CAACC;wBACT,IAAIA,kBAAkB,MAAM;4BAC1B,MAAM,EAAEC,IAAIC,UAAU,EAAE,GAAGF;4BAC3BhD,SAASkD;wBACX,OAAO;4BACLlD,SAAS;wBACX;oBACF;oBACAV,YAAYA;oBACZC,UAAUA;oBACVgC,WAAWA;oBACXtB,WAAWA;oBACX6B,OAAO;wBACLC,cAAc;oBAChB;oBACA7B,OAAOA;;;0BAGX,KAAC2B;gBACCC,OAAO;oBACLqB,YAAY;oBACZC,SAAS;oBACTC,OAAO;gBACT;0BAEA,cAAA,KAACtE;oBACCuD,iBAAiBrB,WAAW,UAAU;oBACtCuB,OAAM;oBACNpD,OAAO6B,WAAWtB,EAAE,qBAAqBA,EAAE;;;;;AAKrD,EAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { UploadField } from 'payload';
|
|
2
|
+
interface FieldFunctionProps {
|
|
3
|
+
/**
|
|
4
|
+
* Tell the component if the generate function is available as configured in the plugin config
|
|
5
|
+
*/
|
|
6
|
+
hasGenerateFn?: boolean;
|
|
7
|
+
overrides?: Partial<UploadField>;
|
|
8
|
+
relationTo: string;
|
|
9
|
+
}
|
|
10
|
+
type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UploadField;
|
|
11
|
+
export declare const MetaImageField: FieldFunction;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaImage/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAM1C,UAAU,kBAAkB;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAChC,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,WAAW,CAAA;AAEtF,eAAO,MAAM,cAAc,EAAE,aAqB5B,CAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { withMergedProps } from '@payloadcms/ui/shared';
|
|
2
|
+
import { MetaImageComponent } from './MetaImageComponent.js';
|
|
3
|
+
export const MetaImageField = ({ hasGenerateFn = false, overrides, relationTo })=>{
|
|
4
|
+
return {
|
|
5
|
+
name: 'image',
|
|
6
|
+
type: 'upload',
|
|
7
|
+
admin: {
|
|
8
|
+
components: {
|
|
9
|
+
Field: withMergedProps({
|
|
10
|
+
Component: MetaImageComponent,
|
|
11
|
+
sanitizeServerOnlyProps: true,
|
|
12
|
+
toMergeIntoProps: {
|
|
13
|
+
hasGenerateImageFn: hasGenerateFn
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
},
|
|
17
|
+
description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.'
|
|
18
|
+
},
|
|
19
|
+
label: 'Meta Image',
|
|
20
|
+
localized: true,
|
|
21
|
+
relationTo,
|
|
22
|
+
...overrides ?? {}
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/MetaImage/index.ts"],"sourcesContent":["import type { UploadField } from 'payload'\n\nimport { withMergedProps } from '@payloadcms/ui/shared'\n\nimport { MetaImageComponent } from './MetaImageComponent.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<UploadField>\n relationTo: string\n}\n\ntype FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UploadField\n\nexport const MetaImageField: FieldFunction = ({ hasGenerateFn = false, overrides, relationTo }) => {\n return {\n name: 'image',\n type: 'upload',\n admin: {\n components: {\n Field: withMergedProps({\n Component: MetaImageComponent,\n sanitizeServerOnlyProps: true,\n toMergeIntoProps: {\n hasGenerateImageFn: hasGenerateFn,\n },\n }),\n },\n description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',\n },\n label: 'Meta Image',\n localized: true,\n relationTo,\n ...((overrides as unknown as UploadField) ?? {}),\n }\n}\n"],"names":["withMergedProps","MetaImageComponent","MetaImageField","hasGenerateFn","overrides","relationTo","name","type","admin","components","Field","Component","sanitizeServerOnlyProps","toMergeIntoProps","hasGenerateImageFn","description","label","localized"],"mappings":"AAEA,SAASA,eAAe,QAAQ,wBAAuB;AAEvD,SAASC,kBAAkB,QAAQ,0BAAyB;AAa5D,OAAO,MAAMC,iBAAgC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAEC,UAAU,EAAE;IAC5F,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAOV,gBAAgB;oBACrBW,WAAWV;oBACXW,yBAAyB;oBACzBC,kBAAkB;wBAChBC,oBAAoBX;oBACtB;gBACF;YACF;YACAY,aAAa;QACf;QACAC,OAAO;QACPC,WAAW;QACXZ;QACA,GAAI,AAACD,aAAwC,CAAC,CAAC;IACjD;AACF,EAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { FormFieldBase } from 'payload';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import '../index.scss';
|
|
4
|
+
type MetaTitleProps = {
|
|
5
|
+
hasGenerateTitleFn: boolean;
|
|
6
|
+
} & FormFieldBase;
|
|
7
|
+
export declare const MetaTitleComponent: React.FC<MetaTitleProps>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=MetaTitleComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MetaTitleComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAY5C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,eAAe,CAAA;AAItB,KAAK,cAAc,GAAG;IACpB,kBAAkB,EAAE,OAAO,CAAA;CAC5B,GAAG,aAAa,CAAA;AAEjB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuHvD,CAAA"}
|
|
@@ -1,27 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { TextInput } from '@payloadcms/ui
|
|
4
|
-
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
|
|
5
|
-
import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
|
|
6
|
-
import { useAllFormFields } from '@payloadcms/ui/forms/Form';
|
|
7
|
-
import { useField } from '@payloadcms/ui/forms/useField';
|
|
8
|
-
import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
|
|
9
|
-
import { useLocale } from '@payloadcms/ui/providers/Locale';
|
|
10
|
-
import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
3
|
+
import { FieldLabel, TextInput, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
|
|
11
4
|
import React, { useCallback } from 'react';
|
|
12
|
-
import { defaults } from '
|
|
13
|
-
import { LengthIndicator } from '
|
|
14
|
-
import '
|
|
5
|
+
import { defaults } from '../../defaults.js';
|
|
6
|
+
import { LengthIndicator } from '../../ui/LengthIndicator.js';
|
|
7
|
+
import '../index.scss';
|
|
15
8
|
const { maxLength, minLength } = defaults.title;
|
|
16
|
-
export const
|
|
17
|
-
const { CustomLabel, hasGenerateTitleFn, label, labelProps,
|
|
9
|
+
export const MetaTitleComponent = (props)=>{
|
|
10
|
+
const { CustomLabel, hasGenerateTitleFn, label, labelProps, required } = props || {};
|
|
18
11
|
const { path: pathFromContext } = useFieldProps();
|
|
19
12
|
const { t } = useTranslation();
|
|
20
13
|
const field = useField({
|
|
21
|
-
path
|
|
14
|
+
path: pathFromContext
|
|
22
15
|
});
|
|
23
16
|
const locale = useLocale();
|
|
24
|
-
const
|
|
17
|
+
const { getData } = useForm();
|
|
25
18
|
const docInfo = useDocumentInfo();
|
|
26
19
|
const { errorMessage, setValue, showError, value } = field;
|
|
27
20
|
const regenerateTitle = useCallback(async ()=>{
|
|
@@ -30,7 +23,7 @@ export const MetaTitle = (props)=>{
|
|
|
30
23
|
body: JSON.stringify({
|
|
31
24
|
...docInfo,
|
|
32
25
|
doc: {
|
|
33
|
-
...
|
|
26
|
+
...getData()
|
|
34
27
|
},
|
|
35
28
|
locale: typeof locale === 'object' ? locale?.code : locale
|
|
36
29
|
}),
|
|
@@ -43,11 +36,11 @@ export const MetaTitle = (props)=>{
|
|
|
43
36
|
const { result: generatedTitle } = await genTitleResponse.json();
|
|
44
37
|
setValue(generatedTitle || '');
|
|
45
38
|
}, [
|
|
46
|
-
fields,
|
|
47
|
-
setValue,
|
|
48
39
|
hasGenerateTitleFn,
|
|
40
|
+
docInfo,
|
|
41
|
+
getData,
|
|
49
42
|
locale,
|
|
50
|
-
|
|
43
|
+
setValue
|
|
51
44
|
]);
|
|
52
45
|
return /*#__PURE__*/ _jsxs("div", {
|
|
53
46
|
style: {
|
|
@@ -72,7 +65,9 @@ export const MetaTitle = (props)=>{
|
|
|
72
65
|
children: [
|
|
73
66
|
" — ",
|
|
74
67
|
/*#__PURE__*/ _jsx("button", {
|
|
75
|
-
onClick:
|
|
68
|
+
onClick: ()=>{
|
|
69
|
+
void regenerateTitle();
|
|
70
|
+
},
|
|
76
71
|
style: {
|
|
77
72
|
background: 'none',
|
|
78
73
|
backgroundColor: 'transparent',
|
|
@@ -142,4 +137,4 @@ export const MetaTitle = (props)=>{
|
|
|
142
137
|
});
|
|
143
138
|
};
|
|
144
139
|
|
|
145
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=MetaTitleComponent.js.map
|
|
@@ -0,0 +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 — \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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { TextField } from 'payload';
|
|
2
|
+
interface FieldFunctionProps {
|
|
3
|
+
/**
|
|
4
|
+
* Tell the component if the generate function is available as configured in the plugin config
|
|
5
|
+
*/
|
|
6
|
+
hasGenerateFn?: boolean;
|
|
7
|
+
overrides?: Partial<TextField>;
|
|
8
|
+
}
|
|
9
|
+
type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextField;
|
|
10
|
+
export declare const MetaTitleField: FieldFunction;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { withMergedProps } from '@payloadcms/ui/shared';
|
|
2
|
+
import { MetaTitleComponent } from './MetaTitleComponent.js';
|
|
3
|
+
export const MetaTitleField = ({ hasGenerateFn = false, overrides })=>{
|
|
4
|
+
return {
|
|
5
|
+
name: 'title',
|
|
6
|
+
type: 'text',
|
|
7
|
+
admin: {
|
|
8
|
+
components: {
|
|
9
|
+
Field: withMergedProps({
|
|
10
|
+
Component: MetaTitleComponent,
|
|
11
|
+
sanitizeServerOnlyProps: true,
|
|
12
|
+
toMergeIntoProps: {
|
|
13
|
+
hasGenerateTitleFn: hasGenerateFn
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
localized: true,
|
|
19
|
+
...overrides ?? {}
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { UIField } from 'payload';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
type OverviewProps = {
|
|
4
|
+
descriptionPath?: string;
|
|
5
|
+
imagePath?: string;
|
|
6
|
+
titlePath?: string;
|
|
7
|
+
} & UIField;
|
|
8
|
+
export declare const OverviewComponent: React.FC<OverviewProps>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=OverviewComponent.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useAllFormFields, useForm } from '@payloadcms/ui
|
|
4
|
-
import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
3
|
+
import { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui';
|
|
5
4
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
6
|
-
import { defaults } from '
|
|
5
|
+
import { defaults } from '../../defaults.js';
|
|
7
6
|
const { description: { maxLength: maxDesc, minLength: minDesc }, title: { maxLength: maxTitle, minLength: minTitle } } = defaults;
|
|
8
|
-
export const
|
|
7
|
+
export const OverviewComponent = ({ descriptionPath: descriptionPathFromContext, imagePath: imagePathFromContext, titlePath: titlePathFromContext })=>{
|
|
9
8
|
const { // dispatchFields,
|
|
10
9
|
getFields } = useForm();
|
|
11
|
-
const
|
|
10
|
+
const descriptionPath = descriptionPathFromContext || 'meta.description';
|
|
11
|
+
const titlePath = titlePathFromContext || 'meta.title';
|
|
12
|
+
const imagePath = imagePathFromContext || 'meta.image';
|
|
13
|
+
const [{ [descriptionPath]: { value: metaDesc } = {}, [imagePath]: { value: metaImage } = {}, [titlePath]: { value: metaTitle } = {} }] = useAllFormFields();
|
|
12
14
|
const { t } = useTranslation();
|
|
13
15
|
const [titleIsValid, setTitleIsValid] = useState();
|
|
14
16
|
const [descIsValid, setDescIsValid] = useState();
|
|
@@ -52,4 +54,4 @@ export const Overview = ()=>{
|
|
|
52
54
|
});
|
|
53
55
|
};
|
|
54
56
|
|
|
55
|
-
//# sourceMappingURL=
|
|
57
|
+
//# sourceMappingURL=OverviewComponent.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { UIField } from 'payload';
|
|
2
|
+
interface FieldFunctionProps {
|
|
3
|
+
/**
|
|
4
|
+
* Path to the description field to use for the preview
|
|
5
|
+
*
|
|
6
|
+
* @default 'meta.description'
|
|
7
|
+
*/
|
|
8
|
+
descriptionPath?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Path to the image field to use for the preview
|
|
11
|
+
*
|
|
12
|
+
* @default 'meta.image'
|
|
13
|
+
*/
|
|
14
|
+
imagePath?: string;
|
|
15
|
+
overrides?: Partial<UIField>;
|
|
16
|
+
/**
|
|
17
|
+
* Path to the title field to use for the preview
|
|
18
|
+
*
|
|
19
|
+
* @default 'meta.title'
|
|
20
|
+
*/
|
|
21
|
+
titlePath?: string;
|
|
22
|
+
}
|
|
23
|
+
type FieldFunction = ({ overrides }: FieldFunctionProps) => UIField;
|
|
24
|
+
export declare const OverviewField: FieldFunction;
|
|
25
|
+
export {};
|
|
26
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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"}
|