@capillarytech/creatives-library 8.0.208 → 8.0.210

package/v2Components/HtmlEditor/utils/simplePerformance.js

@@ -0,0 +1,145 @@
+/**
+ * Simple Performance Optimizations for HTML Editor
+ *
+ * Practical optimizations that improve performance without complexity:
+ * - Memoization
+ * - Debouncing improvements
+ * - Memory cleanup
+ * - Bundle size optimizations
+ */
+
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+
+/**
+ * Enhanced debounce with content-size awareness
+ * Automatically adjusts delays based on content size
+ */
+export const useSmartDebounce = (callback, baseDelay = 300) => {
+  const timeoutRef = useRef(null);
+
+  // Cleanup timeout on unmount to prevent callbacks after component unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return useCallback((value, contentSize = 0) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Adjust delay based on content size, using baseDelay as starting point
+    let delay = baseDelay;
+    if (contentSize > PERFORMANCE_THRESHOLDS.LARGE_CONTENT_DEBOUNCE) {
+      delay = baseDelay * 2;        // Large content: double the base delay
+    } else if (contentSize > PERFORMANCE_THRESHOLDS.MEDIUM_CONTENT_DEBOUNCE) {
+      delay = Math.round(baseDelay * 1.33); // Medium content: increase base delay by 33%
+    } else if (contentSize < PERFORMANCE_THRESHOLDS.SMALL_CONTENT_DEBOUNCE) {
+      delay = Math.max(Math.round(baseDelay * (2/3)), 100); // Small content: reduce to 2/3 of base delay, min 100ms
+    }
+    // For content between SMALL_CONTENT_DEBOUNCE and MEDIUM_CONTENT_DEBOUNCE, use baseDelay as-is
+
+    timeoutRef.current = setTimeout(() => {
+      callback(value);
+    }, delay);
+  }, [callback, baseDelay]);
+};
+
+/**
+ * Memory-optimized component wrapper
+ * Prevents unnecessary re-renders
+ */
+export const withPerformanceOptimization = (Component) => {
+  return React.memo(Component, (prevProps, nextProps) => {
+    // Skip re-render if content hasn't actually changed
+    if (prevProps.content === nextProps.content &&
+        prevProps.variant === nextProps.variant &&
+        prevProps.readOnly === nextProps.readOnly) {
+      return true;
+    }
+    return false;
+  });
+};
+
+/**
+ * Cleanup utility for preventing memory leaks
+ * Uses ref-based stabilization so callers don't need to memoize the cleanup function
+ */
+export const useCleanup = (cleanupFn) => {
+  const cleanupRef = useRef(cleanupFn);
+
+  // Update ref on every render to capture latest cleanup function
+  cleanupRef.current = cleanupFn;
+
+  useEffect(() => {
+    // Return a stable cleanup wrapper that reads the latest ref value
+    return () => {
+      if (cleanupRef.current && typeof cleanupRef.current === 'function') {
+        cleanupRef.current();
+      }
+    };
+  }, []); // Empty dependency array - effect only runs once
+};
+
+/**
+ * Content size analyzer for performance decisions
+ */
+export const analyzeContentSize = (content) => {
+  const size = typeof content === 'string' ? content.length : 0;
+
+  return {
+    size,
+    isSmall: size < PERFORMANCE_THRESHOLDS.SMALL_CONTENT_ANALYSIS,    // < 10KB
+    isMedium: size < PERFORMANCE_THRESHOLDS.LARGE_CONTENT_ANALYSIS,   // < 50KB
+    isLarge: size >= PERFORMANCE_THRESHOLDS.LARGE_CONTENT_ANALYSIS,   // >= 50KB
+    shouldOptimize: size > PERFORMANCE_THRESHOLDS.SMALL_CONTENT_ANALYSIS,
+    recommendedDebounce: size > PERFORMANCE_THRESHOLDS.LARGE_CONTENT_ANALYSIS ?
+      PERFORMANCE_THRESHOLDS.DEBOUNCE_SLOW :
+      size > PERFORMANCE_THRESHOLDS.SMALL_CONTENT_ANALYSIS ?
+        400 :
+        PERFORMANCE_THRESHOLDS.DEBOUNCE_FAST
+  };
+};
+
+/**
+ * Simple virtualization for very large content
+ * Only renders visible portions
+ */
+export const useVirtualization = (content, threshold = 100000) => {
+  return useMemo(() => {
+    // Handle non-string content gracefully
+    if (!content || typeof content !== 'string' || content.length < threshold) {
+      return { content, isVirtualized: false };
+    }
+
+    // For very large content, show first 50KB with indicator
+    const truncated = content.substring(0, 50000);
+    return {
+      content: truncated + '\n\n<!-- Content truncated for performance -->',
+      isVirtualized: true,
+      originalSize: content.length
+    };
+  }, [content, threshold]);
+};
+
+/**
+ * Performance constants
+ */
+export const PERFORMANCE_THRESHOLDS = {
+  // Content size thresholds for debouncing (useSmartDebounce)
+  SMALL_CONTENT_DEBOUNCE: 1000,    // 1KB - threshold for fast debouncing
+  MEDIUM_CONTENT_DEBOUNCE: 10000,  // 10KB - threshold for medium debouncing
+  LARGE_CONTENT_DEBOUNCE: 50000,   // 50KB - threshold for slow debouncing
+
+  // Content size thresholds for analysis (analyzeContentSize)
+  SMALL_CONTENT_ANALYSIS: 10000,   // 10KB - for general content analysis
+  LARGE_CONTENT_ANALYSIS: 50000,   // 50KB - for general content analysis
+  HUGE_CONTENT: 100000,            // 100KB - for virtualization
+
+  DEBOUNCE_FAST: 200,
+  DEBOUNCE_NORMAL: 300,
+  DEBOUNCE_SLOW: 600
+};

