@capillarytech/creatives-library 8.0.266-alpha.1 → 8.0.266

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
@@ -11,38 +11,25 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapError from '@capillarytech/cap-ui-library/CapError';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import { CAP_COLOR_06, CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
-import { EmailWithoutSaga } from '../../Email';
+import Email from '../../Email';
 import CmsTemplatesComponent from '../../../v2Components/CmsTemplatesComponent';
-import EmailHTMLEditor from './EmailHTMLEditor';
-import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
-import { EMAIL } from '../../CreativesContainer/constants';
 import messages from '../messages';
 import { EMAIL_CREATE_MODES, STEPS } from '../constants';
-import { hasSupportCKEditor } from '../../../utils/common';
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 
 const CardContainer = styled.div`
   margin-top: 16px;
-
-  .ant-radio-group.cap-radioCard-v2 {
-    .ant-radio-button-wrapper {
-      &.ant-radio-button-wrapper-checked {
-        .icon-container {
-          background-color: ${CAP_COLOR_06};
-          .anticon,
-          .cap-icon {
-            color: ${CAP_WHITE};
-          }
-        }
+  .ant-radio-group{
+    .ant-radio-button-wrapper{
+      &:first-child{
+        margin-left: unset;
       }
     }
   }
 `;
 
-
-// Mode selection component
+// Mode selection component that handles the creation mode selection UI
 const ModeSelectionUI = ({
   isFullMode,
   templateName,
@@ -64,21 +51,20 @@ const ModeSelectionUI = ({
         value={templateName}
         labelPosition="top"
         size="default"
-        style={{ width: '68%' }}
+        style={{ width: '68%'}}
       />
     )}
     <CardContainer>
       <CapRadioCardWithLabel
-        style={{ marginLeft: '-6px'}}
         panes={modes}
         onChange={onChange}
         selected={emailCreateMode}
-        label={<FormattedMessage {...messages.editorType} />}
+        label={<FormattedMessage {...messages.createMode} />}
       />
     </CardContainer>
     <>
       {emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && (
-        <div>
+        <div style={{ marginLeft: '8px' }}>
           <CapUploader onChange={useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
             {(isFullMode && isTemplateNameEmpty) && (
               <CapError type="error">
@@ -112,36 +98,25 @@ ModeSelectionUI.propTypes = {
   uploadButtonLabel: PropTypes.node.isRequired,
 };
 
-// Content creation component
+// Content creation component that handles the email or template selection UI
 const ContentCreationUI = ({
   isShowEmailCreate,
   emailProps,
   cmsTemplatesProps,
-  isHTMLEditorMode,
-  htmlEditorProps,
-}) => {
-  
-  return (
-    <>
-      {isShowEmailCreate ? (
-        isHTMLEditorMode ? (
-          <EmailHTMLEditor {...htmlEditorProps} />
-        ) : (
-          <EmailWithoutSaga {...emailProps} />
-        )
-      ) : (
-        <CmsTemplatesComponent {...cmsTemplatesProps} />
-      )}
-    </>
-  );
-};
+}) => (
+  <>
+    {isShowEmailCreate ? (
+      <Email {...emailProps} />
+    ) : (
+      <CmsTemplatesComponent {...cmsTemplatesProps} />
+    )}
+  </>
+);
 
 ContentCreationUI.propTypes = {
   isShowEmailCreate: PropTypes.bool.isRequired,
   emailProps: PropTypes.object.isRequired,
   cmsTemplatesProps: PropTypes.object.isRequired,
-  isHTMLEditorMode: PropTypes.bool,
-  htmlEditorProps: PropTypes.object,
 };
 
 // Main EmailWrapper presentational component
@@ -162,137 +137,9 @@ const EmailWrapperView = ({
   isShowEmailCreate,
   emailProps,
   cmsTemplatesProps,
-  metaEntities,
-  loadingTags,
-  injectedTags,
-  globalActions,
-  supportedTags,
-  getDefaultTags,
-  location,
-  currentOrgDetails,
-  forwardedTags,
-  selectedOfferDetails,
-  eventContextTags,
-  getFormdata,
-  isGetFormData,
-  getLiquidTags,
-  showLiquidErrorInFooter,
-  onValidationFail,
-  emailActions,
-  Email,
-  templateData: templateDataProp,
-  params,
-  fetchingLiquidTags,
-  createTemplateInProgress,
-  fetchingCmsData,
-  setIsLoadingContent,
-  showTestAndPreviewSlidebox,
-  handleCloseTestAndPreview,
-  showTemplateName,
-  onHtmlEditorValidationStateChange,
-  moduleType,
 }) => {
-  const htmlEditorRef = useRef(null);
-  const supportCKEditor = hasSupportCKEditor();
-  const hasParamsIdForEditor = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-  const isEditModeForEditor = hasParamsIdForEditor;
-  const isBEEFromProps = emailProps?.editor === 'BEE' && emailProps?.selectedEditorMode === null;
-  const isDragDropFromCreateMode = emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP;
-  const isExplicitlyBEEEditor = isBEEFromProps || isDragDropFromCreateMode;
-  let isHTMLEditorMode = false;
 
-  if (supportCKEditor) {
-    // Legacy flow: use HTML editor for UPLOAD so zip/HTML content (EmailLayout) is shown; use Email component for EDITOR
-    isHTMLEditorMode = emailCreateMode === EMAIL_CREATE_MODES.UPLOAD;
-  } else if (isEditModeForEditor) {
-    isHTMLEditorMode = !isExplicitlyBEEEditor;
-  } else {
-    if (isExplicitlyBEEEditor || isBEEFromProps || isDragDropFromCreateMode) {
-      isHTMLEditorMode = false;
-    } else {
-      isHTMLEditorMode = emailProps?.selectedEditorMode === EMAIL_CREATE_MODES.HTML_EDITOR ||
-        emailCreateMode === EMAIL_CREATE_MODES.HTML_EDITOR;
-    }
-  }
-
-  const isShowTemplateSelection = step === STEPS.MODE_SELECTION;
-
-  // Create onFormDataChange callback for template name updates (similar to Email component)
-  // This allows CreativesContainer to update the template name when user clicks "Edit name"
-  // When user edits the name in CreativesContainer header, it calls this callback
-  // which updates the template name in EmailWrapper, and then CreativesContainer
-  // will call showTemplateName again with the updated formData
-  const handleFormDataChange = useCallback((updatedFormData) => {
-    const newTemplateName = updatedFormData?.['template-name'] || templateName;
-    if (newTemplateName !== templateName && onTemplateNameChange) {
-      // Update template name in parent (useEmailWrapper hook)
-      onTemplateNameChange({ target: { value: newTemplateName } });
-    }
-    // Note: CreativesContainer will call showTemplateName again after this callback
-    // (it stores the callback in templateContainerDetails and calls it after state updates)
-  }, [templateName, onTemplateNameChange]);
-
-  const htmlEditorProps = isHTMLEditorMode ? {
-    // Location and params
-    location,
-    params,
-    // Tag-related props
-    getDefaultTags,
-    supportedTags,
-    metaEntities,
-    injectedTags,
-    globalActions,
-    loadingTags,
-    eventContextTags,
-    forwardedTags,
-    selectedOfferDetails,
-    currentOrgDetails,
-    // Email Redux state and actions
-    Email,
-    emailActions,
-    // Full mode props
-    isFullMode,
-    templateName,
-    isGetFormData,
-    getFormdata,
-    // Library mode props
-    templateData: templateDataProp,
-    // Uploaded content from zip file
-    EmailLayout,
-    // Liquid validation
-    getLiquidTags,
-    showLiquidErrorInFooter,
-    // Validation state callback
-    onHtmlEditorValidationStateChange,
-    onValidationFail,
-    // Template name
-    showTemplateName,
-    onFormDataChange: handleFormDataChange,
-    // Module type for unsubscribe tag validation
-    moduleType,
-    // Loading states
-    fetchingLiquidTags: fetchingLiquidTags || false,
-    createTemplateInProgress: createTemplateInProgress || false,
-    fetchingCmsData: fetchingCmsData || false,
-    // Parent loading control
-    setIsLoadingContent,
-    ref: htmlEditorRef,
-  } : {};
-
-  // Get formData for TestAndPreviewSlidebox when needed
-  const getFormDataForPreview = () => {
-    if (htmlEditorRef.current && htmlEditorRef.current.getFormDataForPreview) {
-      return htmlEditorRef.current.getFormDataForPreview();
-    }
-    return {};
-  };
-
-  const getContentForPreview = () => {
-    if (htmlEditorRef.current && htmlEditorRef.current.getContentForPreview) {
-      return htmlEditorRef.current.getContentForPreview();
-    }
-    return '';
-  };
+  const isShowTemplateSelection = step === STEPS.MODE_SELECTION || (step === STEPS.TEMPLATE_SELECTION && emailCreateMode === EMAIL_CREATE_MODES.UPLOAD);
 
   return (
     <>
@@ -316,22 +163,9 @@ const EmailWrapperView = ({
             isShowEmailCreate={isShowEmailCreate}
             emailProps={emailProps}
             cmsTemplatesProps={cmsTemplatesProps}
-            isHTMLEditorMode={isHTMLEditorMode}
-            htmlEditorProps={htmlEditorProps}
           />
         )}
       </CapSpin>
-      {/* Render TestAndPreviewSlidebox for HTML Editor (similar to legacy Email component) */}
-      {isHTMLEditorMode && showTestAndPreviewSlidebox && (
-        <TestAndPreviewSlidebox
-          show={showTestAndPreviewSlidebox}
-          onClose={handleCloseTestAndPreview}
-          formData={getFormDataForPreview()}
-          content={getContentForPreview()}
-          currentChannel={EMAIL}
-          currentTab={1}
-        />
-      )}
     </>
   );
 };
@@ -341,10 +175,6 @@ EmailWrapperView.propTypes = {
   emailCreateMode: PropTypes.string,
   step: PropTypes.string,
   isFullMode: PropTypes.bool,
-  getFormdata: PropTypes.func,
-  isGetFormData: PropTypes.bool,
-  getLiquidTags: PropTypes.func,
-  showLiquidErrorInFooter: PropTypes.func,
   templateName: PropTypes.string,
   onTemplateNameChange: PropTypes.func.isRequired,
   isTemplateNameEmpty: PropTypes.bool,
@@ -357,27 +187,6 @@ EmailWrapperView.propTypes = {
   isShowEmailCreate: PropTypes.bool.isRequired,
   emailProps: PropTypes.object.isRequired,
   cmsTemplatesProps: PropTypes.object.isRequired,
-  metaEntities: PropTypes.object,
-  loadingTags: PropTypes.bool,
-  injectedTags: PropTypes.object,
-  globalActions: PropTypes.object,
-  supportedTags: PropTypes.array,
-  getDefaultTags: PropTypes.string,
-  location: PropTypes.object,
-  currentOrgDetails: PropTypes.object,
-  forwardedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-  eventContextTags: PropTypes.array,
-  emailActions: PropTypes.object,
-  Email: PropTypes.object,
-  templateData: PropTypes.object,
-  params: PropTypes.object,
-  fetchingLiquidTags: PropTypes.bool,
-  createTemplateInProgress: PropTypes.bool,
-  fetchingCmsData: PropTypes.bool,
-  setIsLoadingContent: PropTypes.func,
-  showTestAndPreviewSlidebox: PropTypes.bool,
-  handleCloseTestAndPreview: PropTypes.func,
 };
 
 export default EmailWrapperView;

package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js

@@ -24,20 +24,24 @@ const HTMLEditorTesting = () => {
       // Show/Hide editor
       show: () => {
         setIsVisible(true);
+        console.log('✅ HTMLEditor test mode activated');
       },
 
       hide: () => {
         setIsVisible(false);
+        console.log('✅ HTMLEditor test mode deactivated');
       },
 
       toggle: () => {
-        setIsVisible((prev) => !prev);
+        setIsVisible(prev => !prev);
+        console.log(`✅ HTMLEditor test mode ${!isVisible ? 'activated' : 'deactivated'}`);
       },
 
       // Variant control
       setVariant: (newVariant) => {
         if (['email', 'inapp'].includes(newVariant)) {
           setVariant(newVariant);
+          console.log(`✅ Variant set to: ${newVariant}`);
         } else {
           console.error('❌ Invalid variant. Use: "email" or "inapp"');
         }
@@ -48,6 +52,7 @@ const HTMLEditorTesting = () => {
         const validLayouts = Object.values(LAYOUT_TYPES);
         if (validLayouts.includes(layout)) {
           setLayoutType(layout);
+          console.log(`✅ Layout set to: ${layout}`);
         } else {
           console.error(`❌ Invalid layout. Use: ${validLayouts.join(', ')}`);
         }
@@ -56,22 +61,58 @@ const HTMLEditorTesting = () => {
       // Content control
       setContent: (newContent) => {
         setContent(newContent);
+        console.log('✅ Content updated');
       },
 
       getContent: () => {
+        console.log('Current content:', content);
         return content;
       },
 
       // Status
       status: () => {
+        console.log('📊 HTMLEditor Test Status:');
+        console.log(`  Visible: ${isVisible}`);
+        console.log(`  Variant: ${variant}`);
+        console.log(`  Layout: ${layoutType}`);
+        console.log(`  Content size: ${content.length} chars`);
       },
 
       // Help
       help: () => {
-      },
+        console.log(`
+🚀 HTMLEditor Testing Console Commands:
+
+📱 Basic Controls:
+  htmlEditorTest.show()           - Show the editor
+  htmlEditorTest.hide()           - Hide the editor
+  htmlEditorTest.toggle()         - Toggle editor visibility
+
+⚙️ Configuration:
+  htmlEditorTest.setVariant('email')     - Set to email variant
+  htmlEditorTest.setVariant('inapp')     - Set to inapp variant
+  htmlEditorTest.setLayout('POPUP')      - Set layout (inapp only)
+                                      - Valid: POPUP, HEADER, FOOTER, FULLSCREEN
+
+📝 Content:
+  htmlEditorTest.setContent('<h1>Test</h1>')  - Set editor content
+  htmlEditorTest.getContent()                  - Get current content
+
+📊 Status:
+  htmlEditorTest.status()         - Show current status
+  htmlEditorTest.help()           - Show this help
+
+💡 Example Usage:
+  htmlEditorTest.show()
+  htmlEditorTest.setVariant('inapp')
+  htmlEditorTest.setLayout('HEADER')      // Top banner
+  htmlEditorTest.setLayout('FOOTER')      // Bottom banner
+        `);
+      }
     };
 
     // Show help on first load
+    console.log('🚀 HTMLEditor Testing Ready! Type htmlEditorTest.help() for commands');
 
     // Cleanup on unmount
     return () => {
@@ -87,40 +128,32 @@ const HTMLEditorTesting = () => {
   }
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        zIndex: 9999,
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      zIndex: 9999,
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '20px'
+    }}>
+      {/* Header */}
+      <div style={{
+        backgroundColor: '#fff',
+        padding: '10px 20px',
+        borderRadius: '8px 8px 0 0',
         display: 'flex',
-        flexDirection: 'column',
-        padding: '20px',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderBottom: '1px solid #ddd'
       }}>
-      {/* Header */}
-      <div
-        style={{
-          backgroundColor: '#fff',
-          padding: '10px 20px',
-          borderRadius: '8px 8px 0 0',
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #ddd',
-        }}>
         <div>
           <strong>HTMLEditor Testing Mode</strong>
           <span style={{ marginLeft: '20px', color: '#666' }}>
-            Variant:
-            {' '}
-            {variant}
-            {' '}
-| Layout:
-            {' '}
-            {layoutType}
+            Variant: {variant} | Layout: {layoutType}
           </span>
         </div>
         <button
@@ -131,7 +164,7 @@ const HTMLEditorTesting = () => {
             border: 'none',
             padding: '5px 15px',
             borderRadius: '4px',
-            cursor: 'pointer',
+            cursor: 'pointer'
           }}
         >
           Close
@@ -139,13 +172,12 @@ const HTMLEditorTesting = () => {
       </div>
 
       {/* Editor Container */}
-      <div
-        style={{
-          flex: 1,
-          backgroundColor: '#fff',
-          borderRadius: '0 0 8px 8px',
-          overflow: 'hidden',
-        }}>
+      <div style={{
+        flex: 1,
+        backgroundColor: '#fff',
+        borderRadius: '0 0 8px 8px',
+        overflow: 'hidden'
+      }}>
         <IntlProvider locale="en" messages={{}}>
           <HTMLEditor
             variant={variant}
@@ -153,8 +185,10 @@ const HTMLEditorTesting = () => {
             initialContent={content}
             onContentChange={(newContent) => {
               setContent(newContent);
+              console.log('📝 Content changed:', newContent.substring(0, 100) + '...');
             }}
-            onSave={() => {
+            onSave={(savedContent) => {
+              console.log('💾 Content saved:', savedContent);
             }}
           />
         </IntlProvider>

package/v2Containers/EmailWrapper/components/__tests__/HTMLEditorTesting.test.js

@@ -47,8 +47,8 @@ describe('HTMLEditorTesting', () => {
   beforeEach(() => {
     // Mock console methods
     consoleSpy = {
-      log: jest.spyOn(console, 'log').mockImplementation(() => { }),
-      error: jest.spyOn(console, 'error').mockImplementation(() => { })
+      log: jest.spyOn(console, 'log').mockImplementation(() => {}),
+      error: jest.spyOn(console, 'error').mockImplementation(() => {})
     };
 
     // Clear any existing window.htmlEditorTest
@@ -88,6 +88,14 @@ describe('HTMLEditorTesting', () => {
       expect(typeof window.htmlEditorTest.status).toBe('function');
       expect(typeof window.htmlEditorTest.help).toBe('function');
     });
+
+    it('logs help message on initial load', () => {
+      render(<HTMLEditorTesting />);
+
+      expect(consoleSpy.log).toHaveBeenCalledWith(
+        '🚀 HTMLEditor Testing Ready! Type htmlEditorTest.help() for commands'
+      );
+    });
   });
 
   describe('Visibility Control', () => {
@@ -99,6 +107,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('mock-html-editor')).toBeInTheDocument();
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode activated');
     });
 
     it('hides editor when hide() is called', () => {
@@ -115,6 +124,7 @@ describe('HTMLEditorTesting', () => {
         window.htmlEditorTest.hide();
       });
       expect(screen.queryByTestId('mock-html-editor')).not.toBeInTheDocument();
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode deactivated');
     });
 
     it('toggles editor visibility with toggle()', () => {
@@ -125,11 +135,14 @@ describe('HTMLEditorTesting', () => {
         window.htmlEditorTest.toggle();
       });
       expect(screen.getByTestId('mock-html-editor')).toBeInTheDocument();
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode activated');
+
       // Toggle to hide
       act(() => {
         window.htmlEditorTest.toggle();
       });
       expect(screen.queryByTestId('mock-html-editor')).not.toBeInTheDocument();
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode deactivated');
     });
 
     it('closes editor when close button is clicked', () => {
@@ -156,6 +169,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-variant')).toHaveTextContent('email');
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Variant set to: email');
     });
 
     it('sets variant to inapp', () => {
@@ -167,6 +181,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-variant')).toHaveTextContent('inapp');
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Variant set to: inapp');
     });
 
     it('rejects invalid variant', () => {
@@ -200,6 +215,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.MODAL);
+      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.MODAL}`);
     });
 
     it('sets layout to HEADER', () => {
@@ -211,6 +227,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.HEADER);
+      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.HEADER}`);
     });
 
     it('sets layout to FOOTER', () => {
@@ -222,6 +239,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.FOOTER);
+      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.FOOTER}`);
     });
 
     it('sets layout to FULLSCREEN', () => {
@@ -233,6 +251,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.FULLSCREEN);
+      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.FULLSCREEN}`);
     });
 
     it('rejects invalid layout', () => {
@@ -270,6 +289,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-content')).toHaveTextContent(newContent);
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Content updated');
     });
 
     it('gets current content', () => {
@@ -278,6 +298,7 @@ describe('HTMLEditorTesting', () => {
       const result = window.htmlEditorTest.getContent();
 
       expect(result).toBe('<h1>Test HTML Editor</h1><p>This is a test integration.</p>');
+      expect(consoleSpy.log).toHaveBeenCalledWith('Current content:', result);
     });
 
     it('starts with default content', () => {
@@ -301,6 +322,8 @@ describe('HTMLEditorTesting', () => {
 
       const changeButton = screen.getByTestId('trigger-content-change');
       fireEvent.click(changeButton);
+
+      expect(consoleSpy.log).toHaveBeenCalledWith('📝 Content changed:', '<p>Changed content</p>...');
     });
 
     it('handles save callback', () => {
@@ -312,6 +335,46 @@ describe('HTMLEditorTesting', () => {
 
       const saveButton = screen.getByTestId('trigger-save');
       fireEvent.click(saveButton);
+
+      expect(consoleSpy.log).toHaveBeenCalledWith('💾 Content saved:', '<p>Saved content</p>');
+    });
+  });
+
+  describe('Status and Help', () => {
+    it('shows status information', () => {
+      render(<HTMLEditorTesting />);
+
+      act(() => {
+        window.htmlEditorTest.show();
+        window.htmlEditorTest.setVariant('inapp');
+        window.htmlEditorTest.setLayout(LAYOUT_TYPES.HEADER);
+      });
+
+      // Clear previous console calls
+      consoleSpy.log.mockClear();
+
+      act(() => {
+        window.htmlEditorTest.status();
+      });
+
+      expect(consoleSpy.log).toHaveBeenCalledWith('📊 HTMLEditor Test Status:');
+      expect(consoleSpy.log).toHaveBeenCalledWith('  Visible: true');
+      expect(consoleSpy.log).toHaveBeenCalledWith('  Variant: inapp');
+      expect(consoleSpy.log).toHaveBeenCalledWith('  Layout: HEADER');
+      expect(consoleSpy.log).toHaveBeenCalledWith('  Content size: 59 chars');
+    });
+
+    it('shows help information', () => {
+      render(<HTMLEditorTesting />);
+
+      act(() => {
+        window.htmlEditorTest.help();
+      });
+
+      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('🚀 HTMLEditor Testing Console Commands:'));
+      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('htmlEditorTest.show()'));
+      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('htmlEditorTest.setVariant(\'email\')'));
+      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('htmlEditorTest.setLayout(\'POPUP\')'));
     });
   });
 
@@ -407,6 +470,8 @@ describe('HTMLEditorTesting', () => {
       act(() => {
         window.htmlEditorTest.status();
       });
+
+      expect(consoleSpy.log).toHaveBeenCalledWith(`  Content size: ${customContent.length} chars`);
     });
 
     it('handles multiple rapid operations', () => {