urllib.quote_plus -> html.escape

CHANGELOG.rst

@@ -4,7 +4,7 @@ History
 
 0.18.0 (2024-02-09)
 -------------------
-- urllib.quote_plus the url attributes
+- html.escape all the url attributes
 - Match link domain more precisely.
 - Image height or width can be individually specified
 

tests/data/html/audio-no_caption.html

@@ -1,4 +1,4 @@
-<figure class="audio-player-container"><div><audio src=https%3A%2F%2Fgetfoobar%2Faudio%2Fsohtdbcmxu-1581683086.mp3></audio><div class="audio-player audio-player-initialising">
+<figure class="audio-player-container"><div><audio src=https://getfoobar/audio/sohtdbcmxu-1581683086.mp3></audio><div class="audio-player audio-player-initialising">
     <div class="player-button">
         <i class="icon audio-play-icon"></i>
     </div>

tests/data/html/audio.html

@@ -1,4 +1,4 @@
-<figure class="audio-player-container"><div><audio src=https%3A%2F%2Fgetfoobar%2Faudio%2Fsohtdbcmxu-1581683086.mp3></audio><div class="audio-player audio-player-initialising">
+<figure class="audio-player-container"><div><audio src=https://getfoobar/audio/sohtdbcmxu-1581683086.mp3></audio><div class="audio-player audio-player-initialising">
     <div class="player-button">
         <i class="icon audio-play-icon"></i>
     </div>

tests/data/html/code_block.html

@@ -40,4 +40,4 @@
 num1 = 54
 num2 = 24
 
-print(&quot;The L.C.M. is&quot;, compute_lcm(num1, num2))</code></pre></div><blockquote><p>Readability counts.</p><p><a href="https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FZen_of_Python" target="_blank" rel="noopener nofollow">Zen of Python</a> By <strong>Tom Peters</strong></p></blockquote>
+print(&quot;The L.C.M. is&quot;, compute_lcm(num1, num2))</code></pre></div><blockquote><p>Readability counts.</p><p><a href="https://en.wikipedia.org/wiki/Zen_of_Python" target="_blank" rel="noopener nofollow">Zen of Python</a> By <strong>Tom Peters</strong></p></blockquote>

tests/data/html/data_attributes.html

@@ -1 +1 @@
-<div data-show-gap="true" data-type="imageStrip"><figure><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F200%2F301" alt="Sleepy Kitten" width="300" height="400"/></picture><figcaption>Cute Kitty</figcaption></figure><figure><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F200%2F301" alt="Happy Kitten" width="300" height="400"/></picture><figcaption>New Kitty</figcaption></figure></div>
+<div data-show-gap="true" data-type="imageStrip"><figure><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/200/301" type="image"/><img src="https://placekitten.com/200/301" alt="Sleepy Kitten" width="300" height="400"/></picture><figcaption>Cute Kitty</figcaption></figure><figure><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/200/301" type="image"/><img src="https://placekitten.com/200/301" alt="Happy Kitten" width="300" height="400"/></picture><figcaption>New Kitty</figcaption></figure></div>

tests/data/html/document-pdf.html

@@ -13,7 +13,7 @@
       </div>
    </div>
    <ul class="file-cta-container">
-      <li class="download-cta"><a href="http%3A%2F%2Fwww.africau.edu%2Fimages%2Fdefault%2Fsample.pdf" target="_blank" rel="noopener noreferrer" download>Download</a></li>
+      <li class="download-cta"><a href="http://www.africau.edu/images/default/sample.pdf" target="_blank" rel="noopener noreferrer" download>Download</a></li>
    </ul>
 </div>
 <figcaption>This is pdf caption.</figcaption></figure><p>Document Test</p>

tests/data/html/document-sketch.html

@@ -13,7 +13,7 @@
       </div>
    </div>
    <ul class="file-cta-container">
