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
Screenshot of the rendered output
Example with subsequent formatting being broken
ABC
<code>
> Test
</code>
ABC
Rendered View
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