@capillarytech/creatives-library 8.0.259 → 8.0.260-alpha.0

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -1,16 +1,11 @@
 /**
  * Validation Hook for HTML Editor
- * Manages real-time validation and error display.
- * UI gating: only Rule Group #1 (Input & Sanitization) blocks Save/Update/Preview/Test.
- * All other rules are warnings for backward compatibility with CKEditor legacy templates.
+ * Manages real-time validation and error display
  */
 
-import {
-  useState, useEffect, useCallback, useRef,
-} from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { validateHTML, extractAndValidateCSS } from '../utils/htmlValidator';
 import { sanitizeHTML, isContentSafe, findUnsafeContent } from '../utils/contentSanitizer';
-import { BLOCKING_ERROR_RULE_IDS } from '../constants';
 
 /**
  * Custom hook for managing HTML/CSS validation
@@ -21,46 +16,12 @@ import { BLOCKING_ERROR_RULE_IDS } from '../constants';
  * @param {Function} formatValidatorMessage - Message formatter function for validator internationalization
  * @returns {Object} Validation state and methods
  */
-/**
- * Get line number for a character position in text
- */
-const getLineNumberFromPosition = (text, position) => {
-  if (position === undefined || position < 0) return 1;
-  return text.substring(0, position).split('\n').length;
-};
-
-/**
- * Find line number for a tag or pattern in content
- * Used for API errors to locate where the error occurs
- */
-const findLineNumberForTag = (content, tagName) => {
-  if (!content || !tagName) return null;
-
-  // Try to find the tag in the content
-  // Look for patterns like {{ tagName }}, {{tagName}}, etc.
-  const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  const patterns = [
-    new RegExp(`\\{\\{\\s*${escapedTagName}\\s*\\}\\}`, 'g'),
-    new RegExp(`\\{%[^%]*${escapedTagName}[^%]*%\\}`, 'g'),
-  ];
-
-  for (const pattern of patterns) {
-    const match = pattern.exec(content);
-    if (match) {
-      return getLineNumberFromPosition(content, match.index);
-    }
-  }
-
-  return null;
-};
-
 export const useValidation = (content, variant = 'email', options = {}, formatSanitizerMessage = null, formatValidatorMessage = null) => {
   const {
     enableRealTime = true,
     debounceMs = 500,
     enableSanitization = true,
-    securityLevel = 'standard',
-    apiValidationErrors = null, // API validation errors from validateLiquidTemplateContent
+    securityLevel = 'standard'
   } = options;
 
   // Validation state
@@ -81,8 +42,8 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       totalErrors: 0,
       totalWarnings: 0,
       totalInfo: 0,
-      hasSecurityIssues: false,
-    },
+      hasSecurityIssues: false
+    }
   });
 
   // Refs for debouncing
@@ -94,7 +55,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
    */
   const performValidation = useCallback(async (htmlContent) => {
     if (!htmlContent) {
-      setValidationState((prev) => ({
+      setValidationState(prev => ({
         ...prev,
         isValidating: false,
         htmlErrors: [],
@@ -111,13 +72,13 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
           totalErrors: 0,
           totalWarnings: 0,
           totalInfo: 0,
-          hasSecurityIssues: false,
-        },
+          hasSecurityIssues: false
+        }
       }));
       return;
     }
 
-    setValidationState((prev) => ({ ...prev, isValidating: true }));
+    setValidationState(prev => ({ ...prev, isValidating: true }));
 
     try {
       // 1. HTML Validation
@@ -130,21 +91,15 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       const isSecure = isContentSafe(htmlContent);
       const securityIssues = isSecure ? [] : findUnsafeContent(htmlContent);
 
-      // 4. Sanitization (if enabled) – Rule Group #1 issues come from here
+      // 4. Sanitization (if enabled)
       let sanitizationResult = null;
       if (enableSanitization) {
         sanitizationResult = sanitizeHTML(htmlContent, variant, securityLevel, formatSanitizerMessage);
       }
 
-      const sanitizationWarnings = sanitizationResult?.warnings || [];
-      const blockingSanitizerCount = sanitizationWarnings.filter((w) => BLOCKING_ERROR_RULE_IDS.includes(w.rule)).length;
-      const protocolSecurityCount = (securityIssues || []).filter((s) => ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'].includes(s?.type)).length;
-
-      // Summary: totalErrors/totalWarnings are for display; blocking count is for gating
-      const totalErrors = htmlValidation.errors.length + cssValidation.errors.length + blockingSanitizerCount + protocolSecurityCount;
-      const totalWarnings = htmlValidation.warnings.length + cssValidation.warnings.length
-        + (sanitizationWarnings.length - blockingSanitizerCount)
-        + (securityIssues.length - protocolSecurityCount);
+      // Calculate summary
+      const totalErrors = htmlValidation.errors.length + cssValidation.errors.length;
+      const totalWarnings = htmlValidation.warnings.length + cssValidation.warnings.length;
       const totalInfo = htmlValidation.info.length + cssValidation.info.length;
       const hasSecurityIssues = securityIssues.length > 0;
 
@@ -159,19 +114,20 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         cssWarnings: cssValidation.warnings,
         cssInfo: cssValidation.info,
         securityIssues,
-        sanitizationWarnings,
+        sanitizationWarnings: sanitizationResult?.warnings || [],
         isValid: htmlValidation.isValid && cssValidation.isValid,
         isSecure,
         summary: {
           totalErrors,
           totalWarnings,
           totalInfo,
-          hasSecurityIssues,
-        },
+          hasSecurityIssues
+        }
       });
+
     } catch (error) {
       console.error('Validation error:', error);
-      setValidationState((prev) => ({
+      setValidationState(prev => ({
         ...prev,
         isValidating: false,
         htmlErrors: [{
@@ -181,13 +137,13 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
           column: 1,
           rule: 'validation-error',
           severity: 'error',
-          source: 'validator',
+          source: 'validator'
         }],
         isValid: false,
         summary: {
           ...prev.summary,
-          totalErrors: 1,
-        },
+          totalErrors: 1
+        }
       }));
     }
   }, [variant, enableSanitization, securityLevel, formatSanitizerMessage, formatValidatorMessage]);
@@ -252,8 +208,8 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         totalErrors: 0,
         totalWarnings: 0,
         totalInfo: 0,
-        hasSecurityIssues: false,
-      },
+        hasSecurityIssues: false
+      }
     });
   }, []);
 
