fix(richtext-*): ensure admin panel doesn't freeze with some field configurations consisting of 2+ richtext fields (#8773)

See comments in code for proper explanation. In some cases, where 2
richtext `editor`s referencing the same `editor` are used, the admin
panel will hang. That's because the server will send their client props
that have the same object reference down to the client twice.

Next.js sometimes does not like this and, ever since one of the v15
canaries, started to hang

test/fields/collections/Lexical/e2e/main/e2e.spec.ts

@@ -553,6 +553,14 @@ describe('lexicalMain', () => {
     await expect(relationshipListDrawer).toHaveText('Array Fields')
   })
 
+  test('ensure navigation to collection that used to cause admin panel freeze due to object references bug is possible', async () => {
+    const url: AdminUrlUtil = new AdminUrlUtil(serverURL, 'lexicalObjectReferenceBug')
+    await page.goto(url.create)
+
+    await expect(page.locator('.rich-text-lexical').nth(0)).toBeVisible()
+    await expect(page.locator('.rich-text-lexical').nth(1)).toBeVisible()
+  })
+
   describe('localization', () => {
     test.skip('ensure simple localized lexical field works', async () => {
       await navigateToLexicalFields(true, true)

test/fields/collections/LexicalObjectReferenceBug/index.ts

@@ -0,0 +1,38 @@
+import type { CollectionConfig } from 'payload'
+
+import { lexicalEditor, UploadFeature } from '@payloadcms/richtext-lexical'
+
+/**
+ * Do not change this specific CollectionConfig. Simply having this config in payload used to cause the admin panel to hang.
+ * Thus, simply having this config in the test suite is enough to test the bug fix and prevent regressions. In case of regression,
+ * the entire admin panel will hang again and all tests will fail.
+ */
+export const LexicalObjectReferenceBugCollection: CollectionConfig = {
+  slug: 'lexicalObjectReferenceBug',
+  fields: [
+    {
+      name: 'lexicalDefault',
+      type: 'richText',
+    },
+    {
+      name: 'lexicalEditor',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: [
+          UploadFeature({
+            collections: {
+              media: {
+                fields: [
+                  {
+                    name: 'caption',
+                    type: 'richText',
+                  },
+                ],
+              },
+            },
+          }),
+        ],
+      }),
+    },
+  ],
+}

test/fields/config.ts

@@ -20,6 +20,7 @@ import JSONFields from './collections/JSON/index.js'
 import { LexicalFields } from './collections/Lexical/index.js'
 import { LexicalLocalizedFields } from './collections/LexicalLocalized/index.js'
 import { LexicalMigrateFields } from './collections/LexicalMigrate/index.js'
+import { LexicalObjectReferenceBugCollection } from './collections/LexicalObjectReferenceBug/index.js'
 import { LexicalRelationshipsFields } from './collections/LexicalRelationships/index.js'
 import NumberFields from './collections/Number/index.js'
 import PointFields from './collections/Point/index.js'
@@ -46,6 +47,7 @@ export const collectionSlugs: CollectionConfig[] = [
   LexicalFields,
   LexicalMigrateFields,
   LexicalLocalizedFields,
+  LexicalObjectReferenceBugCollection,
   {
     slug: 'users',
     admin: {