@payloadcms/plugin-seo 3.0.0-canary.6659da8 → 3.0.0-canary.67aae47

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.
Files changed (144) hide show
  1. package/dist/defaults.js.map +1 -1
  2. package/dist/exports/client.d.ts +6 -0
  3. package/dist/exports/client.d.ts.map +1 -0
  4. package/dist/exports/client.js +7 -0
  5. package/dist/exports/client.js.map +1 -0
  6. package/dist/exports/fields.d.ts +6 -0
  7. package/dist/exports/fields.d.ts.map +1 -0
  8. package/dist/exports/fields.js +7 -0
  9. package/dist/exports/fields.js.map +1 -0
  10. package/dist/exports/types.js.map +1 -1
  11. package/dist/fields/MetaDescription/MetaDescriptionComponent.d.ts +8 -0
  12. package/dist/fields/MetaDescription/MetaDescriptionComponent.d.ts.map +1 -0
  13. package/dist/fields/{MetaDescription.js → MetaDescription/MetaDescriptionComponent.js} +53 -34
  14. package/dist/fields/MetaDescription/MetaDescriptionComponent.js.map +1 -0
  15. package/dist/fields/MetaDescription/index.d.ts +12 -0
  16. package/dist/fields/MetaDescription/index.d.ts.map +1 -0
  17. package/dist/fields/MetaDescription/index.js +20 -0
  18. package/dist/fields/MetaDescription/index.js.map +1 -0
  19. package/dist/fields/MetaImage/MetaImageComponent.d.ts +8 -0
  20. package/dist/fields/MetaImage/MetaImageComponent.d.ts.map +1 -0
  21. package/dist/fields/{MetaImage.js → MetaImage/MetaImageComponent.js} +63 -37
  22. package/dist/fields/MetaImage/MetaImageComponent.js.map +1 -0
  23. package/dist/fields/MetaImage/index.d.ts +13 -0
  24. package/dist/fields/MetaImage/index.d.ts.map +1 -0
  25. package/dist/fields/MetaImage/index.js +23 -0
  26. package/dist/fields/MetaImage/index.js.map +1 -0
  27. package/dist/fields/MetaTitle/MetaTitleComponent.d.ts +9 -0
  28. package/dist/fields/MetaTitle/MetaTitleComponent.d.ts.map +1 -0
  29. package/dist/fields/{MetaTitle.js → MetaTitle/MetaTitleComponent.js} +53 -33
  30. package/dist/fields/MetaTitle/MetaTitleComponent.js.map +1 -0
  31. package/dist/fields/MetaTitle/index.d.ts +12 -0
  32. package/dist/fields/MetaTitle/index.d.ts.map +1 -0
  33. package/dist/fields/MetaTitle/index.js +20 -0
  34. package/dist/fields/MetaTitle/index.js.map +1 -0
  35. package/dist/fields/Overview/OverviewComponent.d.ts +18 -0
  36. package/dist/fields/Overview/OverviewComponent.d.ts.map +1 -0
  37. package/dist/fields/Overview/OverviewComponent.js +63 -0
  38. package/dist/fields/Overview/OverviewComponent.js.map +1 -0
  39. package/dist/fields/Overview/index.d.ts +34 -0
  40. package/dist/fields/Overview/index.d.ts.map +1 -0
  41. package/dist/fields/Overview/index.js +24 -0
  42. package/dist/fields/Overview/index.js.map +1 -0
  43. package/dist/fields/Preview/PreviewComponent.d.ts +10 -0
  44. package/dist/fields/Preview/PreviewComponent.d.ts.map +1 -0
  45. package/dist/{ui/Preview.js → fields/Preview/PreviewComponent.js} +30 -14
  46. package/dist/fields/Preview/PreviewComponent.js.map +1 -0
  47. package/dist/fields/Preview/index.d.ts +24 -0
  48. package/dist/fields/Preview/index.d.ts.map +1 -0
  49. package/dist/fields/Preview/index.js +22 -0
  50. package/dist/fields/Preview/index.js.map +1 -0
  51. package/dist/fields/index.scss +5 -3
  52. package/dist/index.d.ts.map +1 -1
  53. package/dist/index.js +68 -115
  54. package/dist/index.js.map +1 -1
  55. package/dist/translations/cs.d.ts +3 -0
  56. package/dist/translations/cs.d.ts.map +1 -0
  57. package/dist/translations/cs.js +25 -0
  58. package/dist/translations/cs.js.map +1 -0
  59. package/dist/translations/de.d.ts +3 -0
  60. package/dist/translations/de.d.ts.map +1 -0
  61. package/dist/translations/de.js +25 -0
  62. package/dist/translations/de.js.map +1 -0
  63. package/dist/translations/en.d.ts +3 -0
  64. package/dist/translations/en.d.ts.map +1 -0
  65. package/dist/translations/en.js +25 -0
  66. package/dist/translations/en.js.map +1 -0
  67. package/dist/translations/es.d.ts +3 -0
  68. package/dist/translations/es.d.ts.map +1 -0
  69. package/dist/translations/es.js +25 -0
  70. package/dist/translations/es.js.map +1 -0
  71. package/dist/translations/fa.d.ts +3 -0
  72. package/dist/translations/fa.d.ts.map +1 -0
  73. package/dist/translations/fa.js +25 -0
  74. package/dist/translations/fa.js.map +1 -0
  75. package/dist/translations/fr.d.ts +3 -0
  76. package/dist/translations/fr.d.ts.map +1 -0
  77. package/dist/translations/fr.js +25 -0
  78. package/dist/translations/fr.js.map +1 -0
  79. package/dist/translations/index.d.ts +15 -156
  80. package/dist/translations/index.d.ts.map +1 -1
  81. package/dist/translations/index.js +26 -154
  82. package/dist/translations/index.js.map +1 -1
  83. package/dist/translations/it.d.ts +3 -0
  84. package/dist/translations/it.d.ts.map +1 -0
  85. package/dist/translations/it.js +25 -0
  86. package/dist/translations/it.js.map +1 -0
  87. package/dist/translations/nb.d.ts +3 -0
  88. package/dist/translations/nb.d.ts.map +1 -0
  89. package/dist/translations/nb.js +25 -0
  90. package/dist/translations/nb.js.map +1 -0
  91. package/dist/translations/pl.d.ts +3 -0
  92. package/dist/translations/pl.d.ts.map +1 -0
  93. package/dist/translations/pl.js +25 -0
  94. package/dist/translations/pl.js.map +1 -0
  95. package/dist/translations/ru.d.ts +3 -0
  96. package/dist/translations/ru.d.ts.map +1 -0
  97. package/dist/translations/ru.js +25 -0
  98. package/dist/translations/ru.js.map +1 -0
  99. package/dist/translations/sv.d.ts +3 -0
  100. package/dist/translations/sv.d.ts.map +1 -0
  101. package/dist/translations/sv.js +25 -0
  102. package/dist/translations/sv.js.map +1 -0
  103. package/dist/translations/tr.d.ts +3 -0
  104. package/dist/translations/tr.d.ts.map +1 -0
  105. package/dist/translations/tr.js +25 -0
  106. package/dist/translations/tr.js.map +1 -0
  107. package/dist/translations/translation-schema.json +5 -1
  108. package/dist/translations/uk.d.ts +3 -0
  109. package/dist/translations/uk.d.ts.map +1 -0
  110. package/dist/translations/uk.js +25 -0
  111. package/dist/translations/uk.js.map +1 -0
  112. package/dist/translations/vi.d.ts +3 -0
  113. package/dist/translations/vi.d.ts.map +1 -0
  114. package/dist/translations/vi.js +25 -0
  115. package/dist/translations/vi.js.map +1 -0
  116. package/dist/types.d.ts +49 -16
  117. package/dist/types.d.ts.map +1 -1
  118. package/dist/types.js.map +1 -1
  119. package/dist/ui/LengthIndicator.js +2 -2
  120. package/dist/ui/LengthIndicator.js.map +1 -1
  121. package/dist/ui/Pill.js.map +1 -1
  122. package/package.json +33 -23
  123. package/dist/fields/MetaDescription.d.ts +0 -9
  124. package/dist/fields/MetaDescription.d.ts.map +0 -1
  125. package/dist/fields/MetaDescription.js.map +0 -1
  126. package/dist/fields/MetaImage.d.ts +0 -8
  127. package/dist/fields/MetaImage.d.ts.map +0 -1
  128. package/dist/fields/MetaImage.js.map +0 -1
  129. package/dist/fields/MetaTitle.d.ts +0 -9
  130. package/dist/fields/MetaTitle.d.ts.map +0 -1
  131. package/dist/fields/MetaTitle.js.map +0 -1
  132. package/dist/translations/en.json +0 -22
  133. package/dist/translations/es.json +0 -22
  134. package/dist/translations/fa.json +0 -22
  135. package/dist/translations/fr.json +0 -22
  136. package/dist/translations/pl.json +0 -22
  137. package/dist/translations/uk.json +0 -22
  138. package/dist/ui/Overview.d.ts +0 -3
  139. package/dist/ui/Overview.d.ts.map +0 -1
  140. package/dist/ui/Overview.js +0 -55
  141. package/dist/ui/Overview.js.map +0 -1
  142. package/dist/ui/Preview.d.ts +0 -8
  143. package/dist/ui/Preview.d.ts.map +0 -1
  144. package/dist/ui/Preview.js.map +0 -1
