Question: How to add classes on specific node ?

[armetiz]

Question

I have a common markdown content, without any specific attributes.
When rendering markdown to HTML, I want to see some CSS Classes on HTML nodes.

Let's say :

• All H1 nodes : .title-main
• All Table nodes : .table
• All Table Row nodes : .table .table-row

Is this possible without creating custom renderer ?

It could be awesome to be able to configure using the environment :

$config = [
  'html_classes' => [
    'h1' => '.title-main',
    'table' => '.table',
  ],
];

The use case is : I'm using a bought theme that request some css class. I don't want to change markdown original content, and I don't want to change theme.

Thank a lot for your awesome job on this package !

Regards,

[colinodell]

You can create an event listener the handles the DocumentParsedEvent, iterates through the parsed nodes, and applies the custom classes as needed. See https://commonmark.thephpleague.com/1.5/customization/event-dispatcher/#example for an example of this.

In your case, that code would look something like this:

use League\CommonMark\EnvironmentInterface;
use League\CommonMark\Event\DocumentParsedEvent;
// TODO: add other missing "use" statements here

class AddCustomCssClassesProcessor
{
    private $environment;

    public function __construct(EnvironmentInterface $environment)
    {
        $this->environment = $environment;
    }

    public function onDocumentParsed(DocumentParsedEvent $event)
    {
        $document = $event->getDocument();
        $walker = $document->walker();
        while ($event = $walker->next()) {
            $node = $event->getNode();

            // Only stop when we first encounter a node
            if (!$event->isEntering()) {
                continue;
            }

            if ($node instanceof Heading && $node->getLevel() === 1) {
                $node->data['attributes']['class'] = 'title-main';
            } elseif ($node instanceof Table) {
                $node->data['attributes']['class'] = 'table';
            }
            // etc.
        }
    }
}

The code above is untested but it should get you on the right track.

I do like the idea of creating a more-generic, core piece of functionality that works similar to your example, so I'll keep this open as a feature request for the upcoming 2.0 release :)

[armetiz]

awesome!

I walked throughout the documentation but the event-dispatcher. I didn't expect to find the solution in this section ;p

Thanks !

[armetiz]

Note, I'm using "league/commonmark": "dev-latest" (commit: 7299ca7).

if ($node instanceof Heading) {
  $node->data['attributes']['class'] = 'title-main';
}

I'm getting an ErrorException : Indirect modification of overloaded element of Dflydev\DotAccessData\Data has no effect.

[colinodell]

@armetiz Would something like this for you?

$config = [
    'default_attributes' => [
        Heading::class => [
            'class' => function (Heading $node) {
                if ($node->getLevel() === 1) {
                    return 'title-main';
                } else {
                    return null;
                }
            },
        ],
        Table::class => [
            'class' => 'table',
        ],
        Paragraph::class => [
            'class' => ['text-center', 'font-comic-sans'],
        ],
        Link::class => [
            'class' => 'btn btn-link',
            'target' => '_blank',
        ],
    ],
];

---

I'm getting an ErrorException : Indirect modification of overloaded element of Dflydev\DotAccessData\Data has no effect.

That's probably because $node->data is no longer a plain array in the latest branch.

[armetiz]

It's really cool ;)

[colinodell]

New extension implemented in #616 for the upcoming 2.0.0 release! 🎉

[Zignature]

Pardon my ignorance but I'm way over my head in this :)

How would I go about adding CSS classes to task lists?
e.g. <ul class="task-list"> and <li class="task-list-item">

[colinodell]

Follow the example on https://commonmark.thephpleague.com/2.1/extensions/default-attributes/, but use ListBlock::class and ListItem::class as your keys in the config.

[Zignature]

Thanks! 😃
I'll give it a shot!

[Zignature]

Well it works, but it works too good 😅
It adds those classes to all lists. I only need them on Task Lists...

[colinodell]

Ah, in that case, you have two options:

1. Write your own listener to look for TaskListItemMarker nodes in the AST. When you find one, apply the custom classes to its parent(s).
2. Follow the example at the very bottom of the page, showing how you can use a function to determine if it's the right type of list. In your case, you'll want to check if any of its descendants/children contain a TaskListItemMarker.

[Zignature]

Thanks for the pointers!

[Zignature]

It took me a while but this is what I've come up with:

'default_attributes' => [
	ListBlock::class => [
		'class' => static function (ListBlock $listblock) {
			if ($listblock->firstChild()->firstChild()->firstChild() instanceof TaskListItemMarker) {
				return 'task-list';
			}

			return null;
		},
	],
	ListItem::class => [
		'class' => static function (ListItem $listitem) {
			if ($listitem->firstChild()->firstChild() instanceof TaskListItemMarker) {
				return 'task-list-item';
			}

			return null;
		},
	]
]

It works, but I have a sneaking suspicion there's a more elegant way.
Like I said, I am way over my head in this. Consider me a novice 😄

[Zignature]

Is it possible to assign multiple attributes in one go, or will I have to repeat a block with a new key and a new value?

[colinodell]

You're definitely on the right track! Navigating the AST isn't the easiest. You could potentially do something like this instead:

'class' => static function (Node $node) {
    // Check every first child down the tree
    while (($node = $node->firstChild()) !== null) {
        if ($node instanceof TaskListItemMarker) {
            return 'task-list-item';
        }

        // If we've found a nested list we're probably too deep and don't want that nested list affecting the current one
        if ($node instanceof ListBlock) {
            break;
        }
    }

    return null;
}

Is it possible to assign multiple attributes in one go, or will I have to repeat a block with a new key and a new value?

That's not possible with this extension, but it's very possible to do with a custom event listener like this one: https://commonmark.thephpleague.com/2.1/customization/event-dispatcher/#example

If you have large documents or multiple attributes you want to add, using a custom event listener is almost certainly more efficient. default_attributes is just a shortcut for simpler cases :)

[Zignature]

I've been looking at that page :)

Where would such an event listener be saved? Or does it have to be written in the same page?

[colinodell]

I'd recommend defining that listener as a separate class. (You could define an anonymous class inline with your other code, but that might get messy)

[Zignature]

Is there a recommended location to save class files, or is that arbitrary?

[colinodell]

I'd recommend that you follow PSR-4

[Zignature]

Something like this?

 [ROOT]
   |-[vendor]
   |    |-[league]
   |    |-[username]
   |    |    |-[myclass]
   |    |    |   |-[src]
   |    |    |       |-MyClass.php
   |    |-autoload.php
   |-index.php

with namespace Username\MyClass\MyClass

[colinodell]

Ideally, it would be more like this:

 [ROOT]
   |-[src]
   |    |-SomeFolder(s)
   |         |-MyClass.php
   |-[vendor]
   |    |-[league]
   |    |-autoload.php
   |-index.php

It's a great question but unfortunately beyond the scope of this library. I'd recommend doing some research on PSR-0, PSR-4, autoloading, namespaces, and common naming conventions - that should get you moving in the right direction.

[Zignature]

Ideally, it would be more like this:

 [ROOT]
   |-[src]
   |    |-SomeFolder(s)
   |         |-MyClass.php
   |-[vendor]
   |    |-[league]
   |    |-autoload.php
   |-index.php

Well that was my initial plan 😄

Would that make the namespace SomeFolder\MyClass?