Formatting bug in Steemit post editor when entering '>' in code tag
Issue
When testing Steemit's UI, I discovered a weird bug that may be confusing for some users. The post editor creates unexpected output when entering an >
character in an HTML <code>
tag. The same thing happens on utopian.io.
Bug Type
More cosmetic, but behavior may be very confusing.
Testing Environment
- OS X
- Firefox 57.0
Steps to Reproduce
- Go to https://steemit.com
- Click Post
- Enter following code snippet:
<code>
> Test
</code>
- Review output
Expected Result
- Preferrably display the code as intended:
> Test
- If displaying the intended format is not possible, resort to a simple fallback that just shows the input unformatted.
Actual Result
Both, the generated HTML and the rendered view are shown.
Raw HTML Output
<p><code>
</code></p><blockquote><code>
<p>Test<br>
</p>
</code></blockquote><code>
Besides of the surprising <blockquote>
, please note how the snippet ends with an opening <code>
tag. The editor closes the tag, but only behind all subsequent markup, so everything behind the opening tag might have broken formatting.
Rendered view
![](https://steemitimages.com/640x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1511284586/ya6bt98kddnypy1aahbo.png)
Screenshot of the rendered output
Example with subsequent formatting being broken
ABC
<code>
> Test
</code>
ABC
Rendered View
![](https://steemitimages.com/640x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1511287209/tr3fjn5u2vzlfu17yky1.png)
Screenshot of the rendered output
HTML Validation
Please note that the tested markup passes the w3 HTML validation service at https://validator.w3.org/#validate_by_input
Following markup was used for the validation:
<!DOCTYPE html>
<html>
<head>
<title>Formatting Test</title>
</head>
<body>
<h1>Hello Utopian!</h1>
<code>
> Test
</code>
</body>
</html>
Summary
- Entering > in a HTML code tag leads to unexpected output:
- Unexpected
<blockquote>
is inserted - Additional
<code>
tag is inserted- For some scenarios this can break subsequent markup
- Unexpected
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thanks!
It is acually more visible in night-mode.
Hey @snug I am @utopian-io. I have just upvoted you at 10% Power!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x