[REF-1308] Markdown not recognising new lines when rendering

[samcloudcode]

trafficstars

Describe the bug rx.markdown ignores new lines and displays everything on the same line

To Reproduce

import reflex as rx

text = '''
Hello,

This is some text.

Thank you,
'''

class State(rx.State):
    """The app state."""
    pass


def index() -> rx.Component:
    return rx.fragment(
        rx.center(
            rx.markdown(text),
            width='100%',
            height='100vh'
        ),
    )

Expected behavior New lines in markdown should be displayed as new lines. Instead, they are ignored.

_REF-1308

[masenf]

This appears to be an issue when rendering an rx.markdown component inside of certain flex containers (rx.center,rx.flex, maybe others?).

Wrapping the rx.markdown inside an rx.box results in correct rendering.

Perhaps reflex should always wrap markdown in a box to prevent confusion?

[masenf]

There are a few issues with reflex markdown:

1. new lines are not recognised (as per above)

2. things like tables have no default formatting, and reflex does not have a styleprop for tables so you need to import some css

3. you cannot change the format of h1, h2, h3 separately, as everything is converted to rx.header with different sizes.

4. applying styles to a markdown component has no effect, you need to wrap it in a box and then apply styles to the box so the markdown component inherets them

[jq6l43d1]

https://github.com/remarkjs/react-markdown/issues/818