@@ -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"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,OAAO,MAAMA,WAAW;IACtBC,aAAa;QACXC,WAAW;QACXC,WAAW;IACb;IACAC,OAAO;QACLF,WAAW;QACXC,WAAW;IACb;AACF,EAAC"}
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 { MetaDescriptionComponent } from '../fields/MetaDescription/MetaDescriptionComponent.js';
2
+ export { MetaImageComponent } from '../fields/MetaImage/MetaImageComponent.js';
3
+ export { MetaTitleComponent } from '../fields/MetaTitle/MetaTitleComponent.js';
4
+ export { OverviewComponent } from '../fields/Overview/OverviewComponent.js';
5
+ export { PreviewComponent } from '../fields/Preview/PreviewComponent.js';
6
+ //# sourceMappingURL=client.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/exports/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uDAAuD,CAAA;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAA;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAA;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAA"}
@@ -0,0 +1,7 @@
1
+ export { MetaDescriptionComponent } from '../fields/MetaDescription/MetaDescriptionComponent.js';
2
+ export { MetaImageComponent } from '../fields/MetaImage/MetaImageComponent.js';
3
+ export { MetaTitleComponent } from '../fields/MetaTitle/MetaTitleComponent.js';
4
+ export { OverviewComponent } from '../fields/Overview/OverviewComponent.js';
5
+ export { PreviewComponent } from '../fields/Preview/PreviewComponent.js';
6
+
7
+ //# sourceMappingURL=client.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { MetaDescriptionComponent } from '../fields/MetaDescription/MetaDescriptionComponent.js'\nexport { MetaImageComponent } from '../fields/MetaImage/MetaImageComponent.js'\nexport { MetaTitleComponent } from '../fields/MetaTitle/MetaTitleComponent.js'\nexport { OverviewComponent } from '../fields/Overview/OverviewComponent.js'\nexport { PreviewComponent } from '../fields/Preview/PreviewComponent.js'\n"],"names":["MetaDescriptionComponent","MetaImageComponent","MetaTitleComponent","OverviewComponent","PreviewComponent"],"mappings":"AAAA,SAASA,wBAAwB,QAAQ,wDAAuD;AAChG,SAASC,kBAAkB,QAAQ,4CAA2C;AAC9E,SAASC,kBAAkB,QAAQ,4CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,0CAAyC;AAC3E,SAASC,gBAAgB,QAAQ,wCAAuC"}
@@ -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":[],"rangeMappings":"","mappings":"AAAA,WAOoB"}
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,8 @@
1
+ import type { TextareaFieldClientProps } from 'payload';
2
+ import React from 'react';
3
+ type MetaDescriptionProps = {
4
+ readonly hasGenerateDescriptionFn: boolean;
5
+ } & TextareaFieldClientProps;
6
+ export declare const MetaDescriptionComponent: React.FC<MetaDescriptionProps>;
7
+ export {};
8
+ //# 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,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAavD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,OAAO,CAAA;CAC3C,GAAG,wBAAwB,CAAA;AAE5B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgLnE,CAAA"}
@@ -1,37 +1,41 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { FieldLabel } from '@payloadcms/ui/fields/FieldLabel';
4
- import { TextareaInput } from '@payloadcms/ui/fields/Textarea';
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, useConfig, useDocumentInfo, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
4
+ import { reduceToSerializableFields } from '@payloadcms/ui/shared';
11
5
  import React, { useCallback } from 'react';
