From 3d32ea7c6121a80f4f3e2b41a04942ca8a58d784 Mon Sep 17 00:00:00 2001
From: Michael Buckingham <michael.buckingham74@gmail.com>
Date: Tue, 2 Dec 2025 07:36:44 -0500
Subject: [PATCH] Fix onclick handlers breaking on source names with special
 chars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The |tojson filter outputs JSON with double quotes, which broke HTML
attributes that also use double quotes. Added |e filter to HTML-escape
the quotes to &quot;, allowing names like "Kodiak Area Native Association
(KANA)" to work correctly.

Fixed in:
- configure_source.html (3 showScrapeModal calls)
- partials/generated_scraper.html (1 showScrapeModal call)
- partials/source_list.html (1 openScrapeModal call)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 backend/app/templates/admin/configure_source.html           | 6 +++---
 backend/app/templates/admin/partials/generated_scraper.html | 2 +-
 backend/app/templates/admin/partials/source_list.html       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/app/templates/admin/configure_source.html b/backend/app/templates/admin/configure_source.html
index 7e4ccd4..78aa93e 100644
--- a/backend/app/templates/admin/configure_source.html
+++ b/backend/app/templates/admin/configure_source.html
@@ -35,7 +35,7 @@ <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Configure Source</h
                 hx-post="/admin/sources/{{ source.id }}/scrape"
                 hx-target="#scrape-modal-result"
                 hx-swap="innerHTML"
-                onclick="showScrapeModal({{ source.name|tojson }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})">
+                onclick="showScrapeModal({{ source.name|tojson|e }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
@@ -76,7 +76,7 @@ <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 flex items-c
                 hx-post="/admin/sources/{{ source.id }}/scrape"
                 hx-target="#scrape-modal-result"
                 hx-swap="innerHTML"
-                onclick="showScrapeModal({{ source.name|tojson }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})">
+                onclick="showScrapeModal({{ source.name|tojson|e }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
@@ -120,7 +120,7 @@ <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 flex items-cen
                 hx-post="/admin/sources/{{ source.id }}/scrape"
                 hx-target="#scrape-modal-result"
                 hx-swap="innerHTML"
-                onclick="showScrapeModal({{ source.name|tojson }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})">
+                onclick="showScrapeModal({{ source.name|tojson|e }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
diff --git a/backend/app/templates/admin/partials/generated_scraper.html b/backend/app/templates/admin/partials/generated_scraper.html
index 674b77e..3261473 100644
--- a/backend/app/templates/admin/partials/generated_scraper.html
+++ b/backend/app/templates/admin/partials/generated_scraper.html
@@ -36,7 +36,7 @@ <h3 class="text-lg font-semibold dark:text-white flex items-center gap-2">
                 hx-post="/admin/sources/{{ source.id }}/scrape"
                 hx-target="#scrape-modal-result"
                 hx-swap="innerHTML"
-                onclick="showScrapeModal({{ source.name|tojson }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})"
+                onclick="showScrapeModal({{ source.name|tojson|e }}, {{ 'true' if source.use_playwright or source.use_playwright is none else 'false' }})"
                 class="w-full px-4 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
diff --git a/backend/app/templates/admin/partials/source_list.html b/backend/app/templates/admin/partials/source_list.html
index 1ac1f5d..142b27d 100644
--- a/backend/app/templates/admin/partials/source_list.html
+++ b/backend/app/templates/admin/partials/source_list.html
@@ -197,7 +197,7 @@
                             hx-post="/admin/sources/{{ source.id }}/scrape"
                             hx-target="#scrape-modal-result"
                             hx-swap="innerHTML show:none"
-                            onclick="openScrapeModal('{{ source.name }}')">
+                            onclick="openScrapeModal({{ source.name|tojson|e }})">
                             Scrape
                         </button>
                         {% endif %}