Lists Rendered as Plain Text Instead of List Items

[Adebesin-Cell]

Hi 👋,

I'm having an issue when using the editor to input indented lists, they are not rendered as proper list items. Instead, the list appears as plain text. This issue seems to occur when multiple list items are added on the same line without explicit line breaks.

Steps to Reproduce

1. Use the following Markdown or similar input:

   - **Reserve**: 34%- **Investors**: 16%- **Ecosystem Incentive**: 16%- **Team**: 12.5%- **Marketing**: 11.5%- **Advisor**: 5%- **Public Sale**: 5%

2. The list items are treated as plain text rather than separate list items.

Expected Behavior
The list items should be rendered as proper list elements, each on its own line. They should appear as:

• Reserve: 34%
• Investors: 16%
• Ecosystem Incentive: 16%
• Team: 12.5%
• Marketing: 11.5%
• Advisor: 5%
• Public Sale: 5%

Actual Behavior
The list is rendered as a single block of text, with the items not being properly separated. This results in a paragraph-like rendering instead of a list.

Editor Configuration
The issue occurs with the following configuration:

const editor = usePlateEditor({
    value: [INITIAL_VALUE],
    plugins: [
      TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),
      ParagraphPlugin,
      HeadingPlugin,
      LinkPlugin.extend({
        render: { afterEditable: () => <LinkFloatingToolbar /> }
      }),
      ListPlugin,
      ListItemContentPlugin,
      ImagePlugin,
      TablePlugin,
      BoldPlugin,
      ItalicPlugin,
      UnderlinePlugin,
      StrikethroughPlugin,
      IndentPlugin,
      IndentListPlugin.configure({
        inject: {
          targetPlugins: [
            ParagraphPlugin.key,
            HEADING_KEYS.h1,
            HEADING_KEYS.h2,
            HEADING_KEYS.h3,
            HEADING_KEYS.h4,
            HEADING_KEYS.h5,
            HEADING_KEYS.h6
          ]
        }
      }),
      SanitizedPastePlugin,
      BlockquotePlugin,
      ExitBreakPlugin.configure({
        options: {
          rules: [
            {
              hotkey: 'mod+enter'
            }
          ]
        }
      }),
      CaptionPlugin,
      MarkdownPlugin.configure({ options: { indentList: true } }),
      MediaEmbedPlugin
    ]
});

Perhaps there's something I should do or change in my config to make it work, thanks!

[Adebesin-Cell]

Hello 👋 @zbeyens,

I’m still encountering an issue with the list plugin. When I toggle it, the markdown \n for the list doesn't consistently apply, especially when I highlight a group of text and attempt to structure it as a list.

For example, in the list shown in the screenshot, if I try to revert it back to markdown by pressing Enter and restructuring the text, the list displays correctly in the editor. However, the markdown output doesn’t generate the proper list format. Additionally, when I toggle the list formatting off and then back on, some list items appear broken or inconsistent.

Is there a way to ensure the markdown formatting is applied properly and consistently when toggling the list plugin? Thanks in advance for your guidance! ☺️

[zbeyens]

I'd recommend to read the markdown package code to understand further what it's doing

[Adebesin-Cell]

Alright! Thank you. 🙏

[Adebesin-Cell]

Hi 👋,

I’ve finally completed the upgrade—great work on v42! 👏 The current approach feels much more modular and extensive, especially with the new API pattern. However, my issue still persists. I’d be happy to record a video or provide any additional details needed to help resolve it.

Thanks so much for your support, @zbeyens! 😊

[zbeyens]

Thanks! Our work in progress is in #3998. As usual, no ETA.

[Adebesin-Cell]

I'll definitely keep an eye on it. Just a heads-up: the rendering of lists works perfectly in edit mode, but it breaks in view mode. The issue seems to be the lack of space between the - and the previous element.