Custom node replacement no longer inherits transforms from ListNode after recent Lexical update

[anhle1476]

Hi, I’ve been extending ListNode to add more list styles in my editor. Here’s a simplified version of my custom node:

type CustomSerializedListNode = SerializedListNode & {
  listStyleType: CustomListType;
};

export type CustomListType =
  | 'check'
  | 'number'
  | 'number-upercase'
  | 'number-lowercase'
  | 'number-roman'
  | 'bullet'
  | 'bullet-pinwheel'
  | 'bullet-star'
  | 'bullet-plus';

const CUSTOM_LIST_TYPE_TO_CLASS_NAME: Record<CustomListType, string> = {
  check: '',
  number: 'LexicalEditorTheme__list-style-type-number',
  'number-upercase': 'LexicalEditorTheme__list-style-type-upercase',
  'number-lowercase': 'LexicalEditorTheme__list-style-type-lowercase',
  'number-roman': 'LexicalEditorTheme__list-style-type-roman-number',
  bullet: 'LexicalEditorTheme__list-style-type-point',
  'bullet-pinwheel': 'LexicalEditorTheme__list-style-type-pinwheel',
  'bullet-star': 'LexicalEditorTheme__list-style-type-star',
  'bullet-plus': 'LexicalEditorTheme__list-style-type-plus',
};

/**
 * Custom list node that supports more list style types
 * (extends the original ListNode which only includes number, bullet, and check)
 */
export class CustomListNode extends ListNode {
  __listStyleType: CustomListType;

  constructor(customListType: CustomListType, start: number, key?: NodeKey) {
    const listType = customListType
      ? fromCustomListTypeToListType(customListType)
      : undefined;
    super(listType, start, key);
    this.__listStyleType = customListType;
  }

  static override getType(): string {
    return 'custom-list';
  }

  getListStyleType(): CustomListType {
    return this.getLatest().__listStyleType;
  }

  override createDOM(config: EditorConfig, _editor?: LexicalEditor): HTMLElement {
    const elem = super.createDOM(config, _editor);
    elem.classList.add(CUSTOM_LIST_TYPE_TO_CLASS_NAME[this.__listStyleType]);
    return elem;
  }

  // ...
}

I register the replacement like this:

[
  ListItemNode,
  CustomListNode,
  {
    replace: ListNode,
    with: (node: ListNode) => new CustomListNode(node.__listType, node.__start),
    withKlass: CustomListNode,
  },
];

According to the [node replacement docs](https://lexical.dev/docs/concepts/node-replacement), I expected CustomListNode to inherit all transforms from the original ListNode.

However, that’s no longer happening. Specifically, the transform updateChildrenListItemValue is not called anymore, so when I press Enter to create a new list item, the next ListItemNode does not receive the updated value.

I remember this used to work correctly about a year ago, but after updating to a recent Lexical version, it stopped working.

Right now I’m “cheating” with this workaround in CustomListNode:

static override transform(): ((node: LexicalNode) => void) | null {
  // Get transform from ListNode's static config
  const { ownNodeConfig } = getStaticNodeConfig(ListNode);
  return ownNodeConfig.$transform;
}

With the recent changes around $config and NodeState, what’s the correct way for my CustomListNode to receive the transforms from ListNode again? Ideally, I’d like to keep my existing custom nodes and avoid migrating them to a completely new format if possible.

Thanks! 🙏

[etrepum]

Sounds like there might be a regression, can you create an issue with an example that doesn’t work? Ideally something runnable or at least a full class definition.

[anhle1476]

@etrepum thank you, I will create it