Add GitHub-flavored Markdown function "collapsible section" to editor

[schlagmichdoch]

See #67 for introduction and goal.

[schlagmichdoch]

Progress:
✅ button added to include details tag in editor

✅ details tag is added in open state to edit its contents directly

✅ when saved, the tag is correctly saved to the database and rendered correctly (in closed state) on edited page

⚠️ when edited again, the editor does not load correctly but throws a javascript error
🔲 add style to details tag similarly as done with blockquotes
🔲 create specific icon for prosemirror toolbar

Error Message:

WARN - humhub.modules.action: undefined Error: Token type `html_block` not supported by Markdown parser

The error is a result of switching the html flag to true at the initialisation of the markdown renderer:

let markdownItOptions = context && context.options.markdownIt || {html: true, breaks: true, linkify: true};

By doing that, every html tag is accepted to be saved and rendered back as a html tag instead of just a string. Unfortunately all saved pages with html tags throw the same error when edited again.

The error seems to be tackled here and is resolved by switching the html flag to false. We need it to be true in order to render the <details> tag.

Any suggestions on how to proceed @luke- ?

[luke-]

@schlagmichdoch First of all, thanks for this cool PR!

If I understand the problem correctly, the html variable must still be set to false, and ProseMirror must parse the details from the HTML code?

Basically a reverse https://github.com/humhub/humhub-prosemirror/pull/69/files#diff-e22a46b590566fa26912438834a568275ba740ddc2e8c62bbea8240eaf9084d3R15 toMarkdown - Maybe parseMarkdown?

[schlagmichdoch]

Thanks @luke- for helping!

I got it working after switching html flag back to false and by implementing markdown-it-container.

With that markdown-it plugin, details tags are now saved as a fenced object, so there is no need to allow html anymore:

::: details click me

content

:::

After some fiddling about we have now a working version where details node behave quite similar to blockquotes, do support nesting of details tags, and support everything else as its content.

I also tried to implement adding and editing of the summary tag ("click me"), but that turned out to be more difficult than I thought. In order to have this feature implemented quickly, I will leave this working as is and open another pull request.

✅ button added to include details tag in editor
✅ details tag is added in open state to edit its contents directly
✅ when saved, the tag is correctly saved to the database and rendered correctly (in closed state) on edited page
✅ when edited again, the editor does not load correctly but throws a javascript error
ℹ️ add style to details tag similarly as done with blockquotes
No style needed for this version without summary tag as everything is working out of the box. Github does not style the details contents as well.
✅ create specific icon for prosemirror toolbar
The toolbad icon is now switched to a free FontAwesome 5 icon "caret-right"

What do you think? Can we merge this into the next update of humhub?

[luke-]

@schlagmichdoch Thanks again for the contribution. We will do more detailed tests in the next weeks (especially the behavior of different markdowns renderes e.g. e-mails).

[schlagmichdoch]

Hey,
It’s been over 3 weeks. Any news, when to expect a version with collapsible sections? :)

[luke-]

Please give us some more time here. Currently we are working on the 1.11 (March) release. If everything fits we can include this in the next 1.12 (Beta in June) release.

[schlagmichdoch]

Allright, thanks for the quick response! I appreciate a realistic timeframe. Tell me if things seem unfitting so I can try handling it. Thanks for your work on humhub!

[schlagmichdoch]

@luke- it’s been 8 months and I‘m still waiting for a feature to collapse content in Humhub. Apparently, the original testing timeframe was not followed through with. Any news on how you will proceed?

[luke-]

Sorry for the delay. Unfortunately, I can't give you any more time details at the moment.
There are some other open todos/refactorings on the ProseMirror component and currently our focus is on other parts of the software.

[schlagmichdoch]

@luke- any news? Or any possibility I could increase the speed this gets implemented?