Extra spaces present in li tags with links

[efc]

Version(s) affected

2.6

Description

When I create a list...

- one
- two [link](url)
- [link](url) three
- [four link](url)

What is rendered is this...

<ul>
<li>one</li>
<li>two <a href="url">link</a>
</li>
<li>
<a href="url">link</a> three</li>
<li>
<a href="url">four link</a>
</li>
</ul>

Each one of the <li> tags is rendered with different spacing. The first has no spaces around the given content. The second has a space at the end, produced by the newline after the </a>. The third has a space at the beginning produced by the newline before the <a>. The fourth has newlines before and after the list item content.

It seems that a newline is being placed before or after the link depending on whether it is at the start or end (or both) of the list item.

This inconsistency makes using CSS li::before or li::after content on list items unpredictable. And it makes it completely impossible to create, for example, some li::after text that should never be separated from the list item by any space at all.

It seems wrong for extra spaces to be introduced into these list items. The consistent and correct rendering would be something like this.

<ul>
<li>one</li>
<li>two <a href="url">link</a></li>
<li><a href="url">link</a> three</li>
<li><a href="url">four link</a></li>
</ul>

Is it possible to achieve that?

How to reproduce

- one
- two [link](url)
- [link](url) three
- [four link](url)

I am using Laravel and Statamic, which seem to use 2.2.1 by default (which exhibits the same behavior). I have updated my version to 2.6 to confirm the problem still exists.

composer.lock.txt

[samwilson]

Looks like commonmark.js is more consistent.

[colinodell]

Thanks for reporting this bug and providing so much detail around it!

It seems that a newline is being placed before or after the link depending on whether it is at the start or end (or both) of the list item.

Yeah, we're using a very naive approach to determine whether to add newlines:

commonmark/src/Extension/CommonMark/Renderer/Block/ListItemRenderer.php

Lines 41 to 48 in d150f91

	$contents = $childRenderer->renderNodes($node->children());
	if (\substr($contents, 0, 1) === '<' && ! $this->startsTaskListItem($node)) {
	$contents = "\n" . $contents;
	}
	if (\substr($contents, -1, 1) === '>') {
	$contents .= "\n";
	}

Basically, we're adding newlines around any HTML elements, whereas libraries like commonmark.js and commonmark-java only add them around block-level elements. (They also use a completely different rendering system that makes this easier.)

I have an idea on how we can easily fix this. Let me put a PR together.

[colinodell]

Fix has been released! https://github.com/thephpleague/commonmark/releases/tag/2.6.1