@marvalt/wparser 0.1.34 → 0.1.38

package/dist/index.cjs

@@ -1592,16 +1592,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,
     };
 }
 /**
@@ -1733,7 +1758,17 @@ function extractImageUrl(block) {
  * Extract image attributes (url, alt, width, height)
  */
 function extractImageAttributes(block) {
-    return getImageAttributes(block);
+    const attrs = getImageAttributes(block);
+    // Convert width to number if it's a string
+    const width = typeof attrs.width === 'string'
+        ? (parseInt(attrs.width, 10) || undefined)
+        : attrs.width;
+    return {
+        url: attrs.url,
+        alt: attrs.alt,
+        width,
+        height: attrs.height,
+    };
 }
 /**
  * Extract title/heading text from a block
@@ -2237,16 +2272,63 @@ function getHeadingSpacing(spacingConfig, level) {
     return headingConfig?.h3 || 'mt-6 mb-4';
 }
 const Paragraph = ({ block, context }) => {
-    const content = getBlockTextContent(block);
     const attrs = block.attributes || {};
     const textAlign = getTextAlignClasses(attrs['align']);
     const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'paragraph', 'my-6');
-    // Check if content contains shortcodes
+    // Check if innerHTML contains HTML elements (like links, strong, em, etc.)
+    const hasHTML = block.innerHTML && /<[a-z][\s\S]*>/i.test(block.innerHTML);
+    // If innerHTML contains HTML elements, render it directly (preserves links, formatting, etc.)
+    if (hasHTML && block.innerHTML) {
+        const htmlContent = block.innerHTML;
+        // Check if HTML contains shortcodes
+        const hasShortcodes = /\[(\w+)/.test(htmlContent);
+        if (hasShortcodes && context.registry.shortcodes) {
+            // For HTML with shortcodes, we need to process shortcodes first
+            // Extract text content to process shortcodes, then reconstruct
+            const textContent = getBlockTextContent(block);
+            const parts = renderTextWithShortcodes(textContent, context.registry);
+            // Check if any part is a block-level element (section, div, etc.)
+            const isBlockLevelElement = (element) => {
+                if (!React.isValidElement(element)) {
+                    return false;
+                }
+                const type = element.type;
+                // Check for block-level HTML elements
+                if (typeof type === 'string' && ['section', 'div', 'article', 'header', 'footer', 'aside', 'nav'].includes(type)) {
+                    return true;
+                }
+                // Check if it's React.Fragment - recursively check its children
+                if (type === React.Fragment) {
+                    const fragmentProps = element.props;
+                    const children = React.Children.toArray(fragmentProps.children);
+                    return children.some((child) => isBlockLevelElement(child));
+                }
+                // Check if it's a React component (likely block-level)
+                if (typeof type === 'function' || (typeof type === 'object' && type !== null && type !== React.Fragment)) {
+                    return true;
+                }
+                return false;
+            };
+            const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
+            if (hasBlockLevelContent) {
+                // Render block-level content without <p> wrapper, but add spacing wrapper
+                return jsxRuntimeExports.jsx("div", { className: spacing, children: parts });
+            }
+            // For mixed HTML and shortcodes, render shortcode parts but this is complex
+            // For now, fall back to rendering HTML with shortcodes processed in text
+            // This is a limitation - shortcodes in HTML paragraphs with links won't work perfectly
+            // But links will be preserved
+            return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), dangerouslySetInnerHTML: { __html: htmlContent } });
+        }
+        // No shortcodes, just render HTML directly (preserves links, formatting, etc.)
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), dangerouslySetInnerHTML: { __html: htmlContent } });
+    }
+    // No HTML, use text content (existing logic for shortcodes)
+    const content = getBlockTextContent(block);
     const hasShortcodes = /\[(\w+)/.test(content);
     if (hasShortcodes && context.registry.shortcodes) {
         const parts = renderTextWithShortcodes(content, context.registry);
         // Check if any part is a block-level element (section, div, etc.)
-        // If so, render without wrapping in <p> to avoid DOM nesting violations
         const isBlockLevelElement = (element) => {
             if (!React.isValidElement(element)) {
                 return false;
@@ -2263,7 +2345,6 @@ const Paragraph = ({ block, context }) => {
                 return children.some((child) => isBlockLevelElement(child));
             }
             // Check if it's a React component (likely block-level)
-            // Most custom components render block-level content
             if (typeof type === 'function' || (typeof type === 'object' && type !== null && type !== React.Fragment)) {
                 return true;
             }
@@ -2300,15 +2381,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 || {};