Cannot customize rich text link base fields

[evelynhathaway]

From what I can tell, there isn't a way to customize the fields that the link modal that displays in rich text fields. The custom fields and the native fields are isolated from each other.

payload/src/admin/components/forms/field-types/RichText/elements/link/LinkDrawer/baseFields.ts

Line 16 in baf5b10

export const getBaseFields = (config: Config): Field[] => [

payload/src/admin/components/forms/field-types/RichText/elements/link/Button/index.tsx

Lines 71 to 89 in 25c5b78

	const fields: Field[] = [
	...getBaseFields(config),
	];
	if (customFieldSchema) {
	fields.push({
	name: 'fields',
	type: 'group',
	admin: {
	style: {
	margin: 0,
	padding: 0,
	borderTop: 0,
	borderBottom: 0,
	},
	},
	fields: customFieldSchema,
	});
	}

This means users can't:

• Create custom validation for the URL field (e.g. disallowing links to certain domains)
• Change the collections that the are referenced in the internal link option richText field link to internal document - how to set browsable collections? #2095 (e.g. removing collections that do not have URLs like Users)
• Minimize the amount of data that is returned by the internal link option (per answer from the Payload team in How to use internal links in Rich Text without overloading the client with data? #1960)
• Remove the option for either internal links or custom URLs
• Remove the open in new tab checkbox

[jmikrut]

Hey @evelynhathaway — this is a great call. It should also be pretty easy to accomplish.

I think what we need to do is expose a property on the richText field as follows:

field.admin.link.overrideDefaultFields = (defaultFields) => newFields

Basically, it'd be a function that would accept default fields and allow Payload devs to return them modified to suit their purpose.

I don't think that this would be a good way to filter down the data returned still though... That might need to be done with an additional function - say something like:

field.reduceRelationshipData = ({ doc, slug }) => doc

This function could be shared and reused with any relationship populated by the rich text field. It could also automatically type the doc arg via the collection slug argument, like we do within our local API methods. It would also type the returned doc as a Partial.

We'd run this function each time we populate an upload or relationship field within rich text.

What do you think? This is a great feature. Not necessarily a bug or an issue, so I will move this to discussions, but I think this should be built ASAP.

Speaking of moving this to a discussion, I will add this to the roadmap as Priority 2 (to be released within next quarter or sooner). But in the meantime we would happily accept a PR for this. If you're up for it, I am happy to help provide more info on how this would need to be accomplished.

👍

[jmikrut]

Hey there - your notes all make sense. But I think it can be even simpler. What if we just used the existing key admin.link.fields and allowed it to accept an array of fields to be used below the default fields, OR a function, that accepts the base fields, and expects you to return an array of all fields you’d like to use?

I do understand that it might seem easier to specify your own base fields rather than extend the default fields but I also think that using the default fields from the function’s argument would be optional, and you could simply return whatever you want in any case with my proposed solution.

What do you think?

[ChrisGV04]

@jmikrut That makes sense. I think I like that approach better. Then if you pass a function you would get the default fields as an argument (which maybe could be typed) and it should return an array of fields, correct?

I imagine that to override a field it would be something like this:

{
  type: 'richText',
  admin: {
    link: {
      fields: (defaultFields) => {
        // Override the label of the link type field
        defaultFields.linkType.label = 'Type of link to use';

        return [
          ...defaultFields,
          // Add a custom field
          { name: 'showIcon', type: 'checkbox', label: 'Show an icon', defaultValue: false },
        ];
      },
    },
  },
},

Did I get it right?

[foopis23]

@ChrisGV04 are you going to work on this? Just making sure because I don't want duplicate work on this.

[ChrisGV04]

@foopis23 Hey! I'm not currently working on this. So if you want to give it a shot, go ahead 🚀

[mvarendorff2]

Since I couldn't find any PRs on this, I have taken the liberty to create one at #2559 :)

[ChrisGV04]

Yeah! Maybe we should also be able to disable the default fields entirely (except for the "Text to display"). I have a custom reusable field for the links in my project but when I add it to the Rich Text field's admin.link.fields I have duplicated data and the default fields don't fit my needs.

It would be nice to remove them and use my own fields there.

[DanRibbens]

Collection admin.enableRichTextLink is now available in Payload v1.7.5. This makes it even easier if all you need to to customize is the omission of certain collections from linking.

[evelynhathaway]

Between the following MRs, I think everything from this discussion is complete.

• feat: allow customizing the link fields #2559
• fix: RichText link custom fields are not getting saved when function is used instead of field array #2716 #2756
• fix: Rich Text link respect enableRichTextRelationship #2560

As a note from my implementation, if you replace the default fields (e.g. to make a consistent API with a custom Link Block) and still want the rich text popup to work, you will have to write a React component with a side effect that updates the hidden default fields when and of your new ones are changed. In my case, it was way easier to make my Link Block match the default rich text field names and adding overrides for all non-name properties.

[WouterK12]

Hi, great progress, but I think this discussion is incomplete. (Or this is possibly a feature for another discussion.)
There is still a need for reducing the amount of data returned by relationships.

E.g. like suggested above by @jmikrut:

I don't think that this would be a good way to filter down the data returned still though... That might need to be done with an additional function - say something like:

field.reduceRelationshipData = ({ doc, slug }) => doc

I can't find this feature on the roadmap. Is it there?

Edit: I think this is related to this discussion: #4896