Double Newline Messes with HTML Rendering

Summary

Two consecutive newline characters prevents HTML from rendering properly when using st.markdown() or st.write(). Obviously only with unsafe_allow_html=True, otherwise HTML won’t render anyway. Style is incorrectly applied to the empty line preceding the correct one.

Furthermore, if the HTML contains linebreaks using </br> in a certain way, the HTML doesn’t render at all, instead returning an error: TypeError: Cannot read property 'props' of undefined

Steps to reproduce

Run the following app:

import streamlit as st

st.subheader('Test')

html = """
<div class="entities" style="line-height: 2.5">
<mark class="entity" style="background: #7aecec; padding: 0.45em 0.6em; margin: 0 0.25em; line-height: 1; border-radius: 0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone">

Lorem Ipsum
    <span style="font-size: 0.8em; font-weight: bold; line-height: 1; border-radius: 0.35em; text-transform: uppercase; vertical-align: middle; margin-left: 0.5rem">ORG</span>
</mark>
Testing</br>Testing</br>Testing
</div>
"""

st.write(html,unsafe_allow_html=True) 

Expected behavior:

HTML should just render normally as below:

Actual behavior:

The code snippet instead returns the result below:

If the </br> instances are replaced with <br>, the HTML renders but with incorrect styling:

Is this a regression?

Don’t know, I’m relatively new to streamlit.

Debug info

• Streamlit version: 0.52.2
• Python version: 3.7.3
• Using Conda
• OS version: Ubuntu 18.04.1 LTS (WSL)
• Browser version: Chrome Version 79.0.3945.79 (Official Build) (64-bit)

Additional information

Removing the empty line before “Lorem Ipsum” will fix the issue. Until a fix is put in place, this can be dealt with by using the following snipped prior to st.write()

import re
html = re.sub(r'\n\s*\n', '\n\n', html)
html = html.replace("\n\n", "\n")

Came across this problem by trying to use streamlit to render the HTML returned from displacy from the spacy library.

[CatChenal]

I am not convinced this is a bug: I obtained the desired output using either </br> or <br>.

Steamlit: 0.49.0
Python:   3.6.7 (default, Feb 28 2019, 07:28:18) [MSC v.1900 64 bit (AMD64)]
OS:        Windows 10
Browser:  Chrome, 79.0.3945.117 (64-bit)

There was an odd behavior, though: on the very first run of the given code (containing the invalid end-tag </br>), st.write displayed the raw html string; subsequent reruns yielded the expected output.

[arraydude]

After re-checking it with the production build it seems to be working correctly, maybe you tried it with the development mode .