@payloadcms/plugin-seo 3.0.0-canary.92e4997 → 3.0.0-canary.f1db24e
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/fields/MetaDescription.d.ts.map +1 -1
- package/dist/fields/MetaDescription.js +89 -61
- package/dist/fields/MetaDescription.js.map +1 -1
- package/dist/fields/MetaImage.d.ts.map +1 -1
- package/dist/fields/MetaImage.js +90 -66
- package/dist/fields/MetaImage.js.map +1 -1
- package/dist/fields/MetaTitle.d.ts.map +1 -1
- package/dist/fields/MetaTitle.js +90 -61
- package/dist/fields/MetaTitle.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +25 -13
- package/dist/index.js.map +1 -1
- package/dist/translations/index.d.ts +3 -0
- package/dist/translations/index.d.ts.map +1 -1
- package/dist/translations/index.js.map +1 -1
- package/dist/ui/LengthIndicator.d.ts.map +1 -1
- package/dist/ui/LengthIndicator.js +61 -40
- package/dist/ui/LengthIndicator.js.map +1 -1
- package/dist/ui/Overview.d.ts.map +1 -1
- package/dist/ui/Overview.js +10 -6
- package/dist/ui/Overview.js.map +1 -1
- package/dist/ui/Pill.js +7 -3
- package/dist/ui/Pill.js.map +1 -1
- package/dist/ui/Preview.js +55 -34
- package/dist/ui/Preview.js.map +1 -1
- package/package.json +16 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetaDescription.d.ts","sourceRoot":"","sources":["../../src/fields/MetaDescription.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAWjE,OAAO,KAAsB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"MetaDescription.d.ts","sourceRoot":"","sources":["../../src/fields/MetaDescription.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAWjE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAW1C,KAAK,oBAAoB,GAAG,aAAa,GAAG;IAC1C,wBAAwB,EAAE,OAAO,CAAA;IACjC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoH1D,CAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { TextareaInput } from '@payloadcms/ui/fields/Textarea';
|
|
3
4
|
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
|
|
4
5
|
import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
|
|
@@ -12,7 +13,7 @@ import { defaults } from '../defaults.js';
|
|
|
12
13
|
import { LengthIndicator } from '../ui/LengthIndicator.js';
|
|
13
14
|
const { maxLength, minLength } = defaults.description;
|
|
14
15
|
export const MetaDescription = (props)=>{
|
|
15
|
-
const { CustomLabel, hasGenerateDescriptionFn, labelProps, path, required } = props;
|
|
16
|
+
const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, path, required } = props;
|
|
16
17
|
const { path: pathFromContext } = useFieldProps();
|
|
17
18
|
const { t } = useTranslation();
|
|
18
19
|
const locale = useLocale();
|
|
@@ -47,69 +48,96 @@ export const MetaDescription = (props)=>{
|
|
|
47
48
|
locale,
|
|
48
49
|
docInfo
|
|
49
50
|
]);
|
|
50
|
-
return /*#__PURE__*/
|
|
51
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
51
52
|
style: {
|
|
52
53
|
marginBottom: '20px'
|
|
53
|
-
}
|
|
54
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
55
|
-
style: {
|
|
56
|
-
marginBottom: '5px',
|
|
57
|
-
position: 'relative'
|
|
58
|
-
}
|
|
59
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
60
|
-
className: "plugin-seo__field"
|
|
61
|
-
}, /*#__PURE__*/ React.createElement(FieldLabel, {
|
|
62
|
-
CustomLabel: CustomLabel,
|
|
63
|
-
...labelProps || {}
|
|
64
|
-
}), hasGenerateDescriptionFn && /*#__PURE__*/ React.createElement(React.Fragment, null, " — ", /*#__PURE__*/ React.createElement("button", {
|
|
65
|
-
onClick: regenerateDescription,
|
|
66
|
-
style: {
|
|
67
|
-
background: 'none',
|
|
68
|
-
backgroundColor: 'transparent',
|
|
69
|
-
border: 'none',
|
|
70
|
-
color: 'currentcolor',
|
|
71
|
-
cursor: 'pointer',
|
|
72
|
-
padding: 0,
|
|
73
|
-
textDecoration: 'underline'
|
|
74
54
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
55
|
+
children: [
|
|
56
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
57
|
+
style: {
|
|
58
|
+
marginBottom: '5px',
|
|
59
|
+
position: 'relative'
|
|
60
|
+
},
|
|
61
|
+
children: [
|
|
62
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
63
|
+
className: "plugin-seo__field",
|
|
64
|
+
children: [
|
|
65
|
+
/*#__PURE__*/ _jsx(FieldLabel, {
|
|
66
|
+
CustomLabel: CustomLabel,
|
|
67
|
+
label: label,
|
|
68
|
+
...labelProps || {}
|
|
69
|
+
}),
|
|
70
|
+
hasGenerateDescriptionFn && /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
71
|
+
children: [
|
|
72
|
+
" — ",
|
|
73
|
+
/*#__PURE__*/ _jsx("button", {
|
|
74
|
+
onClick: regenerateDescription,
|
|
75
|
+
style: {
|
|
76
|
+
background: 'none',
|
|
77
|
+
backgroundColor: 'transparent',
|
|
78
|
+
border: 'none',
|
|
79
|
+
color: 'currentcolor',
|
|
80
|
+
cursor: 'pointer',
|
|
81
|
+
padding: 0,
|
|
82
|
+
textDecoration: 'underline'
|
|
83
|
+
},
|
|
84
|
+
type: "button",
|
|
85
|
+
children: t('plugin-seo:autoGenerate')
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
})
|
|
89
|
+
]
|
|
90
|
+
}),
|
|
91
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
92
|
+
style: {
|
|
93
|
+
color: '#9A9A9A'
|
|
94
|
+
},
|
|
95
|
+
children: [
|
|
96
|
+
t('plugin-seo:lengthTipDescription', {
|
|
97
|
+
maxLength,
|
|
98
|
+
minLength
|
|
99
|
+
}),
|
|
100
|
+
/*#__PURE__*/ _jsx("a", {
|
|
101
|
+
href: "https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions",
|
|
102
|
+
rel: "noopener noreferrer",
|
|
103
|
+
target: "_blank",
|
|
104
|
+
children: t('plugin-seo:bestPractices')
|
|
105
|
+
})
|
|
106
|
+
]
|
|
107
|
+
})
|
|
108
|
+
]
|
|
109
|
+
}),
|
|
110
|
+
/*#__PURE__*/ _jsx("div", {
|
|
111
|
+
style: {
|
|
112
|
+
marginBottom: '10px',
|
|
113
|
+
position: 'relative'
|
|
114
|
+
},
|
|
115
|
+
children: /*#__PURE__*/ _jsx(TextareaInput, {
|
|
116
|
+
CustomError: errorMessage,
|
|
117
|
+
onChange: setValue,
|
|
118
|
+
path: pathFromContext,
|
|
119
|
+
required: required,
|
|
120
|
+
showError: showError,
|
|
121
|
+
style: {
|
|
122
|
+
marginBottom: 0
|
|
123
|
+
},
|
|
124
|
+
value: value
|
|
125
|
+
})
|
|
126
|
+
}),
|
|
127
|
+
/*#__PURE__*/ _jsx("div", {
|
|
128
|
+
style: {
|
|
129
|
+
alignItems: 'center',
|
|
130
|
+
display: 'flex',
|
|
131
|
+
width: '100%'
|
|
132
|
+
},
|
|
133
|
+
children: /*#__PURE__*/ _jsx(LengthIndicator, {
|
|
134
|
+
maxLength: maxLength,
|
|
135
|
+
minLength: minLength,
|
|
136
|
+
text: value
|
|
137
|
+
})
|
|
138
|
+
})
|
|
139
|
+
]
|
|
140
|
+
});
|
|
113
141
|
};
|
|
114
142
|
|
|
115
143
|
//# sourceMappingURL=MetaDescription.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/MetaDescription.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { TextareaInput } from '@payloadcms/ui/fields/Textarea'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\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\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaDescriptionProps = FormFieldBase & {\n hasGenerateDescriptionFn: boolean\n path: string\n}\n\nexport const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {\n const { CustomLabel, hasGenerateDescriptionFn, labelProps, path, required } = props\n const { path: pathFromContext } = useFieldProps()\n\n const { t } = useTranslation()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const field: FieldType<string> = useField({\n path,\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: { ...fields },\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 }, [fields, setValue, hasGenerateDescriptionFn, locale, docInfo])\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} {...(labelProps || {})} />\n {hasGenerateDescriptionFn && (\n <React.Fragment>\n — \n <button\n onClick={regenerateDescription}\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":["TextareaInput","FieldLabel","useFieldProps","useAllFormFields","useField","useDocumentInfo","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","description","MetaDescription","props","CustomLabel","hasGenerateDescriptionFn","labelProps","path","required","pathFromContext","t","locale","fields","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"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/fields/MetaDescription.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { TextareaInput } from '@payloadcms/ui/fields/Textarea'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\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\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaDescriptionProps = FormFieldBase & {\n hasGenerateDescriptionFn: boolean\n path: string\n}\n\nexport const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {\n const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, path, required } = props\n const { path: pathFromContext } = useFieldProps()\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const field: FieldType<string> = useField({\n path,\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: { ...fields },\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 }, [fields, setValue, hasGenerateDescriptionFn, locale, docInfo])\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={regenerateDescription}\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":["TextareaInput","FieldLabel","useFieldProps","useAllFormFields","useField","useDocumentInfo","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","description","MetaDescription","props","CustomLabel","hasGenerateDescriptionFn","label","labelProps","path","required","pathFromContext","t","locale","fields","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAKA,SAASA,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,QAAQ,QAAQ,iBAAgB;AACzC,SAASC,eAAe,QAAQ,2BAA0B;AAE1D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGH,SAASI,WAAW;AAQrD,OAAO,MAAMC,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,WAAW,EAAEC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN;IACrF,MAAM,EAAEK,MAAME,eAAe,EAAE,GAAGrB;IAElC,MAAM,EAAEsB,CAAC,EAAE,GAAGjB;IAEd,MAAMkB,SAASnB;IACf,MAAM,CAACoB,OAAO,GAAGvB;IACjB,MAAMwB,UAAUtB;IAEhB,MAAMuB,QAA2BxB,SAAS;QACxCiB;IACF;IAEA,MAAM,EAAEQ,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,MAAM;gBAAC;gBACjBD,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;QAACnB;QAAQI;QAAUZ;QAA0BO;QAAQE;KAAQ;IAEhE,qBACE,MAACoB;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,MAACF;gBACCC,OAAO;oBACLC,cAAc;oBACdC,UAAU;gBACZ;;kCAEA,MAACH;wBAAII,WAAU;;0CACb,KAAClD;gCAAWgB,aAAaA;gCAAaE,OAAOA;gCAAQ,GAAIC,cAAc,CAAC,CAAC;;4BACxEF,0CACC,MAACV,MAAM4C,QAAQ;;oCAAC;kDAEd,KAACC;wCACCC,SAASrB;wCACTe,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,KAAClD;oBACCmE,aAAatC;oBACbuC,UAAUtC;oBACVT,MAAME;oBACND,UAAUA;oBACVS,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetaImage.d.ts","sourceRoot":"","sources":["../../src/fields/MetaImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAWpE,OAAO,KAAsB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"MetaImage.d.ts","sourceRoot":"","sources":["../../src/fields/MetaImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAWpE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAQ1C,KAAK,cAAc,GAAG,gBAAgB,GAAG;IACvC,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoI9C,CAAA"}
|
package/dist/fields/MetaImage.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { UploadInput } from '@payloadcms/ui/fields/Upload';
|
|
3
4
|
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
|
|
4
5
|
import { useAllFormFields } from '@payloadcms/ui/forms/Form';
|
|
@@ -10,7 +11,7 @@ import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
|
10
11
|
import React, { useCallback } from 'react';
|
|
11
12
|
import { Pill } from '../ui/Pill.js';
|
|
12
13
|
export const MetaImage = (props)=>{
|
|
13
|
-
const { CustomLabel, hasGenerateImageFn, labelProps, relationTo, required } = props || {};
|
|
14
|
+
const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {};
|
|
14
15
|
const field = useField(props);
|
|
15
16
|
const { t } = useTranslation();
|
|
16
17
|
const locale = useLocale();
|
|
@@ -46,74 +47,97 @@ export const MetaImage = (props)=>{
|
|
|
46
47
|
const config = useConfig();
|
|
47
48
|
const { collections, routes: { api } = {}, serverURL } = config;
|
|
48
49
|
const collection = collections?.find((coll)=>coll.slug === relationTo) || undefined;
|
|
49
|
-
return /*#__PURE__*/
|
|
50
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
50
51
|
style: {
|
|
51
52
|
marginBottom: '20px'
|
|
52
|
-
}
|
|
53
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
54
|
-
style: {
|
|
55
|
-
marginBottom: '5px',
|
|
56
|
-
position: 'relative'
|
|
57
|
-
}
|
|
58
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
59
|
-
className: "plugin-seo__field"
|
|
60
|
-
}, /*#__PURE__*/ React.createElement(FieldLabel, {
|
|
61
|
-
CustomLabel: CustomLabel,
|
|
62
|
-
...labelProps || {}
|
|
63
|
-
}), hasGenerateImageFn && /*#__PURE__*/ React.createElement(React.Fragment, null, " — ", /*#__PURE__*/ React.createElement("button", {
|
|
64
|
-
onClick: regenerateImage,
|
|
65
|
-
style: {
|
|
66
|
-
background: 'none',
|
|
67
|
-
backgroundColor: 'transparent',
|
|
68
|
-
border: 'none',
|
|
69
|
-
color: 'currentcolor',
|
|
70
|
-
cursor: 'pointer',
|
|
71
|
-
padding: 0,
|
|
72
|
-
textDecoration: 'underline'
|
|
73
|
-
},
|
|
74
|
-
type: "button"
|
|
75
|
-
}, t('plugin-seo:autoGenerate')))), hasGenerateImageFn && /*#__PURE__*/ React.createElement("div", {
|
|
76
|
-
style: {
|
|
77
|
-
color: '#9A9A9A'
|
|
78
|
-
}
|
|
79
|
-
}, t('plugin-seo:imageAutoGenerationTip'))), /*#__PURE__*/ React.createElement("div", {
|
|
80
|
-
style: {
|
|
81
|
-
marginBottom: '10px',
|
|
82
|
-
position: 'relative'
|
|
83
|
-
}
|
|
84
|
-
}, /*#__PURE__*/ React.createElement(UploadInput, {
|
|
85
|
-
CustomError: errorMessage,
|
|
86
|
-
api: api,
|
|
87
|
-
collection: collection,
|
|
88
|
-
filterOptions: {},
|
|
89
|
-
label: undefined,
|
|
90
|
-
onChange: (incomingImage)=>{
|
|
91
|
-
if (incomingImage !== null) {
|
|
92
|
-
const { id: incomingID } = incomingImage;
|
|
93
|
-
setValue(incomingID);
|
|
94
|
-
} else {
|
|
95
|
-
setValue(null);
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
relationTo: relationTo,
|
|
99
|
-
required: required,
|
|
100
|
-
serverURL: serverURL,
|
|
101
|
-
showError: showError,
|
|
102
|
-
style: {
|
|
103
|
-
marginBottom: 0
|
|
104
53
|
},
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
54
|
+
children: [
|
|
55
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
56
|
+
style: {
|
|
57
|
+
marginBottom: '5px',
|
|
58
|
+
position: 'relative'
|
|
59
|
+
},
|
|
60
|
+
children: [
|
|
61
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
62
|
+
className: "plugin-seo__field",
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ _jsx(FieldLabel, {
|
|
65
|
+
CustomLabel: CustomLabel,
|
|
66
|
+
label: label,
|
|
67
|
+
...labelProps || {}
|
|
68
|
+
}),
|
|
69
|
+
hasGenerateImageFn && /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
70
|
+
children: [
|
|
71
|
+
" — ",
|
|
72
|
+
/*#__PURE__*/ _jsx("button", {
|
|
73
|
+
onClick: regenerateImage,
|
|
74
|
+
style: {
|
|
75
|
+
background: 'none',
|
|
76
|
+
backgroundColor: 'transparent',
|
|
77
|
+
border: 'none',
|
|
78
|
+
color: 'currentcolor',
|
|
79
|
+
cursor: 'pointer',
|
|
80
|
+
padding: 0,
|
|
81
|
+
textDecoration: 'underline'
|
|
82
|
+
},
|
|
83
|
+
type: "button",
|
|
84
|
+
children: t('plugin-seo:autoGenerate')
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
}),
|
|
90
|
+
hasGenerateImageFn && /*#__PURE__*/ _jsx("div", {
|
|
91
|
+
style: {
|
|
92
|
+
color: '#9A9A9A'
|
|
93
|
+
},
|
|
94
|
+
children: t('plugin-seo:imageAutoGenerationTip')
|
|
95
|
+
})
|
|
96
|
+
]
|
|
97
|
+
}),
|
|
98
|
+
/*#__PURE__*/ _jsx("div", {
|
|
99
|
+
style: {
|
|
100
|
+
marginBottom: '10px',
|
|
101
|
+
position: 'relative'
|
|
102
|
+
},
|
|
103
|
+
children: /*#__PURE__*/ _jsx(UploadInput, {
|
|
104
|
+
CustomError: errorMessage,
|
|
105
|
+
api: api,
|
|
106
|
+
collection: collection,
|
|
107
|
+
filterOptions: field.filterOptions,
|
|
108
|
+
label: undefined,
|
|
109
|
+
onChange: (incomingImage)=>{
|
|
110
|
+
if (incomingImage !== null) {
|
|
111
|
+
const { id: incomingID } = incomingImage;
|
|
112
|
+
setValue(incomingID);
|
|
113
|
+
} else {
|
|
114
|
+
setValue(null);
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
relationTo: relationTo,
|
|
118
|
+
required: required,
|
|
119
|
+
serverURL: serverURL,
|
|
120
|
+
showError: showError,
|
|
121
|
+
style: {
|
|
122
|
+
marginBottom: 0
|
|
123
|
+
},
|
|
124
|
+
value: value
|
|
125
|
+
})
|
|
126
|
+
}),
|
|
127
|
+
/*#__PURE__*/ _jsx("div", {
|
|
128
|
+
style: {
|
|
129
|
+
alignItems: 'center',
|
|
130
|
+
display: 'flex',
|
|
131
|
+
width: '100%'
|
|
132
|
+
},
|
|
133
|
+
children: /*#__PURE__*/ _jsx(Pill, {
|
|
134
|
+
backgroundColor: hasImage ? 'green' : 'red',
|
|
135
|
+
color: "white",
|
|
136
|
+
label: hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')
|
|
137
|
+
})
|
|
138
|
+
})
|
|
139
|
+
]
|
|
140
|
+
});
|
|
117
141
|
};
|
|
118
142
|
|
|
119
143
|
//# sourceMappingURL=MetaImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/MetaImage.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadInputProps } from '@payloadcms/ui/fields/Upload'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { UploadInput } from '@payloadcms/ui/fields/Upload'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { GenerateImage } from '../types.js'\n\nimport { Pill } from '../ui/Pill.js'\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaImageProps = UploadInputProps & {\n hasGenerateImageFn: boolean\n}\n\nexport const MetaImage: React.FC<MetaImageProps> = (props) => {\n const { CustomLabel, hasGenerateImageFn, labelProps, relationTo, required } = props || {}\n\n const field: FieldType<string> = useField(props as Options)\n\n const { t } = useTranslation()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\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: { ...fields },\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 }, [fields, setValue, hasGenerateImageFn, locale, docInfo])\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} {...(labelProps || {})} />\n {hasGenerateImageFn && (\n <React.Fragment>\n — \n <button\n onClick={regenerateImage}\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={
|
|
1
|
+
{"version":3,"sources":["../../src/fields/MetaImage.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadInputProps } from '@payloadcms/ui/fields/Upload'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { UploadInput } from '@payloadcms/ui/fields/Upload'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\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\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaImageProps = UploadInputProps & {\n hasGenerateImageFn: boolean\n}\n\nexport const MetaImage: React.FC<MetaImageProps> = (props) => {\n const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {}\n\n const field: FieldType<string> = useField(props as Options)\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\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: { ...fields },\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 }, [fields, setValue, hasGenerateImageFn, locale, docInfo])\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={regenerateImage}\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":["UploadInput","FieldLabel","useAllFormFields","useField","useConfig","useDocumentInfo","useLocale","useTranslation","React","useCallback","Pill","MetaImage","props","CustomLabel","hasGenerateImageFn","label","labelProps","relationTo","required","field","t","locale","fields","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetaTitle.d.ts","sourceRoot":"","sources":["../../src/fields/MetaTitle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAYjE,OAAO,KAAsB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"MetaTitle.d.ts","sourceRoot":"","sources":["../../src/fields/MetaTitle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAYjE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,cAAc,CAAA;AAKrB,KAAK,cAAc,GAAG,aAAa,GAAG;IACpC,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqH9C,CAAA"}
|
package/dist/fields/MetaTitle.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { TextInput } from '@payloadcms/ui/fields/Text';
|
|
3
4
|
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
|
|
4
5
|
import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
|
|
@@ -13,7 +14,7 @@ import { LengthIndicator } from '../ui/LengthIndicator.js';
|
|
|
13
14
|
import './index.scss';
|
|
14
15
|
const { maxLength, minLength } = defaults.title;
|
|
15
16
|
export const MetaTitle = (props)=>{
|
|
16
|
-
const { CustomLabel, hasGenerateTitleFn, labelProps, path, required } = props || {};
|
|
17
|
+
const { CustomLabel, hasGenerateTitleFn, label, labelProps, path, required } = props || {};
|
|
17
18
|
const { path: pathFromContext } = useFieldProps();
|
|
18
19
|
const { t } = useTranslation();
|
|
19
20
|
const field = useField({
|
|
@@ -48,69 +49,97 @@ export const MetaTitle = (props)=>{
|
|
|
48
49
|
locale,
|
|
49
50
|
docInfo
|
|
50
51
|
]);
|
|
51
|
-
return /*#__PURE__*/
|
|
52
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
52
53
|
style: {
|
|
53
54
|
marginBottom: '20px'
|
|
54
|
-
}
|
|
55
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
56
|
-
style: {
|
|
57
|
-
marginBottom: '5px',
|
|
58
|
-
position: 'relative'
|
|
59
|
-
}
|
|
60
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
61
|
-
className: "plugin-seo__field"
|
|
62
|
-
}, /*#__PURE__*/ React.createElement(FieldLabel, {
|
|
63
|
-
CustomLabel: CustomLabel,
|
|
64
|
-
...labelProps || {}
|
|
65
|
-
}), hasGenerateTitleFn && /*#__PURE__*/ React.createElement(React.Fragment, null, " — ", /*#__PURE__*/ React.createElement("button", {
|
|
66
|
-
onClick: regenerateTitle,
|
|
67
|
-
style: {
|
|
68
|
-
background: 'none',
|
|
69
|
-
backgroundColor: 'transparent',
|
|
70
|
-
border: 'none',
|
|
71
|
-
color: 'currentcolor',
|
|
72
|
-
cursor: 'pointer',
|
|
73
|
-
padding: 0,
|
|
74
|
-
textDecoration: 'underline'
|
|
75
55
|
},
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
56
|
+
children: [
|
|
57
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
58
|
+
style: {
|
|
59
|
+
marginBottom: '5px',
|
|
60
|
+
position: 'relative'
|
|
61
|
+
},
|
|
62
|
+
children: [
|
|
63
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
64
|
+
className: "plugin-seo__field",
|
|
65
|
+
children: [
|
|
66
|
+
/*#__PURE__*/ _jsx(FieldLabel, {
|
|
67
|
+
CustomLabel: CustomLabel,
|
|
68
|
+
label: label,
|
|
69
|
+
...labelProps || {}
|
|
70
|
+
}),
|
|
71
|
+
hasGenerateTitleFn && /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
72
|
+
children: [
|
|
73
|
+
" — ",
|
|
74
|
+
/*#__PURE__*/ _jsx("button", {
|
|
75
|
+
onClick: regenerateTitle,
|
|
76
|
+
style: {
|
|
77
|
+
background: 'none',
|
|
78
|
+
backgroundColor: 'transparent',
|
|
79
|
+
border: 'none',
|
|
80
|
+
color: 'currentcolor',
|
|
81
|
+
cursor: 'pointer',
|
|
82
|
+
padding: 0,
|
|
83
|
+
textDecoration: 'underline'
|
|
84
|
+
},
|
|
85
|
+
type: "button",
|
|
86
|
+
children: t('plugin-seo:autoGenerate')
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
})
|
|
90
|
+
]
|
|
91
|
+
}),
|
|
92
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
93
|
+
style: {
|
|
94
|
+
color: '#9A9A9A'
|
|
95
|
+
},
|
|
96
|
+
children: [
|
|
97
|
+
t('plugin-seo:lengthTipTitle', {
|
|
98
|
+
maxLength,
|
|
99
|
+
minLength
|
|
100
|
+
}),
|
|
101
|
+
/*#__PURE__*/ _jsx("a", {
|
|
102
|
+
href: "https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles",
|
|
103
|
+
rel: "noopener noreferrer",
|
|
104
|
+
target: "_blank",
|
|
105
|
+
children: t('plugin-seo:bestPractices')
|
|
106
|
+
}),
|
|
107
|
+
"."
|
|
108
|
+
]
|
|
109
|
+
})
|
|
110
|
+
]
|
|
111
|
+
}),
|
|
112
|
+
/*#__PURE__*/ _jsx("div", {
|
|
113
|
+
style: {
|
|
114
|
+
marginBottom: '10px',
|
|
115
|
+
position: 'relative'
|
|
116
|
+
},
|
|
117
|
+
children: /*#__PURE__*/ _jsx(TextInput, {
|
|
118
|
+
CustomError: errorMessage,
|
|
119
|
+
onChange: setValue,
|
|
120
|
+
path: pathFromContext,
|
|
121
|
+
required: required,
|
|
122
|
+
showError: showError,
|
|
123
|
+
style: {
|
|
124
|
+
marginBottom: 0
|
|
125
|
+
},
|
|
126
|
+
value: value
|
|
127
|
+
})
|
|
128
|
+
}),
|
|
129
|
+
/*#__PURE__*/ _jsx("div", {
|
|
130
|
+
style: {
|
|
131
|
+
alignItems: 'center',
|
|
132
|
+
display: 'flex',
|
|
133
|
+
width: '100%'
|
|
134
|
+
},
|
|
135
|
+
children: /*#__PURE__*/ _jsx(LengthIndicator, {
|
|
136
|
+
maxLength: maxLength,
|
|
137
|
+
minLength: minLength,
|
|
138
|
+
text: value
|
|
139
|
+
})
|
|
140
|
+
})
|
|
141
|
+
]
|
|
142
|
+
});
|
|
114
143
|
};
|
|
115
144
|
|
|
116
145
|
//# sourceMappingURL=MetaTitle.js.map
|