fix: only show ElementPopup for content elements, not divs

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>
This commit is contained in:
isUnknown 2025-12-08 12:41:14 +01:00
parent 30d1d26d15
commit 0052c3c19f
2 changed files with 35 additions and 3 deletions

View file

@ -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();
};

View file

@ -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();