package/v2Components/HtmlEditor/utils/validationAdapter.js

@@ -0,0 +1,130 @@
+/**
+ * ValidationAdapter - Transforms HTML Editor validation data to ErrorInfoNote format
+ *
+ * This adapter converts validation results from the HTML Editor's validation system
+ * into the format expected by the existing ErrorInfoNote component.
+ */
+
+// Validation source constants
+const VALIDATION_SOURCES = {
+  LIQUID: 'liquid-validator',
+  HTMLHINT: 'htmlhint',
+  CSS_VALIDATOR: 'css-validator',
+  CUSTOM: 'custom',
+  SECURITY: 'security',
+  SANITIZER: 'sanitizer',
+  EMAIL_SPECIFIC: 'email-specific',
+  INAPP_SPECIFIC: 'inapp-specific',
+  EMAIL_COMPATIBILITY: 'email-compatibility',
+  MOBILE_OPTIMIZATION: 'mobile-optimization'
+};
+
+/**
+ * Transform validation results to ErrorInfoNote format
+ * @param {Object} validation - Validation results from useValidation hook
+ * @param {string} variant - Editor variant ('email' or 'inapp')
+ * @returns {Object} ErrorInfoNote compatible format
+ */
+export const transformValidationToErrorInfo = (validation, variant = 'email') => {
+  if (!validation || validation.isValidating) {
+    return { errorMessages: { LIQUID_ERROR_MSG: [], STANDARD_ERROR_MSG: [] } };
+  }
+
+  const allIssues = validation.getAllIssues();
+
+  // Separate liquid and standard errors
+  const liquidErrors = allIssues.filter(issue =>
+    issue.source === VALIDATION_SOURCES.LIQUID ||
+    issue.rule?.includes('liquid') ||
+    issue.message?.toLowerCase().includes('liquid')
+  );
+
+  const standardErrors = allIssues.filter(issue =>
+    issue.source !== VALIDATION_SOURCES.LIQUID &&
+    !issue.rule?.includes('liquid') &&
+    !issue.message?.toLowerCase().includes('liquid')
+  );
+
+  // Format errors for ErrorInfoNote
+  const formatErrors = (errors) =>
+    errors.map(error => {
+      let message = error.message;
+
+      // Add line/column info if available
+      if (error.line) {
+        message += ` Line ${error.line}`;
+        if (error.column) {
+          message += `, Char ${error.column}`;
+        }
+        message += '.';
+      }
+
+      // Add rule info if available
+      if (error.rule) {
+        message += ` • ${error.rule}`;
+      }
+
+      return message;
+    });
+
+  // Handle InApp variant with platform-specific errors (if needed in future)
+  if (variant === 'inapp') {
+    // For now, treat as generic errors
+    // Could be extended to support Android/iOS specific validation
+    return {
+      errorMessages: {
+        LIQUID_ERROR_MSG: formatErrors(liquidErrors),
+        STANDARD_ERROR_MSG: formatErrors(standardErrors)
+      }
+    };
+  }
+
+  // Email variant - generic errors
+  return {
+    errorMessages: {
+      LIQUID_ERROR_MSG: formatErrors(liquidErrors),
+      STANDARD_ERROR_MSG: formatErrors(standardErrors)
+    }
+  };
+};
+
+/**
+ * Check if there are any validation errors to display
+ * @param {Object} validation - Validation results
+ * @returns {boolean} True if there are errors to show
+ */
+export const hasValidationErrors = (validation) => {
+  if (!validation || validation.isValidating) {
+    return false;
+  }
+
+  const allIssues = validation.getAllIssues();
+  return allIssues.length > 0;
+};
+
+/**
+ * Get validation summary for display
+ * @param {Object} validation - Validation results
+ * @returns {Object} Summary with counts
+ */
+export const getValidationSummary = (validation) => {
+  if (!validation) {
+    return { totalErrors: 0, totalWarnings: 0, hasLiquidErrors: false };
+  }
+
+  const allIssues = validation.getAllIssues();
+  const errors = allIssues.filter(issue => issue.severity === 'error');
+  const warnings = allIssues.filter(issue => issue.severity === 'warning');
+  const liquidErrors = allIssues.filter(issue =>
+    issue.source === VALIDATION_SOURCES.LIQUID ||
+    issue.rule?.includes('liquid') ||
+    issue.message?.toLowerCase().includes('liquid')
+  );
+
+  return {
+    totalErrors: errors.length,
+    totalWarnings: warnings.length,
+    hasLiquidErrors: liquidErrors.length > 0,
+    totalIssues: allIssues.length
+  };
+};

