feat(richtext-lexical)!: finalize ClientFeature interface (#6191)

**BREAKING:**
If you have own, custom lexical features, there will be a bunch of breaking API changes for you. The saved JSON data is not affected.

- `floatingSelectToolbar` has been changed to `toolbarInline`

- `slashMenu.dynamicOptions `and `slashMenu.options` have been changed to `slashMenu.groups` and `slashMenu.dynamicGroups`

- `toolbarFixed.sections` is now `toolbarFixed.groups`

- Slash menu group `options` and toolbar group `entries` have both been renamed to `items`

- Toolbar group item `onClick` has been renamed to `onSelect` to match slash menu properties

- slashMenu item `onSelect` is no longer auto-wrapped inside an `editor.update`. If you perform editor updates in them, you have to wrap it inside an `editor.update` callback yourself. Within our own features this extra control has removed a good amount of unnecessary, nested `editor.update` calls, which is good

- Slash menu items are no longer initialized using the `new` keyword, as they are now types and no longer classes. You can convert them to an object and add the `key` property as an object property instead of an argument to the previous SlashMenuItem constructor

- CSS classnames for slash menu and toolbars, as well as their items, have changed

- `CheckListFeature` is now exported as and has been renamed to `ChecklistFeature`

For guidance on migration, check out how we migrated our own features in this PR's diff: https://github.com/payloadcms/payload/pull/6191/files

Author: AlessioGr

packages/richtext-lexical/src/exports/components.ts

@@ -2,5 +2,5 @@ export { RichTextCell } from '../cell/index.js'
 export { RichTextField } from '../field/index.js'
 
 export { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'
-export { ToolbarButton } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.js'
-export { ToolbarDropdown } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.js'
+export { ToolbarButton } from '../field/lexical/plugins/toolbars/inline/ToolbarButton/index.js'
+export { ToolbarDropdown } from '../field/lexical/plugins/toolbars/inline/ToolbarDropdown/index.js'

packages/richtext-lexical/src/field/features/align/feature.client.tsx

@@ -9,58 +9,52 @@ import { AlignJustifyIcon } from '../../lexical/ui/icons/AlignJustify/index.js'
 import { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js'
 import { AlignRightIcon } from '../../lexical/ui/icons/AlignRight/index.js'
 import { createClientComponent } from '../createClientComponent.js'
-import { AlignDropdownSectionWithEntries } from './floatingSelectToolbarAlignDropdownSection.js'
+import { alignGroupWithItems } from './inlineToolbarAlignGroup.js'
 
 const AlignFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {
   return {
     clientFeatureProps: props,
     feature: () => ({
       clientFeatureProps: props,
-      floatingSelectToolbar: {
-        sections: [
-          AlignDropdownSectionWithEntries([
+      toolbarInline: {
+        groups: [
+          alignGroupWithItems([
             {
               ChildComponent: AlignLeftIcon,
               isActive: () => false,
-              key: 'align-left',
+              key: 'alignLeft',
               label: `Align Left`,
-              onClick: ({ editor }) => {
+              onSelect: ({ editor }) => {
                 editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')
               },
               order: 1,
             },
-          ]),
-          AlignDropdownSectionWithEntries([
             {
               ChildComponent: AlignCenterIcon,
               isActive: () => false,
-              key: 'align-center',
+              key: 'alignCenter',
               label: `Align Center`,
-              onClick: ({ editor }) => {
+              onSelect: ({ editor }) => {
                 editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')
               },
               order: 2,
             },
-          ]),
-          AlignDropdownSectionWithEntries([
             {
               ChildComponent: AlignRightIcon,
               isActive: () => false,
-              key: 'align-right',
+              key: 'alignRight',
               label: `Align Right`,
-              onClick: ({ editor }) => {
+              onSelect: ({ editor }) => {
                 editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')
               },
               order: 3,
             },
-          ]),
-          AlignDropdownSectionWithEntries([
             {
               ChildComponent: AlignJustifyIcon,
               isActive: () => false,
-              key: 'align-justify',
+              key: 'alignJustify',
               label: `Align Justify`,
-              onClick: ({ editor }) => {
+              onSelect: ({ editor }) => {
                 editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')
               },
               order: 4,

packages/richtext-lexical/src/field/features/align/floatingSelectToolbarAlignDropdownSection.ts

@@ -0,0 +1,16 @@
+import type {
+  InlineToolbarGroup,
+  InlineToolbarGroupItem,
+} from '../../lexical/plugins/toolbars/inline/types.js'
+
+import { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js'
+
+export const alignGroupWithItems = (items: InlineToolbarGroupItem[]): InlineToolbarGroup => {
+  return {
+    type: 'dropdown',
+    ChildComponent: AlignLeftIcon,
+    items,
+    key: 'align',
+    order: 2,
+  }
+}

packages/richtext-lexical/src/field/features/align/inlineToolbarAlignGroup.ts

@@ -6,26 +6,50 @@ import { $getSelection } from 'lexical'
 
 import type { FeatureProviderProviderClient } from '../types.js'
 
-import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'
 import { BlockquoteIcon } from '../../lexical/ui/icons/Blockquote/index.js'
-import { TextDropdownSectionWithEntries } from '../common/floatingSelectToolbarTextDropdownSection/index.js'
 import { createClientComponent } from '../createClientComponent.js'
+import { inlineToolbarTextDropdownGroupWithItems } from '../shared/inlineToolbar/textDropdownGroup.js'
 import { MarkdownTransformer } from './markdownTransformer.js'
 
 const BlockQuoteFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {
   return {
     clientFeatureProps: props,
     feature: () => ({
       clientFeatureProps: props,
-      floatingSelectToolbar: {
-        sections: [
-          TextDropdownSectionWithEntries([
+      markdownTransformers: [MarkdownTransformer],
+      nodes: [QuoteNode],
+
+      slashMenu: {
+        groups: [
+          {
+            displayName: 'Basic',
+            items: [
+              {
+                Icon: BlockquoteIcon,
+                displayName: 'Blockquote',
+                key: 'blockquote',
+                keywords: ['quote', 'blockquote'],
+                onSelect: ({ editor }) => {
+                  editor.update(() => {
+                    const selection = $getSelection()
+                    $setBlocksType(selection, () => $createQuoteNode())
+                  })
+                },
+              },
+            ],
+            key: 'basic',
+          },
+        ],
+      },
+      toolbarInline: {
+        groups: [
+          inlineToolbarTextDropdownGroupWithItems([
             {
               ChildComponent: BlockquoteIcon,
               isActive: () => false,
               key: 'blockquote',
               label: `Blockquote`,
-              onClick: ({ editor }) => {
+              onSelect: ({ editor }) => {
                 editor.update(() => {
                   const selection = $getSelection()
                   $setBlocksType(selection, () => $createQuoteNode())
@@ -36,28 +60,6 @@ const BlockQuoteFeatureClient: FeatureProviderProviderClient<undefined> = (props
           ]),
         ],
       },
-      markdownTransformers: [MarkdownTransformer],
-
-      nodes: [QuoteNode],
-      slashMenu: {
-        options: [
-          {
-            displayName: 'Basic',
-            key: 'basic',
-            options: [
-              new SlashMenuOption(`blockquote`, {
-                Icon: BlockquoteIcon,
-                displayName: `Blockquote`,
-                keywords: ['quote', 'blockquote'],
-                onSelect: () => {
-                  const selection = $getSelection()
-                  $setBlocksType(selection, () => $createQuoteNode())
-                },
-              }),
-            ],
-          },
-        ],
-      },
     }),
   }
 }

packages/richtext-lexical/src/field/features/blockquote/feature.client.tsx

@@ -6,7 +6,6 @@ import { getTranslation } from '@payloadcms/translations'
 
 import type { FeatureProviderProviderClient } from '../types.js'
 
-import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'
 import { BlockIcon } from '../../lexical/ui/icons/Block/index.js'
 import { createClientComponent } from '../createClientComponent.js'
 import { BlockNode } from './nodes/BlocksNode.js'
@@ -30,32 +29,31 @@ const BlocksFeatureClient: FeatureProviderProviderClient<BlocksFeatureClientProp
         },
       ],
       slashMenu: {
-        options: [
+        groups: [
           {
             displayName: 'Blocks',
-            key: 'blocks',
-            options: [
-              ...props.reducedBlocks.map((block) => {
-                return new SlashMenuOption('block-' + block.slug, {
-                  Icon: BlockIcon,
-                  displayName: ({ i18n }) => {
-                    if (!block.labels.singular) {
-                      return block.slug
-                    }
+            items: props.reducedBlocks.map((block) => {
+              return {
+                Icon: BlockIcon,
+                displayName: ({ i18n }) => {
+                  if (!block.labels.singular) {
+                    return block.slug
+                  }
 
-                    return getTranslation(block.labels.singular, i18n)
-                  },
-                  keywords: ['block', 'blocks', block.slug],
-                  onSelect: ({ editor }) => {
-                    editor.dispatchCommand(INSERT_BLOCK_COMMAND, {
-                      id: null,
-                      blockName: '',
-                      blockType: block.slug,
-                    })
-                  },
-                })
-              }),
-            ],
+                  return getTranslation(block.labels.singular, i18n)
+                },
+                key: 'block-' + block.slug,
+                keywords: ['block', 'blocks', block.slug],
+                onSelect: ({ editor }) => {
+                  editor.dispatchCommand(INSERT_BLOCK_COMMAND, {
+                    id: null,
+                    blockName: '',
+                    blockType: block.slug,
+                  })
+                },
+              }
+            }),
+            key: 'blocks',
           },
         ],
       },

packages/richtext-lexical/src/field/features/blocks/feature.client.tsx

@@ -10,7 +10,7 @@ export const TestRecorderFeature: FeatureProviderProviderServer<undefined, undef
         serverFeatureProps: props,
       }
     },
-    key: 'testrecorder',
+    key: 'testRecorder',
     serverFeatureProps: props,
   }
 }