Nested Formatting Bugs? Problem Solved?! (eg. spoiler/center/left/right)

Joined
Apr 23, 2018
Messages
1,071
TL;DR
Due to their use of
Code:
<p>
tags, the bbcode
Code:
[[s][/s]spoiler] [[s][/s]left] [[s][/s]center] [[s][/s]right]
ATM, CANNOT contain:
Code:
[[s][/s]spoiler] [[s][/s]left] [[s][/s]center] [[s][/s]right] [[s][/s]h1-h4] [[s][/s]hr] [[s][/s]ol] [[s][/s]ul] [[s][/s]quote]
which use
Code:
<p> <h1-h4> <hr> <ol> <ul> <div>
tags.
This limitation can be removed by changing the tag generated by the bbcode from
Code:
<p>
to something else, like
Code:
<div>

JSFiddle showing suspected problem and proposed solution.

Relevant W3C Documentation:
[ul][*]Tag omission rules (implicit tag closing). Note all tags listed above are listed as tags that implicitly close <p> tags.
[*]List of elements allowed inside <p> tags.
[/ul]
If this is unlikely to be fixed soon, or believed not to be the cause of the problem, please let me know.


Overly verbose way to say the same thing below​

Nesting with paragraphs is NOT possible in HTML! Paragraphs/Phrasing content (like
Code:
<p>
tags) are NOT allowed to contain most other elements in normal HTML. In fact, attempts to do so will generally implicitly close the
Code:
<p>
tag.
However, some of MD formatting uses
Code:
 p
tags as the container.
Code:
[[s][/s]spoiler] [[s][/s]left] [[s][/s]center] [[s][/s]right]
for example. These formatting tags will suffer from this as they may not contain
Code:
<p> <h1-h4> <hr> <ol> <ul> <div>
tags, which are used by
Code:
[[s][/s]spoiler] [[s][/s]left] [[s][/s]center] [[s][/s]right] [[s][/s]h1-h4] [[s][/s]hr] [[s][/s]ol] [[s][/s]ul] [[s][/s]quote]
bbcode.

As you can see, there are several invalid combinations of bbcode because of this. Many are aware of the spoiler in spoiler limitation, some are aware of the spoiler quote limitation as well.

Here is an example of the problem.
BBCode:
Code:
[[s][/s]spoiler][[s][/s]center]I swear I used spoiler tags!!!! Why is it still visible!!!!![[s][/s]/center][[s][/s]/spoiler]

Likely bbcode parser generated HTML:
Code:
<button type="button" class="btn btn-sm btn-warning btn-spoiler">Spoiler</button>
<p class="spoiler display-none">
  <p class="text-center">I swear I used spoiler tags!!!! Why is it still visible!!!!!</p>
</p>

What MD ends up outputting after an HTML engine corrects it (either on their end, or the client's browser. Either way, what was generated is considered invalid):
Code:
<button type="button" class="btn btn-sm btn-warning btn-spoiler">Spoiler</button>
<p class="spoiler display-none"></p>
<p class="text-center">I swear I used spoiler tags!!!! Why is it still visible!!!!!</p>

Actual result, regardless of how close I got to the process:
I swear I used spoiler tags!!!! Why is it still visible!!!!!​
 
Joined
Apr 23, 2018
Messages
1,071
This was my analyses after reimplimenting the bbcode parser and html generator in JS for my post preview script. My original attempt actually mimicked MD, but when I tried to upgrade it a bit by eliminating .innerHTML and instead generating the nodes directly, I was surprised to have a different result (despite using an equivalent function). Then I noticed that what I had previously been setting .innerHTML to, and what .innerHTML was afterwards did NOT match. A quick google then led me to this conclusion.
Omitting ~3 months gap between post preview userscript version, and several hrs of debugging just this issue from analysis steps to make myself look intelligent.
That said, I have had like... 2hrs of sleep in the last 48 hrs, so I may be extreamly delusional right now.
 
Joined
Apr 23, 2018
Messages
1,071
Finished editing OP. Just read the 7 lines in the TL;DR at the top for a concise description of the source of the issue.

Dev feedback would be appreciated since I will waste my time visiting and editing this page until I receive it. Pretty sure I am 48+ of the 50 views of this thread...
I need more hobbies.
 
Joined
Jan 25, 2018
Messages
79
While I am sure that eventually some developer will drop by any bug report (they do this in their free time after all), it might be faster to actually @ them. Like @Teasday for example.
If you are on discord, dropping them a message there might be the fastest way to make them aware of your bug report.
 
Custom title
Staff
Developer
Joined
Jan 19, 2018
Messages
2,460
Oh cool, it's the damn <p> tags again. They've caused similar trouble before somewhere else too, can't remember what it was. I should probably look through code for them.

Fix written, will be up at some point.
 

Users who are viewing this thread

Top