fix: improve safe icon rendering (#80)

EduardoJM · web-flow · commit fc770aac04e6 · 2022-10-25T08:00:54.000-03:00
diff --git a/image_uploader_widget/templates/admin/edit_inline/image_uploader.html b/image_uploader_widget/templates/admin/edit_inline/image_uploader.html
@@ -33,7 +33,7 @@
             {% endfor %}
             <div class="iuw-add-image-btn">
                 {% if inline_admin_formset.formset.add_icon %}
-                    {{ inline_admin_formset.formset.add_icon }}
+                    {{ inline_admin_formset.formset.add_icon|safe }}
                 {% else %}
                     <svg class="add-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" d="M21 15v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm.008-12c.548 0 .992.445.992.993V13h-2V5H4v13.999L14 9l3 3v2.829l-3-3L6.827 19H14v2H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016zM8 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"></path></svg>
                 {% endif %}
@@ -47,7 +47,7 @@
             </div>
             <div class="iuw-empty">
                 {% if inline_admin_formset.formset.empty_icon %}
-                    {{ inline_admin_formset.formset.empty_icon }}
+                    {{ inline_admin_formset.formset.empty_icon|safe }}
                 {% else %}
                     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"></path></svg>
                 {% endif %}
@@ -61,7 +61,7 @@
             </div>
             <div class="iuw-drop-label">
                 {% if inline_admin_formset.formset.drop_icon %}
-                    {{ inline_admin_formset.formset.drop_icon }}
+                    {{ inline_admin_formset.formset.drop_icon|safe }}
                 {% else %}
                     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"></path></svg>
                 {% endif %}
diff --git a/image_uploader_widget/templates/admin/widgets/image_uploader_widget.html b/image_uploader_widget/templates/admin/widgets/image_uploader_widget.html
@@ -5,7 +5,7 @@
     
     <div class="iuw-drop-label">
         {% if custom.drop_icon %}
-            {{ custom.drop_icon }}
+            {{ custom.drop_icon|safe }}
         {% else %}
             <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"></path></svg>
         {% endif %}
@@ -19,7 +19,7 @@
     </div>
     <div class="iuw-empty">
         {% if custom.empty_icon %}
-            {{ custom.empty_icon }}
+            {{ custom.empty_icon|safe }}
         {% else %}
             <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"></path></svg>
         {% endif %}
diff --git a/image_uploader_widget_demo/demo_application/forms.py b/image_uploader_widget_demo/demo_application/forms.py
@@ -14,10 +14,10 @@ class Meta:
         model = CustomWidget
         widgets = {
             'image': ImageUploaderWidget(
-                drop_icon="<drop_icon>",
-                drop_text="<drop_text>",
-                empty_icon="<empty_icon>",
-                empty_text="<empty_text>",
+                drop_icon="@drop_icon@",
+                drop_text="@drop_text@",
+                empty_icon="@empty_icon@",
+                empty_text="@empty_text@",
             ),
         }
         fields = '__all__'
diff --git a/image_uploader_widget_demo/tests/widget_customized.py b/image_uploader_widget_demo/tests/widget_customized.py
@@ -6,7 +6,7 @@ def test_render_custom_icons_and_texts(self):
         form = TestCustomForm()
         text = form.as_p()
 
-        self.assertTrue("&lt;drop_icon&gt;" in text)
-        self.assertTrue("&lt;drop_text&gt;" in text)
-        self.assertTrue("&lt;empty_icon&gt;" in text)
-        self.assertTrue("&lt;empty_text&gt;" in text)
+        self.assertTrue("@drop_icon@" in text)
+        self.assertTrue("@drop_text@" in text)
+        self.assertTrue("@empty_icon@" in text)
+        self.assertTrue("@empty_text@" in text)
