payload icon indicating copy to clipboard operation
payload copied to clipboard

Slate Rich Text Editor Ordered List and Unordered List not rendering in text editor UI

Open ansarishadman opened this issue 8 months ago • 6 comments

Describe the Bug

The following are the observations when '@payloadcms/richtext-slate' is used:

  • On clicking Ordered List the indentation is happening but list-style: decimal (1. 2. 3.) is not showing.
  • On clicking Unordered List the indentation is happening but list-style: disc (• • •) is not showing.

Adding screenshots:

Image

Link to the code that reproduces this issue

https://payloadcms.com/docs/rich-text/slate

Reproduction Steps

To reproduce this bug:

  • Just configure slateEditor rich text and follow steps as mentioned in description.

Which area(s) are affected? (Select all that apply)

plugin: richtext-slate

Environment Info

Payload: 3.34.0
NextJS: 15.1.0
NodeJS: 22.11.0

ansarishadman avatar Apr 18 '25 21:04 ansarishadman

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@latest -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

github-actions[bot] avatar Apr 18 '25 21:04 github-actions[bot]

Also I have a fix for this issue:

Image

Adding 'li' tag to type RichTextElement will resolve the issue as then we can add it directly to elements? array string value!

Regards, Shadman!

ansarishadman avatar Apr 18 '25 21:04 ansarishadman

Also I have a fix for this issue:

Image Adding 'li' tag to type RichTextElement will resolve the issue as then we can add it directly to elements? array string value!

Regards, Shadman!

'li' is not a type of RichTextElement. So I would not say it's a fix - it is a workaround.

However, hope the payload team will look into it quickly.

MarvinVrdoljak avatar May 12 '25 12:05 MarvinVrdoljak

I agree @MarvinVrdoljak the reason why I haven't raised an MR!

I hope this is looked on priority!

ansarishadman avatar May 12 '25 13:05 ansarishadman

Also seeing this one and hoping for it to get prioritized!

chunner-truvolv avatar May 19 '25 18:05 chunner-truvolv

Also having this problem

I got it fixed by adding 'li' to elements

Image

tijsomnicasa avatar May 28 '25 07:05 tijsomnicasa

Indeed, 'li' was missing from RichTextElement. I've opened https://github.com/payloadcms/payload/pull/12693. Make sure to add it to the elements array.

Thanks everyone!

GermanJablo avatar Jun 05 '25 13:06 GermanJablo

🚀 This is included in version v3.42.0

github-actions[bot] avatar Jun 09 '25 18:06 github-actions[bot]

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

github-actions[bot] avatar Jun 17 '25 05:06 github-actions[bot]