fix: custom fields of Upload and Link features not being sanitized (both Slate and Lexical)

packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -23,6 +23,7 @@ import {
   useEditDepth,
   useLocale,
 } from 'payload/components/utilities'
+import { sanitizeFields } from 'payload/config'
 import { getTranslation } from 'payload/utilities'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -65,7 +66,14 @@ export function LinkEditor({
   const [initialState, setInitialState] = useState<Fields>({})
 
   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
   })

packages/richtext-lexical/src/field/features/Upload/component/ExtraFieldsDrawer/index.tsx

@@ -12,7 +12,7 @@ import {
   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'
@@ -50,10 +50,19 @@ export const ExtraFieldsUploadDrawer: React.FC<
   const { closeModal } = useModal()
   const { getDocPreferences } = useDocumentInfo()
   const [initialState, setInitialState] = useState({})
-  const fieldSchema = (editorConfig?.resolvedFeatureMap.get('upload')?.props as UploadFeatureProps)
-    ?.collections?.[relatedCollection.slug]?.fields
+  const fieldSchemaUnsanitized = (
+    editorConfig?.resolvedFeatureMap.get('upload')?.props as UploadFeatureProps
+  )?.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) => {
       // Update lexical node (with key nodeKey) with new data
@@ -74,6 +83,14 @@ export const ExtraFieldsUploadDrawer: 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({
@@ -90,7 +107,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
     }
 
     void awaitInitialState()
-  }, [user, locale, t, getDocPreferences, fields, fieldSchema])
+  }, [user, locale, t, getDocPreferences, fields, fieldSchemaUnsanitized, config])
 
   return (
     <Drawer

packages/richtext-lexical/src/validate/validateNodes.ts

@@ -19,7 +19,11 @@ export async function validateNodes({
 }): Promise<string | true> {
   for (const node of nodes) {
     // Validate node
-    if (nodeValidations?.has(node.type)) {
+    if (
+      nodeValidations &&
+      typeof nodeValidations?.has === 'function' &&
+      nodeValidations?.has(node.type)
+    ) {
       const validations = nodeValidations.get(node.type)
       for (const validation of validations) {
         const validationResult = await validation({

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
   })

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
   })

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

@@ -10,7 +10,7 @@ import {
   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'
@@ -35,9 +35,18 @@ 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) => {
       const newNode = {
@@ -53,6 +62,14 @@ 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({
@@ -69,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