richtext-lexical: HTMLConverter for checkbox lists outputs only '{serializedChildren}'

[GeekPro101]

Link to reproduction

No response

Describe the Bug

Lexical JSON:

{
  "children": [
    {
      "children": [
        {
          "detail": 0,
          "format": 0,
          "mode": "normal",
          "style": "",
          "text": "Go to the shops",
          "type": "text",
          "version": 1
        }
      ],
      "direction": "ltr",
      "format": "",
      "indent": 0,
      "type": "listitem",
      "version": 1,
      "value": 1
    },
    {
      "children": [
        {
          "detail": 0,
          "format": 0,
          "mode": "normal",
          "style": "",
          "text": "Buy some groceries",
          "type": "text",
          "version": 1
        }
      ],
      "direction": "ltr",
      "format": "",
      "indent": 0,
      "type": "listitem",
      "version": 1,
      "value": 2
    },
    {
      "children": [
        {
          "children": [
            {
              "children": [
                {
                  "detail": 0,
                  "format": 0,
                  "mode": "normal",
                  "style": "",
                  "text": "Apples",
                  "type": "text",
                  "version": 1
                }
              ],
              "direction": "ltr",
              "format": "",
              "indent": 1,
              "type": "listitem",
              "version": 1,
              "value": 1
            },
            {
              "children": [
                {
                  "detail": 0,
                  "format": 0,
                  "mode": "normal",
                  "style": "",
                  "text": "Eggs",
                  "type": "text",
                  "version": 1
                }
              ],
              "direction": "ltr",
              "format": "",
              "indent": 1,
              "type": "listitem",
              "version": 1,
              "value": 2
            }
          ],
          "direction": "ltr",
          "format": "",
          "indent": 0,
          "type": "list",
          "version": 1,
          "listType": "check",
          "start": 1,
          "tag": "ul"
        }
      ],
      "direction": "ltr",
      "format": "",
      "indent": 0,
      "type": "listitem",
      "version": 1,
      "value": 3
    }
  ],
  "direction": "ltr",
  "format": "",
  "indent": 0,
  "type": "list",
  "version": 1,
  "listType": "check",
  "start": 1,
  "tag": "ul"
}

HTML output:

<h1>Todo!</h1>
<ul class="check">
    <li aria-checked=false class="list-item-checkbox-checked"
        role="checkbox"
        tabIndex=-1
        value=1
        >
        {serializedChildren}
    </li>
    <li aria-checked=false class="list-item-checkbox-checked"
        role="checkbox"
        tabIndex=-1
        value=2
        >
        {serializedChildren}
    </li>
    <li aria-checked=false class="list-item-checkbox-checked"
        role="checkbox"
        tabIndex=-1
        value=3
        >
        {serializedChildren}
    </li>
</ul>

Having had a look at https://github.com/payloadcms/payload/blob/main/packages/richtext-lexical/src/field/features/lists/htmlConverter.ts, it seems to work as intended if you change {serializedChildren} at https://github.com/payloadcms/payload/blob/1c0d43c61a0e29bc9de50a4e608cb7dff9d5cd48/packages/richtext-lexical/src/field/features/lists/htmlConverter.ts#L46 to ${childrenText}. I can't find serializedChildren defined anywhere.

The same appears to be the case in https://github.com/payloadcms/payload/blob/1c0d43c61a0e29bc9de50a4e608cb7dff9d5cd48/packages/plugin-form-builder/src/utilities/lexical/converters/list.ts#L43 also.

To Reproduce

In a collection/global, create a richtext field with richtext-lexical as the editor and set the HTMLConverterFeature as a feature, as well as the lexicalHTML() field:

    {
      name: "content",
      type: "richText",
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => [
          ...defaultFeatures,
          HTMLConverterFeature({}),
        ],
      }),
    },
    lexicalHTML("content", { name: "content_html" }),

Then, add content to the richtext including checkboxes. See above for the output.

Payload Version

2.11.2

Adapters and Plugins

bundler-webpack, db-mongodb, lexical-richtext

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.