diff --git a/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx b/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx index 469e58b4d..087440eb8 100644 --- a/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx +++ b/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx @@ -68,11 +68,11 @@ const RelationshipDrawerComponent: React.FC = ({ enabledCollectionSlugs } }, [editor, openDrawer]) const onSelect = useCallback( - ({ collectionConfig, docID }) => { + ({ collectionSlug, docID }) => { insertRelationship({ id: docID, editor, - relationTo: collectionConfig.slug, + relationTo: collectionSlug, replaceNodeKey, }) closeDrawer() diff --git a/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx b/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx new file mode 100644 index 000000000..cb8fdfacf --- /dev/null +++ b/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx @@ -0,0 +1,57 @@ +'use client' + +import { withMergedProps } from '@payloadcms/ui' + +import type { FeatureProviderProviderClient } from '../types' +import type { RelationshipFeatureProps } from './feature.server' + +import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types' +import { RelationshipIcon } from '../../lexical/ui/icons/Relationship' +import { createClientComponent } from '../createClientComponent' +import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands' +import { RelationshipNode } from './nodes/RelationshipNode' +import { RelationshipPlugin } from './plugins' + +const RelationshipFeatureClient: FeatureProviderProviderClient = ( + props, +) => { + return { + clientFeatureProps: props, + feature: () => ({ + clientFeatureProps: props, + nodes: [RelationshipNode], + plugins: [ + { + Component: withMergedProps({ + Component: RelationshipPlugin, + toMergeIntoProps: props, + }), + position: 'normal', + }, + ], + slashMenu: { + options: [ + { + displayName: 'Basic', + key: 'basic', + options: [ + new SlashMenuOption('relationship', { + Icon: RelationshipIcon, + displayName: 'Relationship', + keywords: ['relationship', 'relation', 'rel'], + onSelect: ({ editor }) => { + // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND + editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, { + replace: false, + }) + }, + }), + ], + }, + ], + }, + }), + } +} + +export const RelationshipFeatureClientComponent = createClientComponent(RelationshipFeatureClient) diff --git a/packages/richtext-lexical/src/field/features/relationship/feature.server.ts b/packages/richtext-lexical/src/field/features/relationship/feature.server.ts new file mode 100644 index 000000000..1c3f06596 --- /dev/null +++ b/packages/richtext-lexical/src/field/features/relationship/feature.server.ts @@ -0,0 +1,51 @@ +import type { FeatureProviderProviderServer } from '../types' + +import { RelationshipFeatureClientComponent } from './feature.client' +import { RelationshipNode } from './nodes/RelationshipNode' +import { relationshipPopulationPromise } from './populationPromise' + +export type RelationshipFeatureProps = + | { + /** + * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config. + * When this property is set, `enabledCollections` will not be available. + **/ + disabledCollections?: string[] + + // Ensures that enabledCollections is not available when disabledCollections is set + enabledCollections?: never + } + | { + // Ensures that disabledCollections is not available when enabledCollections is set + disabledCollections?: never + + /** + * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config + * When this property is set, `disabledCollections` will not be available. + **/ + enabledCollections?: string[] + } + +export const RelationshipFeature: FeatureProviderProviderServer< + RelationshipFeatureProps, + RelationshipFeatureProps +> = (props) => { + return { + feature: () => { + return { + ClientComponent: RelationshipFeatureClientComponent, + clientFeatureProps: props, + nodes: [ + { + node: RelationshipNode, + populationPromises: [relationshipPopulationPromise], + // TODO: Add validation similar to upload + }, + ], + serverFeatureProps: props, + } + }, + key: 'relationship', + serverFeatureProps: props, + } +} diff --git a/packages/richtext-lexical/src/field/features/relationship/index.ts b/packages/richtext-lexical/src/field/features/relationship/index.ts deleted file mode 100644 index 3a200e260..000000000 --- a/packages/richtext-lexical/src/field/features/relationship/index.ts +++ /dev/null @@ -1,88 +0,0 @@ -import type { FeatureProvider } from '../types' - -import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types' -import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands' -import { RelationshipNode } from './nodes/RelationshipNode' -import { relationshipPopulationPromise } from './populationPromise' - -export type RelationshipFeatureProps = - | { - /** - * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config. - * When this property is set, `enabledCollections` will not be available. - **/ - disabledCollections?: string[] - - // Ensures that enabledCollections is not available when disabledCollections is set - enabledCollections?: never - } - | { - // Ensures that disabledCollections is not available when enabledCollections is set - disabledCollections?: never - - /** - * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config - * When this property is set, `disabledCollections` will not be available. - **/ - enabledCollections?: string[] - } - -export const RelationshipFeature = (props?: RelationshipFeatureProps): FeatureProvider => { - return { - feature: () => { - return { - nodes: [ - { - type: RelationshipNode.getType(), - node: RelationshipNode, - populationPromises: [relationshipPopulationPromise], - // TODO: Add validation similar to upload - }, - ], - plugins: [ - { - Component: () => - // @ts-expect-error-next-line - import('./plugins').then((module) => { - const RelationshipPlugin = module.RelationshipPlugin - return import('@payloadcms/ui').then((module2) => - module2.withMergedProps({ - Component: RelationshipPlugin, - toMergeIntoProps: props, - }), - ) - }), - position: 'normal', - }, - ], - props: props, - slashMenu: { - options: [ - { - displayName: 'Basic', - key: 'basic', - options: [ - new SlashMenuOption('relationship', { - Icon: () => - // @ts-expect-error-next-line - import('../../lexical/ui/icons/Relationship').then( - (module) => module.RelationshipIcon, - ), - displayName: 'Relationship', - keywords: ['relationship', 'relation', 'rel'], - onSelect: ({ editor }) => { - // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND - editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, { - replace: false, - }) - }, - }), - ], - }, - ], - }, - } - }, - key: 'relationship', - } -} diff --git a/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx b/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx index c1fd873c3..6b04af37b 100644 --- a/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx +++ b/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx @@ -57,7 +57,7 @@ const Component: React.FC = (props) => { ) const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({ - id: id, + id, collectionSlug: relatedCollection.slug, }) @@ -93,7 +93,7 @@ const Component: React.FC = (props) => {

- {data[relatedCollection?.admin?.useAsTitle || 'id']} + {data ? data[relatedCollection?.admin?.useAsTitle || 'id'] : id}

@@ -102,7 +102,7 @@ const Component: React.FC = (props) => {