From 26e45c1f1871a59ab13e8da7e3623a70f7c4e6fc Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Thu, 17 Aug 2023 09:45:25 -0700
Subject: [PATCH] format_dict: only unescape quotes when removing outer quotes
 (#1609)

---
 reflex/utils/format.py       | 18 +++++++++++++++---
 tests/components/test_tag.py | 16 ++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/reflex/utils/format.py b/reflex/utils/format.py
index 0c92dc738..3eb6ae8d3 100644
--- a/reflex/utils/format.py
+++ b/reflex/utils/format.py
@@ -473,10 +473,22 @@ def format_dict(prop: ComponentStyle) -> str:
     # Dump the dict to a string.
     fprop = json_dumps(prop)
 
+    def unescape_double_quotes_in_var(m: re.Match) -> str:
+        # Since the outer quotes are removed, the inner escaped quotes must be unescaped.
+        return re.sub('\\\\"', '"', m.group(1))
+
     # This substitution is necessary to unwrap var values.
-    fprop = re.sub('"{', "", fprop)
-    fprop = re.sub('}"', "", fprop)
-    fprop = re.sub('\\\\"', '"', fprop)
+    fprop = re.sub(
+        pattern=r"""
+            (?<!\\)      # must NOT start with a backslash
+            "            # match opening double quote of JSON value
+            {(.*?)}      # extract the value between curly braces (non-greedy)
+            "            # match must end with an unescaped double quote
+        """,
+        repl=unescape_double_quotes_in_var,
+        string=fprop,
+        flags=re.VERBOSE,
+    )
 
     # Return the formatted dict.
     return fprop
diff --git a/tests/components/test_tag.py b/tests/components/test_tag.py
index 9f71fd55a..3f47891e6 100644
--- a/tests/components/test_tag.py
+++ b/tests/components/test_tag.py
@@ -4,6 +4,7 @@ import pytest
 
 from reflex.components.tags import CondTag, Tag, tagless
 from reflex.event import EVENT_ARG, EventChain, EventHandler, EventSpec
+from reflex.style import Style
 from reflex.vars import BaseVar, Var
 
 
@@ -23,6 +24,14 @@ def mock_event(arg):
         ([1, 2, 3], "{[1, 2, 3]}"),
         (["a", "b", "c"], '{["a", "b", "c"]}'),
         ({"a": 1, "b": 2, "c": 3}, '{{"a": 1, "b": 2, "c": 3}}'),
+        ({"a": 'foo "bar" baz'}, r'{{"a": "foo \"bar\" baz"}}'),
+        (
+            {
+                "a": 'foo "{ "bar" }" baz',
+                "b": BaseVar(name="val", type_="str"),
+            },
+            r'{{"a": "foo \"{ \"bar\" }\" baz", "b": val}}',
+        ),
         (
             EventChain(events=[EventSpec(handler=EventHandler(fn=mock_event))]),
             '{_e => Event([E("mock_event", {})], _e)}',
@@ -57,6 +66,13 @@ def mock_event(arg):
             {"a": BaseVar(name='state.colors["val"]', type_="str")},
             '{{"a": state.colors["val"]}}',
         ),
+        # tricky real-world case from markdown component
+        (
+            {
+                "h1": f"{{({{node, ...props}}) => <Heading {{...props}} {''.join(Tag(name='', props=Style({'as_': 'h1'})).format_props())} />}}"
+            },
+            '{{"h1": ({node, ...props}) => <Heading {...props} as={`h1`} />}}',
+        ),
     ],
 )
 def test_format_prop(prop: Var, formatted: str):