diff --git a/packages/richtext-lexical/src/field/features/indent/feature.client.tsx b/packages/richtext-lexical/src/field/features/indent/feature.client.tsx new file mode 100644 index 000000000..7b39d2166 --- /dev/null +++ b/packages/richtext-lexical/src/field/features/indent/feature.client.tsx @@ -0,0 +1,66 @@ +'use client' + +import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical' + +import type { FeatureProviderProviderClient } from '../types' + +import { IndentDecreaseIcon } from '../../lexical/ui/icons/IndentDecrease' +import { IndentIncreaseIcon } from '../../lexical/ui/icons/IndentIncrease' +import { createClientComponent } from '../createClientComponent' +import { IndentSectionWithEntries } from './floatingSelectToolbarIndentSection' + +const IndentFeatureClient: FeatureProviderProviderClient = (props) => { + return { + clientFeatureProps: props, + feature: () => ({ + clientFeatureProps: props, + floatingSelectToolbar: { + sections: [ + IndentSectionWithEntries([ + { + ChildComponent: IndentDecreaseIcon, + isActive: () => false, + isEnabled: ({ selection }) => { + if (!selection || !selection?.getNodes()?.length) { + return false + } + for (const node of selection.getNodes()) { + // If at least one node is indented, this should be active + if ( + ('__indent' in node && (node.__indent as number) > 0) || + (node.getParent() && + '__indent' in node.getParent() && + node.getParent().__indent > 0) + ) { + return true + } + } + return false + }, + key: 'indent-decrease', + label: `Decrease Indent`, + onClick: ({ editor }) => { + editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined) + }, + order: 1, + }, + ]), + IndentSectionWithEntries([ + { + ChildComponent: IndentIncreaseIcon, + isActive: () => false, + key: 'indent-increase', + label: `Increase Indent`, + onClick: ({ editor }) => { + editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined) + }, + order: 2, + }, + ]), + ], + }, + }), + } +} + +export const IndentFeatureClientComponent = createClientComponent(IndentFeatureClient) diff --git a/packages/richtext-lexical/src/field/features/indent/feature.server.ts b/packages/richtext-lexical/src/field/features/indent/feature.server.ts new file mode 100644 index 000000000..0e57f288a --- /dev/null +++ b/packages/richtext-lexical/src/field/features/indent/feature.server.ts @@ -0,0 +1,17 @@ +import type { FeatureProviderProviderServer } from '../types' + +import { IndentFeatureClientComponent } from './feature.client' + +export const IndentFeature: FeatureProviderProviderServer = (props) => { + return { + feature: () => { + return { + ClientComponent: IndentFeatureClientComponent, + clientFeatureProps: null, + serverFeatureProps: props, + } + }, + key: 'indent', + serverFeatureProps: props, + } +} diff --git a/packages/richtext-lexical/src/field/features/indent/index.ts b/packages/richtext-lexical/src/field/features/indent/index.ts deleted file mode 100644 index 72b7250a1..000000000 --- a/packages/richtext-lexical/src/field/features/indent/index.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical' - -import type { FeatureProvider } from '../types' - -import { IndentSectionWithEntries } from './floatingSelectToolbarIndentSection' - -export const IndentFeature = (): FeatureProvider => { - return { - feature: () => { - return { - floatingSelectToolbar: { - sections: [ - IndentSectionWithEntries([ - { - ChildComponent: () => - // @ts-expect-error-next-line - import('../../lexical/ui/icons/IndentDecrease').then( - (module) => module.IndentDecreaseIcon, - ), - isActive: () => false, - isEnabled: ({ selection }) => { - if (!selection || !selection?.getNodes()?.length) { - return false - } - for (const node of selection.getNodes()) { - // If at least one node is indented, this should be active - if ( - ('__indent' in node && (node.__indent as number) > 0) || - (node.getParent() && - '__indent' in node.getParent() && - node.getParent().__indent > 0) - ) { - return true - } - } - return false - }, - key: 'indent-decrease', - label: `Decrease Indent`, - onClick: ({ editor }) => { - editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined) - }, - order: 1, - }, - ]), - IndentSectionWithEntries([ - { - ChildComponent: () => - // @ts-expect-error-next-line - import('../../lexical/ui/icons/IndentIncrease').then( - (module) => module.IndentIncreaseIcon, - ), - isActive: () => false, - key: 'indent-increase', - label: `Increase Indent`, - onClick: ({ editor }) => { - editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined) - }, - order: 2, - }, - ]), - ], - }, - plugins: [ - { - Component: () => - // @ts-expect-error-next-line - import('./plugin').then((module) => module.IndentPlugin), - position: 'normal', - }, - ], - props: null, - } - }, - key: 'indent', - } -} diff --git a/packages/richtext-lexical/src/field/features/indent/plugin.ts b/packages/richtext-lexical/src/field/features/indent/plugin.ts deleted file mode 100644 index 41d5aa1f4..000000000 --- a/packages/richtext-lexical/src/field/features/indent/plugin.ts +++ /dev/null @@ -1,7 +0,0 @@ -'use client' - -import './index.scss' - -export function IndentPlugin(): null { - return null -} diff --git a/packages/richtext-lexical/src/field/features/link/feature.server.ts b/packages/richtext-lexical/src/field/features/link/feature.server.ts index fddfc7c09..ce9954ab4 100644 --- a/packages/richtext-lexical/src/field/features/link/feature.server.ts +++ b/packages/richtext-lexical/src/field/features/link/feature.server.ts @@ -1,7 +1,6 @@ import type { I18n } from '@payloadcms/translations' import type { SanitizedConfig } from 'payload/config' import type { Field } from 'payload/types' -import type React from 'react' import { initI18n } from '@payloadcms/translations' import { translations } from '@payloadcms/translations/client' @@ -53,6 +52,9 @@ export type LinkFeatureServerProps = ExclusiveLinkCollectionsProps & { export const LinkFeature: FeatureProviderProviderServer = ( props, ) => { + if (!props) { + props = {} + } return { feature: () => { return { diff --git a/packages/richtext-lexical/src/field/lexical/config/server/default.ts b/packages/richtext-lexical/src/field/lexical/config/server/default.ts index 2c75cfb66..8b89fe219 100644 --- a/packages/richtext-lexical/src/field/lexical/config/server/default.ts +++ b/packages/richtext-lexical/src/field/lexical/config/server/default.ts @@ -13,7 +13,7 @@ import { SubscriptFeature } from '../../../features/format/subscript/feature.ser import { SuperscriptFeature } from '../../../features/format/superscript/feature.server' import { UnderlineFeature } from '../../../features/format/underline/feature.server' import { HeadingFeature } from '../../../features/heading/feature.server' -import { IndentFeature } from '../../../features/indent' +import { IndentFeature } from '../../../features/indent/feature.server' import { LinkFeature } from '../../../features/link/feature.server' import { CheckListFeature } from '../../../features/lists/checklist' import { OrderedListFeature } from '../../../features/lists/orderedlist' @@ -38,7 +38,7 @@ export const defaultEditorFeatures: FeatureProviderServer[] = SuperscriptFeature(), InlineCodeFeature(), ParagraphFeature(), - HeadingFeature({}), + HeadingFeature(), AlignFeature(), IndentFeature(), UnorderedListFeature(), diff --git a/packages/richtext-lexical/src/index.ts b/packages/richtext-lexical/src/index.ts index 06d559d37..3c64b9ca5 100644 --- a/packages/richtext-lexical/src/index.ts +++ b/packages/richtext-lexical/src/index.ts @@ -272,7 +272,7 @@ export { SuperscriptFeature } from './field/features/format/superscript/feature. export { UnderlineFeature } from './field/features/format/underline/feature.server' export { HeadingFeature } from './field/features/heading/feature.server' -export { IndentFeature } from './field/features/indent' +export { IndentFeature } from './field/features/indent/feature.server' export { LinkFeature, type LinkFeatureServerProps } from './field/features/link/feature.server' export { diff --git a/test/buildConfigWithDefaults.ts b/test/buildConfigWithDefaults.ts index 7b19282c6..1f87a456f 100644 --- a/test/buildConfigWithDefaults.ts +++ b/test/buildConfigWithDefaults.ts @@ -4,6 +4,7 @@ import { BlocksFeature, BoldFeature, HeadingFeature, + IndentFeature, InlineCodeFeature, ItalicFeature, LinkFeature, @@ -89,7 +90,7 @@ export function buildConfigWithDefaults(testConfig?: Partial): Promise): Promise