Make sections foldable (collapsible headings)

[biva]

Spoilers/foldable details sections are tracked separately in https://github.com/nextcloud/text/issues/3646

This ticket remains about making existing sections like headings foldable.

Initial report

Is your feature request related to a problem? Please describe. For large pages, it is hard to have a vision of the structure, or to navigate within the page to find the right section / paragraph.

Describe the solution you'd like It would be great to be able to collapse (fold) and open (unfold) sections, thanks to a small arrow on the left. Sections would be based on headers (H1, H2, ...), with subsections that would also be collapsible (foldable). In addition, a button on the top would fold/unfold all.

Describe alternatives you've considered Having a menu on the top or on the right sidebar (also with collapsible sections)

Additional context

• An example is described in the following link: https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab
• Microsoft describes its own solution here: https://support.microsoft.com/en-us/office/video-collapsible-headings-c7b03e92-a397-479d-b989-57393daf2d65
• This other issue mentions a collapsible section for a specific file type: https://github.com/nextcloud/text/issues/145

[rinurinu]

I would love either this or the headline overview from the other issue being implemented (or both).

[max-nextcloud]

Thanks for proposing this. As the outline view has been added now and provides an alternative way to achieve the same goals i'll close this issue.

[mejo-]

Well, to be honest we had this feature on our feature planning whiteboard recently and I agree that it's a useful one. So maybe let's keep this open? :grin:

[luka-nextcloud]

There are 2 things to be added:

1. 3646

2. Add collapse function on headings (like https://support.microsoft.com/en-us/office/video-collapsible-headings-c7b03e92-a397-479d-b989-57393daf2d65)
   • steps:
   • Add toolbar item to fold/unfold all headings
   • Add fold/unfold functions on every headings
   • Handle copy/paste a folding heading
   • issues to consider:
   • Only support folding on H1 level or all heading levels?
   • press "Enter" at the end of folding heading should force new line to have same heading level?

[juliusknorr]

Let's tackle 1 first as this seems the easiest. 2 requires more thought as this might be something users would want to have control over remembering the state and will have an impact on existing structures with headings.

A few more things to consider from my perspective:

• Which node types for formattings can be supported within the section title and content (especially when representing this in markdown)?
• Implementation wise this could reuse https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details but would need to work with contenteditable inline editing, this is something to check upfront, otherwise we may need custom implementation that we should avoid if possible
• The menu button could insert a new details element, but how would it behave if
  • Clicking it with selected text
  • Should there be a way to undo the details section but keep the content?
• This should be covered by jest tests for the markdown syntax parts and cypress for any user iteractions possible

[mejo-]

Very nice to see this being tackled. I think what @luka-nextcloud explains as 1. is rather tracked in https://github.com/nextcloud/text/issues/3646, no?

Another question would be whether spoilers (that's another way how these expandable sections are often called) can be nested. Seems like HTML allows this, and so does GFM (Github flavoured markdown: https://gist.github.com/scmx/eca72d44afee0113ceb0349dd54a84a2?permalink_comment_id=4196669#gistcomment-4196669. But it seems rather useless to me and brings extra complexity, so I don't think that we have to support it.

The menu button could insert a new details element, but how would it behave if -> Clicking it with selected text

I'd expect the editor to ask me for a summary text and move the selected content into the details section of the spoiler.

Should there be a way to undo the details section but keep the content?

I'd expect this, definitely. When inside a details section, the menu button should remove the details section but preserve its content.

[juliusknorr]

You're right I totally missed #3646, let me actually extract the first part of this ticket and the discussion and move over to that one.