I'm using a bbcode parser to first parse the bbcode into HTML and then I am passing it through HtmlPurifier with the default config and for some reason it is prepending an extra list item to my lists in the HTML.
Here is the HTML code before being passed to HtmlPurifier:
<strong>bold text</strong><br />
<em><strong>bold italic</strong></em><br />
<span style="text-decoration: underline"><strong>bold underline</strong></span><br />
<em><span style="text-decoration: underline"><strong>bold underline italic</strong></span></em><br />
<strong>bold striked</strong><br />
<em><span style="text-decoration: underline"><strong>bold italic underlined striked</strong></span><br />
<br />
italic text</em><br />
<br />
<span style="color: #9966ff">colored text</span><br />
<br />
<span style="text-decoration: underline"><em>italic underlined</em></span><br />
<br />
<span style="text-decoration: underline">underlined text</span><br />
<br />
<span style="text-decoration: line-through">striked text</span><br />
<br />
align left<br />
<br />
<div style="text-align: center">align center</div><br />
<br />
<div style="text-align: right"><span style="text-decoration: underline"><strong>align right bold underline</strong></span><br />
<br />
<div style="text-align: left"><a href="http://moo.com">a text link</a></div><br />
<div style="text-align: left"><a href="http://moo.com">[color=#9966ff]a colored text link[/color]</a><br />
<span style="color: #6699ff"><a href="http://moo.com">[b]a bold text link[/b]</a></span><br />
<span style="color: #333333"><br />
<span style="font-size: large"><strong>My List</strong></span></span><br />
<br />
<ul><br />
<li>Cat</li><br />
<li>Dog</li><br />
<li>Fish</li><br />
<li>Duck</li><br />
</ul><br />
<span style="font-size: large"><strong>My List 2</strong></span><br />
:)<br />
:'(<br />
<ol><br />
<li><strong><span style="color: #666633">Car</span></strong></li><br />
<li><strong><span style="color: #666633">Bike</span></strong></li><br />
<li><strong><span style="color: #666633">Tram</span></strong></li><br />
<li><strong><span style="color: #666633">Bus</span></strong></li><br />
</ol><br />
<span style="font-size: large"><strong><br />
My List 3</strong></span><br />
<br />
<ol><br />
<li><a href="http://moo.com">Moo</a></li><br />
<li><a href="http://quack.com">Quack</a></li><br />
<li><a href="http://woof.com">Woof</a></li><br />
<li><a href="http://meow.com">Meow</a></li><br />
</ol><br />
</div><br />
</div><br />
<br />
<span style="font-size: large"><strong><br />
My List 4</strong></span><br />
<br />
<ul><br />
<li>Cat</li><br />
<li>Dog</li><br />
<li>Fish</li><br />
<li>Duck</li><br />
</ul>
Here is the HTML code after being run through HtmlPurifier (note that I have formatted this nicely as it also removes the line-breaks)
<strong>bold text</strong><br /><em><strong>bold italic</strong></em><br /><span style="text-decoration:underline;"><strong>bold underline</strong></span><br /><em><span style="text-decoration:underline;"><strong>bold underline italic</strong></span></em><br /><strong>bold striked</strong><br /><em><span style="text-decoration:underline;"><strong>bold italic underlined striked</strong></span><br /><br />
italic text</em><br /><br /><span style="color:#9966ff;">colored text</span><br /><br /><span style="text-decoration:underline;"><em>italic underlined</em></span><br /><br /><span style="text-decoration:underline;">underlined text</span><br /><br /><span style="text-decoration:line-through;">striked text</span><br /><br />
align left<br /><br />
<div style="text-align:center;">align center</div>
<br /><br />
<div style="text-align:right;">
<span style="text-decoration:underline;"><strong>align right bold underline</strong></span><br /><br />
<div style="text-align:left;"><a href="http://moo.com">a text link</a></div>
<br />
<div style="text-align:left;">
<a href="http://moo.com">[color=#9966ff]a colored text link[/color]</a><br /><span style="color:#6699ff;"><a href="http://moo.com">[b]a bold text link[/b]</a></span><br /><span style="color:#333333;"><br /><span style="font-size:large;"><strong>My List</strong></span></span><br /><br />
<ul>
<li><br /></li>
<li>Cat<br /></li>
<li>Dog<br /></li>
<li>Fish<br /></li>
<li>Duck<br /></li>
</ul>
<br /><span style="font-size:large;"><strong>My List 2</strong></span><br />
:)<br />
:'(<br />
<ol>
<li><br /></li>
<li><strong><span style="color:#666633;">Car</span></strong><br /></li>
<li><strong><span style="color:#666633;">Bike</span></strong><br /></li>
<li><strong><span style="color:#666633;">Tram</span></strong><br /></li>
<li><strong><span style="color:#666633;">Bus</span></strong><br /></li>
</ol>
<br /><span style="font-size:large;"><strong><br />
My List 3</strong></span><br /><br />
<ol>
<li><br /></li>
<li><a href="http://moo.com">Moo</a><br /></li>
<li><a href="http://quack.com">Quack</a><br /></li>
<li><a href="http://woof.com">Woof</a><br /></li>
<li><a href="http://meow.com">Meow</a><br /></li>
</ol>
<br />
</div>
<br />
</div>
<br /><br /><span style="font-size:large;"><strong><br />
My List 4</strong></span><br /><br />
<ul>
<li><br /></li>
<li>Cat<br /></li>
<li>Dog<br /></li>
<li>Fish<br /></li>
<li>Duck<br /></li>
</ul>
Any idea why it is doing this?
You're passing lists like these to HtmlPurifier:
<ul><br />
<li>Cat</li><br />
<li>Dog</li><br />
<li>Fish</li><br />
<li>Duck</li><br />
</ul><br />
But a <br /> element cannot be the immediate child of an <ul> or <ol> element: all children of those list elements have to be <li> elements. So, HtmlPurifier collapses the <br /> elements that occur after <li> tags into the li elements, thus resulting in html like <li>Cat<br /></li>. However, there is no <li> tag for the first <br /> tag to collapse into, so a list item is generated instead to accomodate it.
To fix, you'll have to make the BBCode parser output html like this instead:
<ul>
<li>Cat</li>
<li>Dog</li>
<li>Fish</li>
<li>Duck</li>
</ul>