fix(richtext-lexical): throw toast error when attempting to create upload node without any upload collections enabled (#10277)

Fixes https://github.com/payloadcms/payload/issues/9136

packages/richtext-lexical/src/features/relationship/client/utils/EnabledRelationshipsCondition.tsx

@@ -29,8 +29,12 @@ const filterRichTextCollections: FilteredCollectionsT = (collections, options) =
   })
 }
 
-export const EnabledRelationshipsCondition: React.FC<any> = (props) => {
-  const { children, uploads = false, ...rest } = props
+export const EnabledRelationshipsCondition: React.FC<{
+  children: any
+  FallbackComponent?: React.FC
+  uploads?: boolean
+}> = (props) => {
+  const { children, FallbackComponent, uploads = false, ...rest } = props
   const {
     config: { collections },
   } = useConfig()
@@ -44,7 +48,7 @@ export const EnabledRelationshipsCondition: React.FC<any> = (props) => {
   )
 
   if (!enabledCollectionSlugs.length) {
-    return null
+    return FallbackComponent ? <FallbackComponent {...rest} /> : null
   }
 
   return React.cloneElement(children, { ...rest, enabledCollectionSlugs })

packages/richtext-lexical/src/features/upload/client/drawer/index.tsx

@@ -2,6 +2,7 @@
 import type { LexicalEditor } from 'lexical'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import { toast } from '@payloadcms/ui'
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -92,9 +93,32 @@ const UploadDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {
   return <ListDrawer onSelect={onSelect} />
 }
 
+const UploadDrawerComponentFallback: React.FC = () => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return editor.registerCommand<{
+      replace: { nodeKey: string } | false
+    }>(
+      INSERT_UPLOAD_WITH_DRAWER_COMMAND,
+      () => {
+        toast.error('No upload collections enabled')
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR,
+    )
+  }, [editor])
+
+  return null
+}
+
 export const UploadDrawer = (props: Props): React.ReactNode => {
   return (
-    <EnabledRelationshipsCondition {...props} uploads>
+    <EnabledRelationshipsCondition
+      {...props}
+      FallbackComponent={UploadDrawerComponentFallback}
+      uploads
+    >
       <UploadDrawerComponent {...props} />
     </EnabledRelationshipsCondition>
   )