Quill: Blockquote within Blockquote

[ashitvora]

I have a use case where I need to display blockquote within a blockquote to mimic email thread but Quill does seem to be working well with nested blockquotes. Is it possible?
What's the best way to achieve this?

[morganlegal]

Hi !
I think I have a similar use case. I need to be able to create a hierarchy of blocks, like

<section>
    <h1>title level 1</h1>
    <p>some content level 1</p>
    <p>other content level 1</p>
    <!-- ... other level 1 blocks ... -->
    <section>
       <h1>other title</h1>
       <p>some content level 2</p>
       <p>other content level 2</p>
       <!-- ... other level 2 blocks ... -->
   </section>
</section>

I have searched to find some examples but didn't come to any result.
Is it even possible?
Thanks

[charrondev]

I'm starting a series of Blog posts about QuillJS and Parchment.

You may be more interesting in the next one that I'm writing which is about Containers and strategies to make structures like this, but you have to keep in mind that the actual persistent data structure of Quill (Delta) is flat and does not support nesting. You best bet would be creating a series of "wrapped" 1 line blots that create their own container, then using the optimize function to join them together.

Think of it as attempting to create an HTML structure like this first:

    <section>
       <h1>other title</h1>
   </section>
    <section>
       <p>some content level 2</p>
   </section>
    <section>
       <p>other content level 2</p>
   </section>
    <section>
       <!-- ... other level 2 blocks ... -->
   </section>
   </section>

The using the optimize function on your custom Blots to join them together in the same container.

The delta would probably look something like this.

[
    {
        "insert": "Title",
        "attributes": {
            "heading": 1,
            "sectioned": true
        }
    },
    {
        "insert": "some content level 2",
        "attributes": {
            "sectioned": true
        }
    },
    {
        "insert": "another content level 2",
        "attributes": {
            "sectioned": true
        }
    }
]

Technically the length of the HTML structure and the one where they are all in the container has the same length and value in Quill, so a Blot's optimize function can join together these Blots.

You'll need to create a new Blot for each item you want nested though. I would recommend creating a higher order function that takes an existing Blot class, and enhances it with your wrapper's extra functions/modify blotName/className etc.

function makeSectionedBlot(blotClass) {
  return class extends blotClass { ... }
}

[morganlegal]

Thanks for the answer and the link to your blog posts. Very appreciate it. Do you know when you plan to write the next posts if this series?

[charrondev]

I'm currently have about half of it written, but am reorganizing it a bit. I would expect some time early next week. If you follow me on twitter or dev.to you should see when it's posted.