fix(richtext-lexical): link drawer has no fields if parent document create access control is false (#10954)

Previously, the lexical link drawer did not display any fields if the
`create` permission was false, even though the `update` permission was
true.

The issue was a faulty permission check in `RenderFields` that did not
check the top-level permission operation keys for truthiness. It only
checked if the `permissions` variable itself was `true`, or if the
sub-fields had `create` / `update` permissions set to `true`.

Author: AlessioGr

packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -250,8 +250,8 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
     setNotLink,
     config.routes.admin,
     config.routes.api,
-    config.collections,
     config.serverURL,
+    getEntityConfig,
     t,
     i18n,
     locale?.code,

packages/ui/src/forms/RenderFields/index.tsx

@@ -57,6 +57,7 @@ export const RenderFields: React.FC<RenderFieldsProps> = (props) => {
           // This is different from `admin.readOnly` which is executed based on `operation`
           const hasReadPermission =
             permissions === true ||
+            permissions?.read === true ||
             permissions?.[parentName] === true ||
             ('name' in field &&
               typeof permissions === 'object' &&
@@ -79,6 +80,7 @@ export const RenderFields: React.FC<RenderFieldsProps> = (props) => {
           // If the user does not have access control to begin with, force it to be read-only
           const hasOperationPermission =
             permissions === true ||
+            permissions?.[operation] === true ||
             permissions?.[parentName] === true ||
             ('name' in field &&
               typeof permissions === 'object' &&

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

@@ -47,13 +47,10 @@ let serverURL: string
  */
 async function navigateToLexicalFields(
   navigateToListView: boolean = true,
-  localized: boolean = false,
+  collectionSlug: string = 'lexical-fields',
 ) {
   if (navigateToListView) {
-    const url: AdminUrlUtil = new AdminUrlUtil(
-      serverURL,
-      localized ? 'lexical-localized-fields' : 'lexical-fields',
-    )
+    const url: AdminUrlUtil = new AdminUrlUtil(serverURL, collectionSlug)
     await page.goto(url.list)
   }
 
@@ -932,6 +929,41 @@ describe('lexicalMain', () => {
     })
   })
 
+  test('ensure link drawer displays fields if document does not have `create` permission', async () => {
+    await navigateToLexicalFields(true, 'lexical-access-control')
+    const richTextField = page.locator('.rich-text-lexical').first()
+    await richTextField.scrollIntoViewIfNeeded()
+    await expect(richTextField).toBeVisible()
+
+    const paragraph = richTextField.locator('.LexicalEditorTheme__paragraph').first()
+    await paragraph.scrollIntoViewIfNeeded()
+    await expect(paragraph).toBeVisible()
+    /**
+     * Type some text
+     */
+    await paragraph.click()
+    await page.keyboard.type('Text')
+
+    // Select text
+    for (let i = 0; i < 4; i++) {
+      await page.keyboard.press('Shift+ArrowLeft')
+    }
+    // Ensure inline toolbar appeared
+    const inlineToolbar = page.locator('.inline-toolbar-popup')
+    await expect(inlineToolbar).toBeVisible()
+
+    const linkButton = inlineToolbar.locator('.toolbar-popup__button-link')
+    await expect(linkButton).toBeVisible()
+    await linkButton.click()
+
+    const linkDrawer = page.locator('dialog[id^=drawer_1_lexical-rich-text-link-]').first() // IDs starting with drawer_1_lexical-rich-text-link- (there's some other symbol after the underscore)
+    await expect(linkDrawer).toBeVisible()
+
+    const urlInput = linkDrawer.locator('#field-url').first()
+
+    await expect(urlInput).toBeVisible()
+  })
+
   test('lexical cursor / selection should be preserved when swapping upload field and clicking within with its list drawer', async () => {
     await navigateToLexicalFields()
     const richTextField = page.locator('.rich-text-lexical').first()
@@ -1292,7 +1324,7 @@ describe('lexicalMain', () => {
       expect(htmlContent).toContain('Start typing, or press')
     })
     test.skip('ensure simple localized lexical field works', async () => {
-      await navigateToLexicalFields(true, true)
+      await navigateToLexicalFields(true, 'lexical-localized-fields')
     })
   })
 

test/fields/collections/LexicalAccessControl/index.ts

@@ -0,0 +1,29 @@
+import type { CollectionConfig } from 'payload'
+
+import { defaultEditorFeatures, lexicalEditor } from '@payloadcms/richtext-lexical'
+
+import { lexicalAccessControlSlug } from '../../slugs.js'
+
+export const LexicalAccessControl: CollectionConfig = {
+  slug: lexicalAccessControlSlug,
+  access: {
+    read: () => true,
+    create: () => false,
+  },
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+    {
+      name: 'richText',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: [...defaultEditorFeatures],
+      }),
+    },
+  ],
+}

test/fields/config.ts

@@ -21,6 +21,7 @@ import GroupFields from './collections/Group/index.js'
 import IndexedFields from './collections/Indexed/index.js'
 import JSONFields from './collections/JSON/index.js'
 import { LexicalFields } from './collections/Lexical/index.js'
+import { LexicalAccessControl } from './collections/LexicalAccessControl/index.js'
 import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
 import { LexicalLocalizedFields } from './collections/LexicalLocalized/index.js'
 import { LexicalMigrateFields } from './collections/LexicalMigrate/index.js'
@@ -68,6 +69,7 @@ export const collectionSlugs: CollectionConfig[] = [
     ],
   },
   LexicalInBlock,
