@payloadcms/plugin-seo 3.0.0-canary.6d9b462 → 3.0.0-canary.6f0a417

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 (132) 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} +49 -28
  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} +60 -33
  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} +50 -29
  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 +10 -0
  36. package/dist/fields/Overview/OverviewComponent.d.ts.map +1 -0
  37. package/dist/{ui/Overview.js → fields/Overview/OverviewComponent.js} +14 -9
  38. package/dist/fields/Overview/OverviewComponent.js.map +1 -0
  39. package/dist/fields/Overview/index.d.ts +26 -0
  40. package/dist/fields/Overview/index.d.ts.map +1 -0
  41. package/dist/fields/Overview/index.js +22 -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} +29 -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 +1 -1
  53. package/dist/index.d.ts.map +1 -1
  54. package/dist/index.js +64 -112
  55. package/dist/index.js.map +1 -1
  56. package/dist/translations/de.d.ts +3 -0
  57. package/dist/translations/de.d.ts.map +1 -0
  58. package/dist/translations/de.js +25 -0
  59. package/dist/translations/de.js.map +1 -0
  60. package/dist/translations/en.d.ts +3 -0
  61. package/dist/translations/en.d.ts.map +1 -0
  62. package/dist/translations/en.js +25 -0
  63. package/dist/translations/en.js.map +1 -0
  64. package/dist/translations/es.d.ts +3 -0
  65. package/dist/translations/es.d.ts.map +1 -0
  66. package/dist/translations/es.js +25 -0
  67. package/dist/translations/es.js.map +1 -0
  68. package/dist/translations/fa.d.ts +3 -0
  69. package/dist/translations/fa.d.ts.map +1 -0
  70. package/dist/translations/fa.js +25 -0
  71. package/dist/translations/fa.js.map +1 -0
  72. package/dist/translations/fr.d.ts +3 -0
  73. package/dist/translations/fr.d.ts.map +1 -0
  74. package/dist/translations/fr.js +25 -0
  75. package/dist/translations/fr.js.map +1 -0
  76. package/dist/translations/index.d.ts +12 -156
  77. package/dist/translations/index.d.ts.map +1 -1
  78. package/dist/translations/index.js +20 -154
  79. package/dist/translations/index.js.map +1 -1
  80. package/dist/translations/it.d.ts +3 -0
  81. package/dist/translations/it.d.ts.map +1 -0
  82. package/dist/translations/it.js +25 -0
  83. package/dist/translations/it.js.map +1 -0
  84. package/dist/translations/nb.d.ts +3 -0
  85. package/dist/translations/nb.d.ts.map +1 -0
  86. package/dist/translations/nb.js +25 -0
  87. package/dist/translations/nb.js.map +1 -0
  88. package/dist/translations/pl.d.ts +3 -0
  89. package/dist/translations/pl.d.ts.map +1 -0
  90. package/dist/translations/pl.js +25 -0
  91. package/dist/translations/pl.js.map +1 -0
  92. package/dist/translations/ru.d.ts +3 -0
  93. package/dist/translations/ru.d.ts.map +1 -0
  94. package/dist/translations/ru.js +25 -0
  95. package/dist/translations/ru.js.map +1 -0
  96. package/dist/translations/translation-schema.json +5 -1
  97. package/dist/translations/uk.d.ts +3 -0
  98. package/dist/translations/uk.d.ts.map +1 -0
  99. package/dist/translations/uk.js +25 -0
  100. package/dist/translations/uk.js.map +1 -0
  101. package/dist/translations/vi.d.ts +3 -0
  102. package/dist/translations/vi.d.ts.map +1 -0
  103. package/dist/translations/vi.js +25 -0
  104. package/dist/translations/vi.js.map +1 -0
  105. package/dist/types.d.ts +23 -10
  106. package/dist/types.d.ts.map +1 -1
  107. package/dist/types.js.map +1 -1
  108. package/dist/ui/LengthIndicator.js +2 -2
  109. package/dist/ui/LengthIndicator.js.map +1 -1
  110. package/dist/ui/Pill.js.map +1 -1
  111. package/package.json +35 -25
  112. package/dist/fields/MetaDescription.d.ts +0 -9
  113. package/dist/fields/MetaDescription.d.ts.map +0 -1
  114. package/dist/fields/MetaDescription.js.map +0 -1
  115. package/dist/fields/MetaImage.d.ts +0 -8
  116. package/dist/fields/MetaImage.d.ts.map +0 -1
  117. package/dist/fields/MetaImage.js.map +0 -1
  118. package/dist/fields/MetaTitle.d.ts +0 -9
  119. package/dist/fields/MetaTitle.d.ts.map +0 -1
  120. package/dist/fields/MetaTitle.js.map +0 -1
  121. package/dist/translations/en.json +0 -22
  122. package/dist/translations/es.json +0 -22
  123. package/dist/translations/fa.json +0 -22
  124. package/dist/translations/fr.json +0 -22
  125. package/dist/translations/pl.json +0 -22
  126. package/dist/translations/uk.json +0 -22
  127. package/dist/ui/Overview.d.ts +0 -3
  128. package/dist/ui/Overview.d.ts.map +0 -1
  129. package/dist/ui/Overview.js.map +0 -1
  130. package/dist/ui/Preview.d.ts +0 -8
  131. package/dist/ui/Preview.d.ts.map +0 -1
  132. package/dist/ui/Preview.js.map +0 -1
