UL OL list issue

[andshonia]

Description

I am on playground page, trying to create ul list, clicking keyboard tab button to indent list items, it works but the style are same, also each list item generated as a new <ul> <li>list item </li> <ul>. I think they should be nested like: <ul> <li>item 1<li> <li> item 2 <li> </ul>; Because of this I have an issue, after serialization multiple list items are generated separately

Reproduction URL

No response

Reproduction steps

1. Go to 'https://platejs.org/'
2. write down list items and set as orderlist or unorderedlist

Plate version

36.4.0

Slate React version

0.108.0

Screenshots

No response

Logs

No response

Browsers

No response

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[12joan]

The duplicated class names between the DIV and the UL elements appears to be a bug.

The behaviour you're seeing where each sibling list item has its own UL element isn't a bug. This is a feature of the "indent list" plugin, which takes some departures from the HTML list spec in order to support applying arbitrary indentation levels to each list item (like in MS Word). If you want a more traditional list solution that has valid HTML semantics and better accessibility, use the plain list plugin instead of the indent list plugin.

[andshonia]

@12joan Thank you for response.

You said that it's feature of "indent list" plugin that they generated separately. Please look at the screenshot, there are nested UL element with different list style type. My question is if indent list plugin generates separately, how got this result?

[12joan]

That screenshot is from the documentation page for the plain list plugin, which uses the same nested structure as standard HTML lists.

• Playground uses indent list
• Indent list plugin
• Plain list plugin

[andshonia]

I have captured video, please look at dropbox URL. I still don't understand how nested result made which is here https://platejs.org/docs/list

https://www.dropbox.com/scl/fi/n3s1s28066ulq86nk38xf/Screen-Recording-2024-08-16-at-14.28.56.mov?rlkey=9or65q51w70ju15ozmv00m7l5&st=py24u70t&dl=0

[12joan]

It looks like there's a bug on the page for the plain list plugin whereby the turn into menu converts blocks into indent list items rather than plain list items. @zbeyens Any idea what might be causing this?

[zbeyens]

Probably due to missing logic here

plate/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx

Lines 129 to 140 in 21200ff

	// if (type === 'ul' || type === 'ol') {
	// if (settingsStore.get.checkedId(IndentListPlugin.key)) {
	// toggleIndentList(editor, {
	// listStyleType: type === 'ul' ? 'disc' : 'decimal',
	// });
	// } else if (settingsStore.get.checkedId('list')) {
	// toggleList(editor, { type });
	// }
	// } else {
	// unwrapList(editor);
	toggleNodeType(editor, { activeType: type });
	// }

[filippozanfini]

Probably due to missing logic here

plate/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx

Lines 129 to 140 in 21200ff

	// if (type === 'ul' || type === 'ol') {
	// if (settingsStore.get.checkedId(IndentListPlugin.key)) {
	// toggleIndentList(editor, {
	// listStyleType: type === 'ul' ? 'disc' : 'decimal',
	// });
	// } else if (settingsStore.get.checkedId('list')) {
	// toggleList(editor, { type });
	// }
	// } else {
	// unwrapList(editor);
	toggleNodeType(editor, { activeType: type });
	// }

Why is this logic commented?