@marvalt/wparser 0.1.15 → 0.1.16

package/dist/index.cjs

@@ -1595,6 +1595,57 @@ function getImageAttributes(block) {
         height: attrs['height'] ? Number(attrs['height']) : undefined,
     };
 }
+/**
+ * Validate if a Cloudflare URL is complete (has image ID)
+ * A complete Cloudflare URL should have format: https://imagedelivery.net/{account}/{image-id}/
+ */
+function isValidCloudflareUrl(url) {
+    if (!url)
+        return false;
+    // Check if it's a Cloudflare URL
+    if (!url.includes('imagedelivery.net'))
+        return false;
+    // A complete URL should have at least 3 path segments: /account/image-id/
+    // Incomplete URLs might end with just /account/ or /account
+    const urlObj = new URL(url);
+    const pathSegments = urlObj.pathname.split('/').filter(Boolean);
+    // Should have at least account hash and image ID (2 segments minimum)
+    // But we also accept URLs that end with / (which means they might be complete)
+    // The issue is URLs like: https://imagedelivery.net/ZFArYcvsK9lQ3btUK-x2rA/
+    // This is incomplete - it's missing the image ID
+    return pathSegments.length >= 2;
+}
+/**
+ * Extract image URL from block with priority:
+ * 1. Valid cloudflareUrl from attributes
+ * 2. Extract from innerHTML (which should be converted by plugin)
+ * 3. Regular URL attributes
+ *
+ * This handles cases where cloudflareUrl might be incomplete
+ */
+function extractImageUrlWithFallback(block) {
+    const attrs = block.attributes || {};
+    // Check for cloudflareUrl first (from WordPress plugin)
+    const cloudflareUrl = attrs['cloudflareUrl'];
+    if (cloudflareUrl && isValidCloudflareUrl(cloudflareUrl)) {
+        return cloudflareUrl;
+    }
+    // Try to extract from innerHTML (should be converted by plugin)
+    if (block.innerHTML) {
+        // Extract img src from innerHTML
+        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
+        if (imgMatch && imgMatch[1]) {
+            return imgMatch[1];
+        }
+        // Try background-image in style attribute
+        const bgMatch = block.innerHTML.match(/background-image:\s*url\(["']?([^"')]+)["']?\)/i);
+        if (bgMatch && bgMatch[1]) {
+            return bgMatch[1];
+        }
+    }
+    // Fall back to regular URL attributes
+    return getImageUrl(block);
+}
 
 /**
  * Style mapping utilities
@@ -1839,36 +1890,26 @@ const Cover = ({ block, children }) => {
     const attrs = block.attributes || {};
     const { url, id, backgroundImage, cloudflareUrl, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
     // Get background image URL from various possible sources
-    // Priority: cloudflareUrl (from plugin) > url > backgroundImage > innerHTML extraction
-    let bgImageUrl = cloudflareUrl;
+    // Use the improved extraction function that handles incomplete cloudflareUrl
+    let bgImageUrl = null;
+    // First, try cloudflareUrl if it's valid
+    if (cloudflareUrl && isValidCloudflareUrl(cloudflareUrl)) {
+        bgImageUrl = cloudflareUrl;
+    }
+    // If not valid or not found, try regular attributes
     if (!bgImageUrl) {
-        bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+        bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url) || null;
     }
-    // If not found in attributes, try to extract from innerHTML
-    if (!bgImageUrl && block.innerHTML) {
-        // Try to extract img src from innerHTML
-        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
-        if (imgMatch && imgMatch[1]) {
-            bgImageUrl = imgMatch[1];
-        }
-        // Try background-image in style attribute
-        if (!bgImageUrl) {
-            const bgMatch = block.innerHTML.match(/background-image:\s*url\(["']?([^"')]+)["']?\)/i);
-            if (bgMatch && bgMatch[1]) {
-                bgImageUrl = bgMatch[1];
-            }
-        }
+    // If still not found, use the fallback extraction (from innerHTML)
+    if (!bgImageUrl) {
+        bgImageUrl = extractImageUrlWithFallback(block);
     }
-    // Convert to Cloudflare URL variant if it's a Cloudflare image, otherwise use as-is
+    // Convert to Cloudflare URL variant if it's a Cloudflare image
     if (bgImageUrl) {
         if (isCloudflareImageUrl(bgImageUrl)) {
             // Use full width for cover images
             bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
         }
-        // If cloudflareUrl was provided, it's already a Cloudflare URL, just add variant
-        else if (cloudflareUrl) {
-            bgImageUrl = getCloudflareVariantUrl(cloudflareUrl, { width: 1920 });
-        }
     }
     // Build alignment classes
     const alignClass = getAlignmentClasses(align);
@@ -1895,44 +1936,42 @@ const Cover = ({ block, children }) => {
 };
 const MediaText = ({ block, children, context }) => {
     const attrs = block.attributes || {};
-    const { mediaPosition = 'left', verticalAlignment = 'center', imageFill = false, align = 'wide', } = attrs;
+    const { mediaPosition = 'left', verticalAlignment = 'center', imageFill = false, align, } = attrs;
     // Access innerBlocks to identify media vs content
     const innerBlocks = block.innerBlocks || [];
     // Find media block (image or video)
     let mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
-    // Check for cloudflareUrl in attributes first (provided by WordPress plugin)
-    const cloudflareUrl = attrs['cloudflareUrl'];
-    // If no media block found, try to extract from innerHTML
-    let imageUrl = null;
-    if (mediaBlockIndex === -1 && block.innerHTML) {
-        // Extract img src from innerHTML
-        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
-        if (imgMatch && imgMatch[1]) {
-            imageUrl = imgMatch[1];
-        }
-    }
     // Render children - media-text typically has media as first child, then content
     const childrenArray = React.Children.toArray(children);
     let mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
         ? childrenArray[mediaBlockIndex]
         : null;
-    // Use cloudflareUrl from attributes if available
-    if (!mediaElement && cloudflareUrl) {
-        const finalImageUrl = getCloudflareVariantUrl(cloudflareUrl, { width: 1024 });
-        mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto rounded-lg object-cover" }));
-    }
-    // If we extracted image URL from innerHTML, render it
-    else if (!mediaElement && imageUrl) {
-        // Convert to Cloudflare URL if applicable
-        const finalImageUrl = isCloudflareImageUrl(imageUrl)
-            ? getCloudflareVariantUrl(imageUrl, { width: 1024 })
-            : imageUrl;
-        mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto rounded-lg object-cover" }));
+    // If no media element from innerBlocks, try to extract image URL
+    if (!mediaElement) {
+        const imageUrl = extractImageUrlWithFallback(block);
+        if (imageUrl) {
+            // Convert to Cloudflare variant if it's a Cloudflare URL
+            const finalImageUrl = isCloudflareImageUrl(imageUrl)
+                ? getCloudflareVariantUrl(imageUrl, { width: 1024 })
+                : imageUrl;
+            mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto rounded-lg object-cover", loading: "lazy" }));
+        }
     }
     // Content is all other children
     const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
-    // Build alignment classes
-    const alignClass = getAlignmentClasses(align) || 'max-w-7xl mx-auto';
+    // Build alignment classes - ensure proper container width
+    // For 'wide', use max-w-7xl; for 'full', use w-full; default to contained
+    let alignClass;
+    if (align === 'full') {
+        alignClass = 'w-full';
+    }
+    else if (align === 'wide') {
+        alignClass = 'max-w-7xl mx-auto';
+    }
+    else {
+        // Default to contained width (not full width)
+        alignClass = 'container mx-auto';
+    }
     // Vertical alignment classes
     const verticalAlignClass = verticalAlignment === 'top' ? 'items-start' :
         verticalAlignment === 'bottom' ? 'items-end' :
@@ -2215,7 +2254,7 @@ class WPErrorBoundary extends React.Component {
 
 /**
  * Extract background image URL from a block
- * Checks various possible sources: url, backgroundImage, innerHTML, featured image
+ * Checks various possible sources: cloudflareUrl, url, backgroundImage, innerHTML, featured image
  */
 function extractBackgroundImage(block, page) {
     const attrs = block.attributes || {};
@@ -2223,34 +2262,17 @@ function extractBackgroundImage(block, page) {
     if (attrs['useFeaturedImage'] === true && page?._embedded?.['wp:featuredmedia']?.[0]?.source_url) {
         return page._embedded['wp:featuredmedia'][0].source_url;
     }
-    // Try various attribute keys
-    let url = attrs['url'] ||
-        attrs['backgroundImage'] ||
-        (typeof attrs['backgroundImage'] === 'object' && attrs['backgroundImage']?.url);
-    if (typeof url === 'string' && url.trim()) {
-        return url.trim();
-    }
-    // Try to extract from innerHTML if not found in attributes
-    if (block.innerHTML) {
-        // Try img src from innerHTML
-        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
-        if (imgMatch && imgMatch[1]) {
-            return imgMatch[1];
-        }
-        // Try background-image in style attribute
-        const bgMatch = block.innerHTML.match(/background-image:\s*url\(["']?([^"')]+)["']?\)/i);
-        if (bgMatch && bgMatch[1]) {
-            return bgMatch[1];
-        }
-    }
-    return null;
+    // Use the improved extraction function that handles incomplete cloudflareUrl
+    // This will check cloudflareUrl first, then innerHTML, then regular attributes
+    return extractImageUrlWithFallback(block);
 }
 /**
  * Extract image URL from a block
  * Returns Cloudflare URL if available, otherwise WordPress URL
  */
 function extractImageUrl(block) {
-    return getImageUrl(block);
+    // Use the improved extraction function that handles incomplete cloudflareUrl
+    return extractImageUrlWithFallback(block);
 }
 /**
  * Extract image attributes (url, alt, width, height)
@@ -2653,6 +2675,7 @@ exports.extractFontSize = extractFontSize;
 exports.extractHeadingLevel = extractHeadingLevel;
 exports.extractImageAttributes = extractImageAttributes;
 exports.extractImageUrl = extractImageUrl;
+exports.extractImageUrlWithFallback = extractImageUrlWithFallback;
 exports.extractMediaPosition = extractMediaPosition;
 exports.extractMinHeight = extractMinHeight;
 exports.extractOverlayColor = extractOverlayColor;
@@ -2677,6 +2700,7 @@ exports.getImageUrl = getImageUrl;
 exports.getSectionSpacingClasses = getSectionSpacingClasses;
 exports.getTextAlignClasses = getTextAlignClasses;
 exports.isCloudflareImageUrl = isCloudflareImageUrl;
+exports.isValidCloudflareUrl = isValidCloudflareUrl;
 exports.matchesPattern = matchesPattern;
 exports.parseContentPosition = parseContentPosition;
 exports.parseGutenbergBlocks = parseGutenbergBlocks;