Nested Elements in the same Level

[secure-77]

Hi,

Thanks for this great project! Iam using this in https://github.com/secure-77/Perlite

I have a question about blockquotes and nested html elements on the same level.

I want to transform this:

> [!bug]
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et gravida diam, et varius magna. Proin `id felis quis nisl` gravida auctor a eu est. In viverra dui viverra placerat cursus. Curabitur non commodo mi. Mauris volutpat nisl vitae nulla efficitur condimentum. Nulla facilisi. Maecenas malesuada purus mi, eget fringilla quam ultrices sit amet.

to something like this

    <div data-callout="bug" class="callout">
        <div class="callout-title">
            <div class="callout-title-inner">Bug</div>
        </div>
        <div class="callout-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et gravida diam, et varius magna. Proin <code>id felis quis nisl</code> gravida auctor a eu est. In viverra dui viverra placerat cursus. Curabitur non commodo mi. Mauris volutpat nisl vitae nulla efficitur condimentum. Nulla facilisi. Maecenas malesuada purus mi, eget fringilla quam ultrices sit amet.</p>
        </div>
    </div>

So far, I have extended the blockQuotes function to handle callouts

protected function blockQuote($Line)
    {

        if (preg_match('/^>[ ]?(.*)/', $Line['text'], $matches)) {
            $Block = array(
                'element' => array(
                    'name' => 'blockquote',
                    'handler' => 'lines',
                    'text' => (array) $matches[1],
                ),
            );

        if (preg_match('/^>\s?\[\!(.*?)\](.*?)$/m', $Line['text'], $matches)) {
            $type = strtolower($matches[1]);
            $title = $matches[2];

            $calloutTitle = $title ?: ucfirst($type);

            $Block = array(
                'element' => array(
                    'name' => 'div',
                    'attributes' => array(
                        'data-callout' => $type,
                        'class' => 'callout'
                    ),
                    'handler' => 'lines',
                    'text' => (array) $calloutTitle,
                ),
            );
        }
    }

        return $Block;
    }

this is my current output.

<div data-callout="info" class="callout">
<p>Info<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et gravida diam, et varius magna. Proin <code>id felis quis nisl</code> gravida auctor a eu est. In viverra dui viverra placerat cursus. Curabitur non commodo mi. Mauris volutpat nisl vitae nulla efficitur condimentum. Nulla facilisi. Maecenas malesuada purus mi, eget fringilla quam ultrices sit amet.</p>
</div>

But I cant figure out how to create a structure like this

<div data-callout="bug" class="callout">
        <div class="callout-title">Title</div>
        <div class="callout-content">Text</div>
</div>

I've tried a few things but I don't know how to make this work. Thanks for any advice!