[Feature Request] Add GitHub-flavored Markdown function "collapsible section" to editor

[schlagmichdoch]

As Wikipages can be quite long and messy, it would be great to have a possibility to collapse some longer text or section. Wikipages would seem tidied up.

This would e.g. help create a FAQ and a accordion like funcionality

Fantastically, this feature is implemented right here in GitHub by extending Markup to GitHub-flavored Markup (more Information here):

This is collapsible section

This is hidden and can be a very long paragraph

This is bold

This is a header

This is hidden and can be a very long paragraph

---

I have found your discussion and decission not to implement html tags in the editor: here, here and your overview page here

I think those github-flavored markdown functions would be worth it. As I understood your stand point, wiki is mainly about uniformity and tidyness. I personally think these traits would rather be enhanced by including collapsible sections.

Other benefits:

• Every GitHub user knows how to use them
• standard html tag makes it already usable by every browser.
• Collapsible sections are even easier to implement than e.g. Todo Lists, which are part of github-flavored markdown as well.

Implementation: I think we just needed to add a new schema to prosemirror similar to that of the <hr> tag.

ProseMirrors Website gives some useful examples.

By playing around with this example, I could verify the possibility to add a details tag:

In the referenced Glitch project: Just change line 16 to 27 from:

  toDOM: node => ["img", {"dino-type": node.attrs.type,
                          src: "/img/dino/" + node.attrs.type + ".png",
                          title: node.attrs.type,
                          class: "dinosaur"}],
  // When parsing, such an image, if its type matches one of the known
  // types, is converted to a dino node.
  parseDOM: [{
    tag: "img[dino-type]",
    getAttrs: dom => {
      let type = dom.getAttribute("dino-type")
      return dinos.indexOf(type) > -1 ? {type} : false
    }
  }]

to:

  toDOM: node => ["details", "this is a content is hidden"],
  // When parsing, such an image, if its type matches one of the known
  // types, is converted to a dino node.
  parseDOM: [{
    tag: "details",
  }]

Afterwards try it out by clicking on insert and any of the dinosaurs.

---

If this sounds promising to you too, I'd love to help implementing this quickly.

[luke-]

Sounds good. You are welcome to prepare a PR for it.