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

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -12,14 +12,14 @@
  * Note: Uses injectIntl with forwardRef to provide direct access to CodeEditorPane via ref
  */
 
-import React, {
-  useRef, useCallback, useMemo, useState, useEffect, useImperativeHandle, forwardRef,
-} from 'react';
+import React, { useRef, useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import { Layout } from 'antd'; // Fallback - no Cap UI equivalent
 import { injectIntl, intlShape } from 'react-intl';
 
 // Cap UI Components (First Preference)
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapModal from '@capillarytech/cap-ui-library/CapModal';
@@ -30,6 +30,7 @@ import DeviceToggle from './components/DeviceToggle';
 import SplitContainer from './components/SplitContainer';
 import CodeEditorPane from './components/CodeEditorPane';
 import PreviewPane from './components/PreviewPane';
+import ValidationErrorDisplay from './components/ValidationErrorDisplay';
 import { EditorProvider } from './components/common/EditorContext';
 
 // Hooks and utilities
@@ -39,10 +40,7 @@ import { useLayoutState } from './hooks/useLayoutState';
 import { useValidation } from './hooks/useValidation';
 
 // Constants
-import {
-  HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT, TAG, EMBEDDED, DEFAULT, FULL, ALL, SMS, EMAIL,
-} from './constants';
-import { ISSUE_SOURCES, LABEL_ISSUE_PATTERNS } from './utils/validationConstants';
+import { HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT } from './constants';
 
 // Styles
 import './_htmlEditor.scss';
@@ -51,7 +49,7 @@ import './components/FullscreenModal/_fullscreenModal.scss';
 // Messages
 import messages from './messages';
 
-const HTMLEditor = forwardRef(({
+const HTMLEditor = ({
   intl,
   variant = HTML_EDITOR_VARIANTS.EMAIL, // New prop: 'email' or 'inapp'
   layoutType, // Layout type for InApp variant
@@ -63,33 +61,17 @@ const HTMLEditor = forwardRef(({
   showFullscreenButton = true,
   autoSave = true,
   autoSaveInterval = 30000, // 30 seconds
-  // Tag-related props - tags are fetched and managed by parent component (EmailHTMLEditor, INAPP, etc.)
-  tags = [],
-  injectedTags = {},
-  location,
-  eventContextTags = [],
-  selectedOfferDetails = [],
-  channel,
-  userLocale = 'en',
-  moduleFilterEnabled = true,
-  onTagContextChange, // Parent component handles tag fetching
-  onTagSelect = null,
-  onContextChange = null,
-  globalActions = null,
-  isLiquidEnabled = false, // Controls Liquid tab visibility in ValidationTabs
-  isFullMode = true, // Full mode vs library mode - controls layout and visibility
-  onErrorAcknowledged = null, // Callback when user clicks redirection icon to acknowledge errors
-  onValidationChange = null, // Callback when validation state changes (for parent to track errors)
-  apiValidationErrors = null, // API validation errors from validateLiquidTemplateContent { liquidErrors: [], standardErrors: [] }
   ...props
-}, ref) => {
+}) => {
   // Separate refs for main and modal editors to avoid conflicts
   const mainEditorRef = useRef(null);
   const modalEditorRef = useRef(null);
   const [isFullscreenModalOpen, setIsFullscreenModalOpen] = useState(false);
 
   // Get the currently active editor ref based on fullscreen state
-  const getActiveEditorRef = useCallback(() => isFullscreenModalOpen ? modalEditorRef : mainEditorRef, [isFullscreenModalOpen]);
+  const getActiveEditorRef = useCallback(() => {
+    return isFullscreenModalOpen ? modalEditorRef : mainEditorRef;
+  }, [isFullscreenModalOpen]);
 
   // Initialize custom hooks for state management - always call both hooks to follow Rules of Hooks
   const isEmailVariant = variant === HTML_EDITOR_VARIANTS.EMAIL;
@@ -98,7 +80,7 @@ const HTMLEditor = forwardRef(({
     autoSave: isEmailVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isEmailVariant ? onSave : null,
-    onChange: isEmailVariant ? onContentChange : null,
+    onChange: isEmailVariant ? onContentChange : null
   };
 
   const emailContent = useEditorContent(
@@ -115,7 +97,7 @@ const HTMLEditor = forwardRef(({
       // Convert string content to device-specific format
       inAppInitialContent = {
         [DEVICE_TYPES.ANDROID]: initialContent,
-        [DEVICE_TYPES.IOS]: initialContent,
+        [DEVICE_TYPES.IOS]: initialContent
       };
     } else {
       // Use provided device-specific content
@@ -127,7 +109,7 @@ const HTMLEditor = forwardRef(({
     autoSave: isInAppVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isInAppVariant ? onSave : null,
-    onChange: isInAppVariant ? onContentChange : null,
+    onChange: isInAppVariant ? onContentChange : null
   };
 
   const inAppContent = useInAppContent(inAppInitialContent, inAppOptions);
@@ -135,64 +117,6 @@ const HTMLEditor = forwardRef(({
   // Use appropriate content hook based on variant
   const content = variant === HTML_EDITOR_VARIANTS.EMAIL ? emailContent : inAppContent;
 
-  // Update content when initialContent prop changes (for edit mode)
-  // This ensures the editor updates when template data loads
-  useEffect(() => {
-    if (isEmailVariant && emailContent && initialContent !== undefined && initialContent !== null) {
-      // Only update if content is different to avoid unnecessary updates
-      if (emailContent.content !== initialContent) {
-        emailContent.updateContent(initialContent, true); // immediate update
-      }
-    } else if (isInAppVariant && inAppContent && initialContent !== undefined && initialContent !== null) {
-      // Handle InApp variant updates
-      const contentToUpdate = typeof initialContent === 'string'
-        ? { [DEVICE_TYPES.ANDROID]: initialContent, [DEVICE_TYPES.IOS]: initialContent }
-        : initialContent;
-      if (inAppContent.updateContent) {
-        const currentContent = inAppContent.getDeviceContent?.(inAppContent.activeDevice);
-        const newContent = contentToUpdate[inAppContent.activeDevice] || contentToUpdate[DEVICE_TYPES.ANDROID] || '';
-        if (currentContent !== newContent) {
-          inAppContent.updateContent(newContent, true);
-        }
-      }
-    }
-  }, [initialContent, isEmailVariant, isInAppVariant]);
-  // Handle context change for tag API calls
-  // If variant is INAPP, use SMS layout; otherwise use the channel (EMAIL)
-  const handleContextChange = useCallback((contextData) => {
-    // If onContextChange is provided, use it instead of making our own API call
-    // This prevents duplicate API calls when parent component handles tag fetching
-    if (onContextChange) {
-      onContextChange(contextData);
-      return;
-    }
-
-    // Only make API call if onContextChange is not provided and globalActions is available
-    if (!globalActions || !location) {
-      return;
-    }
-
-    const { type } = location.query || {};
-    const tempData = (contextData || '').toLowerCase();
-    const isEmbedded = type === EMBEDDED;
-    const embedded = isEmbedded ? type : FULL;
-    const context = tempData === ALL ? DEFAULT : tempData;
-
-    // Determine layout: INAPP variant uses SMS, EMAIL variant uses EMAIL
-    const layout = variant === HTML_EDITOR_VARIANTS.INAPP ? SMS : EMAIL;
-
-    const query = {
-      layout,
-      type: TAG,
-      context,
-      embedded,
-    };
-
-    // Call the API via Redux action - this will trigger the saga which calls Api.fetchSchemaForEntity
-    // The API endpoint will be: /meta/TAG?query={...}
-    globalActions.fetchSchemaForEntity(query);
-  }, [variant, globalActions, location, onContextChange]);
-
   // Destructure content properties for cleaner access throughout component
   const {
     activeDevice,
@@ -200,14 +124,14 @@ const HTMLEditor = forwardRef(({
     switchDevice,
     toggleContentSync,
     getDeviceContent,
-    markAsSaved,
+    markAsSaved
   } = content || {};
 
   const layout = useLayoutState({
     splitSizes: [50, 50],
     viewMode: 'desktop',
     mobileWidth: 375,
-    isFullscreen: false,
+    isFullscreen: false
   });
 
   // Get current content for validation based on variant
@@ -234,7 +158,7 @@ const HTMLEditor = forwardRef(({
       'sanitizer.productionValidHtml': messages.sanitizer.productionValidHtml,
       'sanitizer.productionSanitized': messages.sanitizer.productionSanitized,
       'sanitizer.productionInlineCss': messages.sanitizer.productionInlineCss,
-      'sanitizer.productionLargeContent': messages.sanitizer.productionLargeContent,
+      'sanitizer.productionLargeContent': messages.sanitizer.productionLargeContent
     };
 
     const messageObj = messageMap[messageKey];
@@ -255,7 +179,7 @@ const HTMLEditor = forwardRef(({
       'validator.largeImageDetected': messages.validator.largeImageDetected,
       'validator.unclosedCssRule': messages.validator.unclosedCssRule,
       'validator.emptyCssRule': messages.validator.emptyCssRule,
-      'validator.cssValidationFailed': messages.validator.cssValidationFailed,
+      'validator.cssValidationFailed': messages.validator.cssValidationFailed
     };
 
     const messageObj = messageMap[messageKey];
@@ -266,375 +190,57 @@ const HTMLEditor = forwardRef(({
     enableRealTime: true,
     debounceMs: 500,
     enableSanitization: true,
-    securityLevel: 'standard',
-    apiValidationErrors, // Pass API validation errors to merge with client-side validation
+    securityLevel: 'standard'
   }, formatSanitizerMessage, formatValidatorMessage);
 
-  // Expose validation and content state via ref
-  useImperativeHandle(ref, () => ({
-    getValidation: () => validation,
-    getContent: () => currentContent,
-    isContentEmpty: () => !currentContent || currentContent.trim() === '',
-    getIssueCounts: () => {
-      // Check if validation is ready and has getAllIssues method
-      if (!validation || typeof validation.getAllIssues !== 'function') {
-        return {
-          html: 0, label: 0, liquid: 0, total: 0,
-        };
-      }
-      const allIssues = validation.getAllIssues();
-
-      let htmlCount = 0;
-      let labelCount = 0;
-      let liquidCount = 0;
-
-      allIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        // Check if it's a Liquid issue
-        if (source === ISSUE_SOURCES.LIQUID) {
-          liquidCount++;
-          return;
-        }
-
-        // Check if it's a Label (tag syntax) issue
-        const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-          (pattern) => messageLower.includes(pattern.toLowerCase())
-            || ruleLower.includes(pattern.toLowerCase()),
-        );
-
-        if (isLabelIssue) {
-          labelCount++;
-          return;
-        }
+  // Handle label insertion at cursor position
+  const handleLabelInsert = useCallback((label, position) => {
+    // With injectIntl({ forwardRef: true }), ref points directly to CodeEditorPane
+    const activeEditorRef = getActiveEditorRef();
+    const editor = activeEditorRef.current;
 
-        // Default to HTML issues
-        htmlCount++;
+    if (!editor) {
+      CapNotification.warning({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: intl.formatMessage(messages.editorNotReady),
+        duration: 3
       });
-
-      return {
-        html: htmlCount,
-        label: labelCount,
-        liquid: liquidCount,
-        total: allIssues.length,
-      };
-    },
-    getValidationState: () => ({
-      isValidating: validation?.isValidating || false,
-      hasErrors: validation?.hasBlockingErrors || false,
-      issueCounts: (() => {
-        if (!validation || typeof validation.getAllIssues !== 'function') {
-          return {
-            html: 0, label: 0, liquid: 0, total: 0,
-          };
-        }
-        const allIssues = validation.getAllIssues();
-        // Use same logic as getIssueCounts
-        let htmlCount = 0;
-        let labelCount = 0;
-        let liquidCount = 0;
-
-        allIssues.forEach((issue) => {
-          const { source, rule, message } = issue;
-          const messageLower = (message || '').toLowerCase();
-          const ruleLower = (rule || '').toLowerCase();
-
-          if (source === ISSUE_SOURCES.LIQUID) {
-            liquidCount++;
-            return;
-          }
-
-          const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-            (pattern) => messageLower.includes(pattern.toLowerCase())
-                || ruleLower.includes(pattern.toLowerCase()),
-          );
-
-          if (isLabelIssue) {
-            labelCount++;
-            return;
-          }
-
-          htmlCount++;
-        });
-
-        return {
-          html: htmlCount,
-          label: labelCount,
-          liquid: liquidCount,
-          total: allIssues.length,
-        };
-      })(),
-    })
-    ,
-  }), [validation, currentContent, apiValidationErrors]); // Include apiValidationErrors so ref methods return updated counts
-
-  // Use ref to store callback to avoid infinite loops (callback in deps would cause re-runs)
-  const onValidationChangeRef = useRef(onValidationChange);
-  useEffect(() => {
-    onValidationChangeRef.current = onValidationChange;
-  }, [onValidationChange]);
-
-  // Track last sent validation state to prevent duplicate updates
-  const lastSentValidationStateRef = useRef(null);
-
-  // Store validation ref to access current value without triggering re-renders
-  const validationRef = useRef(validation);
-  validationRef.current = validation;
-
-  // Extract STABLE primitive values from validation for dependency array
-  const isValidating = validation?.isValidating;
-  const validationTotalErrors = validation?.summary?.totalErrors || 0;
-  const validationTotalWarnings = validation?.summary?.totalWarnings || 0;
-  const validationLastValidated = validation?.lastValidated?.getTime?.() || null;
-  // Only Rule Group #1 (Input & Sanitization) blocks; use for UI gating (Done/Update/Preview/Test)
-  const validationHasBlockingErrors = validation?.hasBlockingErrors || false;
-
-  // Notify parent component when validation state changes
-  useEffect(() => {
-    if (!onValidationChangeRef.current) {
       return;
     }
 
-    // Skip if still validating (wait for validation to complete)
-    if (isValidating) {
-      return;
-    }
-
-    // Calculate issue counts from validation using ref (avoid stale closure)
-    const calculateIssueCounts = () => {
-      const currentValidation = validationRef.current;
-      if (!currentValidation || typeof currentValidation.getAllIssues !== 'function') {
-        return {
-          html: 0, label: 0, liquid: 0, total: 0,
-        };
-      }
-      const allIssues = currentValidation.getAllIssues();
-
-      let htmlCount = 0;
-      let labelCount = 0;
-      let liquidCount = 0;
-
-      allIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        if (source === ISSUE_SOURCES.LIQUID) {
-          liquidCount += 1;
-          return;
-        }
-
-        const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-          (pattern) => messageLower.includes(pattern.toLowerCase())
-            || ruleLower.includes(pattern.toLowerCase()),
-        );
-
-        if (isLabelIssue) {
-          labelCount += 1;
-          return;
-        }
-
-        htmlCount += 1;
+    // Check if the required methods exist
+    if (typeof editor?.insertText !== 'function') {
+      CapNotification.error({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: intl.formatMessage(messages.editorMethodNotAvailable),
+        duration: 4
       });
-
-      return {
-        html: htmlCount,
-        label: labelCount,
-        liquid: liquidCount,
-        total: allIssues.length,
-      };
-    };
-
-    const issueCounts = calculateIssueCounts();
-    const isContentEmpty = !currentContent || currentContent.trim() === '';
-
-    // hasErrors = only Rule Group #1 (Input & Sanitization) – gates Done/Update/Preview/Test
-    const newState = {
-      isContentEmpty,
-      issueCounts,
-      validationComplete: true,
-      hasErrors: validationRef.current?.hasBlockingErrors ?? false,
-    };
-
-    // Only call callback if state actually changed (prevent infinite loops)
-    const lastState = lastSentValidationStateRef.current;
-    const hasChanged = !lastState
-      || lastState.isContentEmpty !== newState.isContentEmpty
-      || lastState.validationComplete !== newState.validationComplete
-      || lastState.hasErrors !== newState.hasErrors
-      || lastState.issueCounts?.total !== newState.issueCounts?.total
-      || lastState.issueCounts?.html !== newState.issueCounts?.html
-      || lastState.issueCounts?.label !== newState.issueCounts?.label
-      || lastState.issueCounts?.liquid !== newState.issueCounts?.liquid;
-
-    if (hasChanged) {
-      lastSentValidationStateRef.current = newState;
-      onValidationChangeRef.current(newState);
-    }
-  }, [isValidating, validationTotalErrors, validationTotalWarnings, validationLastValidated, validationHasBlockingErrors, currentContent, apiValidationErrors]);
-
-  // Send initial state on mount to ensure parent has correct initial button state
-  const hasInitializedRef = useRef(false);
-  useEffect(() => {
-    if (hasInitializedRef.current || !onValidationChangeRef.current) {
-      return;
-    }
-    hasInitializedRef.current = true;
-
-    // Send initial state with validationComplete=false to indicate validation pending
-    const isContentEmpty = !currentContent || currentContent.trim() === '';
-    onValidationChangeRef.current({
-      isContentEmpty,
-      issueCounts: {
-        html: 0, label: 0, liquid: 0, total: 0,
-      },
-      validationComplete: false, // Validation hasn't run yet
-      hasErrors: false,
-    });
-  }, [currentContent]); // Only depend on currentContent to run on initial content load
-
-  // Force validation state recalculation when API validation errors change
-  // This ensures that API errors are included in issue counts and displayed in ValidationErrorDisplay
-  useEffect(() => {
-    if (!onValidationChangeRef.current) {
-      return;
-    }
-
-    // Skip if still validating (wait for validation to complete)
-    if (validation?.isValidating) {
       return;
     }
 
-    // Recalculate issue counts including API errors
-    const calculateIssueCounts = () => {
-      if (!validation || typeof validation.getAllIssues !== 'function') {
-        return {
-          html: 0, label: 0, liquid: 0, total: 0,
-        };
-      }
-      const allIssues = validation.getAllIssues();
-
-      let htmlCount = 0;
-      let labelCount = 0;
-      let liquidCount = 0;
-
-      allIssues.forEach((issue) => {
-        const { source, rule, message } = issue;
-        const messageLower = (message || '').toLowerCase();
-        const ruleLower = (rule || '').toLowerCase();
-
-        if (source === ISSUE_SOURCES.LIQUID) {
-          liquidCount += 1;
-          return;
-        }
-
-        const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-          (pattern) => messageLower.includes(pattern.toLowerCase())
-            || ruleLower.includes(pattern.toLowerCase()),
-        );
-
-        if (isLabelIssue) {
-          labelCount += 1;
-          return;
-        }
-
-        htmlCount += 1;
-      });
-
-      return {
-        html: htmlCount,
-        label: labelCount,
-        liquid: liquidCount,
-        total: allIssues.length,
-      };
-    };
-
-    const issueCounts = calculateIssueCounts();
-    const isContentEmpty = !currentContent || currentContent.trim() === '';
-
-    const newState = {
-      isContentEmpty,
-      issueCounts,
-      validationComplete: true,
-      hasErrors: validation?.hasBlockingErrors ?? false,
-    };
-
-    const lastState = lastSentValidationStateRef.current;
-    const hasChanged = !lastState
-      || lastState.hasErrors !== newState.hasErrors
-      || lastState.issueCounts?.total !== newState.issueCounts?.total
-      || lastState.issueCounts?.html !== newState.issueCounts?.html
-      || lastState.issueCounts?.label !== newState.issueCounts?.label
-      || lastState.issueCounts?.liquid !== newState.issueCounts?.liquid;
-
-    if (hasChanged) {
-      lastSentValidationStateRef.current = newState;
-      onValidationChangeRef.current(newState);
-    }
-  }, [apiValidationErrors, validation, currentContent, onValidationChangeRef]);
+    try {
+      // Get current cursor position or use provided position
+      const cursor = position !== undefined
+        ? position
+        : (typeof editor?.getCursor === 'function' ? editor.getCursor() : 0);
 
-  // Handle label insertion at cursor position
-  // Note: This is called for notification purposes only when tag is inserted via CodeEditorPane
-  // The actual insertion happens in CodeEditorPane.handleTagSelect
-  const handleLabelInsert = useCallback((label, position) => {
-    // If position is explicitly null, it means the editor wasn't ready when tag was selected
-    // In this case, CodeEditorPane couldn't insert the tag, so we should try here
-    if (position === null) {
-      // With injectIntl({ forwardRef: true }), ref points directly to CodeEditorPane
-      const activeEditorRef = getActiveEditorRef();
-      const editor = activeEditorRef.current;
-
-      if (!editor) {
-        CapNotification.warning({
-          message: intl.formatMessage(messages.labelInsertError),
-          description: intl.formatMessage(messages.editorNotReady),
-          duration: 3,
-        });
-        return;
-      }
+      // Insert label at cursor position
+      editor.insertText(label, cursor);
 
-      // Check if the required methods exist
-      if (typeof editor?.insertText !== 'function') {
-        CapNotification.error({
-          message: intl.formatMessage(messages.labelInsertError),
-          description: intl.formatMessage(messages.editorMethodNotAvailable),
-          duration: 4,
-        });
-        return;
-      }
+      // Focus the editor if focus method is available
+      editor?.focus?.();
 
-      try {
-        // Get current cursor position
-        const cursor = typeof editor?.getCursor === 'function' ? editor.getCursor() : 0;
-
-        // Insert label at cursor position
-        editor.insertText(label, cursor);
-
-        // Focus the editor if focus method is available
-        editor?.focus?.();
-
-        // Show success notification
-        CapNotification.success({
-          message: intl.formatMessage(messages.labelInserted),
-          description: intl.formatMessage(messages.labelInsertedDescription, { label }),
-          duration: 2,
-        });
-      } catch (error) {
-        CapNotification.error({
-          message: intl.formatMessage(messages.labelInsertError),
-          description: error.message,
-          duration: 4,
-        });
-      }
-    } else {
-      // Tag was already inserted by CodeEditorPane (position is a valid number)
-      // Just show success notification - no need to access editor
+      // Show success notification
       CapNotification.success({
         message: intl.formatMessage(messages.labelInserted),
         description: intl.formatMessage(messages.labelInsertedDescription, { label }),
-        duration: 2,
+        duration: 2
+      });
+    } catch (error) {
+      CapNotification.error({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: error.message,
+        duration: 4
       });
     }
   }, [intl, getActiveEditorRef]);
@@ -653,13 +259,13 @@ const HTMLEditor = forwardRef(({
 
       CapNotification.success({
         message: intl.formatMessage(messages.contentSaved),
-        duration: 2,
+        duration: 2
       });
     } catch (error) {
       CapNotification.error({
         message: intl.formatMessage(messages.saveError),
         description: error.message,
-        duration: 4,
+        duration: 4
       });
     }
   }, [content, onSave, intl, markAsSaved]);
@@ -670,27 +276,21 @@ const HTMLEditor = forwardRef(({
     const editorInstance = activeEditorRef.current;
     const { line, column = 1 } = error || {};
 
-    // Notify parent that user acknowledged errors by clicking redirection icon
-    // This enables the buttons even if we can't navigate to a specific line
-    if (onErrorAcknowledged) {
-      onErrorAcknowledged();
-    }
-
-    if (editorInstance) {
+    if (editorInstance && line) {
       try {
-        // If line number exists, navigate to it; otherwise just focus the editor
-        if (line && editorInstance?.navigateToLine) {
+        // Access the CodeMirror view through the exposed ref methods
+        if (editorInstance?.navigateToLine) {
           editorInstance.navigateToLine(line, column);
         } else {
-          // For API errors without line numbers, just focus the editor
           editorInstance?.focus?.();
+          // Fallback: just focus the editor if navigation isn't available
         }
       } catch (err) {
         // Fallback: just focus the editor
         editorInstance?.focus?.();
       }
     }
-  }, [getActiveEditorRef, onErrorAcknowledged]);
+  }, [getActiveEditorRef]);
 
   // Handle fullscreen modal
   const handleOpenFullscreen = useCallback(() => {
@@ -707,7 +307,6 @@ const HTMLEditor = forwardRef(({
     content,
     layout,
     validation,
-    isLiquidEnabled,
     editorRef: getActiveEditorRef(),
     handleLabelInsert,
     handleSave,
@@ -720,14 +319,13 @@ const HTMLEditor = forwardRef(({
       switchDevice,
       toggleContentSync,
       getDeviceContent,
-      layoutType,
-    }),
+      layoutType
+    })
   }), [
     variant,
     content,
     layout,
     validation,
-    isLiquidEnabled,
     getActiveEditorRef,
     handleLabelInsert,
     handleSave,
@@ -738,7 +336,7 @@ const HTMLEditor = forwardRef(({
     switchDevice,
     toggleContentSync,
     getDeviceContent,
-    layoutType,
+    layoutType
   ]);
 
   // Loading state
@@ -750,14 +348,9 @@ const HTMLEditor = forwardRef(({
     );
   }
 
-  // Add library-mode class when not in full mode
-  // Note: isFullMode defaults to true, so library mode is when isFullMode === false
-  const isLibraryMode = isFullMode === false;
-  const editorClassName = `html-editor html-editor--${variant} ${isLibraryMode ? 'html-editor--library-mode' : ''} ${className}`.trim();
-
   return (
     <EditorProvider value={contextValue}>
-      <div className={editorClassName} {...props}>
+      <div className={`html-editor html-editor--${variant} ${className}`} {...props}>
         {/* Editor Toolbar - Conditional based on variant */}
         {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
           <EditorToolbar
@@ -794,23 +387,19 @@ const HTMLEditor = forwardRef(({
               ref={mainEditorRef}
               readOnly={readOnly}
               onLabelInsert={handleLabelInsert}
-              onErrorClick={handleValidationErrorClick}
-              tags={tags}
-              injectedTags={injectedTags}
-              location={location}
-              eventContextTags={eventContextTags}
-              selectedOfferDetails={selectedOfferDetails}
-              channel={channel}
-              userLocale={userLocale}
-              moduleFilterEnabled={moduleFilterEnabled}
-              onTagContextChange={onTagContextChange}
-              onTagSelect={onTagSelect}
-              onContextChange={handleContextChange}
             />
 
             {/* Preview Pane */}
             <PreviewPane />
           </SplitContainer>
+
+          {/* Validation Display - Full Width Below Split Container */}
+          <ValidationErrorDisplay
+            validation={validation}
+            onErrorClick={handleValidationErrorClick}
+            variant={variant}
+            className="html-editor-validation"
+          />
         </CapRow>
 
         {/* Fullscreen Modal */}
@@ -822,17 +411,17 @@ const HTMLEditor = forwardRef(({
           maskClosable={false}
           centered
           closable={false}
-          width="90vw"
+          width={"90vw"}
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
+          <CapRow className="html-editor-fullscreen">
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar
-                showFullscreenButton // Show fullscreen button in modal to allow closing
+                showFullscreenButton={true} // Show fullscreen button in modal to allow closing
                 onLabelInsert={handleLabelInsert}
                 onSave={handleSave}
-                isFullscreenMode
+                isFullscreenMode={true}
                 onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
               />
             ) : (
@@ -845,10 +434,10 @@ const HTMLEditor = forwardRef(({
                   onKeepContentSameChange={toggleContentSync}
                 />
                 <EditorToolbar
-                  showFullscreenButton // Show fullscreen button in modal to allow closing
+                  showFullscreenButton={true} // Show fullscreen button in modal to allow closing
                   onLabelInsert={handleLabelInsert}
                   onSave={handleSave}
-                  isFullscreenMode
+                  isFullscreenMode={true}
                   onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
                   variant={variant}
                   showTitle={false} // Hide title in InApp variant
@@ -863,30 +452,28 @@ const HTMLEditor = forwardRef(({
                 <CodeEditorPane
                   ref={modalEditorRef}
                   readOnly={readOnly}
-                  isFullscreenMode
+                  isFullscreenMode={true}
                   onLabelInsert={handleLabelInsert}
-                  onErrorClick={handleValidationErrorClick}
-                  tags={tags}
-                  injectedTags={injectedTags}
-                  location={location}
-                  eventContextTags={eventContextTags}
-                  selectedOfferDetails={selectedOfferDetails}
-                  channel={channel}
-                  userLocale={userLocale}
-                  moduleFilterEnabled={moduleFilterEnabled}
-                  onTagContextChange={onTagContextChange}
                 />
 
-                {/* Preview Pane */}
-                <PreviewPane isFullscreenMode isModalContext />
-              </SplitContainer>
+              {/* Preview Pane */}
+              <PreviewPane isFullscreenMode={true} isModalContext={true} />
+            </SplitContainer>
+
+            {/* Validation Display in Modal */}
+            <ValidationErrorDisplay
+              validation={validation}
+              onErrorClick={handleValidationErrorClick}
+              variant={variant}
+              className="html-editor-validation"
+            />
             </CapRow>
           </CapRow>
         </CapModal>
       </div>
     </EditorProvider>
   );
-});
+};
 
 HTMLEditor.propTypes = {
   intl: intlShape.isRequired,
@@ -894,7 +481,7 @@ HTMLEditor.propTypes = {
   layoutType: PropTypes.string, // Layout type for InApp variant
   initialContent: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.objectOf(PropTypes.string), // Per-device content for INAPP variant
+    PropTypes.objectOf(PropTypes.string) // Per-device content for INAPP variant
   ]),
   onSave: PropTypes.func,
   onContentChange: PropTypes.func,
@@ -902,33 +489,11 @@ HTMLEditor.propTypes = {
   readOnly: PropTypes.bool,
   showFullscreenButton: PropTypes.bool,
   autoSave: PropTypes.bool,
-  autoSaveInterval: PropTypes.number,
-  // Tag-related props - tags are fetched and managed by parent component
-  tags: PropTypes.array,
-  injectedTags: PropTypes.object,
-  location: PropTypes.object,
-  eventContextTags: PropTypes.array,
-  selectedOfferDetails: PropTypes.array,
-  channel: PropTypes.string,
-  userLocale: PropTypes.string,
-  moduleFilterEnabled: PropTypes.bool,
-  onTagContextChange: PropTypes.func, // Required - parent must handle tag fetching
-  onTagSelect: PropTypes.func,
-  onContextChange: PropTypes.func, // Deprecated: use globalActions instead
-  globalActions: PropTypes.object,
-  isLiquidEnabled: PropTypes.bool, // Controls Liquid tab visibility in validation
-  isFullMode: PropTypes.bool, // Full mode vs library mode
-  onErrorAcknowledged: PropTypes.func, // Callback when user clicks redirection icon to acknowledge errors
-  onValidationChange: PropTypes.func, // Callback when validation state changes
-  apiValidationErrors: PropTypes.shape({
-    liquidErrors: PropTypes.arrayOf(PropTypes.string),
-    standardErrors: PropTypes.arrayOf(PropTypes.string),
-  }), // API validation errors from validateLiquidTemplateContent
+  autoSaveInterval: PropTypes.number
 };
 
 HTMLEditor.defaultProps = {
   variant: HTML_EDITOR_VARIANTS.EMAIL, // Default to email variant
-  layoutType: null,
   initialContent: null, // Will use default from useEditorContent hook
   onSave: null,
   onContentChange: null,
@@ -936,26 +501,8 @@ HTMLEditor.defaultProps = {
   readOnly: false,
   showFullscreenButton: true,
   autoSave: true,
-  autoSaveInterval: 30000,
-  // Tag-related defaults - tags are fetched and managed by parent component
-  tags: [],
-  injectedTags: {},
-  location: null,
-  eventContextTags: [],
-  selectedOfferDetails: [],
-  channel: null,
-  userLocale: 'en',
-  moduleFilterEnabled: true,
-  onTagContextChange: null, // Parent component should provide this
-  onTagSelect: null,
-  onContextChange: null,
-  globalActions: null, // Redux actions for API calls
-  isLiquidEnabled: false,
-  isFullMode: true, // Default to full mode
-  onErrorAcknowledged: null, // Callback when user clicks redirection icon to acknowledge errors
-  onValidationChange: null, // Callback when validation state changes
-  apiValidationErrors: null, // API validation errors from validateLiquidTemplateContent
+  autoSaveInterval: 30000
 };
 
-// Export with injectIntl - HTMLEditor now uses forwardRef internally
-export default injectIntl(HTMLEditor);
+// Export with forwardRef to allow direct access to CodeEditorPane via ref
+export default injectIntl(HTMLEditor, { forwardRef: true });