add geoformat image

public/assets/css/pagedjs-interface.css

@@ -192,12 +192,14 @@
   font-family: sans-serif;
 }
 
-.block-image.element-hovered {
+.block-image.element-hovered,
+.geoformat-cover-image.element-hovered {
   outline: 2px solid #0d996050 !important;
   cursor: pointer !important;
 }
 
-.block-image.element-selected {
+.block-image.element-selected,
+.geoformat-cover-image.element-selected {
   outline: 2px dashed #0d9960 !important;
 }
 

src/components/ImagePopup.vue

@@ -193,10 +193,13 @@ const saveState = () => {
 
 const handleImageClick = (figure, event) => {
   const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
-  if (!uniqueClass) return;
+  const sel = uniqueClass
+    ? `.${uniqueClass}`
+    : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
+  if (!sel) return;
 
   isUpdatingFromStore = true;
-  selector.value = `.${uniqueClass}`;
+  selector.value = sel;
 
   const stored = elementStates.get(selector.value);
   if (stored) {

src/components/PagedJsWrapper.vue

@@ -33,7 +33,9 @@
         class="geoformat"
         :data-page-type="item.template"
       >
-        <img v-if="item.cover" :src="item.cover" class="cover-image" alt="" />
+        <figure v-if="item.cover" class="geoformat-cover-image">
+          <img :src="item.cover" alt="" />
+        </figure>
         <h2>{{ item.title }}</h2>
         <p v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</p>
         <div v-if="item.tags && item.tags.length" class="tags">
@@ -157,11 +159,17 @@ const getBlockComponent = (type) => {
 }
 
 .narrative-cover .cover-image,
-.geoformat .cover-image {
+.geoformat .geoformat-cover-image {
   max-width: 100%;
   height: auto;
 }
 
+.geoformat .geoformat-cover-image img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
 .narrative-cover h1 {
   margin-top: 1rem;
 }

src/components/editor/ImageSettings.vue

@@ -54,6 +54,7 @@ watch(width, (val) => {
   imageDefaults.width = { value: val.value, unit: val.unit };
   debouncedUpdate(() => {
     updateStyle('.block-image', 'width', `${val.value}${val.unit}`);
+    updateStyle('.geoformat-cover-image', 'width', `${val.value}${val.unit}`);
   });
 }, { deep: true, immediate: true });
 

src/composables/useIframeInteractions.js

@@ -128,7 +128,8 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
     if (existing) existing.remove();
 
     const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
-    if (!uniqueClass) return;
+    const labelText = uniqueClass ? `.${uniqueClass}` : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
+    if (!labelText) return;
 
     const rect = figure.getBoundingClientRect();
     const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
@@ -136,7 +137,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
 
     const label = doc.createElement('div');
     label.className = 'image-hover-label';
-    label.textContent = `.${uniqueClass}`;
+    label.textContent = labelText;
     label.style.top = `${rect.top + scrollTop - 32}px`;
     label.style.left = `${rect.left + scrollLeft}px`;
 
@@ -183,11 +184,12 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
   };
   */
 
-  // Find closest block-image figure ancestor (including self)
+  // Find closest image figure ancestor (block-image or geoformat-cover-image)
   const getImageFigure = (element) => {
     let current = element;
     while (current && current.tagName !== 'BODY') {
-      if (current.tagName === 'FIGURE' && current.classList.contains('block-image')) {
+      if (current.tagName === 'FIGURE' &&
+          (current.classList.contains('block-image') || current.classList.contains('geoformat-cover-image'))) {
         return current;
       }
       current = current.parentElement;

src/stores/stylesheet.js

@@ -261,6 +261,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
 
     // Image defaults
     set('.block-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
+    set('.geoformat-cover-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
 
     // Inline element defaults (em, i, strong, b, a)
     for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) {