RichText Read-Only Option

[oliverkierepka]

Currently i am build a granular content management system where i have a usecase where i need the RichText field to have a readonly mode.

In my usecase the user can select a media reference. the media reference holds the media resource (image or video), an alt tag, title tag, and image description (richText, cause it can contain links).

now i want the user to be able to select a media reference and be able to optionally override the caption. The user should first activate a "Override caption" checkbox before the richtText gets editable.

This is because payloads autosave function and i want the user to actively decide on overriding the caption before he overrides the text.

[zubricks]

Hey @oliverkierepka you should actually be able to achieve this without a new feature.

admin.readOnly is fully supported on Lexical.

For your specific use case, you could combine admin.readOnly with admin.condition:

{
  name: 'overrideCaption',
  type: 'checkbox',
  defaultValue: false,
},
{
  name: 'caption',
  type: 'richText',
  admin: {
    readOnly: true,  // default: read-only
    condition: () => true, // always shown
  },
},

That said, admin.readOnly is static — it doesn't react to sibling field values at runtime.

To make it dynamic, you'd need a custom field component that reads the checkbox value from form state and conditionally sets readOnly:

'use client'
import { RichTextField, useField } from '@payloadcms/ui'

export const ConditionalRichText = (props) => {
  const { value: overrideCaption } = useField({ path: 'overrideCaption' })

  return <RichTextField {...props} readOnly={!overrideCaption} />
}

Then register it in the field config:

{
  name: 'caption',
  type: 'richText',
  admin: {
    components: {
      Field: '/path/to/ConditionalRichText',
    },
  },
}