chore(release): richtext-lexical/0.1.8

docs/admin/components.mdx

@@ -129,7 +129,7 @@ To add a _new_ view to the Admin Panel, simply add another key to the `views` ob
 }
 ```
 
-_For more examples regarding how to customize components, look at the following [examples](https://github.com/payloadcms/payload/tree/master/test/admin/components)._
+_For more examples regarding how to customize components, look at the following [examples](https://github.com/payloadcms/payload/tree/main/test/admin/components)._
 
 For help on how to build your own custom view components, see [building a custom view component](#building-a-custom-view-component).
 
@@ -399,12 +399,12 @@ Your custom view components will be given all the props that a React Router `<Ro
 
 #### Example
 
-You can find examples of custom views in the [Payload source code `/test/admin/components/views` folder](https://github.com/payloadcms/payload/tree/master/test/admin/components/views). There, you'll find two custom views:
+You can find examples of custom views in the [Payload source code `/test/admin/components/views` folder](https://github.com/payloadcms/payload/tree/main/test/admin/components/views). There, you'll find two custom views:
 
 1. A custom view that uses the `DefaultTemplate`, which is the built-in Payload template that displays the sidebar and "eyebrow nav"
 1. A custom view that uses the `MinimalTemplate` - which is just a centered template used for things like logging in or out
 
-To see how to pass in your custom views to create custom views of your own, take a look at the `admin.components.views` property of the [Payload test admin config](https://github.com/payloadcms/payload/blob/master/test/admin/config.ts).
+To see how to pass in your custom views to create custom views of your own, take a look at the `admin.components.views` property of the [Payload test admin config](https://github.com/payloadcms/payload/blob/main/test/admin/config.ts).
 
 ### Fields
 

packages/payload/package.json

@@ -208,8 +208,7 @@
     "webpack": "^5.78.0"
   },
   "engines": {
-    "node": ">=14",
-    "pnpm": ">=8"
+    "node": ">=14"
   },
   "files": [
     "bin.js",

packages/payload/src/admin/components/views/Global/Default/index.scss

@@ -52,7 +52,7 @@
     position: sticky;
     top: var(--doc-controls-height);
     width: 33.33%;
-    height: 100%;
+    height: calc(100vh - var(--doc-controls-height));
   }
 
   &__sidebar {

packages/payload/src/admin/components/views/collections/Edit/Default/index.scss

@@ -56,7 +56,7 @@
     position: sticky;
     top: var(--doc-controls-height);
     width: 33.33%;
-    height: 100%;
+    height: calc(100vh - var(--doc-controls-height));
   }
 
   &__sidebar {

packages/payload/src/fields/validations.ts

@@ -382,7 +382,7 @@ export const relationship: Validate<unknown, unknown, RelationshipField> = async
     })
 
     if (invalidRelationships.length > 0) {
-      return `This field has the following invalid selections: ${invalidRelationships
+      return `This relationship field has the following invalid relationships: ${invalidRelationships
         .map((err, invalid) => {
           return `${err} ${JSON.stringify(invalid)}`
         })

packages/richtext-lexical/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/richtext-lexical",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "The officially supported Lexical richtext adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/richtext-lexical/src/field/features/Blocks/afterReadPromise.ts

@@ -1,3 +1,5 @@
+import type { Block } from 'payload/types'
+
 import { sanitizeFields } from 'payload/config'
 
 import type { BlocksFeatureProps } from '.'
@@ -20,40 +22,42 @@ export const blockAfterReadPromiseHOC = (
     showHiddenFields,
     siblingDoc,
   }) => {
+    const blocks: Block[] = props.blocks
+    const blockFieldData = node.fields.data
+
     const promises: Promise<void>[] = []
 
     // Sanitize block's fields here. This is done here and not in the feature, because the payload config is available here
     const payloadConfig = req.payload.config
     const validRelationships = payloadConfig.collections.map((c) => c.slug) || []
-    props.blocks = props.blocks.map((block) => {
-      const unsanitizedBlock = { ...block }
-      unsanitizedBlock.fields = sanitizeFields({
+    blocks.forEach((block) => {
+      block.fields = sanitizeFields({
         config: payloadConfig,
         fields: block.fields,
         validRelationships,
       })
-      return unsanitizedBlock
     })
 
-    if (Array.isArray(props.blocks)) {
-      props.blocks.forEach((block) => {
-        if (block?.fields) {
-          recurseNestedFields({
-            afterReadPromises,
-            currentDepth,
-            data: node.fields.data || {},
-            depth,
-            fields: block.fields,
-            overrideAccess,
-            promises,
-            req,
-            showHiddenFields,
-            siblingDoc,
-          })
-        }
-      })
+    // find block used in this node
+    const block = props.blocks.find((block) => block.slug === blockFieldData.blockType)
+    if (!block || !block?.fields?.length || !blockFieldData) {
+      return promises
     }
 
+    recurseNestedFields({
+      afterReadPromises,
+      currentDepth,
+      data: blockFieldData,
+      depth,
+      fields: block.fields,
+      overrideAccess,
+      promises,
+      req,
+      showHiddenFields,
+      // The afterReadPromise gets its data from looking for field.name inside of the siblingDoc. Thus, here we cannot pass the whole document's siblingDoc, but only the siblingDoc (sibling fields) of the current field.
+      siblingDoc: blockFieldData,
+    })
+
     return promises
   }
 

packages/richtext-lexical/src/field/features/Blocks/validate.ts

@@ -15,12 +15,12 @@ export const blockValidationHOC = (
     payloadConfig,
     validation,
   }) => {
-    const blockFieldValues = node.fields.data
-
+    const blockFieldData = node.fields.data
     const blocks: Block[] = props.blocks
+
     // Sanitize block's fields here. This is done here and not in the feature, because the payload config is available here
+    const validRelationships = payloadConfig.collections.map((c) => c.slug) || []
     blocks.forEach((block) => {
-      const validRelationships = payloadConfig.collections.map((c) => c.slug) || []
       block.fields = sanitizeFields({
         config: payloadConfig,
         fields: block.fields,
@@ -29,7 +29,7 @@ export const blockValidationHOC = (
     })
 
     // find block
-    const block = props.blocks.find((block) => block.slug === blockFieldValues.blockType)
+    const block = props.blocks.find((block) => block.slug === blockFieldData.blockType)
 
     // validate block
     if (!block) {

packages/richtext-lexical/src/field/features/Link/afterReadPromise.ts

@@ -52,7 +52,7 @@ export const linkAfterReadPromiseHOC = (
         promises,
         req,
         showHiddenFields,
-        siblingDoc,
+        siblingDoc: node.fields || {},
       })
     }
     return promises

packages/richtext-lexical/src/field/features/Upload/afterReadPromise.ts

@@ -51,7 +51,7 @@ export const uploadAfterReadPromiseHOC = (
           promises,
           req,
           showHiddenFields,
-          siblingDoc,
+          siblingDoc: node.fields || {},
         })
       }
     }

packages/richtext-lexical/src/populate/recurseNestedFields.ts

@@ -173,7 +173,7 @@ export const recurseNestedFields = ({
               promises,
               req,
               showHiddenFields,
-              siblingDoc,
+              siblingDoc: data[field.name][i], // This has to be scoped to the blocks's fields, otherwise there may be population issues, e.g. for a relationship field with Blocks Node, with a Blocks Field, with a RichText Field, With Relationship Node. The last richtext field would try to find itself using siblingDoc[field.nane], which only works if the siblingDoc is scoped to the blocks's fields
             })
           }
         })
@@ -191,14 +191,13 @@ export const recurseNestedFields = ({
             promises,
             req,
             showHiddenFields,
-            siblingDoc,
+            siblingDoc, // TODO: if there's any population issues, this might have to be data[field.name][i] as well
           })
         })
       }
     }
 
     if (field.type === 'richText') {
-      // TODO: This does not properly work yet. E.g. it does not handle a relationship inside of lexical inside of block inside of lexical
       const editor: RichTextAdapter = field?.editor
 
       if (editor?.afterReadPromise) {

packages/richtext-lexical/src/populate/richTextRelationshipPromise.ts

@@ -59,7 +59,7 @@ export const recurseRichText = ({
         }
       }
 
-      if ('children' in node && node?.children) {
+      if ('children' in node && Array.isArray(node?.children) && node?.children?.length) {
         recurseRichText({
           afterReadPromises,
           children: node.children as SerializedLexicalNode[],

test/admin/collections/Posts.ts

@@ -65,6 +65,24 @@ export const Posts: CollectionConfig = {
         },
       ],
     },
+    {
+      name: 'group',
+      type: 'group',
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      name: 'relationship',
+      type: 'relationship',
+      relationTo: 'posts',
+      admin: {
+        position: 'sidebar',
+      },
+    },
     {
       name: 'sidebarField',
       type: 'text',

test/admin/e2e.spec.ts

@@ -330,10 +330,12 @@ describe('admin', () => {
       await page.locator('input#select-all').check()
       await page.locator('.edit-many__toggle').click()
       await page.locator('.field-select .rs__control').click()
-      const options = page.locator('.rs__option')
-      const titleOption = options.locator('text=Title')
 
-      await expect(titleOption).toHaveText('Title')
+      const titleOption = page.locator('.rs__option', {
+        hasText: exactText('Title'),
+      })
+
+      await expect(titleOption).toBeVisible()
 
       await titleOption.click()
       const titleInput = page.locator('#field-title')

test/fields/collections/Lexical/blocks.ts

@@ -13,6 +13,17 @@ export const TextBlock: Block = {
   slug: 'text',
 }
 
+export const RichTextBlock: Block = {
+  fields: [
+    {
+      name: 'richText',
+      type: 'richText',
+      editor: lexicalEditor(),
+    },
+  ],
+  slug: 'richText',
+}
+
 export const UploadAndRichTextBlock: Block = {
   fields: [
     {

test/fields/collections/Lexical/generateLexicalRichText.ts

@@ -1,5 +1,3 @@
-import { loremIpsum } from './loremIpsum'
-
 export function generateLexicalRichText() {
   return {
     root: {
@@ -15,210 +13,7 @@ export function generateLexicalRichText() {
               format: 0,
               mode: 'normal',
               style: '',
-              text: "Hello, I'm a rich text field.",
-              type: 'text',
-              version: 1,
-            },
-          ],
-          direction: 'ltr',
-          format: 'center',
-          indent: 0,
-          type: 'heading',
-          version: 1,
-          tag: 'h1',
-        },
-        {
-          children: [
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: 'I can do all kinds of fun stuff like ',
-              type: 'text',
-              version: 1,
-            },
-            {
-              children: [
-                {
-                  detail: 0,
-                  format: 0,
-                  mode: 'normal',
-                  style: '',
-                  text: 'render links',
-                  type: 'text',
-                  version: 1,
-                },
-              ],
-              direction: 'ltr',
-              format: '',
-              indent: 0,
-              type: 'link',
-              version: 1,
-              fields: {
-                url: 'https://payloadcms.com',
-                newTab: true,
-                linkType: 'custom',
-              },
-            },
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: ', ',
-              type: 'text',
-              version: 1,
-            },
-            {
-              children: [
-                {
-                  detail: 0,
-                  format: 0,
-                  mode: 'normal',
-                  style: '',
-                  text: 'link to relationships',
-                  type: 'text',
-                  version: 1,
-                },
-              ],
-              direction: 'ltr',
-              format: '',
-              indent: 0,
-              type: 'link',
-              version: 1,
-              fields: {
-                url: 'https://',
-                doc: {
-                  value: {
-                    id: '{{ARRAY_DOC_ID}}',
-                  },
-                  relationTo: 'array-fields',
-                },
-                newTab: false,
-                linkType: 'internal',
-              },
-            },
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: ', and store nested relationship fields:',
-              type: 'text',
-              version: 1,
-            },
-          ],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'paragraph',
-          version: 1,
-        },
-        {
-          format: '',
-          type: 'relationship',
-          version: 1,
-          value: {
-            id: '{{TEXT_DOC_ID}}',
-          },
-          relationTo: 'text-fields',
-        },
-        {
-          children: [
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: 'You can build your own elements, too.',
-              type: 'text',
-              version: 1,
-            },
-          ],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'paragraph',
-          version: 1,
-        },
-        {
-          children: [
-            {
-              children: [
-                {
-                  detail: 0,
-                  format: 0,
-                  mode: 'normal',
-                  style: '',
-                  text: "It's built with Lexical",
-                  type: 'text',
-                  version: 1,
-                },
-              ],
-              direction: 'ltr',
-              format: '',
-              indent: 0,
-              type: 'listitem',
-              version: 1,
-              value: 1,
-            },
-            {
-              children: [
-                {
-                  detail: 0,
-                  format: 0,
-                  mode: 'normal',
-                  style: '',
-                  text: 'It stores content as JSON so you can use it wherever you need',
-                  type: 'text',
-                  version: 1,
-                },
-              ],
-              direction: 'ltr',
-              format: '',
-              indent: 0,
-              type: 'listitem',
-              version: 1,
-              value: 2,
-            },
-            {
-              children: [
-                {
-                  detail: 0,
-                  format: 0,
-                  mode: 'normal',
-                  style: '',
-                  text: "It's got a great editing experience for non-technical users",
-                  type: 'text',
-                  version: 1,
-                },
-              ],
-              direction: 'ltr',
-              format: '',
-              indent: 0,
-              type: 'listitem',
-              version: 1,
-              value: 3,
-            },
-          ],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'list',
-          version: 1,
-          listType: 'bullet',
-          start: 1,
-          tag: 'ul',
-        },
-        {
-          children: [
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: 'And a whole lot more.',
+              text: 'Upload Node:',
               type: 'text',
               version: 1,
             },
@@ -233,10 +28,6 @@ export function generateLexicalRichText() {
           format: '',
           type: 'upload',
           version: 1,
-          relationTo: 'uploads',
-          value: {
-            id: '{{UPLOAD_DOC_ID}}',
-          },
           fields: {
             caption: {
               root: {
@@ -245,69 +36,151 @@ export function generateLexicalRichText() {
                 indent: 0,
                 version: 1,
                 children: [
-                  ...[...Array(4)].map(() => ({
-                    direction: 'ltr',
-                    format: '',
-                    indent: 0,
-                    type: 'paragraph',
-                    version: 1,
+                  {
                     children: [
                       {
                         detail: 0,
                         format: 0,
                         mode: 'normal',
                         style: '',
-                        text: loremIpsum,
+                        text: 'Relationship inside Upload Caption:',
                         type: 'text',
                         version: 1,
                       },
                     ],
-                  })),
+                    direction: 'ltr',
+                    format: '',
+                    indent: 0,
+                    type: 'paragraph',
+                    version: 1,
+                  },
+                  {
+                    format: '',
+                    type: 'relationship',
+                    version: 1,
+                    relationTo: 'text-fields',
+                    value: {
+                      id: '{{TEXT_DOC_ID}}',
+                    },
+                  },
                 ],
                 direction: 'ltr',
               },
             },
           },
+          relationTo: 'uploads',
+          value: {
+            id: '{{UPLOAD_DOC_ID}}',
+          },
+        },
+        {
+          format: '',
+          type: 'block',
+          version: 1,
+          fields: {
+            data: {
+              id: '65298b13db4ef8c744a7faaa',
+              rel: '{{UPLOAD_DOC_ID}}',
+              blockName: 'Block Node, with Relationship Field',
+              blockType: 'relationshipBlock',
+            },
+          },
+        },
+        {
+          format: '',
+          type: 'block',
+          version: 1,
+          fields: {
+            data: {
+              id: '65298b1ddb4ef8c744a7faab',
+              richText: {
+                root: {
+                  type: 'root',
+                  format: '',
+                  indent: 0,
+                  version: 1,
+                  children: [
+                    {
+                      format: '',
+                      type: 'relationship',
+                      version: 1,
+                      relationTo: 'text-fields',
+                      value: {
+                        id: '{{TEXT_DOC_ID}}',
+                      },
+                    },
+                  ],
+                  direction: null,
+                },
+              },
+              blockName: 'Block Node, with RichText Field, with Relationship Node',
+              blockType: 'richText',
+            },
+          },
+        },
+        {
+          format: '',
+          type: 'block',
+          version: 1,
+          fields: {
+            data: {
+              id: '65298b2bdb4ef8c744a7faac',
+              blockName:
+                'Block Node, with Blocks Field, With RichText Field, With Relationship Node',
+              blockType: 'subBlock',
+              subBlocks: [
+                {
+                  id: '65298b2edb4ef8c744a7faad',
+                  richText: {
+                    root: {
+                      type: 'root',
+                      format: '',
+                      indent: 0,
+                      version: 1,
+                      children: [
+                        {
+                          format: '',
+                          type: 'relationship',
+                          version: 1,
+                          relationTo: 'text-fields',
+                          value: {
+                            id: '{{TEXT_DOC_ID}}',
+                          },
+                        },
+                      ],
+                      direction: null,
+                    },
+                  },
+                  blockType: 'contentBlock',
+                },
+              ],
+            },
+          },
+        },
+        {
+          format: '',
+          type: 'block',
+          version: 1,
+          fields: {
+            data: {
+              id: '65298b49db4ef8c744a7faae',
+              upload: '{{UPLOAD_DOC_ID}}',
+              blockName: 'Block Node, With Upload Field',
+              blockType: 'uploadAndRichText',
+            },
+          },
         },
         {
           children: [],
-          direction: 'ltr',
+          direction: null,
           format: '',
           indent: 0,
           type: 'paragraph',
           version: 1,
         },
         {
-          children: [
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
-              type: 'text',
-              version: 1,
-            },
-          ],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'paragraph',
-          version: 1,
-        },
-        {
-          children: [
-            {
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
-              type: 'text',
-              version: 1,
-            },
-          ],
-          direction: 'ltr',
+          children: [],
+          direction: null,
           format: '',
           indent: 0,
           type: 'paragraph',

test/fields/collections/Lexical/index.ts

@@ -9,6 +9,7 @@ import {
 } from '../../../../packages/richtext-lexical/src'
 import {
   RelationshipBlock,
+  RichTextBlock,
   SelectFieldBlock,
   SubBlockBlock,
   TextBlock,
@@ -68,6 +69,7 @@ export const LexicalFields: CollectionConfig = {
           }),
           BlocksFeature({
             blocks: [
+              RichTextBlock,
               TextBlock,
               UploadAndRichTextBlock,
               SelectFieldBlock,
@@ -81,7 +83,7 @@ export const LexicalFields: CollectionConfig = {
   ],
 }
 
-export const lexicalRichTextDoc = {
+export const LexicalRichTextDoc = {
   title: 'Rich Text',
   richTextLexicalCustomFields: generateLexicalRichText(),
 }

test/fields/config.ts

@@ -14,7 +14,7 @@ import DateFields, { dateDoc } from './collections/Date'
 import GroupFields, { groupDoc } from './collections/Group'
 import IndexedFields from './collections/Indexed'
 import JSONFields, { jsonDoc } from './collections/JSON'
-import { LexicalFields } from './collections/Lexical'
+import { LexicalFields, LexicalRichTextDoc } from './collections/Lexical'
 import NumberFields, { numberDoc } from './collections/Number'
 import PointFields, { pointDoc } from './collections/Point'
 import RadioFields, { radiosDoc } from './collections/Radio'
@@ -150,7 +150,7 @@ export default buildConfigWithDefaults({
     )
 
     const lexicalRichTextDocWithRelId = JSON.parse(
-      JSON.stringify(richTextDoc)
+      JSON.stringify(LexicalRichTextDoc)
         .replace(/"\{\{ARRAY_DOC_ID\}\}"/g, formattedID)
         .replace(/"\{\{UPLOAD_DOC_ID\}\}"/g, formattedJPGID)
         .replace(/"\{\{TEXT_DOC_ID\}\}"/g, formattedTextID),