migration wip

lib/html-compat.ts

@@ -113,8 +113,8 @@ function sanitizeHTML(html: string): string {
   // Remove dangerous attributes
   processed = processed.replace(/\s+(href|src)\s*=\s*["']\s*javascript:/gi, '');
   
-  // Remove any remaining WordPress shortcode-like content (e.g., [vc_row...])
-  processed = processed.replace(/\[[^\]]*\]/g, '');
+  // Note: Shortcode removal is handled in processShortcodes function
+  // Don't remove shortcodes here as they need to be processed first
 
   // Allow safe HTML tags
   const allowedTags = [
@@ -170,23 +170,72 @@ function processVcRowShortcodes(html: string): string {
     const bgImage = extractAttribute(attrs, 'bg_image');
     const bgColor = extractAttribute(attrs, 'bg_color');
     const colorOverlay = extractAttribute(attrs, 'color_overlay');
+    const colorOverlay2 = extractAttribute(attrs, 'color_overlay_2');
     const overlayStrength = extractAttribute(attrs, 'overlay_strength');
     const enableGradient = extractAttribute(attrs, 'enable_gradient');
     const gradientDirection = extractAttribute(attrs, 'gradient_direction');
     const topPadding = extractAttribute(attrs, 'top_padding');
     const bottomPadding = extractAttribute(attrs, 'bottom_padding');
     const fullScreen = extractAttribute(attrs, 'full_screen_row_position');
+    const videoBg = extractAttribute(attrs, 'video_bg');
+    const videoMp4 = extractAttribute(attrs, 'video_mp4');
+    const videoWebm = extractAttribute(attrs, 'video_webm');
+    const textAlign = extractAttribute(attrs, 'text_align');
+    const textColor = extractAttribute(attrs, 'text_color');
+    const overflow = extractAttribute(attrs, 'overflow');
+    const equalHeight = extractAttribute(attrs, 'equal_height');
+    const contentPlacement = extractAttribute(attrs, 'content_placement');
+    const columnDirection = extractAttribute(attrs, 'column_direction');
+    const rowBorderRadius = extractAttribute(attrs, 'row_border_radius');
+    const rowBorderRadiusApplies = extractAttribute(attrs, 'row_border_radius_applies');
     
     // Build style string
     let style = '';
     let wrapperClasses = [...classes];
     
+    // Handle text alignment
+    if (textAlign === 'center') wrapperClasses.push('text-center');
+    if (textAlign === 'right') wrapperClasses.push('text-right');
+    if (textAlign === 'left') wrapperClasses.push('text-left');
+    
+    // Handle text color
+    if (textColor === 'light') wrapperClasses.push('text-white');
+    
+    // Handle overflow
+    if (overflow === 'visible') wrapperClasses.push('overflow-visible');
+    
+    // Handle equal height
+    if (equalHeight === 'yes') {
+      wrapperClasses.push('items-stretch');
+      wrapperClasses.push('flex');
+    }
+    
+    // Handle content placement
+    if (contentPlacement === 'bottom') wrapperClasses.push('justify-end');
+    if (contentPlacement === 'middle') wrapperClasses.push('justify-center');
+    
+    // Handle column direction
+    if (columnDirection === 'column') wrapperClasses.push('flex-col');
+    
+    // Handle border radius
+    if (rowBorderRadius === 'none' && rowBorderRadiusApplies === 'bg') {
+      wrapperClasses.push('rounded-none');
+    }
+    
     // Handle background image
     if (bgImage) {
-      style += `background-image: url(/media/${bgImage}.webp); `;
+      // Try to get media by ID first
+      const mediaId = parseInt(bgImage);
+      if (!isNaN(mediaId)) {
+        // This will be handled by ContentRenderer with data attributes
+        wrapperClasses.push('bg-cover', 'bg-center');
+        style += `background-image: url(/media/${bgImage}.webp); `;
+      } else {
+        // Assume it's a direct URL
+        style += `background-image: url(${bgImage}); `;
+      }
       style += `background-size: cover; `;
       style += `background-position: center; `;
-      wrapperClasses.push('bg-cover', 'bg-center');
     }
     
     // Handle background color
@@ -194,21 +243,63 @@ function processVcRowShortcodes(html: string): string {
       style += `background-color: ${bgColor}; `;
     }
     
-    // Handle color overlay
-    if (colorOverlay) {
-      const opacity = overlayStrength ? parseFloat(overlayStrength) : 0.5;
+    // Handle video background
+    if (videoBg === 'use_video' && (videoMp4 || videoWebm)) {
+      // Mark for ContentRenderer to handle
+      wrapperClasses.push('relative', 'overflow-hidden');
+      style += `position: relative; `;
+      
+      // Create video background structure
+      const videoAttrs = [];
+      if (videoMp4) videoAttrs.push(`data-video-mp4="${videoMp4}"`);
+      if (videoWebm) videoAttrs.push(`data-video-webm="${videoWebm}"`);
+      videoAttrs.push('data-video-bg="true"');
+      
+      return `<div class="${wrapperClasses.join(' ')}" style="${style}" ${videoAttrs.join(' ')}>
+        <div class="relative flex flex-wrap -mx-4 w-full h-full">${content}</div>
+      </div>`;
+    }
+    
+    // Handle color overlay (single or gradient)
+    if (colorOverlay || colorOverlay2 || enableGradient === 'true' || enableGradient === '1') {
       style += `position: relative; `;
       wrapperClasses.push('relative');
       
-      // Create overlay div
-      const overlayStyle = `background-color: ${colorOverlay}; opacity: ${opacity};`;
+      let overlayStyle = '';
+      if (colorOverlay2 && enableGradient === 'true') {
+        // Gradient overlay
+        const gradientDir = gradientDirection || 'left_to_right';
+        let gradientCSS = '';
+        switch(gradientDir) {
+          case 'left_to_right':
+            gradientCSS = `linear-gradient(to right, ${colorOverlay}, ${colorOverlay2})`;
+            break;
+          case 'right_to_left':
+            gradientCSS = `linear-gradient(to left, ${colorOverlay}, ${colorOverlay2})`;
+            break;
+          case 'top_to_bottom':
+            gradientCSS = `linear-gradient(to bottom, ${colorOverlay}, ${colorOverlay2})`;
+            break;
+          case 'bottom_to_top':
+            gradientCSS = `linear-gradient(to top, ${colorOverlay}, ${colorOverlay2})`;
+            break;
+          default:
+            gradientCSS = `linear-gradient(to right, ${colorOverlay}, ${colorOverlay2})`;
+        }
+        overlayStyle = `background: ${gradientCSS}; opacity: 0.32;`;
+      } else if (colorOverlay) {
+        // Solid color overlay
+        const opacity = overlayStrength ? parseFloat(overlayStrength) : 0.5;
+        overlayStyle = `background-color: ${colorOverlay}; opacity: ${opacity};`;
+      }
+      
       return `<div class="${wrapperClasses.join(' ')}" style="${style}">
         <div class="absolute inset-0" style="${overlayStyle}"></div>
         <div class="relative flex flex-wrap -mx-4 w-full">${content}</div>
       </div>`;
     }
     
-    // Handle gradient
+    // Handle gradient (without overlay)
     if (enableGradient === 'true' || enableGradient === '1') {
       const gradientClass = getGradientClass(gradientDirection);
       wrapperClasses.push(gradientClass);
@@ -216,9 +307,11 @@ function processVcRowShortcodes(html: string): string {
     
     // Handle padding
     if (topPadding || bottomPadding) {
+      // Convert percentage values to Tailwind arbitrary values
       const pt = topPadding ? `pt-[${topPadding}]` : '';
       const pb = bottomPadding ? `pb-[${bottomPadding}]` : '';
-      wrapperClasses.push(pt, pb);
+      if (pt) wrapperClasses.push(pt);
+      if (pb) wrapperClasses.push(pb);
     }
     
     // Handle full screen