+  LexicalAccessControl,
   SelectVersionsFields,
   ArrayFields,
   BlockFields,

test/fields/payload-types.ts

@@ -34,6 +34,7 @@ export interface Config {
     lexicalObjectReferenceBug: LexicalObjectReferenceBug;
     users: User;
     LexicalInBlock: LexicalInBlock;
+    'lexical-access-control': LexicalAccessControl;
     'select-versions-fields': SelectVersionsField;
     'array-fields': ArrayField;
     'block-fields': BlockField;
@@ -80,6 +81,7 @@ export interface Config {
     lexicalObjectReferenceBug: LexicalObjectReferenceBugSelect<false> | LexicalObjectReferenceBugSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     LexicalInBlock: LexicalInBlockSelect<false> | LexicalInBlockSelect<true>;
+    'lexical-access-control': LexicalAccessControlSelect<false> | LexicalAccessControlSelect<true>;
     'select-versions-fields': SelectVersionsFieldsSelect<false> | SelectVersionsFieldsSelect<true>;
     'array-fields': ArrayFieldsSelect<false> | ArrayFieldsSelect<true>;
     'block-fields': BlockFieldsSelect<false> | BlockFieldsSelect<true>;
@@ -454,6 +456,31 @@ export interface LexicalInBlock {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "lexical-access-control".
+ */
+export interface LexicalAccessControl {
+  id: string;
+  title?: string | null;
+  richText?: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "select-versions-fields".
@@ -469,7 +496,7 @@ export interface SelectVersionsField {
     | null;
   blocks?:
     | {
-        hasManyArr?: ('a' | 'b' | 'c')[] | null;
+        hasManyBlocks?: ('a' | 'b' | 'c')[] | null;
         id?: string | null;
         blockName?: string | null;
         blockType: 'block';
@@ -1830,6 +1857,10 @@ export interface PayloadLockedDocument {
         relationTo: 'LexicalInBlock';
         value: string | LexicalInBlock;
       } | null)
+    | ({
+        relationTo: 'lexical-access-control';
+        value: string | LexicalAccessControl;
+      } | null)
     | ({
         relationTo: 'select-versions-fields';
         value: string | SelectVersionsField;
@@ -2104,6 +2135,16 @@ export interface LexicalInBlockSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "lexical-access-control_select".
+ */
+export interface LexicalAccessControlSelect<T extends boolean = true> {
+  title?: T;
+  richText?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "select-versions-fields_select".
@@ -2122,7 +2163,7 @@ export interface SelectVersionsFieldsSelect<T extends boolean = true> {
         block?:
           | T
           | {
-              hasManyArr?: T;
+              hasManyBlocks?: T;
               id?: T;
               blockName?: T;
             };

test/fields/seed.ts

@@ -495,10 +495,12 @@ export const seed = async (_payload: Payload) => {
     data: {
       text: 'text',
     },
+    depth: 0,
   })
 
   await _payload.create({
     collection: 'LexicalInBlock',
+    depth: 0,
     data: {
       content: {
         root: {
@@ -537,24 +539,36 @@ export const seed = async (_payload: Payload) => {
     },
   })
 
+  await _payload.create({
+    collection: 'lexical-access-control',
+    data: {
+      richText: textToLexicalJSON({ text: 'text' }),
+      title: 'title',
+    },
+    depth: 0,
+  })
+
   await Promise.all([
     _payload.create({
       collection: customIDSlug,
       data: {
         id: nonStandardID,
       },
+      depth: 0,
     }),
     _payload.create({
       collection: customTabIDSlug,
       data: {
         id: customTabID,
       },
+      depth: 0,
     }),
     _payload.create({
       collection: customRowIDSlug,
       data: {
         id: customRowID,
       },
+      depth: 0,
     }),
   ])
 }

test/fields/slugs.ts

@@ -17,6 +17,9 @@ export const lexicalFieldsSlug = 'lexical-fields'
 export const lexicalLocalizedFieldsSlug = 'lexical-localized-fields'
 export const lexicalMigrateFieldsSlug = 'lexical-migrate-fields'
 export const lexicalRelationshipFieldsSlug = 'lexical-relationship-fields'
+
+export const lexicalAccessControlSlug = 'lexical-access-control'
+
 export const numberFieldsSlug = 'number-fields'
 export const pointFieldsSlug = 'point-fields'
 export const radioFieldsSlug = 'radio-fields'
@@ -52,6 +55,7 @@ export const collectionSlugs = [
   lexicalFieldsSlug,
   lexicalMigrateFieldsSlug,
   lexicalRelationshipFieldsSlug,
+  lexicalAccessControlSlug,
   numberFieldsSlug,
   pointFieldsSlug,
   radioFieldsSlug,