Guidance on implementing collapsible sections

[apg-dev]

Any thoughts on how to go about implementing a details element in Quill ala https://www.w3schools.com/tags/tag_details.asp? I was hoping to be able to use standard html elements like

main

sub

but Quill seems to strip that out - even using dangerouslyPasteHTML. Appreciate any guidance. Ty.

Steps for Reproduction

var theHTML = '<details><summary>Epcot Center</summary><p>Epcot is a ...</p></details>'
quill.clipboard.dangerouslyPasteHTML(theHTML)

Expected behavior: A collapsible section.

Actual behavior: Stripped out HTML:

<p>Epcot Center</p>
<p>Epcot is a ...</p>

Platforms: MacOS: Chrome (Version 81.0.4044.138), Safari (Version 13.1)

[apg-dev]

Problem mostly solved by creating a custom details/summary blot. I can now create and display collapsible sections - including bullet lists, which is nice. However, one problem remains which is this: if I try to place the cursor at the end of a details section and enter any text, I get the following error:

Looks like I still have more work to do with my blot - but hopefully I'm on the right track. Appreciate any guidance others might have.

[silibdev]

Hi @apg-dev,

could you please share the code of your custom blot? I was looking at how to add the details/summary tag in quill and your blot can help me. Moreover, I could further investigate the problem you reported in order to find a solution.

[artknight]

@apg-dev please share the code of the blot if possible.

[AnshulSood11]

You can create a simple custom blot like this:

class DetailsBlot extends Inline {}
DetailsBlot.blotName = 'details';
DetailsBlot.tagName = 'details';

However, it works well only with single line content. In case of multiple lines, it creates multiple Collapsible sections. Need to figure out how to handle multiple lines in a selection and put them in a single section.

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray: