@marvalt/wparser 0.1.14 → 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
@@ -1837,28 +1888,28 @@ const ButtonBlock = ({ block }) => {
 };
 const Cover = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const { url, id, backgroundImage, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
+    const { url, id, backgroundImage, cloudflareUrl, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
     // Get background image URL from various possible sources
-    let bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
-    // 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];
-            }
-        }
+    // 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) || null;
     }
-    // Convert to Cloudflare URL if it's a Cloudflare image, otherwise use as-is
-    if (bgImageUrl && isCloudflareImageUrl(bgImageUrl)) {
-        // Use full width for cover images
-        bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
+    // 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
+    if (bgImageUrl) {
+        if (isCloudflareImageUrl(bgImageUrl)) {
+            // Use full width for cover images
+            bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
+        }
     }
     // Build alignment classes
     const alignClass = getAlignmentClasses(align);
@@ -1885,20 +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)
-    const mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
+    let mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
     // Render children - media-text typically has media as first child, then content
     const childrenArray = React.Children.toArray(children);
-    const mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
+    let mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
         ? childrenArray[mediaBlockIndex]
         : null;
+    // 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' :
@@ -1907,7 +1980,9 @@ const MediaText = ({ block, children, context }) => {
     const stackClass = 'flex-col md:flex-row';
     // Media position determines order
     const isMediaRight = mediaPosition === 'right';
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, 'px-4'), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0'), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', imageFill ? 'w-full md:w-1/2' : 'flex-1', 'space-y-4'), children: contentElements.length > 0 ? contentElements : children })] }) }));
+    // Add section spacing for consistent vertical rhythm
+    const spacingClass = getSectionSpacingClasses();
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, spacingClass, 'px-4'), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0 md:w-1/2'), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', 'md:w-1/2', getContentSpacingClasses()), children: contentElements.length > 0 ? contentElements : children })] }) }));
 };
 const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety
@@ -2179,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 || {};
@@ -2187,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)
@@ -2617,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;
@@ -2641,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;