disable: comment out PagePopup and page hover/highlight feature

Keep the code aside for potential re-activation later.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/App.vue

@@ -2,7 +2,7 @@
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
-import PagePopup from './components/PagePopup.vue';
+// import PagePopup from './components/PagePopup.vue'; // DISABLED: page template styling feature
 import PreviewLoader from './components/PreviewLoader.vue';
 import SaveButton from './components/SaveButton.vue';
 import { onMounted, ref, computed, provide } from 'vue';
@@ -19,22 +19,22 @@ const narrativeStore = useNarrativeStore();
 const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
-const pagePopup = ref(null);
+// const pagePopup = ref(null); // DISABLED: page template styling feature
 const activeTab = ref('');
 
 provide('activeTab', activeTab);
 
 // Setup iframe interactions (hover, click, labels)
 const {
-  hoveredPage,
+  // hoveredPage, // DISABLED: page template styling feature
-  selectedPages,
+  // selectedPages, // DISABLED: page template styling feature
   hoveredElement,
   selectedElement,
   handleIframeMouseMove,
   handleIframeClick,
-  handlePagePopupClose,
+  // handlePagePopupClose, // DISABLED: page template styling feature
   handleElementPopupClose,
-} = useIframeInteractions({ elementPopup, pagePopup });
+} = useIframeInteractions({ elementPopup });
 
 // Setup preview renderer with double buffering
 const {
@@ -67,7 +67,7 @@ const {
 } = useKeyboardShortcuts({
   stylesheetStore,
   elementPopup,
-  pagePopup,
+  // pagePopup, // DISABLED: page template styling feature
   activeTab,
   printPreview,
 });
@@ -117,11 +117,13 @@ onMounted(async () => {
     :iframeRef="activeFrame"
     @close="handleElementPopupClose"
   />
+  <!-- DISABLED: page template styling feature
   <PagePopup
     ref="pagePopup"
     :iframeRef="activeFrame"
     @close="handlePagePopupClose"
   />
+  -->
 
   <button class="print-btn" @click="printPreview" :title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`">
     <svg

src/composables/useIframeInteractions.js

@@ -4,13 +4,13 @@ import { ref } from 'vue';
  * Composable for managing interactions with pages and elements in the iframe
  * Handles hover effects, labels, and click events for both pages and content elements
  */
-export function useIframeInteractions({ elementPopup, pagePopup }) {
+export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED: page template styling feature */ }) {
-  // Page interaction state
+  // DISABLED: page template styling feature
-  const hoveredPage = ref(null);
+  // const hoveredPage = ref(null);
-  const selectedPages = ref([]); // Pages with active border (when popup is open)
+  // const selectedPages = ref([]); // Pages with active border (when popup is open)
   const hoveredElement = ref(null); // Currently hovered content element
   const selectedElement = ref(null); // Selected element (when popup is open)
-  const EDGE_THRESHOLD = 30; // px from edge to trigger hover
+  // const EDGE_THRESHOLD = 30; // px from edge to trigger hover // DISABLED: page template styling feature
 
   // Text elements that can trigger ElementPopup (excluding containers, images, etc.)
   const CONTENT_ELEMENTS = [
@@ -34,6 +34,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
     'FIGCAPTION',
   ];
 
+  /* DISABLED: page template styling feature
   // Check if mouse position is near the edges of a page element
   const isNearPageEdge = (pageElement, mouseX, mouseY) => {
     const rect = pageElement.getBoundingClientRect();
@@ -64,6 +65,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
       (p) => (p.getAttribute('data-page-type') || 'default') === pageType
     );
   };
+  */
 
   // Get selector for element (same logic as ElementPopup)
   const getSelectorFromElement = (element) => {
@@ -117,6 +119,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
     }
   };
 
+  /* DISABLED: page template styling feature
   // Create and position page label on hover
   const createPageLabel = (page) => {
     const doc = page.ownerDocument;
@@ -148,6 +151,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
       label.remove();
     }
   };
+  */
 
   // Check if element is a content element (or find closest content parent)
   const getContentElement = (element) => {
@@ -161,6 +165,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
     return null;
   };
 
+  /* DISABLED: page template styling feature
   // Clear selection highlight from all selected pages
   const clearSelectedPages = () => {
     selectedPages.value.forEach((page) => {
@@ -168,6 +173,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
     });
     selectedPages.value = [];
   };
+  */
 
   // Clear selected element highlight
   const clearSelectedElement = () => {
@@ -188,6 +194,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
 
   // Handle mouse movement in iframe
   const handleIframeMouseMove = (event) => {
+    /* DISABLED: page template styling feature
     const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
     let foundPage = null;
 
@@ -217,44 +224,31 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
 
       hoveredPage.value = foundPage;
     }
+    */
 
-    // If not near page edge, check for content element hover
+    // Check for content element hover
-    if (!foundPage) {
+    const contentElement = getContentElement(event.target);
-      const contentElement = getContentElement(event.target);
+    const doc = event.target.ownerDocument;
-      const doc = event.target.ownerDocument;
 
-      if (contentElement !== hoveredElement.value) {
+    if (contentElement !== hoveredElement.value) {
-        // Remove highlight from previous element (only if not selected)
+      // Remove highlight from previous element (only if not selected)
-        if (
-          hoveredElement.value &&
-          hoveredElement.value !== selectedElement.value
-        ) {
-          hoveredElement.value.classList.remove('element-hovered');
-        }
-
-        // Remove previous labels
-        removeElementLabel(doc);
-        removePageLabel(doc);
-
-        // Add highlight to new element (only if not already selected)
-        if (contentElement && contentElement !== selectedElement.value) {
-          contentElement.classList.add('element-hovered');
-          createElementLabel(contentElement);
-        }
-
-        hoveredElement.value = contentElement;
-      }
-    } else {
-      // Clear element hover when hovering page edge
       if (
         hoveredElement.value &&
         hoveredElement.value !== selectedElement.value
       ) {
         hoveredElement.value.classList.remove('element-hovered');
-        hoveredElement.value = null;
       }
-      // Remove element label when hovering page edge
+
-      removeElementLabel(event.target.ownerDocument);
+      // Remove previous label
+      removeElementLabel(doc);
+
+      // Add highlight to new element (only if not already selected)
+      if (contentElement && contentElement !== selectedElement.value) {
+        contentElement.classList.add('element-hovered');
+        createElementLabel(contentElement);
+      }
+
+      hoveredElement.value = contentElement;
     }
   };
 
@@ -262,6 +256,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
   const handleIframeClick = (event) => {
     const element = event.target;
 
+    /* DISABLED: page template styling feature
     // Check if clicking near a page edge
     if (hoveredPage.value) {
       event.stopPropagation();
@@ -286,35 +281,28 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
       elementPopup.value.close();
       return;
     }
+    */
 
     // Only show popup for elements inside the page template
     const isInsidePage = element.closest('.pagedjs_page');
     if (!isInsidePage) {
-      clearSelectedPages();
       clearSelectedElement();
       elementPopup.value.close();
-      pagePopup.value.close();
       return;
     }
 
     // Only show ElementPopup for content elements, not divs
     const contentElement = getContentElement(element);
     if (!contentElement) {
-      clearSelectedPages();
       clearSelectedElement();
       elementPopup.value.close();
-      pagePopup.value.close();
       return;
     }
 
-    // Clear page selections
-    clearSelectedPages();
-
     // If popup is already open and we're clicking another element, close it
     if (elementPopup.value.visible) {
       clearSelectedElement();
       elementPopup.value.close();
-      pagePopup.value.close();
       return;
     }
 
@@ -332,7 +320,6 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
     // Get document and remove labels when opening popup
     const doc = event.target.ownerDocument;
     removeElementLabel(doc);
-    removePageLabel(doc);
 
     // Select the new element
     selectedElement.value = contentElement;
@@ -342,13 +329,14 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
     const count = getSimilarElementsCount(contentElement, doc);
 
     elementPopup.value.handleIframeClick(event, contentElement, count);
-    pagePopup.value.close();
   };
 
   // Handlers for popup close events
+  /* DISABLED: page template styling feature
   const handlePagePopupClose = () => {
     clearSelectedPages();
   };
+  */
 
   const handleElementPopupClose = () => {
     clearSelectedElement();
@@ -356,17 +344,17 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
 
   return {
     // State
-    hoveredPage,
+    // hoveredPage, // DISABLED: page template styling feature
-    selectedPages,
+    // selectedPages, // DISABLED: page template styling feature
     hoveredElement,
     selectedElement,
     // Handlers
     handleIframeMouseMove,
     handleIframeClick,
-    handlePagePopupClose,
+    // handlePagePopupClose, // DISABLED: page template styling feature
     handleElementPopupClose,
     // Utilities
-    clearSelectedPages,
+    // clearSelectedPages, // DISABLED: page template styling feature
     clearSelectedElement,
   };
 }

src/composables/useKeyboardShortcuts.js

@@ -7,7 +7,7 @@ import { onMounted, onUnmounted } from 'vue';
 export function useKeyboardShortcuts({
   stylesheetStore,
   elementPopup,
-  pagePopup,
+  // pagePopup, // DISABLED: page template styling feature
   activeTab,
   printPreview
 }) {
@@ -22,10 +22,12 @@ export function useKeyboardShortcuts({
         elementPopup.value.close();
         return;
       }
+      /* DISABLED: page template styling feature
       if (pagePopup.value?.visible) {
         pagePopup.value.close();
         return;
       }
+      */
     }
 
     // Backslash key - toggle editor panel