@@ -1,38 +1,41 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { TextInput } from '@payloadcms/ui/fields/Text';
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, useConfig, useDocumentInfo, useField, useFieldProps, useForm, useLocale, useTranslation } from '@payloadcms/ui';
11
4
  import React, { useCallback } from 'react';
12
- import { defaults } from '../defaults.js';
13
- import { LengthIndicator } from '../ui/LengthIndicator.js';
14
- import './index.scss';
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 MetaTitle = (props)=>{
17
- const { CustomLabel, hasGenerateTitleFn, label, labelProps, path, required } = props || {};
9
+ export const MetaTitleComponent = (props)=>{
10
+ const { field: { admin: { components: { Label } }, label, required }, field: fieldFromProps, hasGenerateTitleFn, labelProps } = props || {};
18
11
  const { path: pathFromContext } = useFieldProps();
19
12
  const { t } = useTranslation();
13
+ const { config: { routes: { api }, serverURL } } = useConfig();
20
14
  const field = useField({
21
- path
15
+ path: pathFromContext
22
16
  });
23
17
  const locale = useLocale();
24
- const [fields] = useAllFormFields();
18
+ const { getData } = useForm();
25
19
  const docInfo = useDocumentInfo();
26
20
  const { errorMessage, setValue, showError, value } = field;
27
21
  const regenerateTitle = useCallback(async ()=>{
28
- if (!hasGenerateTitleFn) return;
29
- const genTitleResponse = await fetch('/api/plugin-seo/generate-title', {
22
+ if (!hasGenerateTitleFn) {
23
+ return;
24
+ }
25
+ const endpoint = `${serverURL}${api}/plugin-seo/generate-title`;
26
+ const genTitleResponse = await fetch(endpoint, {
30
27
  body: JSON.stringify({
31
- ...docInfo,
32
- doc: {
33
- ...fields
34
- },
35
- 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: docInfo.initialState,
37
+ locale: typeof locale === 'object' ? locale?.code : locale,
38
+ title: docInfo.title
36
39
  }),
37
40
  credentials: 'include',
38
41
  headers: {
@@ -43,11 +46,21 @@ export const MetaTitle = (props)=>{
43
46
  const { result: generatedTitle } = await genTitleResponse.json();
44
47
  setValue(generatedTitle || '');
45
48
  }, [
46
- fields,
47
- setValue,
48
49
  hasGenerateTitleFn,
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,
49
62
  locale,
50
- docInfo
63
+ setValue
51
64
  ]);
52
65
  return /*#__PURE__*/ _jsxs("div", {
53
66
  style: {
@@ -64,15 +77,19 @@ export const MetaTitle = (props)=>{
64
77
  className: "plugin-seo__field",
65
78
  children: [
66
79
  /*#__PURE__*/ _jsx(FieldLabel, {
67
- CustomLabel: CustomLabel,
80
+ field: fieldFromProps,
81
+ Label: Label,
68
82
  label: label,
83
+ required: required,
69
84
  ...labelProps || {}
70
85
  }),
71
86
  hasGenerateTitleFn && /*#__PURE__*/ _jsxs(React.Fragment, {
72
87
  children: [
73
88
  "  —  ",
74
89
  /*#__PURE__*/ _jsx("button", {
75
- onClick: regenerateTitle,
90
+ onClick: ()=>{
91
+ void regenerateTitle();
92
+ },
76
93
  style: {
77
94
  background: 'none',
78
95
  backgroundColor: 'transparent',
@@ -115,7 +132,11 @@ export const MetaTitle = (props)=>{
115
132
  position: 'relative'
116
133
  },
117
134
  children: /*#__PURE__*/ _jsx(TextInput, {
118
- CustomError: errorMessage,
135
+ Error: {
136
+ type: 'client',
137
+ Component: null,
138
+ RenderedComponent: errorMessage
139
+ },
119
140
  onChange: setValue,
120
141
  path: pathFromContext,
121
142
  required: required,
@@ -142,4 +163,4 @@ export const MetaTitle = (props)=>{
142
163
  });
143
164
  };
144
165
 
145
- //# sourceMappingURL=MetaTitle.js.map
166
+ //# 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 { TextFieldClientProps } from 'payload'\n\nimport {\n FieldLabel,\n TextInput,\n useConfig,\n useDocumentInfo,\n useField,\n useFieldProps,\n useForm,\n useLocale,\n useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateTitle } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\nimport '../index.scss'\n\nconst { maxLength, minLength } = defaults.title\n\ntype MetaTitleProps = {\n readonly hasGenerateTitleFn: boolean\n} & TextFieldClientProps\n\nexport const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {\n const {\n field: {\n admin: {\n components: { Label },\n },\n label,\n required,\n },\n field: fieldFromProps,\n hasGenerateTitleFn,\n labelProps,\n } = props || {}\n const { path: pathFromContext } = useFieldProps()\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n\n const field: FieldType<string> = useField({\n path: pathFromContext,\n } as Options)\n\n const locale = useLocale()\n const { getData } = useForm()\n const docInfo = useDocumentInfo()\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateTitle = useCallback(async () => {\n if (!hasGenerateTitleFn) {\n return\n }\n\n const endpoint = `${serverURL}${api}/plugin-seo/generate-title`\n\n const genTitleResponse = await fetch(endpoint, {\n body: JSON.stringify({\n id: docInfo.id,\n collectionSlug: docInfo.collectionSlug,\n doc: getData(),\n docPermissions: docInfo.docPermissions,\n globalSlug: docInfo.globalSlug,\n hasPublishPermission: docInfo.hasPublishPermission,\n hasSavePermission: docInfo.hasSavePermission,\n initialData: docInfo.initialData,\n initialState: docInfo.initialState,\n locale: typeof locale === 'object' ? locale?.code : locale,\n title: docInfo.title,\n } satisfies Omit<Parameters<GenerateTitle>[0], 'collectionConfig' | 'globalConfig' | 'req'>),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedTitle } = await genTitleResponse.json()\n\n setValue(generatedTitle || '')\n }, [\n hasGenerateTitleFn,\n serverURL,\n api,\n docInfo.id,\n docInfo.collectionSlug,\n docInfo.docPermissions,\n docInfo.globalSlug,\n docInfo.hasPublishPermission,\n docInfo.hasSavePermission,\n docInfo.initialData,\n docInfo.initialState,\n docInfo.title,\n getData,\n locale,\n setValue,\n ])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel\n field={fieldFromProps}\n Label={Label}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n {hasGenerateTitleFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={() => {\n void regenerateTitle()\n }}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n <a\n href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n >\n {t('plugin-seo:bestPractices')}\n </a>\n .\n </div>\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <TextInput\n Error={{\n type: 'client',\n Component: null,\n RenderedComponent: errorMessage,\n }}\n onChange={setValue}\n path={pathFromContext}\n required={required}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n </div>\n </div>\n )\n}\n"],"names":["FieldLabel","TextInput","useConfig","useDocumentInfo","useField","useFieldProps","useForm","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","title","MetaTitleComponent","props","field","admin","components","Label","label","required","fieldFromProps","hasGenerateTitleFn","labelProps","path","pathFromContext","t","config","routes","api","serverURL","locale","getData","docInfo","errorMessage","setValue","showError","value","regenerateTitle","endpoint","genTitleResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","Component","RenderedComponent","onChange","alignItems","display","width","text"],"mappings":"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"}
@@ -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;AAExC,UAAU,kBAAkB;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAC/B;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,SAAS,CAAA;AAEpF,eAAO,MAAM,cAAc,EAAE,aAiB5B,CAAA"}
@@ -0,0 +1,20 @@
1
+ export const MetaTitleField = ({ hasGenerateFn = false, overrides })=>{
2
+ return {
3
+ name: 'title',
4
+ type: 'text',
5
+ admin: {
6
+ components: {
7
+ Field: {
8
+ clientProps: {
9
+ hasGenerateTitleFn: hasGenerateFn
10
+ },
11
+ path: '@payloadcms/plugin-seo/client#MetaTitleComponent'
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/MetaTitle/index.ts"],"sourcesContent":["import type { TextField } from 'payload'\n\ninterface FieldFunctionProps {\n /**\n * Tell the component if the generate function is available as configured in the plugin config\n */\n hasGenerateFn?: boolean\n overrides?: Partial<TextField>\n}\n\ntype FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextField\n\nexport const MetaTitleField: FieldFunction = ({ hasGenerateFn = false, overrides }) => {\n return {\n name: 'title',\n type: 'text',\n admin: {\n components: {\n Field: {\n clientProps: {\n hasGenerateTitleFn: hasGenerateFn,\n },\n path: '@payloadcms/plugin-seo/client#MetaTitleComponent',\n },\n },\n },\n localized: true,\n ...((overrides as unknown as TextField) ?? {}),\n }\n}\n"],"names":["MetaTitleField","hasGenerateFn","overrides","name","type","admin","components","Field","clientProps","hasGenerateTitleFn","path","localized"],"mappings":"AAYA,OAAO,MAAMA,iBAAgC,CAAC,EAAEC,gBAAgB,KAAK,EAAEC,SAAS,EAAE;IAChF,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXC,oBAAoBR;oBACtB;oBACAS,MAAM;gBACR;YACF;QACF;QACAC,WAAW;QACX,GAAI,AAACT,aAAsC,CAAC,CAAC;IAC/C;AACF,EAAC"}
@@ -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,CA6DrD,CAAA"}
@@ -1,19 +1,20 @@
1
1
  'use client';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- import { useAllFormFields, useForm } from '@payloadcms/ui/forms/Form';
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 '../defaults.js';
5
+ import { defaults } from '../../defaults.js';
7
6
  const { description: { maxLength: maxDesc, minLength: minDesc }, title: { maxLength: maxTitle, minLength: minTitle } } = defaults;
8
- export const Overview = ()=>{
7
+ export const OverviewComponent = ({ descriptionPath: descriptionPathFromContext, imagePath: imagePathFromContext, titlePath: titlePathFromContext })=>{
9
8
  const { // dispatchFields,
10
9
  getFields } = useForm();
11
- const [{ 'meta.description': { value: metaDesc } = {}, 'meta.image': { value: metaImage } = {}, 'meta.title': { value: metaTitle } = {} }] = useAllFormFields();
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();
15
17
  const [imageIsValid, setImageIsValid] = useState();
16
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
17
18
  const resetAll = useCallback(()=>{
18
19
  const fields = getFields();
19
20
  const fieldsWithoutMeta = fields;
@@ -25,8 +26,12 @@ export const Overview = ()=>{
25
26
  getFields
26
27
  ]);
27
28
  useEffect(()=>{
28
- if (typeof metaTitle === 'string') setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle);
29
- if (typeof metaDesc === 'string') setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc);
29
+ if (typeof metaTitle === 'string') {
30
+ setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle);
31
+ }
32
+ if (typeof metaDesc === 'string') {
33
+ setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc);
34
+ }
30
35
  setImageIsValid(Boolean(metaImage));
31
36
  }, [
32
37
  metaTitle,
@@ -52,4 +57,4 @@ export const Overview = ()=>{
52
57
  });
53
58
  };
54
59
 
55
- //# sourceMappingURL=Overview.js.map
60
+ //# 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 const resetAll = useCallback(() => {\n const fields = getFields()\n const fieldsWithoutMeta = fields\n fieldsWithoutMeta['meta.title'].value = ''\n fieldsWithoutMeta['meta.description'].value = ''\n fieldsWithoutMeta['meta.image'].value = ''\n // dispatchFields(fieldsWithoutMeta);\n }, [getFields])\n\n useEffect(() => {\n if (typeof metaTitle === 'string') {\n setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n }\n if (typeof metaDesc === 'string') {\n setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n }\n setImageIsValid(Boolean(metaImage))\n }, [metaTitle, metaDesc, metaImage])\n\n const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n const numberOfPasses = testResults.filter(Boolean).length\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div>\n {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n </div>\n </div>\n )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useCallback","useEffect","useState","defaults","description","maxLength","maxDesc","minLength","minDesc","title","maxTitle","minTitle","OverviewComponent","descriptionPath","descriptionPathFromContext","imagePath","imagePathFromContext","titlePath","titlePathFromContext","getFields","value","metaDesc","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","resetAll","fields","fieldsWithoutMeta","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAgB;AAC1E,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,oBAAmB;AAE5C,MAAM,EACJC,aAAa,EAAEC,WAAWC,OAAO,EAAEC,WAAWC,OAAO,EAAE,EACvDC,OAAO,EAAEJ,WAAWK,QAAQ,EAAEH,WAAWI,QAAQ,EAAE,EACpD,GAAGR;AAQJ,OAAO,MAAMS,oBAA6C,CAAC,EACzDC,iBAAiBC,0BAA0B,EAC3CC,WAAWC,oBAAoB,EAC/BC,WAAWC,oBAAoB,EAChC;IACC,MAAM,EACJ,mBAAmB;IACnBC,SAAS,EACV,GAAGtB;IAEJ,MAAMgB,kBAAkBC,8BAA8B;IACtD,MAAMG,YAAYC,wBAAwB;IAC1C,MAAMH,YAAYC,wBAAwB;IAE1C,MAAM,CACJ,EACE,CAACH,gBAAgB,EAAE,EAAEO,OAAOC,QAAQ,EAAE,GAAG,CAAC,CAAc,EACxD,CAACN,UAAU,EAAE,EAAEK,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACnD,CAACL,UAAU,EAAE,EAAEG,OAAOG,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,CACF,GAAG3B;IACJ,MAAM,EAAE4B,CAAC,EAAE,GAAG1B;IAEd,MAAM,CAAC2B,cAAcC,gBAAgB,GAAGxB;IACxC,MAAM,CAACyB,aAAaC,eAAe,GAAG1B;IACtC,MAAM,CAAC2B,cAAcC,gBAAgB,GAAG5B;IAExC,MAAM6B,WAAW/B,YAAY;QAC3B,MAAMgC,SAASb;QACf,MAAMc,oBAAoBD;QAC1BC,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;QACxCa,iBAAiB,CAAC,mBAAmB,CAACb,KAAK,GAAG;QAC9Ca,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;IACxC,qCAAqC;IACvC,GAAG;QAACD;KAAU;IAEdlB,UAAU;QACR,IAAI,OAAOsB,cAAc,UAAU;YACjCG,gBAAgBH,UAAUW,MAAM,IAAIvB,YAAYY,UAAUW,MAAM,IAAIxB;QACtE;QACA,IAAI,OAAOW,aAAa,UAAU;YAChCO,eAAeP,SAASa,MAAM,IAAI1B,WAAWa,SAASa,MAAM,IAAI5B;QAClE;QACAwB,gBAAgBK,QAAQb;IAC1B,GAAG;QAACC;QAAWF;QAAUC;KAAU;IAEnC,MAAMc,cAAc;QAACX;QAAcE;QAAaE;KAAa;IAE7D,MAAMQ,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,KAACK;QACCC,OAAO;YACLC,cAAc;QAChB;kBAEA,cAAA,KAACF;sBACEf,EAAE,4BAA4B;gBAAEkB,SAASL;gBAAgBM,KAAKP,YAAYF,MAAM;YAAC;;;AAI1F,EAAC"}
@@ -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;AAEtC,UAAU,kBAAkB;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,OAAO,CAAA;AAEnE,eAAO,MAAM,aAAa,EAAE,aAwB3B,CAAA"}
@@ -0,0 +1,22 @@
1
+ export const OverviewField = ({ descriptionPath, imagePath, overrides, titlePath })=>{
2
+ return {
3
+ name: 'overview',
4
+ type: 'ui',
5
+ admin: {
6
+ components: {
7
+ Field: {
8
+ clientProps: {
9
+ descriptionPath,
10
+ imagePath,
11
+ titlePath
12
+ },
13
+ path: '@payloadcms/plugin-seo/client#OverviewComponent'
14
+ }
15
+ }
16
+ },
17
+ label: 'Overview',
18
+ ...overrides ?? {}
19
+ };
20
+ };
21
+
22
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/fields/Overview/index.tsx"],"sourcesContent":["import type { UIField } from 'payload'\n\ninterface FieldFunctionProps {\n /**\n * Path to the description field to use for the preview\n *\n * @default 'meta.description'\n */\n descriptionPath?: string\n /**\n * Path to the image field to use for the preview\n *\n * @default 'meta.image'\n */\n imagePath?: string\n overrides?: Partial<UIField>\n /**\n * Path to the title field to use for the preview\n *\n * @default 'meta.title'\n */\n titlePath?: string\n}\n\ntype FieldFunction = ({ overrides }: FieldFunctionProps) => UIField\n\nexport const OverviewField: FieldFunction = ({\n descriptionPath,\n imagePath,\n overrides,\n titlePath,\n}) => {\n return {\n name: 'overview',\n type: 'ui',\n admin: {\n components: {\n Field: {\n clientProps: {\n descriptionPath,\n imagePath,\n titlePath,\n },\n path: '@payloadcms/plugin-seo/client#OverviewComponent',\n },\n },\n },\n label: 'Overview',\n ...((overrides as unknown as UIField) ?? {}),\n }\n}\n"],"names":["OverviewField","descriptionPath","imagePath","overrides","titlePath","name","type","admin","components","Field","clientProps","path","label"],"mappings":"AA0BA,OAAO,MAAMA,gBAA+B,CAAC,EAC3CC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXT;wBACAC;wBACAE;oBACF;oBACAO,MAAM;gBACR;YACF;QACF;QACAC,OAAO;QACP,GAAI,AAACT,aAAoC,CAAC,CAAC;IAC7C;AACF,EAAC"}
@@ -0,0 +1,10 @@
1
+ import type { UIField } from 'payload';
2
+ import React from 'react';
3
+ type PreviewProps = {
4
+ readonly descriptionPath?: string;
5
+ readonly hasGenerateURLFn: boolean;
6
+ readonly titlePath?: string;
7
+ } & UIField;
8
+ export declare const PreviewComponent: React.FC<PreviewProps>;
9
+ export {};
10
+ //# sourceMappingURL=PreviewComponent.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAUjD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8HnD,CAAA"}
@@ -1,26 +1,35 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useAllFormFields } from '@payloadcms/ui/forms/Form';
4
- import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
5
- import { useLocale } from '@payloadcms/ui/providers/Locale';
6
- import { useTranslation } from '@payloadcms/ui/providers/Translation';
3
+ import { useAllFormFields, useConfig, useDocumentInfo, useForm, useLocale, useTranslation } from '@payloadcms/ui';
7
4
  import React, { useEffect, useState } from 'react';
8
- export const Preview = ({ hasGenerateURLFn })=>{
5
+ export const PreviewComponent = (props)=>{
6
+ const { descriptionPath: descriptionPathFromContext, hasGenerateURLFn, titlePath: titlePathFromContext } = props;
9
7
  const { t } = useTranslation();
8
+ const { config: { routes: { api }, serverURL } } = useConfig();
10
9
  const locale = useLocale();
11
10
  const [fields] = useAllFormFields();
11
+ const { getData } = useForm();
12
12
  const docInfo = useDocumentInfo();
13
- const { 'meta.description': { value: metaDescription } = {}, 'meta.title': { value: metaTitle } = {} } = fields;
13
+ const descriptionPath = descriptionPathFromContext || 'meta.description';
14
+ const titlePath = titlePathFromContext || 'meta.title';
15
+ const { [descriptionPath]: { value: metaDescription } = {}, [titlePath]: { value: metaTitle } = {} } = fields;
14
16
  const [href, setHref] = useState();
15
17
  useEffect(()=>{
18
+ const endpoint = `${serverURL}${api}/plugin-seo/generate-url`;
16
19
  const getHref = async ()=>{
17
- const genURLResponse = await fetch('/api/plugin-seo/generate-url', {
20
+ const genURLResponse = await fetch(endpoint, {
18
21
  body: JSON.stringify({
19
- ...docInfo,
20
- doc: {
21
- ...fields
22
- },
23
- locale: typeof locale === 'object' ? locale?.code : locale
22
+ id: docInfo.id,
23
+ collectionSlug: docInfo.collectionSlug,
24
+ doc: getData(),
25
+ docPermissions: docInfo.docPermissions,
26
+ globalSlug: docInfo.globalSlug,
27
+ hasPublishPermission: docInfo.hasPublishPermission,
28
+ hasSavePermission: docInfo.hasSavePermission,
29
+ initialData: docInfo.initialData,
30
+ initialState: docInfo.initialState,
31
+ locale: typeof locale === 'object' ? locale?.code : locale,
32
+ title: docInfo.title
24
33
  }),
25
34
  credentials: 'include',
26
35
  headers: {
@@ -39,9 +48,15 @@ export const Preview = ({ hasGenerateURLFn })=>{
39
48
  href,
40
49
  locale,
41
50
  docInfo,
42
- hasGenerateURLFn
51
+ hasGenerateURLFn,
52
+ getData,
53
+ serverURL,
54
+ api
43
55
  ]);
44
56
  return /*#__PURE__*/ _jsxs("div", {
57
+ style: {
58
+ marginBottom: '20px'
59
+ },
45
60
  children: [
46
61
  /*#__PURE__*/ _jsx("div", {
47
62
  children: t('plugin-seo:preview')
@@ -97,4 +112,4 @@ export const Preview = ({ hasGenerateURLFn })=>{
97
112
  });
98
113
  };
99
114
 
100
- //# sourceMappingURL=Preview.js.map
115
+ //# sourceMappingURL=PreviewComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport {\n useAllFormFields,\n useConfig,\n useDocumentInfo,\n useForm,\n useLocale,\n useTranslation,\n} from '@payloadcms/ui'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateURL } from '../../types.js'\n\ntype PreviewProps = {\n readonly descriptionPath?: string\n readonly hasGenerateURLFn: boolean\n readonly titlePath?: string\n} & UIField\n\nexport const PreviewComponent: React.FC<PreviewProps> = (props) => {\n const {\n descriptionPath: descriptionPathFromContext,\n hasGenerateURLFn,\n titlePath: titlePathFromContext,\n } = props\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const { getData } = useForm()\n const docInfo = useDocumentInfo()\n\n const descriptionPath = descriptionPathFromContext || 'meta.description'\n const titlePath = titlePathFromContext || 'meta.title'\n\n const {\n [descriptionPath]: { value: metaDescription } = {} as FormField,\n [titlePath]: { value: metaTitle } = {} as FormField,\n } = fields\n\n const [href, setHref] = useState<string>()\n\n useEffect(() => {\n const endpoint = `${serverURL}${api}/plugin-seo/generate-url`\n\n const getHref = async () => {\n const genURLResponse = await fetch(endpoint, {\n body: JSON.stringify({\n id: docInfo.id,\n collectionSlug: docInfo.collectionSlug,\n doc: getData(),\n docPermissions: docInfo.docPermissions,\n globalSlug: docInfo.globalSlug,\n hasPublishPermission: docInfo.hasPublishPermission,\n hasSavePermission: docInfo.hasSavePermission,\n initialData: docInfo.initialData,\n initialState: docInfo.initialState,\n locale: typeof locale === 'object' ? locale?.code : locale,\n title: docInfo.title,\n } satisfies Omit<Parameters<GenerateURL>[0], 'collectionConfig' | 'globalConfig' | 'req'>),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: newHref } = await genURLResponse.json()\n\n setHref(newHref)\n }\n\n if (hasGenerateURLFn && !href) {\n void getHref()\n }\n }, [fields, href, locale, docInfo, hasGenerateURLFn, getData, serverURL, api])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div>{t('plugin-seo:preview')}</div>\n <div\n style={{\n color: '#9A9A9A',\n marginBottom: '5px',\n }}\n >\n {t('plugin-seo:previewDescription')}\n </div>\n <div\n style={{\n background: 'var(--theme-elevation-50)',\n borderRadius: '5px',\n boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n maxWidth: '600px',\n padding: '20px',\n pointerEvents: 'none',\n width: '100%',\n }}\n >\n <div>\n <a\n href={href}\n style={{\n textDecoration: 'none',\n }}\n >\n {href || 'https://...'}\n </a>\n </div>\n <h4\n style={{\n margin: 0,\n }}\n >\n <a\n href=\"/\"\n style={{\n textDecoration: 'none',\n }}\n >\n {metaTitle as string}\n </a>\n </h4>\n <p\n style={{\n margin: 0,\n }}\n >\n {metaDescription as string}\n </p>\n </div>\n </div>\n )\n}\n"],"names":["useAllFormFields","useConfig","useDocumentInfo","useForm","useLocale","useTranslation","React","useEffect","useState","PreviewComponent","props","descriptionPath","descriptionPathFromContext","hasGenerateURLFn","titlePath","titlePathFromContext","t","config","routes","api","serverURL","locale","fields","getData","docInfo","value","metaDescription","metaTitle","href","setHref","endpoint","getHref","genURLResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","title","credentials","headers","method","result","newHref","json","div","style","marginBottom","color","background","borderRadius","boxShadow","maxWidth","padding","pointerEvents","width","a","textDecoration","h4","margin","p"],"mappings":"AAAA;;AAIA,SACEA,gBAAgB,EAChBC,SAAS,EACTC,eAAe,EACfC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAWlD,OAAO,MAAMC,mBAA2C,CAACC;IACvD,MAAM,EACJC,iBAAiBC,0BAA0B,EAC3CC,gBAAgB,EAChBC,WAAWC,oBAAoB,EAChC,GAAGL;IAEJ,MAAM,EAAEM,CAAC,EAAE,GAAGX;IAEd,MAAM,EACJY,QAAQ,EACNC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,EACF,GAAGnB;IAEJ,MAAMoB,SAASjB;IACf,MAAM,CAACkB,OAAO,GAAGtB;IACjB,MAAM,EAAEuB,OAAO,EAAE,GAAGpB;IACpB,MAAMqB,UAAUtB;IAEhB,MAAMS,kBAAkBC,8BAA8B;IACtD,MAAME,YAAYC,wBAAwB;IAE1C,MAAM,EACJ,CAACJ,gBAAgB,EAAE,EAAEc,OAAOC,eAAe,EAAE,GAAG,CAAC,CAAc,EAC/D,CAACZ,UAAU,EAAE,EAAEW,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,GAAGL;IAEJ,MAAM,CAACM,MAAMC,QAAQ,GAAGrB;IAExBD,UAAU;QACR,MAAMuB,WAAW,CAAC,EAAEV,UAAU,EAAED,IAAI,wBAAwB,CAAC;QAE7D,MAAMY,UAAU;YACd,MAAMC,iBAAiB,MAAMC,MAAMH,UAAU;gBAC3CI,MAAMC,KAAKC,SAAS,CAAC;oBACnBC,IAAIb,QAAQa,EAAE;oBACdC,gBAAgBd,QAAQc,cAAc;oBACtCC,KAAKhB;oBACLiB,gBAAgBhB,QAAQgB,cAAc;oBACtCC,YAAYjB,QAAQiB,UAAU;oBAC9BC,sBAAsBlB,QAAQkB,oBAAoB;oBAClDC,mBAAmBnB,QAAQmB,iBAAiB;oBAC5CC,aAAapB,QAAQoB,WAAW;oBAChCC,cAAcrB,QAAQqB,YAAY;oBAClCxB,QAAQ,OAAOA,WAAW,WAAWA,QAAQyB,OAAOzB;oBACpD0B,OAAOvB,QAAQuB,KAAK;gBACtB;gBACAC,aAAa;gBACbC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAM,EAAEC,QAAQC,OAAO,EAAE,GAAG,MAAMpB,eAAeqB,IAAI;YAErDxB,QAAQuB;QACV;QAEA,IAAIvC,oBAAoB,CAACe,MAAM;YAC7B,KAAKG;QACP;IACF,GAAG;QAACT;QAAQM;QAAMP;QAAQG;QAASX;QAAkBU;QAASH;QAAWD;KAAI;IAE7E,qBACE,MAACmC;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,KAACF;0BAAKtC,EAAE;;0BACR,KAACsC;gBACCC,OAAO;oBACLE,OAAO;oBACPD,cAAc;gBAChB;0BAECxC,EAAE;;0BAEL,MAACsC;gBACCC,OAAO;oBACLG,YAAY;oBACZC,cAAc;oBACdC,WAAW;oBACXC,UAAU;oBACVC,SAAS;oBACTC,eAAe;oBACfC,OAAO;gBACT;;kCAEA,KAACV;kCACC,cAAA,KAACW;4BACCrC,MAAMA;4BACN2B,OAAO;gCACLW,gBAAgB;4BAClB;sCAECtC,QAAQ;;;kCAGb,KAACuC;wBACCZ,OAAO;4BACLa,QAAQ;wBACV;kCAEA,cAAA,KAACH;4BACCrC,MAAK;4BACL2B,OAAO;gCACLW,gBAAgB;4BAClB;sCAECvC;;;kCAGL,KAAC0C;wBACCd,OAAO;4BACLa,QAAQ;wBACV;kCAEC1C;;;;;;AAKX,EAAC"}
@@ -0,0 +1,24 @@
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
+ * Tell the component if the generate function is available as configured in the plugin config
11
+ */
12
+ hasGenerateFn?: boolean;
13
+ overrides?: Partial<UIField>;
14
+ /**
15
+ * Path to the title field to use for the preview
16
+ *
17
+ * @default 'meta.title'
18
+ */
19
+ titlePath?: string;
20
+ }
21
+ type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UIField;
22
+ export declare const PreviewField: FieldFunction;
23
+ export {};
24
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,UAAU,kBAAkB;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,KAAK,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,KAAK,OAAO,CAAA;AAElF,eAAO,MAAM,YAAY,EAAE,aAwB1B,CAAA"}
@@ -0,0 +1,22 @@
1
+ export const PreviewField = ({ descriptionPath, hasGenerateFn = false, overrides, titlePath })=>{
2
+ return {
3
+ name: 'preview',
4
+ type: 'ui',
5
+ admin: {
6
+ components: {
7
+ Field: {
8
+ clientProps: {
9
+ descriptionPath,
10
+ hasGenerateURLFn: hasGenerateFn,
11
+ titlePath
12
+ },
13
+ path: '@payloadcms/plugin-seo/client#PreviewComponent'
14
+ }
15
+ }
16
+ },
17
+ label: 'Preview',
18
+ ...overrides ?? {}
19
+ };
20
+ };
21
+
22
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/fields/Preview/index.tsx"],"sourcesContent":["import type { UIField } from 'payload'\n\ninterface FieldFunctionProps {\n /**\n * Path to the description field to use for the preview\n *\n * @default 'meta.description'\n */\n descriptionPath?: string\n /**\n * Tell the component if the generate function is available as configured in the plugin config\n */\n hasGenerateFn?: boolean\n overrides?: Partial<UIField>\n /**\n * Path to the title field to use for the preview\n *\n * @default 'meta.title'\n */\n titlePath?: string\n}\n\ntype FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UIField\n\nexport const PreviewField: FieldFunction = ({\n descriptionPath,\n hasGenerateFn = false,\n overrides,\n titlePath,\n}) => {\n return {\n name: 'preview',\n type: 'ui',\n admin: {\n components: {\n Field: {\n clientProps: {\n descriptionPath,\n hasGenerateURLFn: hasGenerateFn,\n titlePath,\n },\n path: '@payloadcms/plugin-seo/client#PreviewComponent',\n },\n },\n },\n label: 'Preview',\n ...((overrides as unknown as UIField) ?? {}),\n }\n}\n"],"names":["PreviewField","descriptionPath","hasGenerateFn","overrides","titlePath","name","type","admin","components","Field","clientProps","hasGenerateURLFn","path","label"],"mappings":"AAwBA,OAAO,MAAMA,eAA8B,CAAC,EAC1CC,eAAe,EACfC,gBAAgB,KAAK,EACrBC,SAAS,EACTC,SAAS,EACV;IACC,OAAO;QACLC,MAAM;QACNC,MAAM;QACNC,OAAO;YACLC,YAAY;gBACVC,OAAO;oBACLC,aAAa;wBACXT;wBACAU,kBAAkBT;wBAClBE;oBACF;oBACAQ,MAAM;gBACR;YACF;QACF;QACAC,OAAO;QACP,GAAI,AAACV,aAAoC,CAAC,CAAC;IAC7C;AACF,EAAC"}
@@ -1,5 +1,7 @@
1
- .plugin-seo__field {
2
- .field-label {
3
- display: inline!important;
1
+ @layer payload-default {
2
+ .plugin-seo__field {
3
+ .field-label {
4
+ display: inline !important;
5
+ }
4
6
  }
5
7
  }
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Config } from 'payload/config';
1
+ import type { Config } from 'payload';
2
2
  import type { SEOPluginConfig } from './types.js';
3
3
  export declare const seoPlugin: (pluginConfig: SEOPluginConfig) => (config: Config) => Config;
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAO5C,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,iBACL,eAAe,cACrB,MAAM,KAAG,MAqRjB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAoC,MAAM,SAAS,CAAA;AAIvE,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,iBACL,eAAe,cACrB,MAAM,KAAG,MAmRjB,CAAA"}