fix(richtext-lexical): editor throws an error if OrderedList is registered but not UnorderedList or CheckList (#14149)

The problem was that the nodes weren't being added.

The logic to avoid adding the same node or plugin multiple times was
repeated in several places. It was also difficult to understand and easy
to make mistakes.

I extracted the logic into a new `shouldRegisterList` utility and
corrected the behavior where necessary.

Fixes #14148

Author: GermanJablo

packages/richtext-lexical/src/features/lists/checklist/client/index.tsx

@@ -9,6 +9,7 @@ import { ChecklistIcon } from '../../../../lexical/ui/icons/Checklist/index.js'
 import { createClientFeature } from '../../../../utilities/createClientFeature.js'
 import { toolbarTextDropdownGroupWithItems } from '../../../shared/toolbar/textDropdownGroup.js'
 import { LexicalListPlugin } from '../../plugin/index.js'
+import { shouldRegisterListBaseNodes } from '../../shared/shouldRegisterListBaseNodes.js'
 import { slashMenuListGroupWithItems } from '../../shared/slashMenuListGroup.js'
 import { CHECK_LIST } from '../markdownTransformers.js'
 import { LexicalCheckListPlugin } from './plugin/index.js'
@@ -62,7 +63,8 @@ export const ChecklistFeatureClient = createClientFeature(({ featureProviderMap
     },
   ]
 
-  if (!featureProviderMap.has('unorderedList') && !featureProviderMap.has('orderedList')) {
+  const shouldRegister = shouldRegisterListBaseNodes('checklist', featureProviderMap)
+  if (shouldRegister) {
     plugins.push({
       Component: LexicalListPlugin,
       position: 'normal',
@@ -71,10 +73,7 @@ export const ChecklistFeatureClient = createClientFeature(({ featureProviderMap
 
   return {
     markdownTransformers: [CHECK_LIST],
-    nodes:
-      featureProviderMap.has('unorderedList') || featureProviderMap.has('orderedList')
-        ? []
-        : [ListNode, ListItemNode],
+    nodes: shouldRegister ? [ListNode, ListItemNode] : [],
     plugins,
     slashMenu: {
       groups: [

packages/richtext-lexical/src/features/lists/checklist/server/index.ts

@@ -3,6 +3,7 @@ import { ListItemNode, ListNode } from '@lexical/list'
 import { createServerFeature } from '../../../../utilities/createServerFeature.js'
 import { createNode } from '../../../typeUtilities.js'
 import { ListHTMLConverter, ListItemHTMLConverter } from '../../htmlConverter.js'
+import { shouldRegisterListBaseNodes } from '../../shared/shouldRegisterListBaseNodes.js'
 import { CHECK_LIST } from '../markdownTransformers.js'
 import { i18n } from './i18n.js'
 
@@ -12,23 +13,22 @@ export const ChecklistFeature = createServerFeature({
       ClientFeature: '@payloadcms/richtext-lexical/client#ChecklistFeatureClient',
       i18n,
       markdownTransformers: [CHECK_LIST],
-      nodes:
-        featureProviderMap.has('unorderedList') || featureProviderMap.has('orderedList')
-          ? []
-          : [
-              createNode({
-                converters: {
-                  html: ListHTMLConverter as any, // ListHTMLConverter uses a different generic type than ListNode[exportJSON], thus we need to cast as any
-                },
-                node: ListNode,
-              }),
-              createNode({
-                converters: {
-                  html: ListItemHTMLConverter as any,
-                },
-                node: ListItemNode,
-              }),
-            ],
+      nodes: shouldRegisterListBaseNodes('checklist', featureProviderMap)
+        ? [
+            createNode({
+              converters: {
+                html: ListHTMLConverter as any, // ListHTMLConverter uses a different generic type than ListNode[exportJSON], thus we need to cast as any
+              },
+              node: ListNode,
+            }),
+            createNode({
+              converters: {
+                html: ListItemHTMLConverter as any,
+              },
+              node: ListItemNode,
+            }),
+          ]
+        : [],
     }
   },
   key: 'checklist',

packages/richtext-lexical/src/features/lists/orderedList/client/index.tsx

@@ -8,6 +8,7 @@ import { OrderedListIcon } from '../../../../lexical/ui/icons/OrderedList/index.
 import { createClientFeature } from '../../../../utilities/createClientFeature.js'
 import { toolbarTextDropdownGroupWithItems } from '../../../shared/toolbar/textDropdownGroup.js'
 import { LexicalListPlugin } from '../../plugin/index.js'
+import { shouldRegisterListBaseNodes } from '../../shared/shouldRegisterListBaseNodes.js'
 import { slashMenuListGroupWithItems } from '../../shared/slashMenuListGroup.js'
 import { ORDERED_LIST } from '../markdownTransformer.js'
 
@@ -53,17 +54,18 @@ const toolbarGroups: ToolbarGroup[] = [
 ]
 
 export const OrderedListFeatureClient = createClientFeature(({ featureProviderMap }) => {
+  const shouldRegister = shouldRegisterListBaseNodes('ordered', featureProviderMap)
   return {
     markdownTransformers: [ORDERED_LIST],
-    nodes: featureProviderMap.has('orderedList') ? [] : [ListNode, ListItemNode],
-    plugins: featureProviderMap.has('orderedList')
-      ? []
-      : [
+    nodes: shouldRegister ? [ListNode, ListItemNode] : [],
+    plugins: shouldRegister
+      ? [
           {
             Component: LexicalListPlugin,
             position: 'normal',
           },
-        ],
+        ]
+      : [],
     slashMenu: {
       groups: [
         slashMenuListGroupWithItems([

packages/richtext-lexical/src/features/lists/orderedList/server/index.ts

@@ -3,6 +3,7 @@ import { ListItemNode, ListNode } from '@lexical/list'
 import { createServerFeature } from '../../../../utilities/createServerFeature.js'
 import { createNode } from '../../../typeUtilities.js'
 import { ListHTMLConverter, ListItemHTMLConverter } from '../../htmlConverter.js'
+import { shouldRegisterListBaseNodes } from '../../shared/shouldRegisterListBaseNodes.js'
 import { ORDERED_LIST } from '../markdownTransformer.js'
 import { i18n } from './i18n.js'
 
@@ -12,9 +13,8 @@ export const OrderedListFeature = createServerFeature({
       ClientFeature: '@payloadcms/richtext-lexical/client#OrderedListFeatureClient',
       i18n,
       markdownTransformers: [ORDERED_LIST],
-      nodes: featureProviderMap.has('unorderedList')
-        ? []
-        : [
+      nodes: shouldRegisterListBaseNodes('ordered', featureProviderMap)
+        ? [
             createNode({
               converters: {
                 html: ListHTMLConverter as any, // ListHTMLConverter uses a different generic type than ListNode[exportJSON], thus we need to cast as any
@@ -27,7 +27,8 @@ export const OrderedListFeature = createServerFeature({
               },
               node: ListItemNode,
             }),
-          ],
+          ]
+        : [],
     }
   },
   key: 'orderedList',

packages/richtext-lexical/src/features/lists/shared/shouldRegisterListBaseNodes.ts

@@ -0,0 +1,18 @@
+// Priority order: unordered > ordered > checklist.
+// That's why we don't include unordered among the parameter options. It registers by default.
+export function shouldRegisterListBaseNodes(
+  type: 'checklist' | 'ordered',
+  featureProviderMap: Map<string, unknown>,
+) {
+  if (type === 'ordered') {
+    // OrderedList only registers if UnorderedList is NOT present
+    return !featureProviderMap.has('unorderedList')
+  }
+
+  if (type === 'checklist') {
+    // Checklist only registers if neither UnorderedList nor OrderedList are present
+    return !featureProviderMap.has('unorderedList') && !featureProviderMap.has('orderedList')
+  }
+
+  return false
+}

test/lexical/baseConfig.ts

@@ -14,6 +14,7 @@ import { LexicalHeadingFeature } from './collections/LexicalHeadingFeature/index
 import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
 import { LexicalJSXConverter } from './collections/LexicalJSXConverter/index.js'
 import { LexicalLinkFeature } from './collections/LexicalLinkFeature/index.js'
+import { LexicalListsFeature } from './collections/LexicalListsFeature/index.js'
 import { LexicalLocalizedFields } from './collections/LexicalLocalized/index.js'
 import { LexicalMigrateFields } from './collections/LexicalMigrate/index.js'
 import { LexicalObjectReferenceBugCollection } from './collections/LexicalObjectReferenceBug/index.js'
@@ -34,6 +35,7 @@ export const baseConfig: Partial<Config> = {
   collections: [
     LexicalFullyFeatured,
     LexicalLinkFeature,
+    LexicalListsFeature,
     LexicalHeadingFeature,
     LexicalJSXConverter,
     getLexicalFieldsCollection({

test/lexical/collections/LexicalListsFeature/e2e.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import type { PayloadTestSDK } from '../../../helpers/sdk/index.js'
+import type { Config } from '../../payload-types.js'
+
+import { ensureCompilationIsDone } from '../../../helpers.js'
+import { AdminUrlUtil } from '../../../helpers/adminUrlUtil.js'
+import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
+import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
+import { lexicalListsFeatureSlug } from '../../slugs.js'
+import { LexicalHelpers } from '../utils.js'
+
+const filename = fileURLToPath(import.meta.url)
+const currentFolder = path.dirname(filename)
+const dirname = path.resolve(currentFolder, '../../')
+
+let payload: PayloadTestSDK<Config>
+let serverURL: string
+
+const { beforeAll, beforeEach, describe } = test
+
+// Unlike the other suites, this one runs in parallel, as they run on the `lexical-fully-featured/create` URL and are "pure" tests
+// PLEASE do not reset the database or perform any operations that modify it in this file.
+test.describe.configure({ mode: 'parallel' })
+
+describe('Lexical Lists Features', () => {
+  let lexical: LexicalHelpers
+  beforeAll(async ({ browser }, testInfo) => {
+    testInfo.setTimeout(TEST_TIMEOUT_LONG)
+    process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
+    ;({ payload, serverURL } = await initPayloadE2ENoConfig<Config>({ dirname }))
+
+    const page = await browser.newPage()
+    await ensureCompilationIsDone({ page, serverURL })
+    await page.close()
+  })
+  beforeEach(async ({ page }) => {
+    const url = new AdminUrlUtil(serverURL, lexicalListsFeatureSlug)
+    lexical = new LexicalHelpers(page)
+    await page.goto(url.create)
+    await lexical.editor.first().focus()
+  })
+  test('Registering only ordered list should work', async ({ page }) => {
+    await page.keyboard.type('- hello')
+    await expect(lexical.editor.locator('li')).toBeHidden()
+    await page.keyboard.press('Enter')
+    await page.keyboard.type('1. hello')
+    await expect(lexical.editor.locator('li')).toBeVisible()
+  })
+})

test/lexical/collections/LexicalListsFeature/index.ts

@@ -0,0 +1,35 @@
+import type { CollectionConfig } from 'payload'
+
+import {
+  ChecklistFeature,
+  FixedToolbarFeature,
+  lexicalEditor,
+  OrderedListFeature,
+  TreeViewFeature,
+  UnorderedListFeature,
+} from '@payloadcms/richtext-lexical'
+
+import { lexicalListsFeatureSlug } from '../../slugs.js'
+
+export const LexicalListsFeature: CollectionConfig = {
+  slug: lexicalListsFeatureSlug,
+  labels: {
+    singular: 'Lexical Lists Features',
+    plural: 'Lexical Lists Features',
+  },
+  fields: [
+    {
+      name: 'onlyOrderedList',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: [
+          TreeViewFeature(),
+          FixedToolbarFeature(),
+          OrderedListFeature(),
+          // UnorderedListFeature(),
+          // ChecklistFeature(),
+        ],
+      }),
+    },
+  ],
+}

test/lexical/payload-types.ts

@@ -85,6 +85,7 @@ export interface Config {
   collections: {
     'lexical-fully-featured': LexicalFullyFeatured;
     'lexical-link-feature': LexicalLinkFeature;
+    'lexical-lists-features': LexicalListsFeature;
     'lexical-heading-feature': LexicalHeadingFeature;
     'lexical-jsx-converter': LexicalJsxConverter;
     'lexical-fields': LexicalField;
@@ -110,6 +111,7 @@ export interface Config {
   collectionsSelect: {
     'lexical-fully-featured': LexicalFullyFeaturedSelect<false> | LexicalFullyFeaturedSelect<true>;
     'lexical-link-feature': LexicalLinkFeatureSelect<false> | LexicalLinkFeatureSelect<true>;
+    'lexical-lists-features': LexicalListsFeaturesSelect<false> | LexicalListsFeaturesSelect<true>;
     'lexical-heading-feature': LexicalHeadingFeatureSelect<false> | LexicalHeadingFeatureSelect<true>;
     'lexical-jsx-converter': LexicalJsxConverterSelect<false> | LexicalJsxConverterSelect<true>;
     'lexical-fields': LexicalFieldsSelect<false> | LexicalFieldsSelect<true>;
@@ -215,6 +217,30 @@ export interface LexicalLinkFeature {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "lexical-lists-features".
+ */
+export interface LexicalListsFeature {
+  id: string;
+  onlyOrderedList?: {
+    root: {
+      type: string;
+      children: {
+        type: any;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "lexical-heading-feature".
@@ -992,6 +1018,10 @@ export interface PayloadLockedDocument {
         relationTo: 'lexical-link-feature';
         value: string | LexicalLinkFeature;
       } | null)
+    | ({
+        relationTo: 'lexical-lists-features';
+        value: string | LexicalListsFeature;
+      } | null)
     | ({
         relationTo: 'lexical-heading-feature';
         value: string | LexicalHeadingFeature;
@@ -1120,6 +1150,15 @@ export interface LexicalLinkFeatureSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "lexical-lists-features_select".
+ */
+export interface LexicalListsFeaturesSelect<T extends boolean = true> {
+  onlyOrderedList?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "lexical-heading-feature_select".
@@ -1627,6 +1666,6 @@ export interface Auth {
 
 
 declare module 'payload' {
-  // @ts-ignore 
+  // @ts-ignore
   export interface GeneratedTypes extends Config {}
-}
+}

test/lexical/slugs.ts

@@ -4,6 +4,7 @@ export const lexicalFullyFeaturedSlug = 'lexical-fully-featured'
 export const lexicalFieldsSlug = 'lexical-fields'
 export const lexicalJSXConverterSlug = 'lexical-jsx-converter'
 export const lexicalHeadingFeatureSlug = 'lexical-heading-feature'
+export const lexicalListsFeatureSlug = 'lexical-lists-features'
 
 export const lexicalLinkFeatureSlug = 'lexical-link-feature'
 export const lexicalLocalizedFieldsSlug = 'lexical-localized-fields'
@@ -28,4 +29,5 @@ export const collectionSlugs = [
   richTextFieldsSlug,
   textFieldsSlug,
   uploadsSlug,
+  lexicalListsFeatureSlug,
 ]