Interactive builder misleading

[sasweb]

Description

Interactive builder is not interactive

Reproduction URL

No response

Reproduction steps

• Open interactive builder
• Create a minimal configuration including List (e.g. bulleted list)
• Hit "Done"
• Follow installation steps
• See no list (neither ul nor ol) included, code for lists is commented, regardless of configuration we always get the same boilerplate code

Additionally, there's literally no docs on how to integrate lists. If you uncomment list related code in insert-dropdown-menu.tsx or turn-into-dropdown-menu.tsx

if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
  toggleIndentList(editor, {
    listStyleType: type === 'ul' ? 'disc' : 'decimal',
  });
} else if (settingsStore.get.checkedId('list')) {
  toggleList(editor, { type });
}

you get a bunch of errors. There's not single hint in the docs how to get the settingsStore or where KEY_LIST_STYLE_TYPE and toggleIndentList come from.

Suggestions:

• Clear communication that interactive builder is not interactive, it just helps with imports (at least from my understanding)
• Include lists in playground example as it's a crucial feature

Thanks

Plate version

36

Slate React version

0.107.1

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

[zbeyens]

It is actually interactive in the following output:

It is just not covering all components like insert-dropdown-menu. Good catch for settingsStore.get.checkedId, it should not be part of the registry. That was something used in the docs only.

[sasweb]

It is actually interactive in the following output:

It is just not covering all components like insert-dropdown-menu. Good catch for settingsStore.get.checkedId, it should not be part of the registry. That was something used in the docs only.

Thank you for the quick response.

Why are lists not part of the default boilerplate? I mean strikethrough and code are included by default. I guess lists are way more common for editors. Or are there any guides on how to implement lists that I am missing?

[zbeyens]

The default is using indent-list which is less restricted than list

[12joan]

Just to add: The trade-off with using indent-list instead of list is lack of screen reader support, as the hierarchy isn't conveyed to any assistive technology.

@zbeyens Incidentally, I just found out that aria-owns is now widely supported, so we can hopefully fix some of the accessibility issues with indent-list.

[sasweb]

Sorry, I think I am missing something.
Looking at all the templates and docs I can't see any example with implemented list (neither list nor indent list) buttons in FixedToolbarButtons or InsertDropdownMenu. And that's something that I personally would consider pretty basic.