Add support for figures with custom CSS classes

[javiereguiluz]

In Symfony Fast Track book we use things like this:

.. figure:: screenshots/foo.png
    :alt: /
    :align: center
    :figclass: with-browser foo

Current parser translates it to:

    <figure>
        <img src="" alt="/" align="center" figclass="with-browser foo">
    </figure>

But we need this:

<div class="with-browser foo">
    <figure>
        <img src="" alt="/" align="center" figclass="with-browser foo">
    </figure>
</div>

We need that because with-browser class adds a "fake browser" window wrapping the image. But that fake browser is made with CSS ::before and ::after pseudo-elements, which don't work for <figure> or <img> and that's why we need the wrapping <div>.

Sadly, and as usual, I don't know what I'm doing and it doesn't work, so I'd need your help. Thanks!

[weaverryan]

Does figureNode->getCssClasses() not have anything here?

[javiereguiluz]

Something curious: in the getNodeRendererFactories() method of src/SymfonyHTMLFormat.php

$nodeRendererFactories[FigureNode::class] = new CallableNodeRendererFactory(
    function (FigureNode $node) {
        return new Renderers\FigureNodeRenderer(
            $node,
            $this->templateRenderer
        );
    }
);

If I put a die('here'); before that code, I see the here word. If I move the die() inside the callable (after function (FigureNode $node) {) then I no longer see it ... so the code never enters there.

[weaverryan]

Hmm, yea. That is curious. I don't remember how that stuff works. However, most directives, I believe, (code being an exception) simply render the template in the directive with no node renderer involved. For example: https://github.com/symfony-tools/docs-builder/blob/main/src/Directive/TopicDirective.php

That's what I would try here

[javiereguiluz]

Thanks for the insights. I tried what you suggested, but it's not working. It doesn't even reach to this die('...') here: https://github.com/symfony-tools/docs-builder/pull/140/files#diff-c0cffc4acc0fb9de41d4fdd2590890c3fbe864e42a16622d724914873de3617fR25

[weaverryan]

Change this to a SubDirective - THEN your processSub() should be called. A SubDirective is one where you want the "inside" of the directive to be parsed like the rest of RST - https://github.com/doctrine/rst-parser/blob/9107ba8b1dc8dc2dda2438cd38c609c74d2c33fe/lib/Directives/SubDirective.php#L12-L20

Apparently we even wrote in SubDirective that figure is an example of one: https://github.com/doctrine/rst-parser/blob/9107ba8b1dc8dc2dda2438cd38c609c74d2c33fe/lib/Directives/SubDirective.php#L59

[javiereguiluz]

Thanks for your continuous help 🙏 Sadly I still can't make this work.

[weaverryan]

I've fixed this! It should really be fixed upstream, but I'm short on time and wanted to get it working for you.

[javiereguiluz]

Merged! Ryan, thanks a lot for fixing this.