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