ol/ul list items text is forced to a newline

[sgober]

Describe the bug

A clear and concise description of what the bug is.

Before filing a bug, please confirm that you have:

1. Installed the necessary Tiptap extensions for whatever functionality you are trying to use (e.g. Color extension for using the MenuButtonTextColor).
2. Passed the extensions you need to the extensions field of RichTextEditor/useEditor

See README info here for more details.

To Reproduce

Please include a CodeSandbox demo of the problem if possible. (You can fork this CodeSandbox.)

Steps to reproduce the behavior: See screengrab below

Expected behavior

Text for bullet and number list appears on the same line as the bullet

Screenshots

https://github.com/user-attachments/assets/670fb071-ce91-4122-9461-f0a464aa190b

System (please complete the following information)

• mui-tiptap version: 1.12.0
• tiptap version: 2.0.4
• Browser: Chrome
• Node version: v20.10.0
• OS: macOS 14.7
• Copy-paste your extensions array used for the editor:

      StarterKit,
      Color,
      FontFamily,
      FontSize,
      Highlight.configure({ multicolor: true }),
      Link,
      LinkBubbleMenuHandler,
      Placeholder.configure({ placeholder }),
      Subscript.extend({ excludes: 'superscript' }),
      Superscript.extend({ excludes: 'subscript' }),
      TableCell,
      TableHeader,
      TableImproved.configure({ resizable: true }),
      TableRow,
      TaskItem.configure({ nested: true }),
      TaskList,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
      TextStyle,
      Underline

Additional context

Add any other context about the problem here.

[sjdemartini]

I'm not sure what your setup is, but the mui-tiptap default styles and demos (and main branch) do not have this issue. If you open the code sandbox, you'll see that positioning of ol and ul look fine, just like in the gif in the project README.

I'd recommend looking in your web inspector dev tools to see why the CSS is moving your list items. Perhaps you have some global CSS on your page that affect list items.

I'm going to close this out, but if you can point to a specific repro case in a situation where external global CSS is not at play, feel free to reopen. Including an example of CSS dev tools inspection that shows what is causing the offset alignment could be helpful in that situation.

[sgober]

The demo code sandbox is running 1.8.0, I'm running 1.12.0, so there could be a difference there.

This is what the list is rendering:

The p has a display 'block' on it. If I change that to 'inline' everything works fine. The problem is I can only do that in dev tools and it is not working with css

[sjdemartini]

I don't believe there are any changes to those styles or markup since 1.8, and I can't reproduce this behavior on the master branch.