@marvalt/wparser 0.1.34 → 0.1.35

package/dist/index.esm.js

@@ -1590,16 +1590,41 @@ function getImageUrl(block) {
     return null;
 }
 /**
- * Extract image attributes (alt, width, height) from block
+ * Extract image attributes (alt, width, height, alignment) from block
  */
 function getImageAttributes(block) {
     const attrs = block.attributes || {};
     const url = getImageUrl(block);
+    // Extract width - can be number or string like "640px"
+    let width;
+    const widthAttr = attrs['width'];
+    if (widthAttr) {
+        if (typeof widthAttr === 'number') {
+            width = widthAttr;
+        }
+        else if (typeof widthAttr === 'string') {
+            // Try to parse number from string like "640px" or "640"
+            const numMatch = widthAttr.match(/^(\d+)/);
+            if (numMatch) {
+                width = parseInt(numMatch[1], 10);
+            }
+            else {
+                // Keep as string if it's not a simple number
+                width = widthAttr;
+            }
+        }
+    }
+    // Extract alignment
+    const align = attrs['align'];
+    const alignValue = align === 'left' || align === 'center' || align === 'right'
+        ? align
+        : undefined;
     return {
         url,
         alt: attrs['alt'] || '',
-        width: attrs['width'] ? Number(attrs['width']) : undefined,
+        width,
         height: attrs['height'] ? Number(attrs['height']) : undefined,
+        align: alignValue,
     };
 }
 /**
@@ -2298,15 +2323,48 @@ const Image = ({ block, context }) => {
     const imageAttrs = getImageAttributes(block);
     if (!imageAttrs.url)
         return null;
+    // Extract width for Cloudflare variant (use numeric value)
+    const numericWidth = typeof imageAttrs.width === 'number'
+        ? imageAttrs.width
+        : (typeof imageAttrs.width === 'string' ? parseInt(imageAttrs.width, 10) || 1024 : 1024);
     // Use Cloudflare variant URL if it's a Cloudflare image
     let imageUrl = imageAttrs.url;
     if (isCloudflareImageUrl(imageUrl)) {
-        const width = imageAttrs.width || 1024;
         const height = imageAttrs.height;
-        imageUrl = getCloudflareVariantUrl(imageUrl, { width, height });
+        imageUrl = getCloudflareVariantUrl(imageUrl, { width: numericWidth, height });
     }
     const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'image', 'my-6');
-    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: buildClassName('w-full h-auto rounded-lg object-cover', spacing), style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
+    // Handle alignment (left, center, right)
+    let alignClass = '';
+    if (imageAttrs.align === 'left') {
+        alignClass = 'mr-auto';
+    }
+    else if (imageAttrs.align === 'center') {
+        alignClass = 'mx-auto';
+    }
+    else if (imageAttrs.align === 'right') {
+        alignClass = 'ml-auto';
+    }
+    // Handle width - if specified, use it; otherwise use w-full
+    let widthClass = 'w-full';
+    let widthStyle = {};
+    if (imageAttrs.width) {
+        if (typeof imageAttrs.width === 'string' && imageAttrs.width.includes('px')) {
+            // Use inline style for pixel values
+            widthStyle.width = imageAttrs.width;
+            widthClass = ''; // Don't use w-full if we have explicit width
+        }
+        else if (typeof imageAttrs.width === 'number') {
+            // Use inline style for numeric pixel values
+            widthStyle.width = `${imageAttrs.width}px`;
+            widthClass = ''; // Don't use w-full if we have explicit width
+        }
+    }
+    // Build image classes - include shadow (app can override via registry)
+    // Default shadow is shadow-md, but app can customize
+    const imageClasses = buildClassName('h-auto rounded-lg object-cover shadow-md', // shadow-md is default, app can override
+    widthClass, alignClass, spacing);
+    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: typeof imageAttrs.width === 'number' ? imageAttrs.width : undefined, height: imageAttrs.height, className: imageClasses, style: { maxWidth: '100%', height: 'auto', ...widthStyle }, loading: "lazy" }));
 };
 const List = ({ block, children, context }) => {
     const attrs = block.attributes || {};