progress

test/lexical/collections/OnDemand/OnDemand.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
 export const OnDemand: React.FC = () => {
   const { Component, renderLexical } = useRenderEditor_internal_({
     name: 'richText',
-    editorTarget: 'your-editor-target',
+    editorTarget: 'default',
     initialState: {} as any,
   })
   const mounted = useRef(false)

test/lexical/collections/OnDemand/OnDemand2.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useRenderEditor_internal_ } from '@payloadcms/richtext-lexical/client'
+import { useEffect, useRef } from 'react'
+
+import { lexicalFullyFeaturedSlug } from '../../../lexical/slugs.js'
+
+export const OnDemand: React.FC = () => {
+  const { Component, renderLexical } = useRenderEditor_internal_({
+    name: 'richText',
+    editorTarget: `collections.${lexicalFullyFeaturedSlug}.richText`,
+    initialState: {} as any,
+  })
+  const mounted = useRef(false)
+
+  useEffect(() => {
+    if (mounted.current) {
+      return
+    }
+    void renderLexical()
+    mounted.current = true
+  }, [renderLexical])
+  return <div>Component: {Component ? Component : 'Loading...'}</div>
+}

test/lexical/collections/OnDemand/index.ts

@@ -12,5 +12,14 @@ export const OnDemand: CollectionConfig = {
         },
       },
     },
+    {
+      name: 'ui2',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: './collections/OnDemand/OnDemand2.js#OnDemand',
+        },
+      },
+    },
   ],
 }