feat(editor): Add support for collapsible sections

[mejo-]

📝 Summary

Uses <details> and <summary> summary both for markdown and HTML serialization.

Fixes: #3646

🖼️ Screenshots

Details expanded	Details collapsed	Option

🚧 TODO

• Fix enter in summary (jump to details content, but don't add newline)
• Discuss icon in menubar
• Support marks in summary (markdown-it plugin supports it already, but toMarkdown() in Tiptap plugin not)
• Do we want to persist expand/collapse state in document? If not, it will not be synchronized between view/edit mode in Collectives either
• Jest tests for markdown through editor
• Cypress tests

@nextcloud/designers for feedback

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[juliusknorr]

Very nice ❤️

Do we want to persist expand/collapse state in document? If not, it will not be synchronized between view/edit mode in Collectives either

Just a thought here, persisting would likely also mean that toggling would propagate to all people during collaboration with I would not expect.

[mejo-]

Disallow nested details in Tiptap schema

After some more testing I managed to support nested details in the markdown-it plugin, and I don't see a reason any longer to not support nested details.

[jancborchardt]

Very nice! :) Just some details:

• A better icon for the actions entry would be https://fonts.google.com/icons?icon.set=Material+Symbols&icon.size=24&icon.color=%235f6368&selected=Material+Symbols+Outlined:unfold_more:FILL@1;wght@400;GRAD@0;opsz@24&icon.query=collapse
• There is more padding on the bottom than at the top when opened, making it look a bit unbalanced
• The code block does not have rounded corners here?

[mejo-]

Thanks for the feedback @jancborchardt ❤️

The code block does not have rounded corners here?

That's a separate issue unrelated to this PR.

[juliusknorr]

@jancborchardt Keeping #2836 into consideration should we take action for this one right now and instead of adding this as yet another menu bar entry try to group them in the callout menu as listed in the issue?

Blockquote and code block go into the callouts menu

In the end the details is just another "block style"

[juliusknorr]

Though one argument against would be that you could still have a callout nested in a details block which is then not very obvious from the active indication in the menu bar

[jancborchardt]

In the end the details is just another "block style"

Yeah, good point, makes sense to directly group it properly.

[mejo-]

I agree, but then we probably should move block quote and code blocks into this submenu as well straight away, right? What icon should be used for the "block style" submenu?

[mejo-]

@jancborchardt @nimishavijay do you have a good idea how to support nested details UX-wise? Usually the menu items toggle the feature on/off depending on whether it's currently active or not. If we just always make the menu item create a new details section, there would be no way to turn the details off.

I'm also fine with not supporting nested details in the UI for now as I don't expect this to be used this a lot. People who really need nested details will have to manually add it in their markdown source then.

[jancborchardt]

I'm also fine with not supporting nested details in the UI for now as I don't expect this to be used this a lot. People who really need nested details will have to manually add it in their markdown source then.

@mejo- I agree it’s best to skip nested details for now. :)

[juliusknorr]

Very nice, code looks clean, has tests and works like a charm. 👍

Small UI issue with content that seems to be artificially limited in width, but otherwise good to go from my side.

[mejo-]

Small UI issue with content that seems to be artificially limited in width, but otherwise good to go from my side.

Good catch, fixed now.

[bthnakkurt]

is it added now? can i use it by cloning?