12
- import { defaults } from '../defaults.js';
13
- import { LengthIndicator } from '../ui/LengthIndicator.js';
14
- const { maxLength, minLength } = defaults.description;
15
- export const MetaDescription = (props)=>{
16
- const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, path, required } = props;
17
- const { path: pathFromContext } = useFieldProps();
6
+ import { defaults } from '../../defaults.js';
7
+ import { LengthIndicator } from '../../ui/LengthIndicator.js';
8
+ const { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description;
9
+ export const MetaDescriptionComponent = (props)=>{
10
+ const { field: { label, localized, maxLength: maxLengthFromProps, minLength: minLengthFromProps, required }, hasGenerateDescriptionFn, path } = props;
11
+ const { config: { routes: { api }, serverURL } } = useConfig();
18
12
  const { t } = useTranslation();
19
13
  const locale = useLocale();
20
- const [fields] = useAllFormFields();
14
+ const { getData } = useForm();
21
15
  const docInfo = useDocumentInfo();
22
- const field = useField({
16
+ const maxLength = maxLengthFromProps || maxLengthDefault;
17
+ const minLength = minLengthFromProps || minLengthDefault;
18
+ const { customComponents: { AfterInput, BeforeInput, Label }, errorMessage, setValue, showError, value } = useField({
23
19
  path
24
20
  });
25
- const { errorMessage, setValue, showError, value } = field;
26
21
  const regenerateDescription = useCallback(async ()=>{
27
- if (!hasGenerateDescriptionFn) return;
28
- const genDescriptionResponse = await fetch('/api/plugin-seo/generate-description', {
22
+ if (!hasGenerateDescriptionFn) {
23
+ return;
24
+ }
25
+ const endpoint = `${serverURL}${api}/plugin-seo/generate-description`;
26
+ const genDescriptionResponse = await fetch(endpoint, {
29
27
  body: JSON.stringify({
30
- ...docInfo,
31
- doc: {
32
- ...fields
33
- },
34
- locale: typeof locale === 'object' ? locale?.code : locale
28
+ id: docInfo.id,
29
+ collectionSlug: docInfo.collectionSlug,
30
+ doc: getData(),
31
+ docPermissions: docInfo.docPermissions,
32
+ globalSlug: docInfo.globalSlug,
33
+ hasPublishPermission: docInfo.hasPublishPermission,
34
+ hasSavePermission: docInfo.hasSavePermission,
35
+ initialData: docInfo.initialData,
36
+ initialState: reduceToSerializableFields(docInfo.initialState),
37
+ locale: typeof locale === 'object' ? locale?.code : locale,
38
+ title: docInfo.title
35
39
  }),
36
40
  credentials: 'include',
37
41
  headers: {
@@ -42,11 +46,21 @@ export const MetaDescription = (props)=>{
42
46
  const { result: generatedDescription } = await genDescriptionResponse.json();
43
47
  setValue(generatedDescription || '');
44
48
  }, [
45
- fields,
46
- setValue,
47
49
  hasGenerateDescriptionFn,
50
+ serverURL,
51
+ api,
52
+ docInfo.id,
53
+ docInfo.collectionSlug,
54
+ docInfo.docPermissions,
55
+ docInfo.globalSlug,
56
+ docInfo.hasPublishPermission,
57
+ docInfo.hasSavePermission,
58
+ docInfo.initialData,
59
+ docInfo.initialState,
60
+ docInfo.title,
61
+ getData,
48
62
  locale,
49
- docInfo
63
+ setValue
50
64
  ]);
51
65
  return /*#__PURE__*/ _jsxs("div", {
52
66
  style: {
@@ -62,16 +76,19 @@ export const MetaDescription = (props)=>{
62
76
  /*#__PURE__*/ _jsxs("div", {
63
77
  className: "plugin-seo__field",
64
78
  children: [
65
- /*#__PURE__*/ _jsx(FieldLabel, {
66
- CustomLabel: CustomLabel,
79
+ Label ?? /*#__PURE__*/ _jsx(FieldLabel, {
67
80
  label: label,
68
- ...labelProps || {}
81
+ localized: localized,
82
+ path: path,
83
+ required: required
69
84
  }),
70
85
  hasGenerateDescriptionFn && /*#__PURE__*/ _jsxs(React.Fragment, {
71
86
  children: [
72
87
  "  —  ",
73
88
  /*#__PURE__*/ _jsx("button", {
74
- onClick: regenerateDescription,
89
+ onClick: ()=>{
90
+ void regenerateDescription();
91
+ },
75
92
  style: {
76
93
  background: 'none',
77
94
  backgroundColor: 'transparent',
@@ -113,9 +130,11 @@ export const MetaDescription = (props)=>{
113
130
  position: 'relative'
114
131
  },
115
132
  children: /*#__PURE__*/ _jsx(TextareaInput, {
116
- CustomError: errorMessage,
133
+ AfterInput: AfterInput,
134
+ BeforeInput: BeforeInput,
135
+ Error: errorMessage,
117
136
  onChange: setValue,
118
- path: pathFromContext,
137
+ path: path,
119
138
  required: required,
120
139
  showError: showError,
121
140
  style: {
@@ -140,4 +159,4 @@ export const MetaDescription = (props)=>{
140
159
  });
141
160
  };
142
161
 
143
- //# sourceMappingURL=MetaDescription.js.map
162
+ //# 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 { TextareaFieldClientProps } from 'payload'\n\nimport {\n FieldLabel,\n TextareaInput,\n useConfig,\n useDocumentInfo,\n useField,\n useForm,\n useLocale,\n useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateDescription } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description\n\ntype MetaDescriptionProps = {\n readonly hasGenerateDescriptionFn: boolean\n} & TextareaFieldClientProps\n\nexport const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {\n const {\n field: {\n label,\n localized,\n maxLength: maxLengthFromProps,\n minLength: minLengthFromProps,\n required,\n },\n hasGenerateDescriptionFn,\n path,\n } = props\n\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const { getData } = useForm()\n const docInfo = useDocumentInfo()\n\n const maxLength = maxLengthFromProps || maxLengthDefault\n const minLength = minLengthFromProps || minLengthDefault\n\n const {\n customComponents: { AfterInput, BeforeInput, Label },\n errorMessage,\n setValue,\n showError,\n value,\n }: FieldType<string> = useField({\n path,\n } as Options)\n\n const regenerateDescription = useCallback(async () => {\n if (!hasGenerateDescriptionFn) {\n return\n }\n\n const endpoint = `${serverURL}${api}/plugin-seo/generate-description`\n\n const genDescriptionResponse = await fetch(endpoint, {\n body: JSON.stringify({\n id: docInfo.id,\n collectionSlug: docInfo.collectionSlug,\n doc: getData(),\n docPermissions: docInfo.docPermissions,\n globalSlug: docInfo.globalSlug,\n hasPublishPermission: docInfo.hasPublishPermission,\n hasSavePermission: docInfo.hasSavePermission,\n initialData: docInfo.initialData,\n initialState: reduceToSerializableFields(docInfo.initialState),\n locale: typeof locale === 'object' ? locale?.code : locale,\n title: docInfo.title,\n } satisfies Omit<\n Parameters<GenerateDescription>[0],\n 'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n >),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedDescription } = await genDescriptionResponse.json()\n\n setValue(generatedDescription || '')\n }, [\n hasGenerateDescriptionFn,\n serverURL,\n api,\n docInfo.id,\n docInfo.collectionSlug,\n docInfo.docPermissions,\n docInfo.globalSlug,\n docInfo.hasPublishPermission,\n docInfo.hasSavePermission,\n docInfo.initialData,\n docInfo.initialState,\n docInfo.title,\n getData,\n locale,\n setValue,\n ])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n {Label ?? (\n <FieldLabel label={label} localized={localized} path={path} required={required} />\n )}\n {hasGenerateDescriptionFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={() => {\n void regenerateDescription()\n }}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n <a\n href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n >\n {t('plugin-seo:bestPractices')}\n </a>\n </div>\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <TextareaInput\n AfterInput={AfterInput}\n BeforeInput={BeforeInput}\n Error={errorMessage}\n onChange={setValue}\n path={path}\n required={required}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n </div>\n </div>\n )\n}\n"],"names":["FieldLabel","TextareaInput","useConfig","useDocumentInfo","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","description","MetaDescriptionComponent","props","field","label","localized","maxLengthFromProps","minLengthFromProps","required","hasGenerateDescriptionFn","path","config","routes","api","serverURL","t","locale","getData","docInfo","customComponents","AfterInput","BeforeInput","Label","errorMessage","setValue","showError","value","regenerateDescription","endpoint","genDescriptionResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"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"}
@@ -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;AAE5C,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,aAiBlC,CAAA"}
@@ -0,0 +1,20 @@
1
+ export const MetaDescriptionField = ({ hasGenerateFn = false, overrides })=>{
2
+ return {
3
+ name: 'description',
4
+ type: 'textarea',
5
+ admin: {
6
+ components: {
7
+ Field: {
8
+ clientProps: {
9
+ hasGenerateDescriptionFn: hasGenerateFn
10
+ },
11
+ path: '@payloadcms/plugin-seo/client#MetaDescriptionComponent'
12
+ }
13
+ }
14
+ },
15
+ localized: true,
16
+ ...overrides ?? {}
17
+ };
18
+ };
19
+
20
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/fields/MetaDescription/index.ts"],"sourcesContent":["import type { TextareaField } from 'payload'\n\ninterface FieldFunctionProps {\n /**\n * Tell the component if the generate function is available as configured in the plugin config\n */\n hasGenerateFn?: boolean\n overrides?: Partial<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: {\n clientProps: {\n hasGenerateDescriptionFn: hasGenerateFn,\n },\n path: '@payloadcms/plugin-seo/client#MetaDescriptionComponent',\n },\n },\n },\n localized: true,\n ...((overrides as unknown as TextareaField) ?? {}),\n }\n}\n"],"names":["MetaDescriptionField","hasGenerateFn","overrides","name","type","admin","components","Field","clientProps","hasGenerateDescriptionFn","path","localized"],"mappings":"AAYA,OAAO,MAAMA,uBAAsC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAE;IACtF,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXC,0BAA0BR;oBAC5B;oBACAS,MAAM;gBACR;YACF;QACF;QACAC,WAAW;QACX,GAAI,AAACT,aAA0C,CAAC,CAAC;IACnD;AACF,EAAC"}
@@ -0,0 +1,8 @@
1
+ import type { UploadFieldClientProps } from 'payload';
2
+ import React from 'react';
3
+ type MetaImageProps = {
4
+ readonly hasGenerateImageFn: boolean;
5
+ } & UploadFieldClientProps;
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":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAcrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyLvD,CAAA"}
@@ -1,32 +1,40 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { FieldLabel } from '@payloadcms/ui/fields/FieldLabel';
4
- import { UploadInput } from '@payloadcms/ui/fields/Upload';
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, RenderCustomComponent, UploadInput, useConfig, useDocumentInfo, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
4
+ import { reduceToSerializableFields } from '@payloadcms/ui/shared';
11
5
  import React, { useCallback } from 'react';
12
- import { Pill } from '../ui/Pill.js';
13
- export const MetaImage = (props)=>{
14
- const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {};
15
- const field = useField(props);
6
+ import { Pill } from '../../ui/Pill.js';
7
+ export const MetaImageComponent = (props)=>{
8
+ const { field: { label, localized, relationTo, required }, hasGenerateImageFn, path } = props || {};
9
+ const { config: { collections, routes: { api }, serverURL } } = useConfig();
10
+ const field = useField({
11
+ ...props,
12
+ path
13
+ });
14
+ const { customComponents: { Error, Label } } = field;
16
15
  const { t } = useTranslation();
17
16
  const locale = useLocale();
18
- const [fields] = useAllFormFields();
17
+ const { getData } = useForm();
19
18
  const docInfo = useDocumentInfo();
20
- const { errorMessage, setValue, showError, value } = field;
19
+ const { setValue, showError, value } = field;
21
20
  const regenerateImage = useCallback(async ()=>{
22
- if (!hasGenerateImageFn) return;
23
- const genImageResponse = await fetch('/api/plugin-seo/generate-image', {
21
+ if (!hasGenerateImageFn) {
22
+ return;
23
+ }
24
+ const endpoint = `${serverURL}${api}/plugin-seo/generate-image`;
25
+ const genImageResponse = await fetch(endpoint, {
24
26
  body: JSON.stringify({
25
- ...docInfo,
26
- doc: {
27
- ...fields
28
- },
29
- locale: typeof locale === 'object' ? locale?.code : locale
27
+ id: docInfo.id,
28
+ collectionSlug: docInfo.collectionSlug,
29
+ doc: getData(),
30
+ docPermissions: docInfo.docPermissions,
31
+ globalSlug: docInfo.globalSlug,
32
+ hasPublishPermission: docInfo.hasPublishPermission,
33
+ hasSavePermission: docInfo.hasSavePermission,
34
+ initialData: docInfo.initialData,
35
+ initialState: reduceToSerializableFields(docInfo.initialState),
36
+ locale: typeof locale === 'object' ? locale?.code : locale,
37
+ title: docInfo.title
30
38
  }),
31
39
  credentials: 'include',
32
40
  headers: {
@@ -34,18 +42,26 @@ export const MetaImage = (props)=>{
34
42
  },
35
43
  method: 'POST'
36
44
  });
37
- const { result: generatedImage } = await genImageResponse.json();
45
+ const generatedImage = await genImageResponse.text();
38
46
  setValue(generatedImage || '');
39
47
  }, [
40
- fields,
41
- setValue,
42
48
  hasGenerateImageFn,
49
+ serverURL,
50
+ api,
51
+ docInfo.id,
52
+ docInfo.collectionSlug,
53
+ docInfo.docPermissions,
54
+ docInfo.globalSlug,
55
+ docInfo.hasPublishPermission,
56
+ docInfo.hasSavePermission,
57
+ docInfo.initialData,
58
+ docInfo.initialState,
59
+ docInfo.title,
60
+ getData,
43
61
  locale,
44
- docInfo
62
+ setValue
45
63
  ]);
46
64
  const hasImage = Boolean(value);
47
- const config = useConfig();
48
- const { collections, routes: { api } = {}, serverURL } = config;
49
65
  const collection = collections?.find((coll)=>coll.slug === relationTo) || undefined;
50
66
  return /*#__PURE__*/ _jsxs("div", {
51
67
  style: {
@@ -61,16 +77,22 @@ export const MetaImage = (props)=>{
61
77
  /*#__PURE__*/ _jsxs("div", {
62
78
  className: "plugin-seo__field",
63
79
  children: [
64
- /*#__PURE__*/ _jsx(FieldLabel, {
65
- CustomLabel: CustomLabel,
66
- label: label,
67
- ...labelProps || {}
80
+ /*#__PURE__*/ _jsx(RenderCustomComponent, {
81
+ CustomComponent: Label,
82
+ Fallback: /*#__PURE__*/ _jsx(FieldLabel, {
83
+ label: label,
84
+ localized: localized,
85
+ path: path,
86
+ required: required
87
+ })
68
88
  }),
69
89
  hasGenerateImageFn && /*#__PURE__*/ _jsxs(React.Fragment, {
70
90
  children: [
71
91
  "  —  ",
72
92
  /*#__PURE__*/ _jsx("button", {
73
- onClick: regenerateImage,
93
+ onClick: ()=>{
94
+ void regenerateImage();
95
+ },
74
96
  style: {
75
97
  background: 'none',
76
98
  backgroundColor: 'transparent',
@@ -101,19 +123,23 @@ export const MetaImage = (props)=>{
101
123
  position: 'relative'
102
124
  },
103
125
  children: /*#__PURE__*/ _jsx(UploadInput, {
104
- CustomError: errorMessage,
105
126
  api: api,
106
127
  collection: collection,
128
+ Error: Error,
107
129
  filterOptions: field.filterOptions,
108
- label: undefined,
109
130
  onChange: (incomingImage)=>{
110
131
  if (incomingImage !== null) {
111
- const { id: incomingID } = incomingImage;
112
- setValue(incomingID);
132
+ if (typeof incomingImage === 'object') {
133
+ const { id: incomingID } = incomingImage;
134
+ setValue(incomingID);
135
+ } else {
136
+ setValue(incomingImage);
137
+ }
113
138
  } else {
114
139
  setValue(null);
115
140
  }
116
141
  },
142
+ path: path,
117
143
  relationTo: relationTo,
118
144
  required: required,
119
145
  serverURL: serverURL,
@@ -140,4 +166,4 @@ export const MetaImage = (props)=>{
140
166
  });
141
167
  };
142
168
 
143
- //# sourceMappingURL=MetaImage.js.map
169
+ //# sourceMappingURL=MetaImageComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType, Options } from '@payloadcms/ui'\nimport type { UploadFieldClientProps } from 'payload'\n\nimport {\n FieldLabel,\n RenderCustomComponent,\n UploadInput,\n useConfig,\n useDocumentInfo,\n useField,\n useForm,\n useLocale,\n useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateImage } from '../../types.js'\n\nimport { Pill } from '../../ui/Pill.js'\n\ntype MetaImageProps = {\n readonly hasGenerateImageFn: boolean\n} & UploadFieldClientProps\n\nexport const MetaImageComponent: React.FC<MetaImageProps> = (props) => {\n const {\n field: { label, localized, relationTo, required },\n hasGenerateImageFn,\n path,\n } = props || {}\n\n const {\n config: {\n collections,\n routes: { api },\n serverURL,\n },\n } = useConfig()\n\n const field: FieldType<string> = useField({ ...props, path } as Options)\n const {\n customComponents: { Error, Label },\n } = field\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const { getData } = useForm()\n const docInfo = useDocumentInfo()\n\n const { setValue, showError, value } = field\n\n const regenerateImage = useCallback(async () => {\n if (!hasGenerateImageFn) {\n return\n }\n\n const endpoint = `${serverURL}${api}/plugin-seo/generate-image`\n\n const genImageResponse = await fetch(endpoint, {\n body: JSON.stringify({\n id: docInfo.id,\n collectionSlug: docInfo.collectionSlug,\n doc: getData(),\n docPermissions: docInfo.docPermissions,\n globalSlug: docInfo.globalSlug,\n hasPublishPermission: docInfo.hasPublishPermission,\n hasSavePermission: docInfo.hasSavePermission,\n initialData: docInfo.initialData,\n initialState: reduceToSerializableFields(docInfo.initialState),\n locale: typeof locale === 'object' ? locale?.code : locale,\n title: docInfo.title,\n } satisfies Omit<\n Parameters<GenerateImage>[0],\n 'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n >),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const generatedImage = await genImageResponse.text()\n\n setValue(generatedImage || '')\n }, [\n hasGenerateImageFn,\n serverURL,\n api,\n docInfo.id,\n docInfo.collectionSlug,\n docInfo.docPermissions,\n docInfo.globalSlug,\n docInfo.hasPublishPermission,\n docInfo.hasSavePermission,\n docInfo.initialData,\n docInfo.initialState,\n docInfo.title,\n getData,\n locale,\n setValue,\n ])\n\n const hasImage = Boolean(value)\n\n const collection = collections?.find((coll) => coll.slug === relationTo) || undefined\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <RenderCustomComponent\n CustomComponent={Label}\n Fallback={\n <FieldLabel label={label} localized={localized} path={path} required={required} />\n }\n />\n {hasGenerateImageFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={() => {\n void regenerateImage()\n }}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n {hasGenerateImageFn && (\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:imageAutoGenerationTip')}\n </div>\n )}\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <UploadInput\n api={api}\n collection={collection}\n Error={Error}\n filterOptions={field.filterOptions}\n onChange={(incomingImage) => {\n if (incomingImage !== null) {\n if (typeof incomingImage === 'object') {\n const { id: incomingID } = incomingImage\n setValue(incomingID)\n } else {\n setValue(incomingImage)\n }\n } else {\n setValue(null)\n }\n }}\n path={path}\n relationTo={relationTo}\n required={required}\n serverURL={serverURL}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <Pill\n backgroundColor={hasImage ? 'green' : 'red'}\n color=\"white\"\n label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n />\n </div>\n </div>\n )\n}\n"],"names":["FieldLabel","RenderCustomComponent","UploadInput","useConfig","useDocumentInfo","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","React","useCallback","Pill","MetaImageComponent","props","field","label","localized","relationTo","required","hasGenerateImageFn","path","config","collections","routes","api","serverURL","customComponents","Error","Label","t","locale","getData","docInfo","setValue","showError","value","regenerateImage","endpoint","genImageResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","generatedImage","text","hasImage","Boolean","collection","find","coll","slug","undefined","div","style","marginBottom","position","className","CustomComponent","Fallback","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","filterOptions","onChange","incomingImage","incomingID","alignItems","display","width"],"mappings":"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"}
@@ -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;AAE1C,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,aAoB5B,CAAA"}
@@ -0,0 +1,23 @@
1
+ export const MetaImageField = ({ hasGenerateFn = false, overrides, relationTo })=>{
2
+ return {
3
+ name: 'image',
4
+ type: 'upload',
5
+ admin: {
6
+ components: {
7
+ Field: {
8
+ clientProps: {
9
+ hasGenerateImageFn: hasGenerateFn
10
+ },
11
+ path: '@payloadcms/plugin-seo/client#MetaImageComponent'
12
+ }
13
+ },
14
+ description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.'
15
+ },
16
+ label: 'Meta Image',
17
+ localized: true,
18
+ relationTo,
19
+ ...overrides ?? {}
20
+ };
21
+ };
22
+
23
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/fields/MetaImage/index.ts"],"sourcesContent":["import type { UploadField } from 'payload'\n\ninterface FieldFunctionProps {\n /**\n * Tell the component if the generate function is available as configured in the plugin config\n */\n hasGenerateFn?: boolean\n overrides?: Partial<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: {\n clientProps: {\n hasGenerateImageFn: hasGenerateFn,\n },\n path: '@payloadcms/plugin-seo/client#MetaImageComponent',\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":["MetaImageField","hasGenerateFn","overrides","relationTo","name","type","admin","components","Field","clientProps","hasGenerateImageFn","path","description","label","localized"],"mappings":"AAaA,OAAO,MAAMA,iBAAgC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAEC,UAAU,EAAE;IAC5F,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXC,oBAAoBT;oBACtB;oBACAU,MAAM;gBACR;YACF;YACAC,aAAa;QACf;QACAC,OAAO;QACPC,WAAW;QACXX;QACA,GAAI,AAACD,aAAwC,CAAC,CAAC;IACjD;AACF,EAAC"}
@@ -0,0 +1,9 @@
1
+ import type { TextFieldClientProps } from 'payload';
2
+ import React from 'react';
3
+ import '../index.scss';
4
+ type MetaTitleProps = {
5
+ readonly hasGenerateTitleFn: boolean;
6
+ } & TextFieldClientProps;
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,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAanD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,eAAe,CAAA;AAItB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,oBAAoB,CAAA;AAExB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoKvD,CAAA"}