@@ -267,10 +223,10 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       ...validationState.htmlInfo,
       ...validationState.cssErrors,
       ...validationState.cssWarnings,
-      ...validationState.cssInfo,
+      ...validationState.cssInfo
     ];
 
-    return allErrors.filter((error) => error.severity === severity);
+    return allErrors.filter(error => error.severity === severity);
   }, [validationState]);
 
   /**
@@ -283,111 +239,32 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       ...validationState.htmlInfo,
       ...validationState.cssErrors,
       ...validationState.cssWarnings,
-      ...validationState.cssInfo,
+      ...validationState.cssInfo
     ];
 
-    return allErrors.filter((error) => error.source === source);
+    return allErrors.filter(error => error.source === source);
   }, [validationState]);
 
-  /**
-   * Extract line number from error message if present
-   * API errors might contain line numbers in messages like "Error at line 5" or "Line 10: error"
-   * Also tries to find line number by searching for the problematic tag in content
-   */
-  const extractLineNumberFromMessage = useCallback((message) => {
-    if (!message || typeof message !== 'string') {
-      return null;
-    }
-    // Try to match patterns like "line 5", "Line 10", "at line 15", "line: 20", etc.
-    const lineMatch = message.match(/\b(?:line|Line|LINE)\s*:?\s*(\d+)\b/i);
-    if (lineMatch && lineMatch[1]) {
-      return parseInt(lineMatch[1], 10);
-    }
-
-    // Try to extract tag name from error message (e.g., "Unsupported tags: test" -> "test")
-    const tagMatch = message.match(/(?:tag|tags|Tag|Tags)[\s:]+([a-zA-Z_][a-zA-Z0-9_.]*)/i);
-    if (tagMatch && tagMatch[1] && content) {
-      const tagName = tagMatch[1];
-      const lineNumber = findLineNumberForTag(content, tagName);
-      if (lineNumber) {
-        return lineNumber;
-      }
-    }
-
-    return null;
-  }, [content]);
-
   /**
    * Get all errors and warnings combined
-   * Includes both client-side validation errors and API validation errors
    */
   const getAllIssues = useCallback(() => {
-    // API errors (liquid + standard) are blocking – they block Save/Update/Preview/Test
-    const apiLiquidErrors = (apiValidationErrors?.liquidErrors || []).map((errorMessage) => {
-      const extractedLine = extractLineNumberFromMessage(errorMessage);
-      return {
-        type: 'error',
-        message: errorMessage,
-        line: extractedLine,
-        column: null,
-        rule: 'liquid-api-validation',
-        severity: 'error',
-        source: 'liquid-validator',
-      };
-    });
-
-    const apiStandardErrors = (apiValidationErrors?.standardErrors || []).map((errorMessage) => {
-      const extractedLine = extractLineNumberFromMessage(errorMessage);
-      return {
+    return [
+      ...validationState.htmlErrors,
+      ...validationState.htmlWarnings,
+      ...validationState.htmlInfo,
+      ...validationState.cssErrors,
+      ...validationState.cssWarnings,
+      ...validationState.cssInfo,
+      ...validationState.securityIssues.map(issue => ({
         type: 'error',
-        message: errorMessage,
-        line: extractedLine,
-        column: null,
-        rule: 'standard-api-validation',
-        severity: 'error',
-        source: 'api-validator',
-      };
-    });
-
-    // Security: protocol types are Rule Group #1 (blocking); others are warnings
-    const PROTOCOL_TYPES = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
-    const securityAsIssues = (validationState.securityIssues || []).map((issue) => {
-      const isBlocking = PROTOCOL_TYPES.includes(issue?.type);
-      return {
-        type: isBlocking ? 'error' : 'warning',
         message: `Security issue: ${issue.type}`,
         line: 1,
         column: 1,
-        rule: isBlocking ? 'sanitizer.dangerousProtocolDetected' : 'security-violation',
-        severity: isBlocking ? 'error' : 'warning',
-        source: 'security',
-      };
-    });
-
-    // Sanitization warnings (Rule Group #1 entries have rule set by contentSanitizer)
-    const sanitizationAsIssues = (validationState.sanitizationWarnings || []).map((w) => {
-      const sev = BLOCKING_ERROR_RULE_IDS.includes(w.rule) ? 'error' : 'warning';
-      return {
-        ...w,
-        severity: sev,
-        rule: w.rule || 'sanitizer.unknown',
-        line: w.line ?? 1,
-        column: w.column ?? 1,
-        source: w.source || 'sanitizer',
-      };
-    });
-
-    const allIssues = [
-      ...(validationState.htmlErrors || []),
-      ...(validationState.htmlWarnings || []),
-      ...(validationState.htmlInfo || []),
-      ...(validationState.cssErrors || []),
-      ...(validationState.cssWarnings || []),
-      ...(validationState.cssInfo || []),
-      ...securityAsIssues,
-      ...sanitizationAsIssues,
-      ...apiLiquidErrors,
-      ...apiStandardErrors,
+        rule: 'security-violation',
+        severity: 'error',
+        source: 'security'
+      }))
     ].sort((a, b) => {
       // Sort by severity (error > warning > info) then by line number
       const severityOrder = { error: 0, warning: 1, info: 2 };
@@ -396,22 +273,16 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       }
       return (a.line || 0) - (b.line || 0);
     });
-
-    // Ensure we always return an array
-    return Array.isArray(allIssues) ? allIssues : [];
-  }, [validationState, apiValidationErrors, extractLineNumberFromMessage]);
+  }, [validationState]);
 
   /**
    * Check if validation is clean (no errors or warnings)
-   * Includes API validation errors in the check
    */
   const isClean = useCallback(() => {
-    const hasApiErrors = (apiValidationErrors?.liquidErrors?.length || 0) + (apiValidationErrors?.standardErrors?.length || 0) > 0;
-    return validationState.summary.totalErrors === 0
-           && validationState.summary.totalWarnings === 0
-           && !validationState.summary.hasSecurityIssues
-           && !hasApiErrors;
-  }, [validationState.summary, apiValidationErrors]);
+    return validationState.summary.totalErrors === 0 &&
+           validationState.summary.totalWarnings === 0 &&
+           !validationState.summary.hasSecurityIssues;
+  }, [validationState.summary]);
 
   // Effect to validate content when it changes
   useEffect(() => {
@@ -421,19 +292,14 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
   }, [content, validateContent, enableRealTime]);
 
   // Cleanup on unmount
