@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

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,
-} 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';
@@ -40,9 +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 { HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT } from './constants';
 
 // Styles
 import './_htmlEditor.scss';
@@ -63,20 +61,6 @@ 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
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -85,7 +69,9 @@ const HTMLEditor = ({
   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;
@@ -94,7 +80,7 @@ const HTMLEditor = ({
     autoSave: isEmailVariant ? autoSave : false,
     autoSaveInterval,
     onSave: isEmailVariant ? onSave : null,
-    onChange: isEmailVariant ? onContentChange : null,
+    onChange: isEmailVariant ? onContentChange : null
   };
 
   const emailContent = useEditorContent(
@@ -111,7 +97,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
@@ -123,7 +109,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);
@@ -131,64 +117,6 @@ 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,
@@ -196,14 +124,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
@@ -230,7 +158,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];
@@ -251,7 +179,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];
@@ -262,69 +190,57 @@ const HTMLEditor = ({
     enableRealTime: true,
     debounceMs: 500,
     enableSanitization: true,
-    securityLevel: 'standard',
+    securityLevel: 'standard'
   }, formatSanitizerMessage, formatValidatorMessage);
 
   // 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;
-      }
+    // With injectIntl({ forwardRef: true }), ref points directly to CodeEditorPane
+    const activeEditorRef = getActiveEditorRef();
+    const editor = activeEditorRef.current;
 
-      // 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;
-      }
+    if (!editor) {
+      CapNotification.warning({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: intl.formatMessage(messages.editorNotReady),
+        duration: 3
+      });
+      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
+    // 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 or use provided position
+      const cursor = position !== undefined
+        ? position
+        : (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,
+        duration: 2
+      });
+    } catch (error) {
+      CapNotification.error({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: error.message,
+        duration: 4
       });
     }
   }, [intl, getActiveEditorRef]);
@@ -343,13 +259,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]);
@@ -391,7 +307,6 @@ const HTMLEditor = ({
     content,
     layout,
     validation,
-    isLiquidEnabled,
     editorRef: getActiveEditorRef(),
     handleLabelInsert,
     handleSave,
@@ -404,14 +319,13 @@ const HTMLEditor = ({
       switchDevice,
       toggleContentSync,
       getDeviceContent,
-      layoutType,
-    }),
+      layoutType
+    })
   }), [
     variant,
     content,
     layout,
     validation,
-    isLiquidEnabled,
     getActiveEditorRef,
     handleLabelInsert,
     handleSave,
@@ -422,7 +336,7 @@ const HTMLEditor = ({
     switchDevice,
     toggleContentSync,
     getDeviceContent,
-    layoutType,
+    layoutType
   ]);
 
   // Loading state
@@ -473,23 +387,19 @@ 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 */}
@@ -501,17 +411,17 @@ const HTMLEditor = ({
           maskClosable={false}
           centered
           closable={false}
-          width="90vw"
+          width={"90vw"}
           className="html-editor-fullscreen-modal"
         >
           <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
               />
             ) : (
@@ -524,10 +434,10 @@ const HTMLEditor = ({
                   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
@@ -542,23 +452,21 @@ const HTMLEditor = ({
                 <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>
@@ -573,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,
@@ -581,26 +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
+  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,
@@ -608,21 +501,7 @@ 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,
+  autoSaveInterval: 30000
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref