Merge pull request #3449 from payloadcms/feat/2.0-lexical-block-validations

BREAKING: config (SanitizedConfig) is now a new, mandatory property to be passed into .validate(, options) functions. In order to accommodate that, other functions which may call validate now also have a new, mandatory config property. These are:
* buildStateFromSchema
* addFieldStatePromise


feat: breaking: richtext-lexical: block node validations

packages/richtext-slate/src/data/validation.ts

@@ -4,10 +4,12 @@ import type { AdapterArguments } from '../types'
 
 import { defaultRichTextValue } from './defaultValue'
 
-export const richText: Validate<unknown, unknown, RichTextField<AdapterArguments>> = (
-  value,
-  { required, t },
-) => {
+export const richTextValidate: Validate<
+  unknown,
+  unknown,
+  RichTextField<AdapterArguments>,
+  RichTextField<AdapterArguments>
+> = (value, { required, t }) => {
   if (required) {
     const stringifiedDefaultValue = JSON.stringify(defaultRichTextValue)
     if (value && JSON.stringify(value) !== stringifiedDefaultValue) return true

packages/richtext-slate/src/field/RichText.tsx

@@ -15,7 +15,7 @@ import { Editable, Slate, withReact } from 'slate-react'
 import type { ElementNode, FieldProps, RichTextElement, RichTextLeaf, TextNode } from '../types'
 
 import { defaultRichTextValue } from '../data/defaultValue'
-import { richText } from '../data/validation'
+import { richTextValidate } from '../data/validation'
 import elementTypes from './elements'
 import listTypes from './elements/listTypes'
 import enablePlugins from './enablePlugins'
@@ -80,7 +80,7 @@ const RichText: React.FC<FieldProps> = (props) => {
     label,
     path: pathFromProps,
     required,
-    validate = richText,
+    validate = richTextValidate,
   } = props
 
   const elements: RichTextElement[] = admin?.elements || defaultElements

packages/richtext-slate/src/field/elements/link/Button/index.tsx

@@ -10,6 +10,7 @@ import {
   useDocumentInfo,
   useLocale,
 } from 'payload/components/utilities'
+import { sanitizeFields } from 'payload/config'
 import React, { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Editor, Range, Transforms } from 'slate'
@@ -75,7 +76,14 @@ export const LinkButton: React.FC<{
   const config = useConfig()
 
   const [fieldSchema] = useState(() => {
-    const fields = transformExtraFields(customFieldSchema, config, i18n)
+    const fieldsUnsanitized = transformExtraFields(customFieldSchema, config, i18n)
+    // Sanitize custom fields here
+    const validRelationships = config.collections.map((c) => c.slug) || []
+    const fields = sanitizeFields({
+      config: config,
+      fields: fieldsUnsanitized,
+      validRelationships,
+    })
 
     return fields
   })
@@ -104,6 +112,7 @@ export const LinkButton: React.FC<{
 
               const preferences = await getDocPreferences()
               const state = await buildStateFromSchema({
+                config,
                 data,
                 fieldSchema,
                 locale,

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -12,6 +12,7 @@ import {
   useDocumentInfo,
   useLocale,
 } from 'payload/components/utilities'
+import { sanitizeFields } from 'payload/config'
 import { deepCopyObject, getTranslation } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -77,7 +78,14 @@ export const LinkElement: React.FC<{
   const [initialState, setInitialState] = useState<Fields>({})
   const { getDocPreferences } = useDocumentInfo()
   const [fieldSchema] = useState(() => {
-    const fields = transformExtraFields(customFieldSchema, config, i18n)
+    const fieldsUnsanitized = transformExtraFields(customFieldSchema, config, i18n)
+    // Sanitize custom fields here
+    const validRelationships = config.collections.map((c) => c.slug) || []
+    const fields = sanitizeFields({
+      config: config,
+      fields: fieldsUnsanitized,
+      validRelationships,
+    })
 
     return fields
   })
@@ -103,6 +111,7 @@ export const LinkElement: React.FC<{
 
       const preferences = await getDocPreferences()
       const state = await buildStateFromSchema({
+        config,
         data,
         fieldSchema,
         locale,

packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx

@@ -6,10 +6,11 @@ import { Form, FormSubmit, RenderFields } from 'payload/components/forms'
 import {
   buildStateFromSchema,
   useAuth,
+  useConfig,
   useDocumentInfo,
   useLocale,
 } from 'payload/components/utilities'
-import { fieldTypes } from 'payload/config'
+import { fieldTypes, sanitizeFields } from 'payload/config'
 import { deepCopyObject, getTranslation } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -34,7 +35,17 @@ export const UploadDrawer: React.FC<
   const { closeModal } = useModal()
   const { getDocPreferences } = useDocumentInfo()
   const [initialState, setInitialState] = useState({})
-  const fieldSchema = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields
+  const fieldSchemaUnsanitized =
+    fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields
+  const config = useConfig()
+
+  // Sanitize custom fields here
+  const validRelationships = config.collections.map((c) => c.slug) || []
+  const fieldSchema = sanitizeFields({
+    config: config,
+    fields: fieldSchemaUnsanitized,
+    validRelationships,
+  })
 
   const handleUpdateEditData = useCallback(
     (_, data) => {
@@ -51,9 +62,18 @@ export const UploadDrawer: React.FC<
   )
 
   useEffect(() => {
+    // Sanitize custom fields here
+    const validRelationships = config.collections.map((c) => c.slug) || []
+    const fieldSchema = sanitizeFields({
+      config: config,
+      fields: fieldSchemaUnsanitized,
+      validRelationships,
+    })
+
     const awaitInitialState = async () => {
       const preferences = await getDocPreferences()
       const state = await buildStateFromSchema({
+        config,
         data: deepCopyObject(element?.fields || {}),
         fieldSchema,
         locale,
@@ -66,7 +86,7 @@ export const UploadDrawer: React.FC<
     }
 
     awaitInitialState()
-  }, [fieldSchema, element.fields, user, locale, t, getDocPreferences])
+  }, [fieldSchemaUnsanitized, config, element.fields, user, locale, t, getDocPreferences])
 
   return (
     <Drawer

packages/richtext-slate/src/index.ts

@@ -6,6 +6,7 @@ import type { AdapterArguments } from './types'
 
 import RichTextCell from './cell'
 import { richTextRelationshipPromise } from './data/richTextRelationshipPromise'
+import { richTextValidate } from './data/validation'
 import RichTextField from './field'
 
 export function slateEditor(args: AdapterArguments): RichTextAdapter<AdapterArguments> {
@@ -45,5 +46,6 @@ export function slateEditor(args: AdapterArguments): RichTextAdapter<AdapterArgu
       }
       return null
     },
+    validate: richTextValidate,
   }
 }