package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js

@@ -0,0 +1,200 @@
+/**
+ * HTMLEditor Testing Integration
+ *
+ * Console-controlled testing component for HTMLEditor integration
+ * Can be toggled on/off without affecting existing EmailWrapper functionality
+ */
+
+import React, { useState, useEffect } from 'react';
+import { IntlProvider } from 'react-intl';
+import HTMLEditor from '../../../v2Components/HtmlEditor';
+import { HTML_EDITOR_VARIANTS } from '../../../v2Components/HtmlEditor/constants';
+import { LAYOUT_TYPES } from '../../../v2Components/HtmlEditor/components/InAppPreviewPane/constants';
+
+const HTMLEditorTesting = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [variant, setVariant] = useState(HTML_EDITOR_VARIANTS.EMAIL);
+  const [layoutType, setLayoutType] = useState(LAYOUT_TYPES.MODAL);
+  const [content, setContent] = useState('<h1>Test HTML Editor</h1><p>This is a test integration.</p>');
+
+  // Expose console methods
+  useEffect(() => {
+    // Create global testing interface
+    window.htmlEditorTest = {
+      // Show/Hide editor
+      show: () => {
+        setIsVisible(true);
+        console.log('✅ HTMLEditor test mode activated');
+      },
+
+      hide: () => {
+        setIsVisible(false);
+        console.log('✅ HTMLEditor test mode deactivated');
+      },
+
+      toggle: () => {
+        setIsVisible(prev => !prev);
+        console.log(`✅ HTMLEditor test mode ${!isVisible ? 'activated' : 'deactivated'}`);
+      },
+
+      // Variant control
+      setVariant: (newVariant) => {
+        if (['email', 'inapp'].includes(newVariant)) {
+          setVariant(newVariant);
+          console.log(`✅ Variant set to: ${newVariant}`);
+        } else {
+          console.error('❌ Invalid variant. Use: "email" or "inapp"');
+        }
+      },
+
+      // Layout control (for InApp variant)
+      setLayout: (layout) => {
+        const validLayouts = Object.values(LAYOUT_TYPES);
+        if (validLayouts.includes(layout)) {
+          setLayoutType(layout);
+          console.log(`✅ Layout set to: ${layout}`);
+        } else {
+          console.error(`❌ Invalid layout. Use: ${validLayouts.join(', ')}`);
+        }
+      },
+
+      // Content control
+      setContent: (newContent) => {
+        setContent(newContent);
+        console.log('✅ Content updated');
+      },
+
+      getContent: () => {
+        console.log('Current content:', content);
+        return content;
+      },
+
+      // Status
+      status: () => {
+        console.log('📊 HTMLEditor Test Status:');
+        console.log(`  Visible: ${isVisible}`);
+        console.log(`  Variant: ${variant}`);
+        console.log(`  Layout: ${layoutType}`);
+        console.log(`  Content size: ${content.length} chars`);
+      },
+
+      // Help
+      help: () => {
+        console.log(`
+🚀 HTMLEditor Testing Console Commands:
+
+📱 Basic Controls:
+  htmlEditorTest.show()           - Show the editor
+  htmlEditorTest.hide()           - Hide the editor
+  htmlEditorTest.toggle()         - Toggle editor visibility
+
+⚙️ Configuration:
+  htmlEditorTest.setVariant('email')     - Set to email variant
+  htmlEditorTest.setVariant('inapp')     - Set to inapp variant
+  htmlEditorTest.setLayout('POPUP')      - Set layout (inapp only)
+                                      - Valid: POPUP, HEADER, FOOTER, FULLSCREEN
+
+📝 Content:
+  htmlEditorTest.setContent('<h1>Test</h1>')  - Set editor content
+  htmlEditorTest.getContent()                  - Get current content
+
+📊 Status:
+  htmlEditorTest.status()         - Show current status
+  htmlEditorTest.help()           - Show this help
+
+💡 Example Usage:
+  htmlEditorTest.show()
+  htmlEditorTest.setVariant('inapp')
+  htmlEditorTest.setLayout('HEADER')      // Top banner
+  htmlEditorTest.setLayout('FOOTER')      // Bottom banner
+        `);
+      }
+    };
+
+    // Show help on first load
+    console.log('🚀 HTMLEditor Testing Ready! Type htmlEditorTest.help() for commands');
+
+    // Cleanup on unmount
+    return () => {
+      if (window.htmlEditorTest) {
+        delete window.htmlEditorTest;
+      }
+    };
+  }, [isVisible, content, variant, layoutType]);
+
+  // Don't render anything if not visible
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      zIndex: 9999,
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '20px'
+    }}>
+      {/* Header */}
+      <div style={{
+        backgroundColor: '#fff',
+        padding: '10px 20px',
+        borderRadius: '8px 8px 0 0',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderBottom: '1px solid #ddd'
+      }}>
+        <div>
+          <strong>HTMLEditor Testing Mode</strong>
+          <span style={{ marginLeft: '20px', color: '#666' }}>
+            Variant: {variant} | Layout: {layoutType}
+          </span>
+        </div>
+        <button
+          onClick={() => setIsVisible(false)}
+          style={{
+            background: '#ff4d4f',
+            color: 'white',
+            border: 'none',
+            padding: '5px 15px',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+        >
+          Close
+        </button>
+      </div>
+
+      {/* Editor Container */}
+      <div style={{
+        flex: 1,
+        backgroundColor: '#fff',
+        borderRadius: '0 0 8px 8px',
+        overflow: 'hidden'
+      }}>
+        <IntlProvider locale="en" messages={{}}>
+          <HTMLEditor
+            variant={variant}
+            layoutType={layoutType}
+            initialContent={content}
+            onContentChange={(newContent) => {
+              setContent(newContent);
+              console.log('📝 Content changed:', newContent.substring(0, 100) + '...');
+            }}
+            onSave={(savedContent) => {
+              console.log('💾 Content saved:', savedContent);
+            }}
+          />
+        </IntlProvider>
+      </div>
+    </div>
+  );
+};
+
+export default HTMLEditorTesting;