-      <li class="download-cta"><a href="http%3A%2F%2Fwww.africau.edu%2Fimages%2Fdefault%2Fsample.sketch" target="_blank" rel="noopener noreferrer" download>Download</a></li>
+      <li class="download-cta"><a href="http://www.africau.edu/images/default/sample.sketch" target="_blank" rel="noopener noreferrer" download>Download</a></li>
    </ul>
 </div>
 <figcaption>Above URL may result into 404 :)</figcaption></figure><p>Document Test</p>

tests/data/html/featuredimage-height_width.html

@@ -1 +1 @@
-<figure class="featured-image"><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F200%2F301" alt="Sleepy Kitten" width="300" height="400"/></picture><figcaption>Cute Kitty</figcaption></figure>
+<figure class="featured-image"><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/200/301" type="image"/><img src="https://placekitten.com/200/301" alt="Sleepy Kitten" width="300" height="400"/></picture><figcaption>Cute Kitty</figcaption></figure>

tests/data/html/featuredimage-mime_type.html

@@ -1 +1 @@
-<figure class="featured-image"><picture><source srcset="https%3A%2F%2Fwww.python.org%2Fpython-logo.webp" type="image/webp"/><source srcset="https%3A%2F%2Fwww.python.org%2Fpython-logo.png" type="image/png"/><img src="https%3A%2F%2Fwww.python.org%2Fpython-logo.png" alt="python"/></picture></figure>
+<figure class="featured-image"><picture><source srcset="https://www.python.org/python-logo.webp" type="image/webp"/><source srcset="https://www.python.org/python-logo.png" type="image/png"/><img src="https://www.python.org/python-logo.png" alt="python"/></picture></figure>

tests/data/html/featuredimage-missing_caption.html

@@ -1 +1 @@
-<figure class="featured-image"><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F198%2F654" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F198%2F654" alt="Brown Kitten Image"/></picture></figure>
+<figure class="featured-image"><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/198/654" type="image"/><img src="https://placekitten.com/198/654" alt="Brown Kitten Image"/></picture></figure>

tests/data/html/featuredimage-no_caption.html

@@ -1 +1 @@
-<figure class="featured-image"><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F198%2F654" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F198%2F654" alt="Brown Kitten Image"/></picture></figure>
+<figure class="featured-image"><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/198/654" type="image"/><img src="https://placekitten.com/198/654" alt="Brown Kitten Image"/></picture></figure>

tests/data/html/featuredimage.html

@@ -1 +1 @@
-<figure class="featured-image"><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F198%2F654" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F198%2F654" alt="Brown Kitten Image"/></picture><figcaption>Cute Kitty</figcaption></figure>
+<figure class="featured-image"><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/198/654" type="image"/><img src="https://placekitten.com/198/654" alt="Brown Kitten Image"/></picture><figcaption>Cute Kitty</figcaption></figure>

tests/data/html/image-height_width.html

@@ -1 +1 @@
-<figure><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F200%2F301" alt="Sleepy Kitten" width="300" height="400"/></picture><figcaption>Cute Kitty</figcaption></figure>
+<figure><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/200/301" type="image"/><img src="https://placekitten.com/200/301" alt="Sleepy Kitten" width="300" height="400"/></picture><figcaption>Cute Kitty</figcaption></figure>

tests/data/html/image-mime_type.html

@@ -1 +1 @@
-<figure><picture><source srcset="https%3A%2F%2Fwww.python.org%2Fpython-logo.webp" type="image/webp"/><source srcset="https%3A%2F%2Fwww.python.org%2Fpython-logo.png" type="image/png"/><img src="https%3A%2F%2Fwww.python.org%2Fpython-logo.png" alt="python"/></picture></figure>
+<figure><picture><source srcset="https://www.python.org/python-logo.webp" type="image/webp"/><source srcset="https://www.python.org/python-logo.png" type="image/png"/><img src="https://www.python.org/python-logo.png" alt="python"/></picture></figure>

tests/data/html/image-missing_caption.html

