Improve default rx.markdown styling (#1904)

reflex-dev · Oct 2, 2023 · 53d205a · 53d205a
1 parent f1f02e4
commit 53d205a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/reflex/components/typography/markdown.py b/reflex/components/typography/markdown.py
@@ -40,20 +40,32 @@ def get_base_component_map() -> dict[str, Callable]:
     from reflex.components.datadisplay.code import Code, CodeBlock
 
     return {
-        "h1": lambda value: Heading.create(value, as_="h1", size="2xl"),
-        "h2": lambda value: Heading.create(value, as_="h2", size="xl"),
-        "h3": lambda value: Heading.create(value, as_="h3", size="lg"),
-        "h4": lambda value: Heading.create(value, as_="h4", size="md"),
-        "h5": lambda value: Heading.create(value, as_="h5", size="sm"),
-        "h6": lambda value: Heading.create(value, as_="h6", size="xs"),
-        "p": lambda value: Text.create(value),
-        "ul": lambda value: UnorderedList.create(value),  # type: ignore
-        "ol": lambda value: OrderedList.create(value),  # type: ignore
+        "h1": lambda value: Heading.create(
+            value, as_="h1", size="2xl", margin_y="0.5em"
+        ),
+        "h2": lambda value: Heading.create(
+            value, as_="h2", size="xl", margin_y="0.5em"
+        ),
+        "h3": lambda value: Heading.create(
+            value, as_="h3", size="lg", margin_y="0.5em"
+        ),
+        "h4": lambda value: Heading.create(
+            value, as_="h4", size="md", margin_y="0.5em"
+        ),
+        "h5": lambda value: Heading.create(
+            value, as_="h5", size="sm", margin_y="0.5em"
+        ),
+        "h6": lambda value: Heading.create(
+            value, as_="h6", size="xs", margin_y="0.5em"
+        ),
+        "p": lambda value: Text.create(value, margin_y="1em"),
+        "ul": lambda value: UnorderedList.create(value, margin_y="1em"),  # type: ignore
+        "ol": lambda value: OrderedList.create(value, margin_y="1em"),  # type: ignore
         "li": lambda value: ListItem.create(value),
         "a": lambda value: Link.create(value),
         "code": lambda value: Code.create(value),
-        "codeblock": lambda *children, **props: CodeBlock.create(
-            *children, theme="light", **props
+        "codeblock": lambda *_, **props: CodeBlock.create(
+            theme="light", margin_y="1em", **props
         ),
     }
 
@@ -206,10 +218,10 @@ def format_component_map(self) -> dict[str, str]:
         ] = f"""{{({{inline, className, {_CHILDREN.name}, {_PROPS.name}}}) => {{
     const match = (className || '').match(/language-(?<lang>.*)/);
     const language = match ? match[1] : '';
-    return !inline ? (
-        {self.format_component("codeblock", language=Var.create_safe("language", is_local=False), children=Var.create_safe("String(children)", is_local=False))}
-    ) : (
+    return inline ? (
         {self.format_component("code")}
+    ) : (
+        {self.format_component("codeblock", language=Var.create_safe("language", is_local=False), children=Var.create_safe("String(children)", is_local=False))}
     );
       }}}}""".replace(
             "\n", " "

diff --git a/tests/components/typography/test_markdown.py b/tests/components/typography/test_markdown.py
@@ -56,4 +56,4 @@ def test_pass_custom_styles():
     md = Markdown.create("# Hello", custom_styles={"h1": {"color": "red"}})
 
     comp = md.get_component("h1")  # type: ignore
-    assert comp.style == {"color": "red"}
+    assert comp.style == {"color": "red", "marginY": "0.5em"}