@capillarytech/creatives-library 8.0.271-alpha.0 → 8.0.271

package/v2Components/HtmlEditor/hooks/__tests__/useValidation.test.js

@@ -5,9 +5,7 @@
  */
 
 import React from 'react';
-import {
-  render, screen, act, waitFor,
-} from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useValidation } from '../useValidation';
 
@@ -23,8 +21,8 @@ jest.mock('../../utils/htmlValidator', () => ({
         column: 1,
         rule: 'html-error',
         severity: 'error',
-        source: 'htmlhint',
-      },
+        source: 'htmlhint'
+      }
     ] : [],
     warnings: content.includes('warning') ? [
       {
@@ -34,10 +32,10 @@ jest.mock('../../utils/htmlValidator', () => ({
         column: 1,
         rule: 'html-warning',
         severity: 'warning',
-        source: 'htmlhint',
-      },
+        source: 'htmlhint'
+      }
     ] : [],
-    info: [],
+    info: []
   })),
   extractAndValidateCSS: jest.fn((content, formatMessage) => ({
     isValid: !content.includes('css-error'),
@@ -49,27 +47,27 @@ jest.mock('../../utils/htmlValidator', () => ({
         column: 1,
         rule: 'css-error',
         severity: 'error',
-        source: 'css-validator',
-      },
+        source: 'css-validator'
+      }
     ] : [],
     warnings: [],
-    info: [],
-  })),
+    info: []
+  }))
 }));
 
 jest.mock('../../utils/contentSanitizer', () => ({
   sanitizeHTML: jest.fn((content, variant, level, formatMessage) => ({
     sanitized: content,
-    warnings: content.includes('unsafe') ? ['Unsafe content detected'] : [],
+    warnings: content.includes('unsafe') ? ['Unsafe content detected'] : []
   })),
   isContentSafe: jest.fn((content) => !content.includes('unsafe')),
-  findUnsafeContent: jest.fn((content) => content.includes('unsafe') ? [{ type: 'xss', location: 'script tag' }] : []),
+  findUnsafeContent: jest.fn((content) =>
+    content.includes('unsafe') ? [{ type: 'xss', location: 'script tag' }] : []
+  )
 }));
 
 // Test wrapper component
