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

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -1,11 +1,16 @@
 /**
  * Validation Hook for HTML Editor
- * Manages real-time validation and error display
+ * 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.
  */
 
-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
@@ -16,12 +21,46 @@ import { sanitizeHTML, isContentSafe, findUnsafeContent } from '../utils/content
  * @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'
+    securityLevel = 'standard',
+    apiValidationErrors = null, // API validation errors from validateLiquidTemplateContent
   } = options;
 
   // Validation state
@@ -42,8 +81,8 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       totalErrors: 0,
       totalWarnings: 0,
       totalInfo: 0,
-      hasSecurityIssues: false
-    }
+      hasSecurityIssues: false,
+    },
   });
 
   // Refs for debouncing
@@ -55,7 +94,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
    */
   const performValidation = useCallback(async (htmlContent) => {
     if (!htmlContent) {
-      setValidationState(prev => ({
+      setValidationState((prev) => ({
         ...prev,
         isValidating: false,
         htmlErrors: [],
@@ -72,13 +111,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
@@ -91,15 +130,21 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       const isSecure = isContentSafe(htmlContent);
       const securityIssues = isSecure ? [] : findUnsafeContent(htmlContent);
 
-      // 4. Sanitization (if enabled)
+      // 4. Sanitization (if enabled) – Rule Group #1 issues come from here
       let sanitizationResult = null;
       if (enableSanitization) {
         sanitizationResult = sanitizeHTML(htmlContent, variant, securityLevel, formatSanitizerMessage);
       }
 
-      // Calculate summary
-      const totalErrors = htmlValidation.errors.length + cssValidation.errors.length;
-      const totalWarnings = htmlValidation.warnings.length + cssValidation.warnings.length;
+      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);
       const totalInfo = htmlValidation.info.length + cssValidation.info.length;
       const hasSecurityIssues = securityIssues.length > 0;
 
@@ -114,20 +159,19 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         cssWarnings: cssValidation.warnings,
         cssInfo: cssValidation.info,
         securityIssues,
-        sanitizationWarnings: sanitizationResult?.warnings || [],
+        sanitizationWarnings,
         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: [{
@@ -137,13 +181,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]);
@@ -208,8 +252,8 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         totalErrors: 0,
         totalWarnings: 0,
         totalInfo: 0,
-        hasSecurityIssues: false
-      }
+        hasSecurityIssues: false,
+      },
     });
   }, []);
 
@@ -223,10 +267,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]);
 
   /**
@@ -239,32 +283,111 @@ 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(() => {
-    return [
-      ...validationState.htmlErrors,
-      ...validationState.htmlWarnings,
-      ...validationState.htmlInfo,
-      ...validationState.cssErrors,
-      ...validationState.cssWarnings,
-      ...validationState.cssInfo,
-      ...validationState.securityIssues.map(issue => ({
+    // 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 {
+        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: 'security-violation',
-        severity: 'error',
-        source: 'security'
-      }))
+        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,
     ].sort((a, b) => {
       // Sort by severity (error > warning > info) then by line number
       const severityOrder = { error: 0, warning: 1, info: 2 };
@@ -273,16 +396,22 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       }
       return (a.line || 0) - (b.line || 0);
     });
-  }, [validationState]);
+
+    // Ensure we always return an array
+    return Array.isArray(allIssues) ? allIssues : [];
+  }, [validationState, apiValidationErrors, extractLineNumberFromMessage]);
 
   /**
    * Check if validation is clean (no errors or warnings)
+   * Includes API validation errors in the check
    */
   const isClean = useCallback(() => {
-    return validationState.summary.totalErrors === 0 &&
-           validationState.summary.totalWarnings === 0 &&
-           !validationState.summary.hasSecurityIssues;
-  }, [validationState.summary]);
+    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]);
 
   // Effect to validate content when it changes
   useEffect(() => {
@@ -292,14 +421,19 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
   }, [content, validateContent, enableRealTime]);
 
   // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-    };
+  useEffect(() => () => {
+    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,
@@ -316,10 +450,12 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     isClean,
 
     // Computed properties
-    hasErrors: validationState.summary.totalErrors > 0,
+    hasErrors: validationState.summary.totalErrors > 0 || hasApiErrors,
     hasWarnings: validationState.summary.totalWarnings > 0,
-    hasSecurityIssues: validationState.summary.hasSecurityIssues
+    hasSecurityIssues: validationState.summary.hasSecurityIssues,
+    /** True only when Rule Group #1 (Input & Sanitization) issues exist. Use for UI gating. */
+    hasBlockingErrors,
   };
 };
 
-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
- */
+ */