fix(plugin-seo): description and title fields now respect given minLe…

…ngth and maxLength rules for passing validation (#8765) Previously minLength or maxLength was not being respected and the components would use default values only.
payloadcms · Oct 17, 2024 · 1f0d8da · 1f0d8da
1 parent c91f21b
commit 1f0d8da
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/docs/plugins/seo.mdx b/docs/plugins/seo.mdx
@@ -276,6 +276,10 @@ OverviewField({
 })
 ```
 
+<Banner type="info">
+Tip: You can override the length rules by changing the minLength and maxLength props on the fields. In the case of the OverviewField you can use `titleOverrides` and `descriptionOverrides` to override the length rules.
+</Banner>
+
 ## TypeScript
 
 All types can be directly imported:

diff --git a/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx b/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx
@@ -22,7 +22,7 @@ import type { GenerateDescription } from '../../types.js'
 import { defaults } from '../../defaults.js'
 import { LengthIndicator } from '../../ui/LengthIndicator.js'
 
-const { maxLength, minLength } = defaults.description
+const { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description
 
 type MetaDescriptionProps = {
   readonly hasGenerateDescriptionFn: boolean
@@ -35,6 +35,8 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
         components: { Label },
       },
       label,
+      maxLength: maxLengthFromProps,
+      minLength: minLengthFromProps,
       required,
     },
     hasGenerateDescriptionFn,
@@ -55,6 +57,9 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
   const { getData } = useForm()
   const docInfo = useDocumentInfo()
 
+  const maxLength = maxLengthFromProps || maxLengthDefault
+  const minLength = minLengthFromProps || minLengthDefault
+
   const field: FieldType<string> = useField({
     path: pathFromContext,
   } as Options)

diff --git a/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx b/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx
@@ -23,7 +23,7 @@ import { defaults } from '../../defaults.js'
 import { LengthIndicator } from '../../ui/LengthIndicator.js'
 import '../index.scss'
 
-const { maxLength, minLength } = defaults.title
+const { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.title
 
 type MetaTitleProps = {
   readonly hasGenerateTitleFn: boolean
@@ -36,6 +36,8 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
         components: { Label },
       },
       label,
+      maxLength: maxLengthFromProps,
+      minLength: minLengthFromProps,
       required,
     },
     field: fieldFromProps,
@@ -60,6 +62,9 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
   const { getData } = useForm()
   const docInfo = useDocumentInfo()
 
+  const minLength = minLengthFromProps || minLengthDefault
+  const maxLength = maxLengthFromProps || maxLengthDefault
+
   const { errorMessage, setValue, showError, value } = field
 
   const regenerateTitle = useCallback(async () => {

diff --git a/packages/plugin-seo/src/fields/Overview/OverviewComponent.tsx b/packages/plugin-seo/src/fields/Overview/OverviewComponent.tsx
@@ -10,25 +10,32 @@ import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../tran
 import { defaults } from '../../defaults.js'
 
 const {
-  description: { maxLength: maxDesc, minLength: minDesc },
-  title: { maxLength: maxTitle, minLength: minTitle },
+  description: { maxLength: maxDescDefault, minLength: minDescDefault },
+  title: { maxLength: maxTitleDefault, minLength: minTitleDefault },
 } = defaults
 
 type OverviewProps = {
+  descriptionOverrides?: {
+    maxLength?: number
+    minLength?: number
+  }
   descriptionPath?: string
   imagePath?: string
+  titleOverrides?: {
+    maxLength?: number
+    minLength?: number
+  }
   titlePath?: string
 } & UIField
 
 export const OverviewComponent: React.FC<OverviewProps> = ({
+  descriptionOverrides,
   descriptionPath: descriptionPathFromContext,
   imagePath: imagePathFromContext,
+  titleOverrides,
   titlePath: titlePathFromContext,
 }) => {
-  const {
-    //  dispatchFields,
-    getFields,
-  } = useForm()
+  const { getFields } = useForm()
 
   const descriptionPath = descriptionPathFromContext || 'meta.description'
   const titlePath = titlePathFromContext || 'meta.title'
@@ -47,6 +54,11 @@ export const OverviewComponent: React.FC<OverviewProps> = ({
   const [descIsValid, setDescIsValid] = useState<boolean | undefined>()
   const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()
 
+  const minDesc = descriptionOverrides?.minLength || minDescDefault
+  const maxDesc = descriptionOverrides?.maxLength || maxDescDefault
+  const minTitle = titleOverrides?.minLength || minTitleDefault
+  const maxTitle = titleOverrides?.maxLength || maxTitleDefault
+
   const resetAll = useCallback(() => {
     const fields = getFields()
     const fieldsWithoutMeta = fields

diff --git a/packages/plugin-seo/src/fields/Overview/index.tsx b/packages/plugin-seo/src/fields/Overview/index.tsx
@@ -1,6 +1,10 @@
 import type { UIField } from 'payload'
 
 interface FieldFunctionProps {
+  descriptionOverrides?: {
+    maxLength?: number
+    minLength?: number
+  }
   /**
    * Path to the description field to use for the preview
    *
@@ -14,6 +18,10 @@ interface FieldFunctionProps {
    */
   imagePath?: string
   overrides?: Partial<UIField>
+  titleOverrides?: {
+    maxLength?: number
+    minLength?: number
+  }
   /**
    * Path to the title field to use for the preview
    *
@@ -25,9 +33,11 @@ interface FieldFunctionProps {
 type FieldFunction = ({ overrides }: FieldFunctionProps) => UIField
 
 export const OverviewField: FieldFunction = ({
+  descriptionOverrides,
   descriptionPath,
   imagePath,
   overrides,
+  titleOverrides,
   titlePath,
 }) => {
   return {
@@ -37,8 +47,10 @@ export const OverviewField: FieldFunction = ({
       components: {
         Field: {
           clientProps: {
+            descriptionOverrides,
             descriptionPath,
             imagePath,
+            titleOverrides,
             titlePath,
           },
           path: '@payloadcms/plugin-seo/client#OverviewComponent',