Collapsable Items

[ncammarata]

Are collapsable list items something your team would be interested in as a feature? I implemented it inside of my own app on top of slate-edit-list using something along the lines of

const text = props.children[0].props.node.text
return (
  <li>
    {minimize ? <p>{text}</p> : props.children}
  </li>
)

If you are interested in having this feature and maintaining it as part of the project, I could potentially put together a PR. Either way, do you have rough suggestions on the best way to go about implementing it properly?

[Soreine]

If it is only a matter of rendering, your solution is a starting point. The idea is to keep a minimized state in the React component for list items itself. And in this case I would prefer to keep this out of this plugin, since we believe everything regarding rendering is too much application specific.

The real question is how should it affect the editing behaviour? Have you answered the following question?

• Is the collapsed state something you want to store as part of the list item data? Maybe this is application dependent.
• What decides when an item should be collapsed or not? This is also application dependent. Maybe you want it to uncollapse on focus, or on clicking a ⌄ button.
• What happens if the user hits → at the end of a collapsed item? Should it uncollapse it and focus first collapsed node?
• Should it still be allowed to copy/paste the item and its collapsed content? (in which case, the collapse should be handled at the CSS level, to keep the node and their data-key selectable the DOM).

That's not a feature we are personally interested in, but we are interested in people using this plugin. If it makes sense, we could include it. I'd be interested in knowing more about your use case.