-const TestComponent = ({
-  content, variant, options, onStateChange,
-}) => {
+const TestComponent = ({ content, variant, options, onStateChange }) => {
   const validationState = useValidation(content, variant, options);
 
   React.useEffect(() => {
@@ -86,7 +84,6 @@ const TestComponent = ({
       <div data-testid="is-clean">{String(validationState.isClean())}</div>
       <div data-testid="has-errors">{String(validationState.hasErrors)}</div>
       <div data-testid="has-warnings">{String(validationState.hasWarnings)}</div>
-      <div data-testid="has-blocking-errors">{String(validationState.hasBlockingErrors)}</div>
       <div data-testid="total-errors">{validationState.summary.totalErrors}</div>
       <div data-testid="total-warnings">{validationState.summary.totalWarnings}</div>
       <div data-testid="all-issues-count">{validationState.getAllIssues().length}</div>
@@ -526,60 +523,6 @@ describe('useValidation', () => {
     });
   });
 
-  describe('API validation errors and line detection', () => {
-    it('maps api errors into issues with line from message', async () => {
-      let validationState;
-      const apiValidationErrors = {
-        liquidErrors: ['Line 5: Liquid error'],
-        standardErrors: ['line: 3 Standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<div>\n{{ tag }}\n</div>"
-          options={{ apiValidationErrors }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      const issues = validationState.getAllIssues();
-      const liquidIssue = issues.find((issue) => issue.source === 'liquid-validator');
-      const standardIssue = issues.find((issue) => issue.source === 'api-validator');
-
-      expect(liquidIssue.line).toBe(5);
-      expect(standardIssue.line).toBe(3);
-    });
-
-    it('extracts line number from tag lookup', async () => {
-      let validationState;
-      const apiValidationErrors = {
-        liquidErrors: [],
-        standardErrors: ['Unsupported tags: missing_tag'],
-      };
-
-      render(
-        <TestComponent
-          content="{{ missing_tag }}\n<div></div>"
-          options={{ apiValidationErrors }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      const issues = validationState.getAllIssues();
-      const standardIssue = issues.find((issue) => issue.source === 'api-validator');
-
-      expect(standardIssue.line).toBe(1);
-    });
-  });
-
   // Helper Methods tests removed due to async timing issues with fake timers and React state updates
   // The functionality is verified through integration tests and other passing tests
 
@@ -643,283 +586,5 @@ describe('useValidation', () => {
     // hasWarnings and hasSecurityIssues tests removed due to async timing issues
     // The functionality is verified through integration tests and the hasErrors test above
   });
-
-  describe('Blocking errors', () => {
-    it('treats protocol security issues as blocking errors', async () => {
-      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
-      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
-      let validationState;
-      validateHTML.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-      extractAndValidateCSS.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-      isContentSafe.mockImplementationOnce(() => false);
-      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol' }]);
-
-      render(
-        <TestComponent
-          content="<a href='javascript:alert(1)'>x</a>"
-          options={{ enableRealTime: false }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      await act(async () => {
-        validationState.forceValidation();
-        await Promise.resolve();
-      });
-
-      await waitFor(() => {
-        expect(validationState.getAllIssues().length).toBe(1);
-      });
-
-      const [issue] = validationState.getAllIssues();
-      expect(issue.rule).toBe('sanitizer.dangerousProtocolDetected');
-      expect(issue.severity).toBe('error');
-      expect(issue.source).toBe('security');
-    });
-  });
-
-  describe('Sanitization warnings mapping (lines 368-378)', () => {
-    it('maps sanitization warnings to issues with correct severity for blocking rules', async () => {
-      const { sanitizeHTML } = require('../../utils/contentSanitizer');
-      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
-      let validationState;
-
-      // Mock sanitizeHTML to return sanitization warnings with blocking rule
-      sanitizeHTML.mockImplementationOnce(() => ({
-        sanitized: '<p>Clean</p>',
-        warnings: [
-          {
-            message: 'Sanitization warning for blocking rule',
-            rule: 'sanitizer.dangerousProtocolDetected', // This is a blocking rule
-            line: 5,
-            column: 10,
-            source: 'sanitizer',
-          },
-        ],
-      }));
-
-      validateHTML.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      extractAndValidateCSS.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      render(
-        <TestComponent
-          content="<p>Test content</p>"
-          options={{ enableRealTime: false, enableSanitization: true }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      await act(async () => {
-        validationState.forceValidation();
-        await Promise.resolve();
-      });
-
-      await waitFor(() => {
-        const issues = validationState.getAllIssues();
-        // Sanitization warnings should be mapped to issues
-        const sanitizerIssue = issues.find((i) => i.source === 'sanitizer');
-        if (sanitizerIssue) {
-          expect(sanitizerIssue.severity).toBe('error'); // Blocking rule should be error
-          expect(sanitizerIssue.line).toBe(5);
-          expect(sanitizerIssue.column).toBe(10);
-        }
-      });
-    });
-
-    it('maps sanitization warnings with non-blocking rules as warnings', async () => {
-      const { sanitizeHTML } = require('../../utils/contentSanitizer');
-      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
-      let validationState;
-
-      // Mock sanitizeHTML to return sanitization warnings with non-blocking rule
-      sanitizeHTML.mockImplementationOnce(() => ({
-        sanitized: '<p>Clean</p>',
-        warnings: [
-          {
-            message: 'Non-blocking sanitization warning',
-            rule: 'some.non.blocking.rule', // Not a blocking rule
-            line: 3,
-            column: 1,
-            source: 'sanitizer',
-          },
-        ],
-      }));
-
-      validateHTML.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      extractAndValidateCSS.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      render(
-        <TestComponent
-          content="<p>Test content</p>"
-          options={{ enableRealTime: false, enableSanitization: true }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      await act(async () => {
-        validationState.forceValidation();
-        await Promise.resolve();
-      });
-
-      await waitFor(() => {
-        const issues = validationState.getAllIssues();
-        const sanitizerIssue = issues.find((i) => i.source === 'sanitizer');
-        if (sanitizerIssue) {
-          expect(sanitizerIssue.severity).toBe('warning'); // Non-blocking should be warning
-        }
-      });
-    });
-
-    it('handles sanitization warnings with missing optional fields (line 373-376)', async () => {
-      const { sanitizeHTML } = require('../../utils/contentSanitizer');
-      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
-      let validationState;
-
-      // Mock sanitizeHTML to return warnings without optional fields
-      sanitizeHTML.mockImplementationOnce(() => ({
-        sanitized: '<p>Clean</p>',
-        warnings: [
-          {
-            message: 'Warning without line/column/rule/source',
-            // Missing: rule, line, column, source
-          },
-        ],
-      }));
-
-      validateHTML.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      extractAndValidateCSS.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      render(
-        <TestComponent
-          content="<p>Test content</p>"
-          options={{ enableRealTime: false, enableSanitization: true }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      await act(async () => {
-        validationState.forceValidation();
-        await Promise.resolve();
-      });
-
-      await waitFor(() => {
-        const issues = validationState.getAllIssues();
-        const sanitizerIssue = issues.find((i) => i.source === 'sanitizer');
-        if (sanitizerIssue) {
-          // Should use defaults for missing fields
-          expect(sanitizerIssue.rule).toBe('sanitizer.unknown'); // Default rule
-          expect(sanitizerIssue.line).toBe(1); // Default line
-          expect(sanitizerIssue.column).toBe(1); // Default column
-          expect(sanitizerIssue.source).toBe('sanitizer'); // Default source
-        }
-      });
-    });
-
-    it('handles empty sanitization warnings array', async () => {
-      const { sanitizeHTML } = require('../../utils/contentSanitizer');
-      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
-      let validationState;
-
-      // Mock sanitizeHTML to return empty warnings array
-      sanitizeHTML.mockImplementationOnce(() => ({
-        sanitized: '<p>Clean</p>',
-        warnings: [],
-      }));
-
-      validateHTML.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      extractAndValidateCSS.mockImplementationOnce(() => ({
-        isValid: true,
-        errors: [],
-        warnings: [],
-        info: [],
-      }));
-
-      render(
-        <TestComponent
-          content="<p>Test content</p>"
-          options={{ enableRealTime: false, enableSanitization: true }}
-          onStateChange={(state) => { validationState = state; }}
-        />
-      );
-
-      await waitFor(() => {
-        expect(validationState).toBeDefined();
-      });
-
-      await act(async () => {
-        validationState.forceValidation();
-        await Promise.resolve();
-      });
-
-      await waitFor(() => {
-        // Should handle empty sanitization warnings gracefully
-        expect(validationState).toBeDefined();
-      });
-    });
-  });
 });
+

package/v2Components/HtmlEditor/hooks/useEditorContent.js

@@ -69,10 +69,7 @@ export const useEditorContent = (
   } = options;
 
   // Unified content state
-  // Use DEFAULT_CONTENT only if initialContent is null or undefined (not empty string)
-  // This allows explicitly passing empty string for empty content
-  const initialContentValue = initialContent == null ? DEFAULT_CONTENT : initialContent;
-  const [content, setContent] = useState(initialContentValue);
+  const [content, setContent] = useState(initialContent || DEFAULT_CONTENT);
   const [isDirty, setIsDirty] = useState(false);
   const [lastSaved, setLastSaved] = useState(null);
   const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(autoSave);
@@ -82,7 +79,7 @@ export const useEditorContent = (
   const validationDebounceRef = useRef(null);
   const autoSaveRef = useRef(null);
   const validationCallbackRef = useRef(null);
-  const lastContentRef = useRef(initialContentValue);
+  const lastContentRef = useRef(initialContent || DEFAULT_CONTENT);
 
   // Smart debouncing hooks
   const debouncedOnChange = useSmartDebounce(onChange || (() => {}), PERFORMANCE.PREVIEW_UPDATE_DEBOUNCE);