@capillarytech/creatives-library 8.0.254 → 8.0.255-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 } from 'react';
+import React, {
+  useRef, useCallback, useMemo, useState, useEffect, useImperativeHandle, forwardRef,
+} 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,7 +30,6 @@ 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
@@ -40,7 +39,10 @@ import { useLayoutState } from './hooks/useLayoutState';
 import { useValidation } from './hooks/useValidation';
 
 // Constants
-import { HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT } from './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';
 
 // Styles
 import './_htmlEditor.scss';
@@ -49,7 +51,7 @@ import './components/FullscreenModal/_fullscreenModal.scss';
 // Messages
 import messages from './messages';
 
-const HTMLEditor = ({
+const HTMLEditor = forwardRef(({
   intl,
   variant = HTML_EDITOR_VARIANTS.EMAIL, // New prop: 'email' or 'inapp'
   layoutType, // Layout type for InApp variant
@@ -61,17 +63,33 @@ const HTMLEditor = ({
   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(() => {
-    return isFullscreenModalOpen ? modalEditorRef : mainEditorRef;
-  }, [isFullscreenModalOpen]);
+  const getActiveEditorRef = useCallback(() => 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;
@@ -80,7 +98,7 @@ const HTMLEditor = ({
     autoSave: isEmailVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isEmailVariant ? onSave : null,
-    onChange: isEmailVariant ? onContentChange : null
+    onChange: isEmailVariant ? onContentChange : null,
   };
 
   const emailContent = useEditorContent(
@@ -97,7 +115,7 @@ const HTMLEditor = ({
       // 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
@@ -109,7 +127,7 @@ const HTMLEditor = ({
     autoSave: isInAppVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isInAppVariant ? onSave : null,
-    onChange: isInAppVariant ? onContentChange : null
+    onChange: isInAppVariant ? onContentChange : null,
   };
 
   const inAppContent = useInAppContent(inAppInitialContent, inAppOptions);
@@ -117,6 +135,64 @@ const HTMLEditor = ({
   // 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,
@@ -124,14 +200,14 @@ const HTMLEditor = ({
     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
@@ -158,7 +234,7 @@ const HTMLEditor = ({
       '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];
@@ -179,7 +255,7 @@ const HTMLEditor = ({
       '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];
@@ -190,57 +266,375 @@ const HTMLEditor = ({
     enableRealTime: true,
     debounceMs: 500,
     enableSanitization: true,
-    securityLevel: 'standard'
+    securityLevel: 'standard',
+    apiValidationErrors, // Pass API validation errors to merge with client-side validation
   }, formatSanitizerMessage, formatValidatorMessage);
 
-  // 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;
+  // 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;
+        }
 
-    if (!editor) {
-      CapNotification.warning({
-        message: intl.formatMessage(messages.labelInsertError),
-        description: intl.formatMessage(messages.editorNotReady),
-        duration: 3
+        // Default to HTML issues
+        htmlCount++;
       });
+
+      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;
     }
 
-    // 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
+    // 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;
       });
+
+      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;
     }
 
-    try {
-      // Get current cursor position or use provided position
-      const cursor = position !== undefined
-        ? position
-        : (typeof editor?.getCursor === 'function' ? editor.getCursor() : 0);
+    // Skip if still validating (wait for validation to complete)
+    if (validation?.isValidating) {
+      return;
+    }
 
-      // Insert label at cursor position
-      editor.insertText(label, cursor);
+    // 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();
 
-      // Focus the editor if focus method is available
-      editor?.focus?.();
+        if (source === ISSUE_SOURCES.LIQUID) {
+          liquidCount += 1;
+          return;
+        }
+
+        const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
+          (pattern) => messageLower.includes(pattern.toLowerCase())
+            || ruleLower.includes(pattern.toLowerCase()),
+        );
 
-      // Show success notification
+        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]);
+
+  // 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;
+      }
+
+      // 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;
+      }
+
+      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
       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
+        duration: 2,
       });
     }
   }, [intl, getActiveEditorRef]);
@@ -259,13 +653,13 @@ const HTMLEditor = ({
 
       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]);
@@ -276,21 +670,27 @@ const HTMLEditor = ({
     const editorInstance = activeEditorRef.current;
     const { line, column = 1 } = error || {};
 
-    if (editorInstance && line) {
+    // 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) {
       try {
-        // Access the CodeMirror view through the exposed ref methods
-        if (editorInstance?.navigateToLine) {
+        // If line number exists, navigate to it; otherwise just focus the editor
+        if (line && 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]);
+  }, [getActiveEditorRef, onErrorAcknowledged]);
 
   // Handle fullscreen modal
   const handleOpenFullscreen = useCallback(() => {
@@ -307,6 +707,7 @@ const HTMLEditor = ({
     content,
     layout,
     validation,
+    isLiquidEnabled,
     editorRef: getActiveEditorRef(),
     handleLabelInsert,
     handleSave,
@@ -319,13 +720,14 @@ const HTMLEditor = ({
       switchDevice,
       toggleContentSync,
       getDeviceContent,
-      layoutType
-    })
+      layoutType,
+    }),
   }), [
     variant,
     content,
     layout,
     validation,
+    isLiquidEnabled,
     getActiveEditorRef,
     handleLabelInsert,
     handleSave,
@@ -336,7 +738,7 @@ const HTMLEditor = ({
     switchDevice,
     toggleContentSync,
     getDeviceContent,
-    layoutType
+    layoutType,
   ]);
 
   // Loading state
@@ -348,9 +750,14 @@ const HTMLEditor = ({
     );
   }
 
+  // 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={`html-editor html-editor--${variant} ${className}`} {...props}>
+      <div className={editorClassName} {...props}>
         {/* Editor Toolbar - Conditional based on variant */}
         {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
           <EditorToolbar
@@ -387,19 +794,23 @@ const HTMLEditor = ({
               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 */}
@@ -411,17 +822,17 @@ const HTMLEditor = ({
           maskClosable={false}
           centered
           closable={false}
-          width={"90vw"}
+          width="90vw"
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className="html-editor-fullscreen">
+          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar
-                showFullscreenButton={true} // Show fullscreen button in modal to allow closing
+                showFullscreenButton // Show fullscreen button in modal to allow closing
                 onLabelInsert={handleLabelInsert}
                 onSave={handleSave}
-                isFullscreenMode={true}
+                isFullscreenMode
                 onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
               />
             ) : (
@@ -434,10 +845,10 @@ const HTMLEditor = ({
                   onKeepContentSameChange={toggleContentSync}
                 />
                 <EditorToolbar
-                  showFullscreenButton={true} // Show fullscreen button in modal to allow closing
+                  showFullscreenButton // Show fullscreen button in modal to allow closing
                   onLabelInsert={handleLabelInsert}
                   onSave={handleSave}
-                  isFullscreenMode={true}
+                  isFullscreenMode
                   onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
                   variant={variant}
                   showTitle={false} // Hide title in InApp variant
@@ -452,28 +863,30 @@ const HTMLEditor = ({
                 <CodeEditorPane
                   ref={modalEditorRef}
                   readOnly={readOnly}
-                  isFullscreenMode={true}
+                  isFullscreenMode
                   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={true} isModalContext={true} />
-            </SplitContainer>
-
-            {/* Validation Display in Modal */}
-            <ValidationErrorDisplay
-              validation={validation}
-              onErrorClick={handleValidationErrorClick}
-              variant={variant}
-              className="html-editor-validation"
-            />
+                {/* Preview Pane */}
+                <PreviewPane isFullscreenMode isModalContext />
+              </SplitContainer>
             </CapRow>
           </CapRow>
         </CapModal>
       </div>
     </EditorProvider>
   );
-};
+});
 
 HTMLEditor.propTypes = {
   intl: intlShape.isRequired,
@@ -481,7 +894,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,
@@ -489,11 +902,33 @@ HTMLEditor.propTypes = {
   readOnly: PropTypes.bool,
   showFullscreenButton: PropTypes.bool,
   autoSave: PropTypes.bool,
-  autoSaveInterval: PropTypes.number
+  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
 };
 
 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,
@@ -501,8 +936,26 @@ HTMLEditor.defaultProps = {
   readOnly: false,
   showFullscreenButton: true,
   autoSave: true,
-  autoSaveInterval: 30000
+  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
 };
 
-// Export with forwardRef to allow direct access to CodeEditorPane via ref
-export default injectIntl(HTMLEditor, { forwardRef: true });
+// Export with injectIntl - HTMLEditor now uses forwardRef internally
+export default injectIntl(HTMLEditor);