@@ -1 +1 @@
-<figure><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F198%2F654" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F198%2F654" alt="Sleepy Kitten"/></picture></figure>
+<figure><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/198/654" type="image"/><img src="https://placekitten.com/198/654" alt="Sleepy Kitten"/></picture></figure>

tests/data/html/image-no_caption.html

@@ -1 +1 @@
-<figure><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F198%2F654" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F198%2F654" alt="Sleepy Kitten"/></picture></figure>
+<figure><picture><source srcset="https://placekitten.com/200/301" type="image"/><source srcset="https://placekitten.com/198/654" type="image"/><img src="https://placekitten.com/198/654" alt="Sleepy Kitten"/></picture></figure>

tests/data/html/image.html

@@ -1 +1 @@
-<figure><picture><source srcset="https%3A%2F%2Fplacekitten.com%2F200%2F301" type="image"/><source srcset="https%3A%2F%2Fplacekitten.com%2F198%2F654" type="image"/><img src="https%3A%2F%2Fplacekitten.com%2F198%2F654" alt="Sleepy Kitten"/></picture><figcaption>&lt;script&gt;alert(23)&lt;/script&gt;Cute Kitty</figcaption></figure>
+<figure><picture><source srcset="https://placekitten.com/200/301?text=&quot;escape me&quot;" type="image"/><source srcset="https://placekitten.com/198/654" type="image"/><img src="https://placekitten.com/198/654" alt="Sleepy Kitten"/></picture><figcaption>&lt;script&gt;alert(23)&lt;/script&gt;Cute Kitty</figcaption></figure>

tests/data/html/mark_tags.html

@@ -1 +1 @@
-<p>This is <strong>bold text</strong>, this is <em>italic text</em>, this is <strong><em>&lt;script&gt;alert(&#x27;hello&#x27;);&lt;/script&gt; italic and bold text</em></strong> and this has a <a title="foo.bar" href="https%3A%2F%2Ffoobar.withgoogle.com%2F" target="_blank" rel="noopener nofollow">link</a></p>
+<p>This is <strong>bold text</strong>, this is <em>italic text</em>, this is <strong><em>&lt;script&gt;alert(&#x27;hello&#x27;);&lt;/script&gt; italic and bold text</em></strong> and this has a <a href="https://foobar.withgoogle.com/" title="foo.bar" target="_blank" rel="noopener nofollow">link</a></p>

tests/data/json/image.json

@@ -4,10 +4,13 @@
     {
       "type": "image",
       "attrs": {
-        "src": { "image": "https://placekitten.com/200/301", "fallback": "https://placekitten.com/198/654" },
+        "src": {
+          "image": "https://placekitten.com/200/301?text=\"escape me\"",
+          "fallback": "https://placekitten.com/198/654"
+        },
         "alt": "Sleepy Kitten",
         "caption": "<script>alert(23)</script>Cute Kitty"
       }
     }
-   ]
+  ]
 }

tests/test_transform.py

@@ -66,6 +66,14 @@ def build_test_data():
             with open(file_path) as f:
                 data = f.read()
                 store[data_type][file.split(f".{data_type}")[0]] = data
+
+            ## Use this to (re)generate the html files
+            # if data_type == "json":
+            #     renderer = tiptapy.BaseDoc(config)
+            #     rendered = renderer.render(data)
+            #     with open(file_path.replace("json", "html"), "w") as f:
+            #         f.write(rendered)
+
     return store["json"], store["html"]
 
 

tiptapy/__init__.py

@@ -12,7 +12,6 @@
     get_audio_player_block,
     get_doc_block,
     make_img_src,
-    quote_plus,
 )
 
 __version__ = "0.18.0"
@@ -31,9 +30,10 @@ def init_env(path, config):
     env.globals["handle_links"] = build_link_handler(config)
     # Cause jinja2 `e` filter is not exactly same as html.escape
     env.globals["escape"] = escape
+    env.filters["escape"] = escape
+    env.filters["str"] = str
     env.globals["get_audio_player_block"] = get_audio_player_block
     env.globals["get_doc_block"] = get_doc_block
