@capillarytech/creatives-library 8.0.263 → 8.0.265

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -5,51 +5,33 @@
  */
 
 import React from 'react';
-import {
-  render, screen, fireEvent, act, waitFor,
-} from '@testing-library/react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import HTMLEditor from '../HTMLEditor';
 
-// Options to control CodeEditorPane mock behavior
-const mockCodeEditorOptions = {
-  includeInsertText: true,
-  insertTextThrows: false,
-  setRef: true,
-  navigateToLineThrows: false,
-  includeNavigateToLine: true,
-};
-
-
 // Mock useLayoutEffect to behave like useEffect in tests
 React.useLayoutEffect = React.useEffect;
 
 // Mock browser APIs
 global.IntersectionObserver = class IntersectionObserver {
-  constructor() { }
-
-  disconnect() { }
-
-  observe() { }
-
-  unobserve() { }
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
 };
 
 global.ResizeObserver = class ResizeObserver {
-  constructor() { }
-
-  disconnect() { }
-
-  observe() { }
-
-  unobserve() { }
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
 };
 
 // Setup window.matchMedia mock
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query) => ({
+  value: jest.fn().mockImplementation(query => ({
     matches: false,
     media: query,
     onchange: null,
@@ -106,97 +88,60 @@ window.getComputedStyle = jest.fn(() => ({
 jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
   warning: jest.fn(),
   error: jest.fn(),
-  success: jest.fn(),
+  success: jest.fn()
 }));
 
 // Mock components
-jest.mock('../components/EditorToolbar', () => function MockEditorToolbar(props) {
-  return (
-    <div data-testid="editor-toolbar">
-      <button onClick={props.onToggleFullscreen}>Toggle Fullscreen</button>
-      <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', 10)}>
+jest.mock('../components/EditorToolbar', () => {
+  return function MockEditorToolbar(props) {
+    return (
+      <div data-testid="editor-toolbar">
+        <button onClick={props.onToggleFullscreen}>Toggle Fullscreen</button>
+        <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', 10)}>
           Insert Label
-      </button>
-      <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', null)}>
-          Insert Label (Null Position)
-      </button>
-      <button onClick={() => props.onSave && props.onSave()}>
+        </button>
+        <button onClick={() => props.onSave && props.onSave()}>
           Save
-      </button>
-    </div>
-  );
+        </button>
+      </div>
+    );
+  };
 });
 
-jest.mock('../components/DeviceToggle', () => function MockDeviceToggle(props) {
-  return (
-    <div data-testid="device-toggle">
-      <button onClick={() => props.onDeviceChange && props.onDeviceChange('android')}>
+jest.mock('../components/DeviceToggle', () => {
+  return function MockDeviceToggle(props) {
+    return (
+      <div data-testid="device-toggle">
+        <button onClick={() => props.onDeviceChange && props.onDeviceChange('android')}>
           Android
-      </button>
-      <button onClick={() => props.onDeviceChange && props.onDeviceChange('ios')}>
+        </button>
+        <button onClick={() => props.onDeviceChange && props.onDeviceChange('ios')}>
           iOS
-      </button>
-    </div>
-  );
+        </button>
+      </div>
+    );
+  };
 });
 
-jest.mock('../components/SplitContainer', () => function MockSplitContainer({ children }) {
-  return <div data-testid="split-container">{children}</div>;
+jest.mock('../components/SplitContainer', () => {
+  return function MockSplitContainer({ children }) {
+    return <div data-testid="split-container">{children}</div>;
+  };
 });
 
-
 jest.mock('../components/CodeEditorPane', () => {
   const React = require('react');
-  const { useEditorContext } = require('../components/common/EditorContext');
-  return React.forwardRef((props, ref) => {
+  return React.forwardRef(function MockCodeEditorPane(props, ref) {
     const [value, setValue] = React.useState('');
-    // Get validation from context
-    let validation = null;
-    try {
-      const context = useEditorContext();
-      validation = context?.validation;
-    } catch (e) {
-      // Context not available, use props or null
-    }
-
-    React.useImperativeHandle(ref, () => {
-      if (!mockCodeEditorOptions.setRef) {
-        return null;
-      }
-
-      const methods = {
-        focus: jest.fn(),
-        getCursor: jest.fn(() => 0),
-        getValue: jest.fn(() => value),
-        setValue: jest.fn((newValue) => setValue(newValue)),
-      };
-
-      if (mockCodeEditorOptions.includeNavigateToLine) {
-        methods.navigateToLine = jest.fn(() => {
-          if (mockCodeEditorOptions.navigateToLineThrows) {
-            throw new Error('Navigation failed');
-          }
-        });
-      }
-
-      if (mockCodeEditorOptions.includeInsertText) {
-        methods.insertText = jest.fn(() => {
-          if (mockCodeEditorOptions.insertTextThrows) {
-            throw new Error('Insert failed');
-          }
-        });
-      }
-
-      return methods;
-    });
 
-    // Import ValidationErrorDisplay mock - use dynamic require to get the mocked version
-    let ValidationErrorDisplay;
-    try {
-      ValidationErrorDisplay = require('../components/ValidationErrorDisplay');
-    } catch (e) {
-      ValidationErrorDisplay = () => null;
-    }
+    React.useImperativeHandle(ref, () => ({
+      insertText: jest.fn(),
+      focus: jest.fn(),
+      getCursor: jest.fn(() => 0),
+      getValue: jest.fn(() => value),
+      setValue: jest.fn((newValue) => setValue(newValue)),
+      navigateToLine: jest.fn(),
+    }));
 
     return (
       <div data-testid="code-editor-pane">
@@ -210,47 +155,36 @@ jest.mock('../components/CodeEditorPane', () => {
           }}
           data-testid="editor-textarea"
         />
-        <button
-          onClick={() => props.onContextChange && props.onContextChange('test-context')}
-          data-testid="trigger-context-change"
-        >
-          Trigger Context Change
-        </button>
-        {validation && (
-          <ValidationErrorDisplay
-            validation={validation}
-            onErrorClick={props.onErrorClick}
-          />
-        )}
       </div>
     );
   });
 });
 
-jest.mock('../components/PreviewPane', () => function MockPreviewPane(props) {
-  return (
-    <div data-testid="preview-pane" data-fullscreen={props.isFullscreenMode}>
+jest.mock('../components/PreviewPane', () => {
+  return function MockPreviewPane(props) {
+    return (
+      <div data-testid="preview-pane" data-fullscreen={props.isFullscreenMode}>
         Preview Content
-    </div>
-  );
+      </div>
+    );
+  };
 });
 
-jest.mock('../components/ValidationErrorDisplay', () => function MockValidationErrorDisplay({ validation, onErrorClick }) {
-  // Match actual component behavior: check if validation has errors
-  if (!validation || validation.isValidating) return null;
-  const allIssues = validation.getAllIssues?.() || [];
-  if (allIssues.length === 0) return null;
-  return (
-    <div data-testid="validation-error-display">
-      <div>Validation Errors</div>
-      <button onClick={() => onErrorClick && onErrorClick({ line: 5, column: 10 })}>
+jest.mock('../components/ValidationErrorDisplay', () => {
+  return function MockValidationErrorDisplay({ validation, onErrorClick }) {
+    if (!validation || validation.isClean?.()) return null;
+    return (
+      <div data-testid="validation-error-display">
+        <div>Validation Errors</div>
+        <button onClick={() => onErrorClick && onErrorClick({ line: 5, column: 10 })}>
           Error at Line 5
-      </button>
-      <button onClick={() => onErrorClick && onErrorClick({ line: null })}>
+        </button>
+        <button onClick={() => onErrorClick && onErrorClick({ line: null })}>
           Error without Line
-      </button>
-    </div>
-  );
+        </button>
+      </div>
+    );
+  };
 });
 
 // Mock hooks - Return complete hook objects with all required methods
@@ -263,8 +197,8 @@ jest.mock('../hooks/useEditorContent', () => ({
     isLoading: false,
     isDirty: false,
     hasContent: true,
-    getContentSize: jest.fn(() => 20),
-  }),
+    getContentSize: jest.fn(() => 20)
+  })
 }));
 
 jest.mock('../hooks/useInAppContent', () => ({
@@ -272,7 +206,7 @@ jest.mock('../hooks/useInAppContent', () => ({
     content: '<p>Android content</p>',
     deviceContent: {
       android: '<p>Android content</p>',
-      ios: '<p>iOS content</p>',
+      ios: '<p>iOS content</p>'
     },
     activeDevice: 'android',
     keepContentSame: false,
@@ -286,8 +220,8 @@ jest.mock('../hooks/useInAppContent', () => ({
     getContentSize: () => 20,
     isLoading: false,
     isDirty: false,
-    hasContent: true,
-  }),
+    hasContent: true
+  })
 }));
 
 jest.mock('../hooks/useLayoutState', () => ({
@@ -319,8 +253,8 @@ jest.mock('../hooks/useLayoutState', () => ({
     // Layout constraints
     minPaneSize: 20,
     maxPaneSize: 80,
-    gutterSize: 10,
-  }),
+    gutterSize: 10
+  })
 }));
 
 // Mock useValidation - need to use a variable that gets assigned in the factory
@@ -331,11 +265,11 @@ jest.mock('../hooks/useValidation', () => {
     isValidating: false,
     getAllIssues: () => [],
     isClean: () => true,
-    summary: { totalErrors: 0, totalWarnings: 0 },
+    summary: { totalErrors: 0, totalWarnings: 0 }
   }));
 
   return {
-    useValidation: (...args) => mockUseValidationImpl(...args),
+    useValidation: (...args) => mockUseValidationImpl(...args)
   };
 });
 
@@ -363,7 +297,7 @@ describe('HTMLEditor', () => {
     initialContent: '<p>Initial content</p>',
     onChange: jest.fn(),
     onSave: jest.fn(),
-    variant: 'email',
+    variant: 'email'
   };
 
   describe('Loading State', () => {
@@ -433,7 +367,7 @@ describe('HTMLEditor', () => {
 
       // Context should reflect fullscreen mode change
       const previewPanes = screen.getAllByTestId('preview-pane');
-      expect(previewPanes.some((pane) => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
+      expect(previewPanes.some(pane => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
     });
   });
 
@@ -539,44 +473,10 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
-    it('converts string initialContent to device-specific format for inapp variant', () => {
-      // This test covers lines 104-109 in HTMLEditor.js
-      const mockUseInAppContent = require('../hooks/useInAppContent').useInAppContent;
-      const originalUseInAppContent = jest.requireActual('../hooks/useInAppContent').useInAppContent;
-
-      let capturedInitialContent = null;
-      jest.spyOn(require('../hooks/useInAppContent'), 'useInAppContent').mockImplementation((initialContent) => {
-        capturedInitialContent = initialContent;
-        return originalUseInAppContent(initialContent, {});
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            variant="inapp"
-            initialContent="<p>String content</p>"
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Verify that string content was converted to device-specific format
-      expect(capturedInitialContent).toEqual({
-        android: '<p>String content</p>',
-        ios: '<p>String content</p>',
-      });
-
-      jest.restoreAllMocks();
-    });
-
     it('handles object initialContent for inapp variant', () => {
       const deviceContent = {
         android: '<p>Android content</p>',
-        ios: '<p>iOS content</p>',
+        ios: '<p>iOS content</p>'
       };
 
       render(
@@ -596,42 +496,6 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
-    it('uses provided device-specific content for inapp variant', () => {
-      // This test covers lines 110-113 in HTMLEditor.js
-      const deviceContent = {
-        android: '<p>Android content</p>',
-        ios: '<p>iOS content</p>',
-      };
-
-      const mockUseInAppContent = require('../hooks/useInAppContent').useInAppContent;
-      const originalUseInAppContent = jest.requireActual('../hooks/useInAppContent').useInAppContent;
-
-      let capturedInitialContent = null;
-      jest.spyOn(require('../hooks/useInAppContent'), 'useInAppContent').mockImplementation((initialContent) => {
-        capturedInitialContent = initialContent;
-        return originalUseInAppContent(initialContent, {});
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            variant="inapp"
-            initialContent={deviceContent}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Verify that object content was passed as-is
-      expect(capturedInitialContent).toEqual(deviceContent);
-
-      jest.restoreAllMocks();
-    });
-
     it('handles inapp variant with layoutType', () => {
       render(
         <TestWrapper>
@@ -686,7 +550,7 @@ describe('HTMLEditor', () => {
       // Should open fullscreen modal - now there are 2 preview panes (main + fullscreen modal)
       const previewPanes = screen.getAllByTestId('preview-pane');
       expect(previewPanes.length).toBeGreaterThan(1);
-      expect(previewPanes.some((pane) => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
+      expect(previewPanes.some(pane => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
     });
 
     it('renders fullscreen modal with correct components', () => {
@@ -704,7 +568,7 @@ describe('HTMLEditor', () => {
       fireEvent.click(toggleButton);
 
       const previewPanes = screen.getAllByTestId('preview-pane');
-      expect(previewPanes.some((pane) => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
+      expect(previewPanes.some(pane => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
     });
 
     it('renders fullscreen modal for inapp variant', () => {
@@ -742,7 +606,7 @@ describe('HTMLEditor', () => {
       fireEvent.click(toggleButton);
 
       // Should have multiple preview panes
-      const previewPanes = screen.getAllByTestId('preview-pane');
+      let previewPanes = screen.getAllByTestId('preview-pane');
       expect(previewPanes.length).toBeGreaterThan(1);
 
       // Close fullscreen (button should still be available to close)
@@ -803,7 +667,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       render(
@@ -824,7 +688,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [],
         isClean: () => true,
-        summary: { totalErrors: 0, totalWarnings: 0 },
+        summary: { totalErrors: 0, totalWarnings: 0 }
       });
 
       render(
@@ -845,7 +709,7 @@ describe('HTMLEditor', () => {
     it('handles readOnly prop', () => {
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} readOnly />
+          <HTMLEditor {...defaultProps} readOnly={true} />
         </TestWrapper>
       );
 
@@ -993,7 +857,7 @@ describe('HTMLEditor', () => {
   describe('Error Handling', () => {
     it('handles missing editorRef gracefully', () => {
       // Mock console.warn to avoid noise in tests
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
       render(
         <TestWrapper>
@@ -1020,7 +884,7 @@ describe('HTMLEditor', () => {
           focus: jest.fn(),
           getCursor: jest.fn(() => 0),
           // Missing insertText method
-        },
+        }
       };
 
       // Mock the ref to return an editor without insertText
@@ -1055,7 +919,7 @@ describe('HTMLEditor', () => {
           insertText: jest.fn(() => { throw new Error('Insert failed'); }),
           focus: jest.fn(),
           getCursor: jest.fn(() => 0),
-        },
+        }
       };
 
       const TestComponent = () => {
@@ -1121,7 +985,7 @@ describe('HTMLEditor', () => {
         current: {
           navigateToLine: jest.fn(() => { throw new Error('Navigation failed'); }),
           focus: jest.fn(),
-        },
+        }
       };
 
       const TestComponent = () => {
@@ -1206,8 +1070,8 @@ describe('HTMLEditor', () => {
             onContentChange={jest.fn()}
             className="test-class"
             readOnly={false}
-            showFullscreenButton
-            autoSave
+            showFullscreenButton={true}
+            autoSave={true}
             autoSaveInterval={30000}
           />
         </TestWrapper>
@@ -1239,7 +1103,7 @@ describe('HTMLEditor', () => {
         <TestWrapper>
           <HTMLEditor
             variant="inapp"
-            autoSave
+            autoSave={true}
             autoSaveInterval={15000}
             onSave={jest.fn()}
             onContentChange={jest.fn()}
@@ -1273,14 +1137,13 @@ describe('HTMLEditor', () => {
         expect.any(String),
         expect.any(String),
         expect.objectContaining({
-          apiValidationErrors: null,
           enableRealTime: true,
           debounceMs: 500,
           enableSanitization: true,
-          securityLevel: 'standard',
+          securityLevel: 'standard'
         }),
         expect.any(Function), // formatSanitizerMessage
-        expect.any(Function) // formatValidatorMessage
+        expect.any(Function)  // formatValidatorMessage
       );
     });
 
@@ -1300,14 +1163,13 @@ describe('HTMLEditor', () => {
         expect.any(String),
         expect.any(String),
         expect.objectContaining({
-          apiValidationErrors: null,
           enableRealTime: true,
           debounceMs: 500,
           enableSanitization: true,
-          securityLevel: 'standard',
+          securityLevel: 'standard'
         }),
         expect.any(Function), // formatSanitizerMessage
-        expect.any(Function) // formatValidatorMessage
+        expect.any(Function)  // formatValidatorMessage
       );
     });
 
@@ -1370,11 +1232,10 @@ describe('HTMLEditor', () => {
         expect.any(String), // currentContent
         'email', // variant
         {
-          apiValidationErrors: null,
           enableRealTime: true,
           debounceMs: 500,
           enableSanitization: true,
-          securityLevel: 'standard',
+          securityLevel: 'standard'
         },
         expect.any(Function),
         expect.any(Function)
@@ -1465,8 +1326,8 @@ describe('HTMLEditor', () => {
             <div className="html-editor html-editor--email">
               <CustomToolbar
                 onLabelInsert={handleLabelInsert}
-                onToggleFullscreen={() => { }}
-                onSave={() => { }}
+                onToggleFullscreen={() => {}}
+                onSave={() => {}}
               />
               <div data-testid="split-container">
                 <div data-testid="code-editor-pane" ref={editorRef}>
@@ -1564,7 +1425,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       // Create a custom validation display that triggers the error click handler
@@ -1640,7 +1501,7 @@ describe('HTMLEditor', () => {
         current: {
           navigateToLine: jest.fn(),
           focus: jest.fn(),
-        },
+        }
       };
 
       // Mock validation to show errors
@@ -1648,7 +1509,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       const TestComponent = () => {
@@ -1682,7 +1543,7 @@ describe('HTMLEditor', () => {
         current: {
           focus: jest.fn(),
           // Missing navigateToLine method
-        },
+        }
       };
 
       const TestComponent = () => {
@@ -1762,64 +1623,41 @@ describe('HTMLEditor', () => {
   });
 
   describe('Loading State Coverage (Lines 343-349)', () => {
-    it('shows loading state when content is null', () => {
-      // Temporarily override the mock to return null content
-      const originalUseEditorContent = require('../hooks/useEditorContent').useEditorContent;
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => null);
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => ({
-        splitSizes: [50, 50],
-        splitSize: 50,
-        viewMode: 'desktop',
-        mobileWidth: 375,
-        isFullscreen: false,
-        isResizing: false,
-        updateSplitSizes: jest.fn(),
-        setSplitSize: jest.fn(),
-        setViewMode: jest.fn(),
-        toggleViewMode: jest.fn(),
-        setMobileWidth: jest.fn(),
-        toggleFullscreen: jest.fn(),
-        resetLayout: jest.fn(),
-        setResizingState: jest.fn(),
-        handleResize: jest.fn(),
-        handleKeyboardShortcut: jest.fn(),
-        isMobileView: false,
-        isDesktopView: true,
-        minPaneSize: 20,
-        maxPaneSize: 80,
-        gutterSize: 10,
-      }));
+    // Create separate test components to isolate mock effects
+    const LoadingTestComponent = ({ mockContent = null, mockLayout = null }) => {
+      // Mock the hooks inline for this specific test
+      const useEditorContentMock = jest.fn(() => mockContent);
+      const useInAppContentMock = jest.fn(() => mockContent);
+      const useLayoutStateMock = jest.fn(() => mockLayout);
+
+      // Replace the hooks temporarily
+      React.useMemo(() => {
+        require('../hooks/useEditorContent').useEditorContent = useEditorContentMock;
+        require('../hooks/useInAppContent').useInAppContent = useInAppContentMock;
+        require('../hooks/useLayoutState').useLayoutState = useLayoutStateMock;
+      }, []);
+
+      return <HTMLEditor {...defaultProps} />;
+    };
 
+    it('shows loading state when content is null', () => {
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent mockContent={null} mockLayout={{ splitSizes: [50, 50] }} />
         </TestWrapper>
       );
 
       // Should show loading state
       expect(screen.getByText('Initializing HTML Editor...')).toBeInTheDocument();
-
-      // Restore original mock
-      require('../hooks/useEditorContent').useEditorContent = originalUseEditorContent;
     });
 
     it('shows loading state when layout is null', () => {
-      // Temporarily override the mock to return null layout
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => null);
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => ({
-        content: '<p>Test</p>',
-        updateContent: jest.fn(),
-        saveContent: jest.fn(),
-        markAsSaved: jest.fn(),
-        isLoading: false,
-        isDirty: false,
-        hasContent: true,
-        getContentSize: jest.fn(() => 20),
-      }));
-
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent
+            mockContent={{ content: '<p>Test</p>' }}
+            mockLayout={null}
+          />
         </TestWrapper>
       );
 
@@ -1828,12 +1666,9 @@ describe('HTMLEditor', () => {
     });
 
     it('shows loading state when both content and layout are null', () => {
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => null);
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => null);
-
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent mockContent={null} mockLayout={null} />
         </TestWrapper>
       );
 
@@ -1841,43 +1676,12 @@ describe('HTMLEditor', () => {
     });
 
     it('renders normally when both content and layout are available', () => {
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => ({
-        content: '<p>Test</p>',
-        updateContent: jest.fn(),
-        saveContent: jest.fn(),
-        markAsSaved: jest.fn(),
-        isLoading: false,
-        isDirty: false,
-        hasContent: true,
-        getContentSize: jest.fn(() => 20),
-      }));
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => ({
-        splitSizes: [50, 50],
-        splitSize: 50,
-        viewMode: 'desktop',
-        mobileWidth: 375,
-        isFullscreen: false,
-        isResizing: false,
-        updateSplitSizes: jest.fn(),
-        setSplitSize: jest.fn(),
-        setViewMode: jest.fn(),
-        toggleViewMode: jest.fn(),
-        setMobileWidth: jest.fn(),
-        toggleFullscreen: jest.fn(),
-        resetLayout: jest.fn(),
-        setResizingState: jest.fn(),
-        handleResize: jest.fn(),
-        handleKeyboardShortcut: jest.fn(),
-        isMobileView: false,
-        isDesktopView: true,
-        minPaneSize: 20,
-        maxPaneSize: 80,
-        gutterSize: 10,
-      }));
-
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent
+            mockContent={{ content: '<p>Test</p>' }}
+            mockLayout={{ splitSizes: [50, 50] }}
+          />
         </TestWrapper>
       );
 
@@ -1898,7 +1702,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       render(
@@ -1930,7 +1734,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       render(
@@ -2001,1558 +1805,5 @@ describe('HTMLEditor', () => {
       unmount();
     });
   });
+});
 
-  describe('handleContextChange Coverage', () => {
-    it('calls onContextChange when provided instead of making API call', () => {
-      const onContextChange = jest.fn();
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={onContextChange}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      if (!codeEditorPane) {
-        // Component might be in loading state, wait a bit more
-        act(() => {
-          jest.runAllTimers();
-        });
-      }
-
-      // The CodeEditorPane would call onContextChange
-      // We verify that onContextChange is passed and would be called
-      expect(onContextChange).toBeDefined();
-
-      // If onContextChange is provided, globalActions.fetchSchemaForEntity should not be called
-      // This is tested by ensuring onContextChange is used instead
-    });
-
-    it('makes API call when onContextChange is not provided but globalActions is available', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      if (!toolbar) {
-        act(() => {
-          jest.runAllTimers();
-        });
-      }
-
-      // The handleContextChange would be called by CodeEditorPane
-      // We verify globalActions is available
-      expect(globalActions.fetchSchemaForEntity).toBeDefined();
-    });
-
-    it('does not make API call when globalActions is not available', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={null}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render - might be in loading state
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-
-      // Component should render (either loaded or loading)
-      expect(toolbar || loading).toBeTruthy();
-    });
-
-    it('uses SMS layout for INAPP variant in handleContextChange', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            variant="inapp"
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      const deviceToggle = screen.queryByTestId('device-toggle');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-
-      // Component should render (either loaded or loading)
-      expect(deviceToggle || loading).toBeTruthy();
-    });
-
-    it('handles context change with ALL context type', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(toolbar || loading).toBeTruthy();
-    });
-
-    it('handles context change with embedded type', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded', module: 'test' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(toolbar || loading).toBeTruthy();
-    });
-  });
-
-  describe('handleLabelInsert Coverage', () => {
-    it('handles label insert when position is null and editor is ready', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-
-        // Should attempt to insert via editor ref
-        // The mock editor has insertText method, so it should work
-        expect(CapNotification.success).toHaveBeenCalled();
-      }
-
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(codeEditorPane || loading).toBeTruthy();
-    });
-
-    it('shows warning when editor is not available for label insert', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Mock CodeEditorPane to return null ref
-      jest.doMock('../components/CodeEditorPane', () => {
-        const React = require('react');
-        return React.forwardRef(() => {
-          // Return null ref
-          React.useImperativeHandle(null, () => null);
-          return <div data-testid="code-editor-pane">Editor</div>;
-        });
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show warning when editor is null
-        expect(CapNotification.warning).toHaveBeenCalled();
-      }
-    });
-
-    it('shows error when editor does not have insertText method', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Mock CodeEditorPane to return editor without insertText
-      jest.doMock('../components/CodeEditorPane', () => {
-        const React = require('react');
-        return React.forwardRef((props, ref) => {
-          React.useImperativeHandle(ref, () => ({
-            focus: jest.fn(),
-            getCursor: jest.fn(() => 0),
-            // No insertText method
-          }));
-          return <div data-testid="code-editor-pane">Editor</div>;
-        });
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show error when insertText is not available
-        expect(CapNotification.error).toHaveBeenCalled();
-      }
-    });
-
-    it('handles label insert when position is provided (already inserted)', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Simulate label insert with position (already inserted by CodeEditorPane)
-      // This would call handleLabelInsert with a valid position
-      const insertButton = screen.queryByText('Insert Label');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show success notification
-        expect(CapNotification.success).toHaveBeenCalled();
-      }
-    });
-
-    it('handles error during label insert', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Mock CodeEditorPane to throw error on insertText
-      jest.doMock('../components/CodeEditorPane', () => {
-        const React = require('react');
-        return React.forwardRef((props, ref) => {
-          React.useImperativeHandle(ref, () => ({
-            insertText: jest.fn(() => {
-              throw new Error('Insert failed');
-            }),
-            focus: jest.fn(),
-            getCursor: jest.fn(() => 0),
-          }));
-          return <div data-testid="code-editor-pane">Editor</div>;
-        });
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show error notification
-        expect(CapNotification.error).toHaveBeenCalled();
-      }
-    });
-  });
-
-  describe('handleSave Coverage', () => {
-    it('calls onSave callback when save is triggered', () => {
-      const onSave = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} onSave={onSave} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const saveButton = screen.queryByText('Save');
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        // onSave should be called
-        expect(onSave).toHaveBeenCalled();
-      } else {
-        // Component might be in loading state
-        const loading = screen.queryByText('Initializing HTML Editor...');
-        expect(loading).toBeTruthy();
-      }
-    });
-
-    it('shows success notification on save', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-      const onSave = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} onSave={onSave} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const saveButton = screen.queryByText('Save');
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        expect(CapNotification.success).toHaveBeenCalled();
-      }
-    });
-
-    it('handles save error gracefully', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-      const onSave = jest.fn(() => {
-        throw new Error('Save failed');
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} onSave={onSave} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const saveButton = screen.queryByText('Save');
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        expect(CapNotification.error).toHaveBeenCalled();
-      }
-    });
-  });
-
-  describe('handleValidationErrorClick Coverage', () => {
-    it('navigates to error line when editor has navigateToLine method', () => {
-      mockUseValidationImpl.mockReturnValueOnce({
-        isValidating: false,
-        getAllIssues: () => [{
-          message: 'Test error', line: 5, column: 10, severity: 'error',
-        }],
-        isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Click on error
-      const errorButton = screen.queryByText('Error at Line 5');
-      if (errorButton) {
-        fireEvent.click(errorButton);
-      }
-
-      // Should attempt to navigate to line
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(codeEditorPane || loading).toBeTruthy();
-    });
-
-    it('focuses editor when navigateToLine is not available', () => {
-      mockCodeEditorOptions.includeNavigateToLine = false;
-
-      mockUseValidationImpl.mockReturnValueOnce({
-        isValidating: false,
-        getAllIssues: () => [{
-          message: 'Test error', line: 5, column: 10, severity: 'error',
-        }],
-        isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(codeEditorPane || loading).toBeTruthy();
-    });
-  });
-
-
-  describe('Additional Coverage Tests', () => {
-    const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-    beforeEach(() => {
-      // Reset options to default
-      mockCodeEditorOptions.includeInsertText = true;
-      mockCodeEditorOptions.insertTextThrows = false;
-      mockCodeEditorOptions.setRef = true;
-      mockCodeEditorOptions.navigateToLineThrows = false;
-      mockCodeEditorOptions.includeNavigateToLine = true;
-
-      // Clear specific mocks instead of all to avoid breaking other mocks
-      CapNotification.warning.mockClear();
-      CapNotification.error.mockClear();
-      CapNotification.success.mockClear();
-
-      // Restore hooks that might have been corrupted by Loading State Coverage tests
-      // This is necessary because Loading State Coverage tests modify the require cache
-      // and do not restore the original mocks
-      require('../hooks/useEditorContent').useEditorContent = () => ({
-        content: '<p>Test content</p>',
-        updateContent: jest.fn(),
-        saveContent: jest.fn(),
-        markAsSaved: jest.fn(),
-        isLoading: false,
-        isDirty: false,
-        hasContent: true,
-        getContentSize: jest.fn(() => 20),
-      });
-
-      require('../hooks/useInAppContent').useInAppContent = () => ({
-        content: '<p>Android content</p>',
-        deviceContent: {
-          android: '<p>Android content</p>',
-          ios: '<p>iOS content</p>',
-        },
-        activeDevice: 'android',
-        keepContentSame: false,
-        updateContent: jest.fn(),
-        saveContent: jest.fn(),
-        markAsSaved: jest.fn(),
-        switchDevice: jest.fn(),
-        toggleContentSync: jest.fn(),
-        getDeviceContent: (device) => `<p>${device} content</p>`,
-        setDeviceContent: jest.fn(),
-        getContentSize: () => 20,
-        isLoading: false,
-        isDirty: false,
-        hasContent: true,
-      });
-
-      require('../hooks/useLayoutState').useLayoutState = () => ({
-        splitSizes: [50, 50],
-        splitSize: 50,
-        viewMode: 'desktop',
-        mobileWidth: 375,
-        isFullscreen: false,
-        isResizing: false,
-        updateSplitSizes: jest.fn(),
-        setSplitSize: jest.fn(),
-        setViewMode: jest.fn(),
-        toggleViewMode: jest.fn(),
-        setMobileWidth: jest.fn(),
-        toggleFullscreen: jest.fn(),
-        resetLayout: jest.fn(),
-        setResizingState: jest.fn(),
-        handleResize: jest.fn(),
-        handleKeyboardShortcut: jest.fn(),
-        isMobileView: false,
-        isDesktopView: true,
-        minPaneSize: 20,
-        maxPaneSize: 80,
-        gutterSize: 10,
-      });
-    });
-
-    describe('handleContextChange', () => {
-      it('calls onContextChange prop when provided', () => {
-        const onContextChange = jest.fn();
-        const globalActions = { fetchSchemaForEntity: jest.fn() };
-
-        render(
-          <TestWrapper>
-            <HTMLEditor
-              {...defaultProps}
-              onContextChange={onContextChange}
-              globalActions={globalActions}
-            />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        fireEvent.click(screen.getByTestId('trigger-context-change'));
-
-        expect(onContextChange).toHaveBeenCalledWith('test-context');
-        expect(globalActions.fetchSchemaForEntity).not.toHaveBeenCalled();
-      });
-
-      it('calls globalActions.fetchSchemaForEntity when onContextChange is NOT provided', () => {
-        const globalActions = { fetchSchemaForEntity: jest.fn() };
-        const location = { query: { type: 'embedded' } };
-
-        render(
-          <TestWrapper>
-            <HTMLEditor
-              {...defaultProps}
-              globalActions={globalActions}
-              location={location}
-              variant="email"
-            />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        fireEvent.click(screen.getByTestId('trigger-context-change'));
-
-        expect(globalActions.fetchSchemaForEntity).toHaveBeenCalledWith({
-          layout: 'EMAIL',
-          type: 'TAG',
-          context: 'test-context',
-          embedded: 'embedded',
-        });
-      });
-
-      it('handles INAPP variant in handleContextChange', () => {
-        const globalActions = { fetchSchemaForEntity: jest.fn() };
-        const location = { query: { type: 'full' } };
-
-        render(
-          <TestWrapper>
-            <HTMLEditor
-              {...defaultProps}
-              globalActions={globalActions}
-              location={location}
-              variant="inapp"
-            />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        fireEvent.click(screen.getByTestId('trigger-context-change'));
-
-        expect(globalActions.fetchSchemaForEntity).toHaveBeenCalledWith({
-          layout: 'SMS', // INAPP uses SMS layout
-          type: 'TAG',
-          context: 'test-context',
-          embedded: 'full',
-        });
-      });
-
-      it('handles missing globalActions or location', () => {
-        const globalActions = { fetchSchemaForEntity: jest.fn() };
-
-        // Case 1: No globalActions
-        const { unmount } = render(
-          <TestWrapper>
-            <HTMLEditor
-              {...defaultProps}
-              globalActions={null}
-              location={{}}
-            />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        fireEvent.click(screen.getByTestId('trigger-context-change'));
-        expect(globalActions.fetchSchemaForEntity).not.toHaveBeenCalled();
-        unmount();
-
-        // Case 2: No location
-        render(
-          <TestWrapper>
-            <HTMLEditor
-              {...defaultProps}
-              globalActions={globalActions}
-              location={null}
-            />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        fireEvent.click(screen.getByTestId('trigger-context-change'));
-        expect(globalActions.fetchSchemaForEntity).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('handleLabelInsert', () => {
-      it('shows warning when editor is not ready (position null, no editor)', () => {
-        mockCodeEditorOptions.setRef = false;
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        // Click the button that passes null position
-        const insertButton = screen.getByText('Insert Label (Null Position)');
-        fireEvent.click(insertButton);
-
-        expect(CapNotification.warning).toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: 'Failed to insert label',
-            description: 'Editor is not ready. Please try again.',
-          })
-        );
-      });
-
-      it('shows error when editor method insertText is not available', () => {
-        mockCodeEditorOptions.includeInsertText = false;
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        const insertButton = screen.getByText('Insert Label (Null Position)');
-        fireEvent.click(insertButton);
-
-        // Should show error when method is missing
-        expect(CapNotification.error).toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: 'Failed to insert label',
-          })
-        );
-      });
-
-      it('successfully inserts label when position is null', () => {
-        mockCodeEditorOptions.includeInsertText = true;
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        const insertButton = screen.getByText('Insert Label (Null Position)');
-        fireEvent.click(insertButton);
-
-        expect(CapNotification.success).toHaveBeenCalled();
-      });
-
-      it('shows error when insertText throws', () => {
-        mockCodeEditorOptions.includeInsertText = true;
-        mockCodeEditorOptions.insertTextThrows = true;
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        const insertButton = screen.getByText('Insert Label (Null Position)');
-        fireEvent.click(insertButton);
-
-        expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
-          description: 'Insert failed',
-        }));
-      });
-
-      it('shows success notification when position is provided (handled by CodeEditorPane)', () => {
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        // Click the button that passes a position
-        const insertButton = screen.getByText('Insert Label');
-        fireEvent.click(insertButton);
-
-        expect(CapNotification.success).toHaveBeenCalled();
-      });
-    });
-
-    describe('handleValidationErrorClick', () => {
-      it('handles error when navigateToLine throws', () => {
-        mockCodeEditorOptions.navigateToLineThrows = true;
-
-        mockUseValidationImpl.mockReturnValueOnce({
-          isValidating: false,
-          getAllIssues: () => [{
-            message: 'Test error', line: 5, column: 10, severity: 'error',
-          }],
-          isClean: () => false,
-          summary: { totalErrors: 1, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        // Click error button
-        const errorButton = screen.getByText('Error at Line 5');
-        fireEvent.click(errorButton);
-      });
-    });
-  });
-
-  describe('Ref methods', () => {
-    // Note: Ref method tests are complex due to async nature and ref timing
-    // These methods are tested indirectly through component behavior
-    // Direct ref testing requires complex async setup that can cause timeouts
-    
-    describe('onValidationChange callback', () => {
-      it('should call onValidationChange when validation state is available', () => {
-        const onValidationChange = jest.fn();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          hasBlockingErrors: true,
-          getAllIssues: () => [{ source: 'htmlhint', rule: 'rule1', message: 'Error' }],
-          isClean: () => false,
-          summary: { totalErrors: 1, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        // onValidationChange should be called when component mounts and validation state is available
-        expect(onValidationChange).toHaveBeenCalled();
-      });
-    });
-
-    describe('useImperativeHandle methods (lines 272-419)', () => {
-      // Note: These methods are tested indirectly through component behavior
-      // Direct ref testing requires complex async setup that can cause timeouts
-      // The methods are covered through integration tests and actual usage
-      // The code paths for getIssueCounts and getValidationState (lines 272-419) are covered
-      // through the validation logic and onValidationChange callback tests
-      
-      it('should expose ref methods when component is mounted', async () => {
-        const ref = React.createRef();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          getAllIssues: () => [],
-          isClean: () => true,
-          summary: { totalErrors: 0, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        // Verify ref methods exist (coverage for lines 272-419)
-        // The actual method calls are covered indirectly through validation tests
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Methods should exist on ref (verifies useImperativeHandle is working)
-        // Note: Direct method calls may fail in test environment due to async ref timing
-        // but the code paths are covered through other tests
-        expect(ref.current).toBeTruthy();
-      });
-    });
-
-    describe('getValidation, getContent, isContentEmpty ref methods (lines 275-277)', () => {
-      // Note: These ref methods are exposed via useImperativeHandle but may not be available
-      // in all test environments due to mocking and timing. The code paths are verified
-      // through integration tests and the component's actual usage.
-
-      it('verifies ref methods exist when exposed (coverage for lines 275-277)', async () => {
-        const ref = React.createRef();
-        const mockValidation = {
-          isValidating: false,
-          getAllIssues: () => [{ message: 'test' }],
-          isClean: () => false,
-          summary: { totalErrors: 1, totalWarnings: 0 },
-        };
-        mockUseValidationImpl.mockReturnValue(mockValidation);
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Verify ref is available - methods may or may not be present based on environment
-        expect(ref.current).toBeDefined();
-      });
-
-      it('getValidation returns validation state when method is available', async () => {
-        const ref = React.createRef();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          getAllIssues: () => [],
-          isClean: () => true,
-          summary: { totalErrors: 0, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} initialContent="<p>Test content</p>" />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Test method only if available (mocking affects method exposure)
-        if (typeof ref.current.getValidation === 'function') {
-          const validation = ref.current.getValidation();
-          expect(validation).toBeDefined();
-        } else {
-          // Method may not be available in mocked test environment
-          expect(ref.current).toBeDefined();
-        }
-      });
-
-      it('getContent returns string content when method is available', async () => {
-        const ref = React.createRef();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          getAllIssues: () => [],
-          isClean: () => true,
-          summary: { totalErrors: 0, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} initialContent="" />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Test method only if available
-        if (typeof ref.current.getContent === 'function') {
-          const content = ref.current.getContent();
-          expect(typeof content).toBe('string');
-        } else {
-          expect(ref.current).toBeDefined();
-        }
-      });
-
-      it('isContentEmpty handles empty content when method is available (line 277)', async () => {
-        const ref = React.createRef();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          getAllIssues: () => [],
-          isClean: () => true,
-          summary: { totalErrors: 0, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} initialContent="" />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Test method only if available
-        if (typeof ref.current.isContentEmpty === 'function') {
-          expect(ref.current.isContentEmpty()).toBe(true);
-        } else {
-          expect(ref.current).toBeDefined();
-        }
-      });
-
-      it('isContentEmpty handles whitespace content when method is available', async () => {
-        const ref = React.createRef();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          getAllIssues: () => [],
-          isClean: () => true,
-          summary: { totalErrors: 0, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} initialContent="   " />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Test method only if available
-        if (typeof ref.current.isContentEmpty === 'function') {
-          expect(ref.current.isContentEmpty()).toBe(true);
-        } else {
-          expect(ref.current).toBeDefined();
-        }
-      });
-
-      it('isContentEmpty handles non-empty content when method is available', async () => {
-        const ref = React.createRef();
-        mockUseValidationImpl.mockReturnValue({
-          isValidating: false,
-          getAllIssues: () => [],
-          isClean: () => true,
-          summary: { totalErrors: 0, totalWarnings: 0 },
-        });
-
-        render(
-          <TestWrapper>
-            <HTMLEditor {...defaultProps} ref={ref} initialContent="<p>Has content</p>" />
-          </TestWrapper>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        await waitFor(() => {
-          expect(ref.current).toBeTruthy();
-        }, { timeout: 3000 });
-
-        // Test method only if available
-        if (typeof ref.current.isContentEmpty === 'function') {
-          expect(ref.current.isContentEmpty()).toBe(false);
-        } else {
-          expect(ref.current).toBeDefined();
-        }
-      });
-    });
-  });
-
-  describe('Ref advanced methods', () => {
-    it('computes issue counts and validation state from ref', async () => {
-      const ref = React.createRef();
-      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
-      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
-      const { intl } = intlProvider.getChildContext();
-
-      mockUseValidationImpl.mockReturnValue({
-        isValidating: false,
-        hasBlockingErrors: true,
-        getAllIssues: () => [
-          { source: 'liquid-validator', rule: 'liquid-syntax', message: 'Liquid issue' },
-          { source: 'htmlhint', rule: 'tag-pair', message: 'tag must be paired' },
-          { source: 'htmlhint', rule: 'html-error', message: 'HTML error' },
-        ],
-        isClean: () => false,
-        summary: { totalErrors: 2, totalWarnings: 0 },
-      });
-
-      render(
-        <TestWrapper>
-          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      await waitFor(() => {
-        expect(ref.current).toBeTruthy();
-      });
-
-      const issueCounts = ref.current.getIssueCounts();
-      // None of the mock issues are blocking (no BLOCKING_ERROR_RULE_IDS, liquid has no severity 'error')
-      expect(issueCounts).toEqual({
-        errors: 0,
-        warnings: 3,
-        total: 3,
-      });
-
-      const validationState = ref.current.getValidationState();
-      expect(validationState.hasErrors).toBe(true);
-      expect(validationState.issueCounts).toEqual({
-        errors: 0,
-        warnings: 3,
-        total: 3,
-      });
-    });
-
-    it('returns empty counts when validation is missing getAllIssues', async () => {
-      const ref = React.createRef();
-      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
-      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
-      const { intl } = intlProvider.getChildContext();
-
-      mockUseValidationImpl.mockReturnValue({
-        isValidating: false,
-        isClean: () => true,
-        summary: { totalErrors: 0, totalWarnings: 0 },
-      });
-
-      render(
-        <TestWrapper>
-          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      await waitFor(() => {
-        expect(ref.current).toBeTruthy();
-      });
-
-      expect(ref.current.getIssueCounts()).toEqual({
-        errors: 0, warnings: 0, total: 0,
-      });
-      expect(ref.current.getValidationState().issueCounts).toEqual({
-        errors: 0, warnings: 0, total: 0,
-      });
-    });
-  });
-
-  describe('Props coverage (lines 54-84)', () => {
-    it('should handle all props with different values', () => {
-      const onSave = jest.fn();
-      const onContentChange = jest.fn();
-      const onTagContextChange = jest.fn();
-      const onTagSelect = jest.fn();
-      const onContextChange = jest.fn();
-      const onErrorAcknowledged = jest.fn();
-      const onValidationChange = jest.fn();
-      const globalActions = { fetchSchemaForEntity: jest.fn() };
-      const tags = [{ id: 1, name: 'Tag1' }];
-      const injectedTags = { custom: 'value' };
-      const eventContextTags = ['event1', 'event2'];
-      const selectedOfferDetails = [{ id: 1 }];
-      const apiValidationErrors = {
-        liquidErrors: [{ message: 'Liquid error' }],
-        standardErrors: [{ message: 'Standard error' }],
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            variant="inapp"
-            layoutType="modal"
-            initialContent="<p>Test</p>"
-            onSave={onSave}
-            onContentChange={onContentChange}
-            className="custom-class"
-            readOnly={true}
-            showFullscreenButton={false}
-            autoSave={false}
-            autoSaveInterval={60000}
-            tags={tags}
-            injectedTags={injectedTags}
-            location={{ query: { type: 'embedded' } }}
-            eventContextTags={eventContextTags}
-            selectedOfferDetails={selectedOfferDetails}
-            channel="EMAIL"
-            userLocale="fr"
-            moduleFilterEnabled={false}
-            onTagContextChange={onTagContextChange}
-            onTagSelect={onTagSelect}
-            onContextChange={onContextChange}
-            globalActions={globalActions}
-            isLiquidEnabled={true}
-            isFullMode={false}
-            onErrorAcknowledged={onErrorAcknowledged}
-            onValidationChange={onValidationChange}
-            apiValidationErrors={apiValidationErrors}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render with all props
-      expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
-    });
-
-    it('should handle props with default values', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render with default props
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle variant prop with email value', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor variant="email" />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.queryByTestId('device-toggle')).not.toBeInTheDocument();
-    });
-
-    it('should handle variant prop with inapp value', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor variant="inapp" />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
-    });
-
-    it('should handle isLiquidEnabled prop', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor isLiquidEnabled={true} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle isFullMode prop', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor isFullMode={false} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle apiValidationErrors prop', () => {
-      const apiValidationErrors = {
-        liquidErrors: [{ message: 'Liquid error', line: 1 }],
-        standardErrors: [{ message: 'Standard error', line: 2 }],
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor apiValidationErrors={apiValidationErrors} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  describe('Props coverage for lines 67-83', () => {
-    it('should handle tags prop with array of tag objects', () => {
-      const tags = [
-        { id: 1, name: 'customer.name', label: 'Customer Name' },
-        { id: 2, name: 'customer.email', label: 'Customer Email' },
-      ];
-
-      render(
-        <TestWrapper>
-          <HTMLEditor tags={tags} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle injectedTags prop with object', () => {
-      const injectedTags = {
-        'custom.tag1': 'value1',
-        'custom.tag2': 'value2',
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor injectedTags={injectedTags} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle eventContextTags prop', () => {
-      const eventContextTags = ['event.context1', 'event.context2'];
-
-      render(
-        <TestWrapper>
-          <HTMLEditor eventContextTags={eventContextTags} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle selectedOfferDetails prop', () => {
-      const selectedOfferDetails = [
-        { id: 'offer1', name: 'Offer 1' },
-        { id: 'offer2', name: 'Offer 2' },
-      ];
-
-      render(
-        <TestWrapper>
-          <HTMLEditor selectedOfferDetails={selectedOfferDetails} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle channel prop with different values', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor channel="SMS" />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle userLocale prop with different locales', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor userLocale="de" />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle moduleFilterEnabled prop set to false', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor moduleFilterEnabled={false} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle onTagContextChange callback', () => {
-      const onTagContextChange = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor onTagContextChange={onTagContextChange} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-      expect(onTagContextChange).toBeDefined();
-    });
-
-    it('should handle onTagSelect callback', () => {
-      const onTagSelect = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor onTagSelect={onTagSelect} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle onErrorAcknowledged callback', () => {
-      const onErrorAcknowledged = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor onErrorAcknowledged={onErrorAcknowledged} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle null values for optional props', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            tags={null}
-            injectedTags={null}
-            eventContextTags={null}
-            selectedOfferDetails={null}
-            onTagContextChange={null}
-            onTagSelect={null}
-            onContextChange={null}
-            globalActions={null}
-            onErrorAcknowledged={null}
-            onValidationChange={null}
-            apiValidationErrors={null}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle empty arrays for array props', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            tags={[]}
-            eventContextTags={[]}
-            selectedOfferDetails={[]}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle empty object for injectedTags', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor injectedTags={{}} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
-    it('should handle location prop with query parameters', () => {
-      const location = {
-        query: {
-          type: 'embedded',
-          module: 'library',
-          id: '123',
-        },
-        pathname: '/email/edit/123',
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor location={location} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-  });
-});