-  useEffect(() => () => {
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
   }, []);
 
-  const hasApiErrors = (apiValidationErrors?.liquidErrors?.length || 0) + (apiValidationErrors?.standardErrors?.length || 0) > 0;
-
-  const protocolTypes = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
-  // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === 'liquid-validator' && e.severity === 'error');
-  const hasBlockingErrors = (validationState.sanitizationWarnings || []).some((w) => BLOCKING_ERROR_RULE_IDS.includes(w.rule)) || (validationState.securityIssues || []).some((s) => protocolTypes.includes(s?.type)) || hasApiErrors || hasClientSideLiquidErrors;
-
   return {
     // Validation state
     ...validationState,
@@ -450,12 +316,10 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     isClean,
 
     // Computed properties
-    hasErrors: validationState.summary.totalErrors > 0 || hasApiErrors,
+    hasErrors: validationState.summary.totalErrors > 0,
     hasWarnings: validationState.summary.totalWarnings > 0,
-    hasSecurityIssues: validationState.summary.hasSecurityIssues,
-    /** True only when Rule Group #1 (Input & Sanitization) issues exist. Use for UI gating. */
-    hasBlockingErrors,
+    hasSecurityIssues: validationState.summary.hasSecurityIssues
   };
 };
 
-export default useValidation;
+export default useValidation;

package/v2Components/HtmlEditor/index.js

@@ -26,4 +26,4 @@ export { HTML_EDITOR_VARIANTS, DEVICE_TYPES } from './constants';
  * - Default export (lazy): ~0KB initial bundle (loads ~400KB when needed)
  * - HTMLEditorSync: ~400KB added to initial bundle
  * - Constants: ~1KB added to initial bundle
- */
+ */