Make Image as block level node?

[chaot1xMD]

Hello is it possible to somehow override image node functionality so it's considered as block level node instead of inline?
I'm using lazy image extension that's provided in readme "community extensions" section with some slight changes, mainly just wrapping image in div tag.
As I mentioned I'm wrapping image tag within div tag and by default it gets also wrapped within p tags, I would like images to be rendered outside of p tags, but I'm not sure how to do it if it's possible.

Original extension code: https://github.com/simonvomeyser/commonmark-ext-lazy-image/blob/master/src/LazyImageRenderer.php

Thank you!

[colinodell]

I would like images to be rendered outside of p tags, but I'm not sure how to do it if it's possible

You don't need to change the image node from an inline to a block, you just need to move it outside of its parent Paragraph block and into the root Document block. Something like this should work (untested):

class RemoveImagesFromParagraphsListener
{
    public function onDocumentParsed(DocumentParsedEvent $event): void
    {
        $document = $event->getDocument();
        
        $images = (new Query())->where(Query::type(Image::class))->findAll();

        foreach ($images as $image) {
            if ($image->parent() instanceof Paragraph::class && $image->previous() === null && $image->next() === null) {
                // This image is inside a paragraph that doesn't contain anything else, so remove that paragraph and put the image there instead
                $image->parent()->replaceWith($image);
            }
        }
    }
}

See https://commonmark.thephpleague.com/2.3/customization/event-dispatcher/ for more information on working with events and https://commonmark.thephpleague.com/2.3/customization/abstract-syntax-tree/ for more details on working with the AST.

Alternatively, you could override/decorate the ParagraphRenderer to output a <div> instead of a <p> if its only child is an image.

[chaot1xMD]

Thank you, with slight adjustments this works like a charm.
In my case I also wanted it to be moved outside of p tag even if there's some text in it.

This is the code that works for my case.

use League\CommonMark\Node\Query;
use League\CommonMark\Extension\CommonMark\Node\Inline\Image;
use League\CommonMark\Node\Block\Paragraph;
use League\CommonMark\Event\DocumentParsedEvent;

class RemoveImagesFromParagraphListener
{
    public function onDocumentParsed(DocumentParsedEvent $event): void
    {
        $document = $event->getDocument();
        $images = (new Query())->where(Query::type(Image::class))->findAll($document);

        foreach ($images as $image) {
            if ($image->parent() instanceof Paragraph) {
                if ($image->previous() !== null) {
                    $image->parent()->insertAfter($image);
                } else if ($image->next() !== null) {
                    $image->parent()->insertBefore($image);
                } else {
                    $image->parent()->replaceWith($image);
                }
            }
        }
    }
}

Update: After deeper testing this did not work, ran into multiple bugs when having multiple images within the same p tag, so I decided to keep images as inline when there's other content within p tags and add class to p tag only if it does not contain anything else (I also removed div wrapper from images themselves).

If anyone is interested, here's the code:

use League\CommonMark\Node\Query;
use League\CommonMark\Extension\CommonMark\Node\Inline\Image;
use League\CommonMark\Node\Block\Paragraph;
use League\CommonMark\Event\DocumentParsedEvent;

class AddClassToImageParagraphListener
{
    public function onDocumentParsed(DocumentParsedEvent $event): void
    {
        $document = $event->getDocument();

        $images = (new Query())->where(Query::type(Image::class))->findAll($document);

        foreach ($images as $image) {
            if ($image->parent() instanceof Paragraph && $image->previous() === null && $image->next() === null) {
                $image->parent()->data->append('attributes/class', 'media-container');
            }
        }
    }
}