-    env.filters["quote_plus"] = quote_plus
 
     return env
 

tiptapy/image.py

@@ -1,26 +1,27 @@
 # Image file type and it's MIME type mappings that are suported by tiptapy.
 # Detailed documentation can be found about Image file type and format guide.
 # Link: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+from html import escape
 from os.path import splitext
 
-class SupportedFormatsMapper(dict):
 
+class SupportedFormatsMapper(dict):
     def __missing__(self, ext):
-        return 'image'
+        return "image"
 
 
 SUPPORTED_FORMATS_MAP = SupportedFormatsMapper(
-    PNG='image/png',
-    JPG='image/jpeg',
-    JPEG='image/jpeg',
-    GIF='image/gif',
-    BMP='image/bmp',
-    WEBP='image/webp',
-    SVG='image/svg+xml'
+    PNG="image/png",
+    JPG="image/jpeg",
+    JPEG="image/jpeg",
+    GIF="image/gif",
+    BMP="image/bmp",
+    WEBP="image/webp",
+    SVG="image/svg+xml",
 )
 
 
 def url2mime(url):
     ext = splitext(url)[-1]
-    ext = (ext[1:] if ext.startswith('.') else ext).upper()
-    return SUPPORTED_FORMATS_MAP[ext]
+    ext = (ext[1:] if ext.startswith(".") else ext).upper()
+    return escape(SUPPORTED_FORMATS_MAP[ext])

tiptapy/macros.py

@@ -1,36 +1,35 @@
 import pkgutil
 from html import escape
 from string import Template
-from urllib.parse import quote_plus, urlparse
+from urllib.parse import urlparse
 
 
 def make_img_src(attrs):
-    alt = attrs.get("alt", "").strip()
-    height = attrs.get("height", "")
-    width = attrs.get("width", "")
-    fallback_url = quote_plus(attrs["src"]["fallback"]).strip()
-    image_src = f'img src="{fallback_url}"'
+    alt = escape(attrs.get("alt", "").strip())
+    height = escape(str(attrs.get("height", "")))
+    width = escape(str(attrs.get("width", "")))
+    fallback_url = escape(attrs["src"]["fallback"].strip())
+    img = f'img src="{fallback_url}"'
     if alt:
-        image_src += f' alt="{escape(alt)}"'
+        img += f' alt="{alt}"'
     if width:
-        image_src += f' width="{width}"'
+        img += f' width="{width}"'
     if height:
-        image_src += f' height="{height}"'
+        img += f' height="{height}"'
 
-    return image_src
+    return img
 
 
 def build_link_handler(config):
     def handle_links(attrs):
         retval = None
         if attrs:
-            url = quote_plus(attrs.pop("href", "")).strip()
+            url = attrs.get("href", "").strip()
             link = urlparse(url)
             if not (
                 link.netloc == config.DOMAIN
                 or link.netloc.endswith(f".{config.DOMAIN}")
             ):
