Handle complex url deco

- Escape commas in url
- Add escape filter in jinja2

moffee/compositor.py

@@ -205,20 +205,26 @@ def parse_deco(line: str, base_option: Optional[PageOption] = None) -> PageOptio
     :return: An updated PageOption
     """
 
-    def rm_quotes(s):
-        if (s.startswith('"') and s.endswith('"')) or (
-            s.startswith("'") and s.endswith("'")
-        ):
-            return s[1:-1]
-        return s
+    def parse_key_value_string(s: str) -> dict:
+        pattern = r'([\w-]+)\s*=\s*((?:"(?:[^"\\]|\\.)*"|\'(?:[^\'\\]|\\.)*\'|[^,]+))'
+        matches = re.findall(pattern, s)
+
+        result = {}
+        for key, value in matches:
+            if (value.startswith('"') and value.endswith('"')) or (
+                value.startswith("'") and value.endswith("'")
+            ):
+                value = value[1:-1].replace('\\"', '"').replace("\\'", "'")
+            result[key] = value.strip()
+
+        return result
 
     deco_match = re.match(r"^\s*@\((.*?)\)\s*$", line)
     if not deco_match:
         raise ValueError(f"Input line should contain a deco, {line} received.")
 
     deco_content = deco_match.group(1)
-    pairs = re.findall(r"([\w\-]+)\s*=\s*([^,]+)(?:,|$)", deco_content)
-    deco = {key.strip(): rm_quotes(value.strip()) for key, value in pairs}
+    deco = parse_key_value_string(deco_content)
 
     if base_option is None:
         base_option = PageOption()

moffee/templates/base/layouts/centered.html

@@ -1,4 +1,4 @@
-<div class="slide-content centered" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value }}; {% endfor %}">
+<div class="slide-content centered" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value | escape }}; {% endfor %}">
     {% if slide.h1 %}
     <h1>{{ slide.h1 }}</h1>
     {% endif %}

moffee/templates/base/layouts/content.html

@@ -1,4 +1,4 @@
-<div class="slide-content" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value }}; {% endfor %}">
+<div class="slide-content" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value | escape }}; {% endfor %}">
     {% if slide.h1 %}
     <h1>{{ slide.h1 }}</h1>
     {% endif %}

moffee/templates/base/layouts/product.html

@@ -1,4 +1,4 @@
-<div class="slide-content product" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value }}; {% endfor %}">
+<div class="slide-content product" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value | escape }}; {% endfor %}">
     <!-- {% if slide.h1 %}
     <h1>{{ slide.h1 }}</h1>
     {% endif %}

moffee/templates/beam/layouts/centered.html

@@ -1,4 +1,4 @@
-<div class="slide-content centered" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value }}; {% endfor %}">
+<div class="slide-content centered" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value | escape }}; {% endfor %}">
     <div class="header">
         <ul class="headings-list">
             {% for heading in struct["headings"] %}

moffee/templates/beam/layouts/content.html

@@ -1,4 +1,4 @@
-<div class="slide-content" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value }}; {% endfor %}">
+<div class="slide-content" {{"style"}}="{% for key, value in slide.styles.items() %}{{ key }}: {{ value | escape }}; {% endfor %}">
     <div class="header">
         <ul class="headings-list">
             {% for heading in struct["headings"] %}

tests/test_parse_deco.py

@@ -67,6 +67,14 @@ def test_deco_with_hyphen():
     assert option.styles == {"background-color": "red"}
 
 
+def test_deco_with_complex_url():
+    line = """@(background-image='url("https://www.example.com/hello(world, this%20isa complex@url)")')"""
+    option = parse_deco(line)
+    assert option.styles == {
+        "background-image": 'url("https://www.example.com/hello(world, this%20isa complex@url)")'
+    }
+
+
 def test_computed_slide_size():
     page_option = PageOption()
     assert page_option.computed_slide_size == (720, 405)