Hello everyone, I’m excited to share ProseMirror Flat List, an alternative to the official prosemirror-schema-list. My aim is to provide a top-notch and native feeling list that is equal to or even better than what Google Docs and Notion have currently.
You can read more about the difference between this project and prosemirror-schema-list in the project README.
One thing that might cause issues for people is the use of Tab and Shift-Tab—keyboard-only users need those to move focus in the page, so it is recommended to not override them for custom functionality.
Cool! I also spent a considerable amount of time fixing a list implementation that used flat list items (like this czi-prosemirror demo). Don’t know if you update the ordered list numbers but that was a doozy to build. I still kept the original <ul> and <ol> tags and just changed <li> indent property when tabbed. Don’t think I allowed nesting block nodes inside <li> elements though. I also included changing of list-style based on indent depth.
I could make a PR if you want to take a look and decide what to incorporate if anything. Surprisingly difficult, I must say. TipTap seemed to have a pretty good version as well. You should also make some copy-paste tests for at least Docs, Word, Notion and Apple Notes. Apple Notes uses some annoyingly weird schema.
Thanks for sharing, how does the value of data-indent gets updated ? I tried to replicate the same indent extension from czi repo, but when I hit tab on a list item my cursor is automatically navigating to the next line.
Np! As I said, there’s some insane logic to keep that synchronized so Basically you just check all the lists that were changed and then update their indents & start counters as necessary. I can make that PR to this repo incase @ocavue is interested.
If you could atleast share a simple repo or a gist with full code that would be really helpful, because in the @ocavue repo, when I inspected the list elements are not ul li at all. It seems to be a different logic all together.
You can use CSS to set difference marker styles for, let’s say, 6 indent depths , and just give a fixed marker for any indent depths greater or equal than 7. We don’t usually need a very depth list anyway.
Synchronizing indent depth with ProseMirror seems too complex and might hurt performance in my option.
Thanks for the confirmation. But you mentioned that you will be implementing the list-style with CSS. But it cannot be matched to word/google docs implementation just with css right ? based on the indentation level circle / dot / square are alternating
You can write some not-so-long CSS to set markers separately for depths from 1 to 12, for example, set the marker as circle for depth 2, 5, 8 and 11. It’s a simple solution and good enough in 99.9% cases.
Okay! How are you going to sync the start counters for ordered lists though? I think you’ll have to come up with something similar either way. But I’ll make some example repo so its easier for those interested to understand the context better.