laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve default rx.markdown styling (#1904)

Browse Source
This commit is contained in:
Nikhil Rao 2023-10-02 11:52:16 -07:00 committed by GitHub
parent f1f02e4c60
commit 53d205ad9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
reflex/components/typography/markdown.py
View File

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

2
tests/components/typography/test_markdown.py
View File

@ -56,4 +56,4 @@ def test_pass_custom_styles():
md = Markdown.create("# Hello", custom_styles={"h1": {"color": "red"}}) md = Markdown.create("# Hello", custom_styles={"h1": {"color": "red"}})
comp = md.get_component("h1") # type: ignore comp = md.get_component("h1") # type: ignore
assert comp.style == {"color": "red"} assert comp.style == {"color": "red", "marginY": "0.5em"}