-                attrs["href"] = url
                 attrs["target"] = "_blank"
                 attrs["rel"] = "noopener nofollow"
             retval = " ".join(

tiptapy/templates/extras/audio.html

@@ -1,12 +1,13 @@
 {%- if node.attrs.src -%}
-  {%- set caption = node.attrs.caption|trim -%}
+  {%- set caption = node.attrs.caption|trim|escape -%}
   {%- set audio_player_block = get_audio_player_block() -%}
+  {%- set src = node.attrs.src|trim|escape -%}
 
   <figure class="audio-player-container">
     {%- if caption -%}
-      <div><audio src={{node.attrs.src|trim|quote_plus}}></audio>{{audio_player_block}}</div><figcaption>{{escape(caption)}}</figcaption>
+      <div><audio src={{src}}></audio>{{audio_player_block}}</div><figcaption>{{caption}}</figcaption>
     {%- else -%}
-      <div><audio src={{node.attrs.src|trim|quote_plus}}></audio>{{audio_player_block}}</div>
+      <div><audio src={{src}}></audio>{{audio_player_block}}</div>
     {%- endif -%}
   </figure>
 {%- endif -%}

tiptapy/templates/extras/document.html

@@ -1,13 +1,13 @@
 {%- set caption = node.attrs.caption|trim -%}
-{%- set src = node.attrs.src|trim|quote_plus -%}
+{%- set src = node.attrs.src|trim -%}
 {%- set size = node.attrs.size|trim -%}
-{%- set fname = node.attrs.name|trim|quote_plus -%}
-{%- set ext = node.attrs.format|trim -%}
+{%- set fname = node.attrs.name|trim -%}
+{%- set ext = node.attrs.format -%}
 {%- if src and size and fname and ext -%}
   {%- set doc_block = get_doc_block(ext, fname, size, src) -%}
   <figure class="file-attachment">
   {%- if caption -%}
-    {{doc_block}}<figcaption>{{escape(caption)}}</figcaption>
+    {{doc_block}}<figcaption>{{caption|escape}}</figcaption>
   {%- else -%}
     {{doc_block}}
   {%- endif -%}

tiptapy/templates/extras/featuredimage.html

@@ -1,18 +1,18 @@
 {%- if node.attrs.src -%}
-  {%- set image_url = node.attrs.src.image|trim|quote_plus -%}
+  {%- set image_url = node.attrs.src.image|trim|escape -%}
   {%- set image_type = url2mime(image_url) -%}
-  {%- set fallback_url = node.attrs.src.fallback|trim|quote_plus -%}
+  {%- set fallback_url = node.attrs.src.fallback|trim|escape -%}
   {%- set fallback_type = url2mime(fallback_url) -%}
 
-  {%- set caption = node.attrs.caption|trim -%}
-  {%- set alt = node.attrs.alt|trim -%}
-  {%- set height = node.attrs.height -%}
-  {%- set width = node.attrs.width -%}
+  {%- set caption = node.attrs.caption|trim|escape -%}
+  {%- set alt = node.attrs.alt|trim|escape -%}
+  {%- set height = node.attrs.height|str|escape -%}
+  {%- set width = node.attrs.width|str|escape -%}
 
   {%- if image_url or fallback_url -%}
     <figure class="featured-image"><picture><source srcset="{{ image_url }}" type="{{ image_type }}"/><source srcset="{{ fallback_url }}" type="{{ fallback_type }}"/><{{ make_img_src(node.attrs) }}/></picture>
     {%- if caption -%}
-      <figcaption>{{ escape(caption) }}</figcaption>
+      <figcaption>{{ caption }}</figcaption>
     {%- endif -%}
     </figure>
   {%- endif -%}

tiptapy/templates/image.html

@@ -1,17 +1,17 @@
 {%- if node.attrs.src -%}
-  {%- set caption = node.attrs.caption|trim -%}
+  {%- set caption = node.attrs.caption|trim|escape -%}
   {%- set alt = node.attrs.alt|trim -%}
   {%- set height = node.attrs.height -%}
   {%- set width = node.attrs.width -%}
-  {%- set image_url = node.attrs.src.image|trim|quote_plus -%}
+  {%- set image_url = node.attrs.src.image|trim|escape -%}
   {%- set image_type = url2mime(image_url) -%}
-  {%- set fallback_url = node.attrs.src.fallback|trim|quote_plus -%}
+  {%- set fallback_url = node.attrs.src.fallback|trim|escape -%}
   {%- set fallback_type = url2mime(fallback_url) -%}
 
   {%- if image_url or fallback_url -%}
     <figure><picture><source srcset="{{ image_url }}" type="{{ image_type }}"/><source srcset="{{ fallback_url }}" type="{{ fallback_type }}"/><{{ make_img_src(node.attrs) }}/></picture>
       {%- if caption -%}
-        <figcaption>{{ escape(caption) }}</figcaption>
+        <figcaption>{{ caption }}</figcaption>
       {%- endif -%}
     </figure>
   {%- endif -%}