From 0052c3c19f63a8708373a469392ad31e2bd6fdae Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 8 Dec 2025 12:41:14 +0100
Subject: [PATCH] fix: only show ElementPopup for content elements, not divs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Filter clicks to only trigger ElementPopup for semantic content
elements (paragraphs, headings, images, lists, tables, etc.).
Clicking on generic divs or structural PagedJS elements now
closes popups instead of opening ElementPopup.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue                     | 34 ++++++++++++++++++++++++++++++++-
 src/components/ElementPopup.vue |  4 ++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ba2b2f1..890f9ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -98,6 +98,29 @@ const clearSelectedPages = () => {
   selectedPages.value = [];
 };
 
+// Content elements that can trigger ElementPopup
+const CONTENT_ELEMENTS = [
+  'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+  'IMG', 'FIGURE', 'FIGCAPTION',
+  'UL', 'OL', 'LI',
+  'BLOCKQUOTE', 'PRE', 'CODE',
+  'TABLE', 'THEAD', 'TBODY', 'TR', 'TH', 'TD',
+  'A', 'SPAN', 'STRONG', 'EM', 'B', 'I', 'U',
+  'ARTICLE', 'SECTION', 'ASIDE', 'HEADER', 'FOOTER', 'NAV'
+];
+
+// Check if element is a content element (or find closest content parent)
+const getContentElement = (element) => {
+  let current = element;
+  while (current && current.tagName !== 'BODY') {
+    if (CONTENT_ELEMENTS.includes(current.tagName)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+
 // Handle click in iframe
 const handleIframeClick = (event) => {
   const element = event.target;
@@ -131,8 +154,17 @@ const handleIframeClick = (event) => {
     return;
   }
 
+  // Only show ElementPopup for content elements, not divs
+  const contentElement = getContentElement(element);
+  if (!contentElement) {
+    clearSelectedPages();
+    elementPopup.value.close();
+    pagePopup.value.close();
+    return;
+  }
+
   clearSelectedPages();
-  elementPopup.value.handleIframeClick(event);
+  elementPopup.value.handleIframeClick(event, contentElement);
   pagePopup.value.close();
 };
 
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index b383d12..9744fcf 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -639,8 +639,8 @@ const close = () => {
   selectedElement.value = null;
 };
 
-const handleIframeClick = (event) => {
-  const element = event.target;
+const handleIframeClick = (event, targetElement = null) => {
+  const element = targetElement || event.target;
 
   if (element.tagName === 'BODY' || element.tagName === 'HTML') {
     close();