@marvalt/wparser 0.1.0 → 0.1.4

package/README.md

@@ -57,6 +57,8 @@ const registry = createDefaultRegistry();
 
 ## Supported core blocks (default registry)
 - paragraph, heading, image, list, list-item, group, columns, column, separator, buttons/button, quote, code, preformatted, table (+ row/cell)
+- **cover** - Hero sections with background images, overlays, and inner content
+- **media-text** - Side-by-side media and text layouts with responsive stacking
 
 ## Custom renderers
 Extend or replace mappings:

package/dist/index.cjs

@@ -1397,8 +1397,123 @@ function renderBlock(block, registry, key, options) {
     return jsxRuntimeExports.jsx(React.Fragment, { children: node }, key);
 }
 
-const Paragraph = ({ block }) => {
+/**
+ * Parse shortcode attributes from a string
+ * Supports: [shortcode attr="value" attr2="value2"]
+ */
+function parseShortcodeAttrs(attrString) {
+    if (!attrString || !attrString.trim()) {
+        return {};
+    }
+    const attrs = {};
+    // Match key="value" or key='value' patterns
+    const attrRegex = /(\w+)=["']([^"']+)["']/g;
+    let match;
+    while ((match = attrRegex.exec(attrString)) !== null) {
+        attrs[match[1]] = match[2];
+    }
+    return attrs;
+}
+/**
+ * Find all shortcodes in text
+ * Supports: [shortcode], [shortcode attr="value"], [shortcode]content[/shortcode]
+ */
+function findShortcodes(text) {
+    const shortcodes = [];
+    // First, find closing tag pairs: [shortcode]content[/shortcode]
+    const closingTagRegex = /\[(\w+)(?:\s+([^\]]+))?\](.*?)\[\/\1\]/gs;
+    let match;
+    const processedRanges = [];
+    while ((match = closingTagRegex.exec(text)) !== null) {
+        const name = match[1];
+        const attrString = match[2] || '';
+        const content = match[3] || '';
+        const attrs = parseShortcodeAttrs(attrString);
+        shortcodes.push({
+            name,
+            attrs,
+            content,
+            fullMatch: match[0],
+            startIndex: match.index,
+            endIndex: match.index + match[0].length,
+        });
+        processedRanges.push({
+            start: match.index,
+            end: match.index + match[0].length,
+        });
+    }
+    // Then, find self-closing: [shortcode attr="value"]
+    // Skip ranges already processed by closing tags
+    const selfClosingRegex = /\[(\w+)(?:\s+([^\]]+))?\]/g;
+    let selfClosingMatch;
+    while ((selfClosingMatch = selfClosingRegex.exec(text)) !== null) {
+        // Check if this match is within a processed range
+        const isProcessed = processedRanges.some(range => selfClosingMatch.index >= range.start && selfClosingMatch.index < range.end);
+        if (isProcessed) {
+            continue;
+        }
+        const name = selfClosingMatch[1];
+        const attrString = selfClosingMatch[2] || '';
+        const attrs = parseShortcodeAttrs(attrString);
+        shortcodes.push({
+            name,
+            attrs,
+            fullMatch: selfClosingMatch[0],
+            startIndex: selfClosingMatch.index,
+            endIndex: selfClosingMatch.index + selfClosingMatch[0].length,
+        });
+    }
+    // Sort by start index
+    shortcodes.sort((a, b) => a.startIndex - b.startIndex);
+    return shortcodes;
+}
+/**
+ * Render text with shortcodes replaced by React components
+ */
+function renderTextWithShortcodes(text, registry) {
+    const shortcodes = findShortcodes(text);
+    if (shortcodes.length === 0) {
+        return [text];
+    }
+    const parts = [];
+    let lastIndex = 0;
+    for (const shortcode of shortcodes) {
+        // Add text before shortcode
+        if (shortcode.startIndex > lastIndex) {
+            const textBefore = text.substring(lastIndex, shortcode.startIndex);
+            if (textBefore) {
+                parts.push(textBefore);
+            }
+        }
+        // Render shortcode
+        const renderer = registry.shortcodes[shortcode.name];
+        if (renderer) {
+            parts.push(jsxRuntimeExports.jsx(React.Fragment, { children: renderer(shortcode.attrs, shortcode.content) }, `shortcode-${shortcode.startIndex}`));
+        }
+        else {
+            // Keep original shortcode if no renderer found
+            parts.push(shortcode.fullMatch);
+        }
+        lastIndex = shortcode.endIndex;
+    }
+    // Add remaining text
+    if (lastIndex < text.length) {
+        const remainingText = text.substring(lastIndex);
+        if (remainingText) {
+            parts.push(remainingText);
+        }
+    }
+    return parts;
+}
+
+const Paragraph = ({ block, context }) => {
     const content = getString(block);
+    // Check if content contains shortcodes
+    const hasShortcodes = /\[(\w+)/.test(content);
+    if (hasShortcodes && context.registry.shortcodes) {
+        const parts = renderTextWithShortcodes(content, context.registry);
+        return jsxRuntimeExports.jsx("p", { className: "prose-p", children: parts });
+    }
     return jsxRuntimeExports.jsx("p", { className: "prose-p", children: content });
 };
 const Heading = ({ block, children }) => {
@@ -1437,6 +1552,59 @@ const ButtonBlock = ({ block }) => {
         return null;
     return (jsxRuntimeExports.jsx("a", { href: url, className: "inline-flex items-center rounded-md bg-primary px-4 py-2 text-white", children: text || 'Learn more' }));
 };
+const Cover = ({ block, children }) => {
+    const attrs = block.attributes || {};
+    const { url, backgroundImage, overlayColor, dimRatio = 0, align = 'full', minHeight, hasParallax, } = attrs;
+    // Get background image URL from various possible sources
+    const bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+    // Build alignment classes
+    const alignClass = align === 'full' ? 'w-full' : align === 'wide' ? 'max-w-7xl mx-auto' : '';
+    // Build style object
+    const style = {};
+    if (minHeight) {
+        style.minHeight = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;
+    }
+    if (bgImageUrl) {
+        style.backgroundImage = `url(${bgImageUrl})`;
+        style.backgroundSize = 'cover';
+        style.backgroundPosition = 'center';
+        if (hasParallax) {
+            style.backgroundAttachment = 'fixed';
+        }
+    }
+    // Calculate overlay opacity
+    const overlayOpacity = dimRatio / 100;
+    return (jsxRuntimeExports.jsxs("div", { className: `relative ${alignClass}`, style: style, children: [overlayOpacity > 0 && (jsxRuntimeExports.jsx("span", { className: "absolute inset-0", style: {
+                    backgroundColor: overlayColor || '#000000',
+                    opacity: overlayOpacity,
+                }, "aria-hidden": "true" })), jsxRuntimeExports.jsx("div", { className: "relative z-10 container mx-auto px-4 py-12", children: children })] }));
+};
+const MediaText = ({ block, children, context }) => {
+    const attrs = block.attributes || {};
+    const { mediaPosition = 'left', verticalAlignment = 'center', imageFill = false, align = 'wide', } = 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');
+    // Render children - media-text typically has media as first child, then content
+    const childrenArray = React.Children.toArray(children);
+    const mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
+        ? childrenArray[mediaBlockIndex]
+        : null;
+    // Content is all other children
+    const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
+    // Build alignment classes
+    const alignClass = align === 'full' ? 'w-full' : align === 'wide' ? 'max-w-7xl mx-auto' : 'max-w-6xl mx-auto';
+    // Vertical alignment classes
+    const verticalAlignClass = verticalAlignment === 'top' ? 'items-start' :
+        verticalAlignment === 'bottom' ? 'items-end' :
+            'items-center';
+    // Stack on mobile
+    const stackClass = 'flex-col md:flex-row';
+    // Media position determines order
+    const isMediaRight = mediaPosition === 'right';
+    return (jsxRuntimeExports.jsx("div", { className: `${alignClass} px-4`, children: jsxRuntimeExports.jsxs("div", { className: `flex ${stackClass} ${verticalAlignClass} gap-6`, children: [jsxRuntimeExports.jsx("div", { className: `${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" }) }), jsxRuntimeExports.jsx("div", { className: `${isMediaRight ? 'order-1' : 'order-2'} ${imageFill ? 'w-full md:w-1/2' : 'flex-1'} space-y-4`, children: contentElements.length > 0 ? contentElements : children })] }) }));
+};
 const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety
     return jsxRuntimeExports.jsx("div", { "data-unknown-block": block.name, children: children });
@@ -1460,9 +1628,20 @@ function createDefaultRegistry() {
         'core/table': ({ children }) => jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: jsxRuntimeExports.jsx("table", { className: "table-auto w-full", children: children }) }),
         'core/table-row': ({ children }) => jsxRuntimeExports.jsx("tr", { children: children }),
         'core/table-cell': ({ children }) => jsxRuntimeExports.jsx("td", { className: "border px-3 py-2", children: children }),
+        // Cover block - hero sections with background images
+        'core/cover': Cover,
+        // Media & Text block - side-by-side media and content
+        'core/media-text': MediaText,
+        // HTML block - render innerHTML as-is
+        // Note: Shortcodes in HTML blocks are not parsed (they would need to be in text content)
+        'core/html': ({ block }) => {
+            const html = block.innerHTML || '';
+            return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+        },
     };
     return {
         renderers,
+        shortcodes: {}, // Empty by default - apps extend this
         fallback: Fallback,
     };
 }
@@ -1558,6 +1737,9 @@ exports.WPContent = WPContent;
 exports.WPErrorBoundary = WPErrorBoundary;
 exports.WPPage = WPPage;
 exports.createDefaultRegistry = createDefaultRegistry;
+exports.findShortcodes = findShortcodes;
 exports.parseGutenbergBlocks = parseGutenbergBlocks;
+exports.parseShortcodeAttrs = parseShortcodeAttrs;
 exports.renderNodes = renderNodes;
+exports.renderTextWithShortcodes = renderTextWithShortcodes;
 //# sourceMappingURL=index.cjs.map