@capillarytech/creatives-library 8.0.236-alpha.2 → 8.0.236-alpha.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.236-alpha.2",
+  "version": "8.0.236-alpha.4",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/tests/commonUtil.test.js

@@ -1376,4 +1376,228 @@ describe("validateCarouselCards", () => {
       expect(result.isValid).toBe(true);
     });
   });
+
+  describe('extractContent BEE Editor Logic (L404-L412)', () => {
+    it('extracts content from beeHtml as string', () => {
+      const platformData = {
+        title: 'Test Title',
+        isBEEeditor: true,
+        beeHtml: '<p>BEE HTML Content</p>',
+        ctas: [
+          { text: 'Click Here', actionLink: 'https://example.com' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Test Title');
+      expect(result).toContain('<p>BEE HTML Content</p>');
+      expect(result).toContain('Click Here');
+    });
+
+    it('extracts content from beeHtml as object with value property', () => {
+      const platformData = {
+        title: 'Test Title',
+        isBEEeditor: true,
+        beeHtml: { value: '<p>BEE HTML from Object</p>' },
+        ctas: [
+          { text: 'Button Text' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Test Title');
+      expect(result).toContain('<p>BEE HTML from Object</p>');
+      expect(result).toContain('Button Text');
+    });
+
+    it('handles beeHtml as object without value property', () => {
+      const platformData = {
+        title: 'Test Title',
+        isBEEeditor: true,
+        beeHtml: { someOtherProperty: 'data' },
+        ctas: [],
+      };
+
+      const result = extractContent(platformData);
+
+      // Should extract title and empty beeHtml (since value is undefined)
+      expect(result).toContain('Test Title');
+      expect(result).not.toContain('someOtherProperty');
+    });
+
+    it('extracts ctas with text property', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '<p>Content</p>',
+        ctas: [
+          { text: 'CTA Text 1' },
+          { text: 'CTA Text 2' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('CTA Text 1');
+      expect(result).toContain('CTA Text 2');
+    });
+
+    it('extracts ctas with actionLink when text is missing', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '<p>Content</p>',
+        ctas: [
+          { actionLink: 'https://link1.com' },
+          { actionLink: 'https://link2.com' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('https://link1.com');
+      expect(result).toContain('https://link2.com');
+    });
+
+    it('filters out falsy values with filter(Boolean)', () => {
+      const platformData = {
+        title: '',
+        isBEEeditor: true,
+        beeHtml: null,
+        ctas: [
+          { text: null, actionLink: null },
+          { text: 'Valid Text' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      // Should only contain 'Valid Text' after filtering
+      expect(result).toBe('Valid Text');
+    });
+
+    it('handles empty ctas array', () => {
+      const platformData = {
+        title: 'Title Only',
+        isBEEeditor: true,
+        beeHtml: '<p>BEE Content</p>',
+        ctas: [],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title Only');
+      expect(result).toContain('<p>BEE Content</p>');
+    });
+
+    it('handles undefined ctas', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '<p>Content</p>',
+        ctas: undefined,
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title');
+      expect(result).toContain('<p>Content</p>');
+    });
+
+    it('joins all content with spaces', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: 'HTML',
+        ctas: [
+          { text: 'CTA1' },
+          { text: 'CTA2' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toBe('Title HTML CTA1 CTA2');
+    });
+
+    it('falls back to regular content when not BEE editor', () => {
+      const platformData = {
+        title: 'Title',
+        message: 'Message',
+        isBEEeditor: false,
+        beeHtml: '<p>Should be ignored</p>',
+        ctas: [
+          { text: 'CTA' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title');
+      expect(result).toContain('Message');
+      expect(result).toContain('CTA');
+      expect(result).not.toContain('<p>Should be ignored</p>');
+    });
+
+    it('handles null beeHtml', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: null,
+        ctas: [{ text: 'CTA' }],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title');
+      expect(result).toContain('CTA');
+    });
+
+    it('handles undefined beeHtml', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: undefined,
+        ctas: [],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toBe('Title');
+    });
+
+    it('handles complex ctas with both text and actionLink', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: 'Content',
+        ctas: [
+          { text: 'CTA Text', actionLink: 'https://example.com' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      // Should prefer text over actionLink
+      expect(result).toContain('CTA Text');
+      expect(result).toContain('Title');
+      expect(result).toContain('Content');
+    });
+
+    it('handles empty string beeHtml', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '',
+        ctas: [{ text: 'CTA' }],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toBe('Title CTA');
+    });
+  });
 });
+

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -28,6 +28,7 @@
       padding: 0;
       min-height: 3.25rem;
       height: 3.25rem;
+      position: relative;
 
       // Right-align toolbar actions
       &__right {
@@ -128,6 +129,7 @@
         padding: 0;
         min-height: 3.25rem; // 52px = 3.25rem
         height: 3.25rem;
+        position: relative;
 
         // Right-align toolbar actions
         &__right {

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -198,7 +198,6 @@
       }
 
       .cm-gutters {
-        background-color: var(--editor-gutter-bg, $CAP_G02);
         border-right: 0.0625rem solid var(--editor-border, $CAP_G04);
         color: var(--editor-gutter-foreground, $FONT_COLOR_02);
       }

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -9,7 +9,7 @@
  */
 
 import React, {
-  forwardRef, useImperativeHandle, useRef, useEffect,
+  forwardRef, useImperativeHandle, useRef, useEffect, useCallback,
 } from 'react';
 import PropTypes from 'prop-types';
 
@@ -17,13 +17,11 @@ import PropTypes from 'prop-types';
 import { EditorState } from '@codemirror/state';
 import { EditorView, lineNumbers, highlightActiveLine } from '@codemirror/view';
 
-// Import our comprehensive syntax highlighting solution
-import { injectIntl, intlShape } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import { createRobustExtensions } from '../../utils/properSyntaxHighlighting';
 
+import { injectIntl, intlShape } from 'react-intl';
 
 // Messages
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import messages from '../../messages';
 
 // Cap UI Components
@@ -31,30 +29,36 @@ import messages from '../../messages';
 // Components
 import TagList from '../../../../v2Containers/TagList';
 
+// Constants - removed unused imports since tag fetching is handled by parent
+
 // Context
 import { useEditorContext } from '../common/EditorContext';
 
 // Styles
 import './_codeEditorPane.scss';
 
+// Define Theme and Highlighting inline to avoid "multiple instances of @codemirror/state" error
+
+
 // Legacy CodeMirrorEditor removed - using enhanced implementation only
 
 const CodeEditorPaneComponent = ({
   intl,
   readOnly = false,
   className = '',
-  isFullscreenMode = false,
-  onLabelInsert,
   forwardedRef,
-  // Tags-related props
+  // Tag-related props - tags are fetched and managed by parent component
   tags = [],
   injectedTags = {},
-  location = {},
-  selectedOfferDetails = null,
-  onTagSelect = null,
-  onContextChange = null,
+  location,
+  eventContextTags = [],
+  selectedOfferDetails = [],
+  channel,
+  userLocale = 'en',
+  moduleFilterEnabled = true,
+  onTagContextChange,
 }) => {
-  const { content, validation } = useEditorContext();
+  const { content } = useEditorContext();
   const { content: contentValue, updateContent } = content;
   const editorRef = useRef(null);
   const viewRef = useRef(null);
@@ -130,178 +134,85 @@ const CodeEditorPaneComponent = ({
 
   const handleTagSelect = (tagData) => {
     // Get the unified editor
-    if (!viewRef.current) {
-      console.warn('CodeEditorPane: Editor view not initialized. Cannot insert tag.');
-      // Try to notify parent if onLabelInsert is available
-      if (onLabelInsert) {
-        // Extract tag text for notification purposes
-        let tagText = '';
-        if (typeof tagData === 'string') {
-          tagText = tagData;
-        } else if (tagData) {
-          const {
-            text, name, label, value,
-          } = tagData;
-          tagText = text || name || label || value || '';
+    if (viewRef.current) {
+      const view = viewRef.current;
+      const { state: { selection: { main: { head: pos } } } } = view;
+
+      // Extract tag text from the tagData object using destructuring
+      let tagText = '';
+      if (typeof tagData === 'string') {
+        tagText = tagData;
+      } else if (tagData) {
+        const {
+          text, name, label, value,
+        } = tagData;
+        tagText = text || name || label || value;
+        if (!tagText) {
+          console.warn('Invalid tag data:', tagData);
+          return;
         }
-        const formattedTag = tagText ? `{{${tagText}}}` : '';
-        // Call onLabelInsert with null position to indicate editor not ready
-        onLabelInsert(formattedTag, null);
-      }
-      return;
-    }
-
-    const view = viewRef.current;
-    const { state: { selection: { main: { head: pos } } } } = view;
-
-    // Extract tag text from the tagData object using destructuring
-    let tagText = '';
-    if (typeof tagData === 'string') {
-      tagText = tagData;
-    } else if (tagData) {
-      const {
-        text, name, label, value,
-      } = tagData;
-      tagText = text || name || label || value;
-      if (!tagText) {
+      } else {
         console.warn('Invalid tag data:', tagData);
         return;
       }
-    } else {
-      console.warn('Invalid tag data:', tagData);
-      return;
-    }
 
-    // For unified HTML editor, insert as template variable
-    const formattedTag = `{{${tagText}}}`;
+      // For unified HTML editor, insert as template variable
+      const formattedTag = `{{${tagText}}}`;
 
-    // Insert the tag at cursor position
-    view.dispatch({
-      changes: { from: pos, insert: formattedTag },
-      selection: { anchor: pos + formattedTag.length },
-    });
+      // Insert the tag at cursor position directly
+      view.dispatch({
+        changes: { from: pos, insert: formattedTag },
+        selection: { anchor: pos + formattedTag.length },
+      });
 
-    // Focus back to editor
-    view.focus();
+      // Focus back to editor
+      view.focus();
 
-    // Call the parent's handleLabelInsert for notification purposes only
-    // The tag has already been inserted above, so this is just for parent component awareness
-    if (onLabelInsert) {
-      onLabelInsert(formattedTag, pos);
+      // Note: We don't call onLabelInsert here because:
+      // 1. The tag is already inserted directly into the editor
+      // 2. onLabelInsert (handleLabelInsert from HTMLEditor) would try to insert again
+      // 3. This causes "Editor method not available" error
+      // The direct insertion via view.dispatch is sufficient
     }
   };
 
+  // Handle tag context change - delegate to parent component
+  // Tags are fetched in parent components (EmailHTMLEditor, INAPP, etc.)
+  // This component just passes the context change event up
+  const handleTagContextChange = useCallback((data) => {
+    if (onTagContextChange) {
+      // Parent component handles tag fetching and updates
+      onTagContextChange(data);
+    }
+    // No fallback - tags must be managed by parent component
+  }, [onTagContextChange]);
+
   // Initialize CodeMirror effect
   useEffect(() => {
     if (editorRef.current && !viewRef.current) {
-      try {
-        // Debug: Check CodeMirror package instances
-        console.log('[CodeEditorPane] CodeMirror instances check:', {
-          EditorState,
-          EditorStateConstructor: EditorState?.constructor?.name,
-          EditorView,
-          EditorViewConstructor: EditorView?.constructor?.name,
-          lineNumbers: typeof lineNumbers,
-          highlightActiveLine: typeof highlightActiveLine,
-        });
-
-        // Use the comprehensive extensions from properSyntaxHighlighting.js
-        // This includes: html(), syntaxHighlighting(comprehensiveVSCodeTheme), cleanEditorTheme
-        // Note: Webpack configuration ensures CodeMirror packages are in a single shared chunk
-        // to prevent multiple instances that break instanceof checks
-        const robustExtensions = createRobustExtensions();
-
-        console.log('[CodeEditorPane] Robust extensions created:', {
-          extensionsCount: robustExtensions.length,
-          extensions: robustExtensions.map((ext) => {
-            try {
-              return typeof ext === 'function' ? 'function' : (ext?.constructor?.name || typeof ext);
-            } catch (e) {
-              return 'unknown';
-            }
-          }),
-        });
-
-        // Add additional extensions for line numbers, active line, and update listener
-        // IMPORTANT: Ensure all extensions come from the same CodeMirror instance
-        const lineNumbersExt = lineNumbers();
-        const highlightActiveLineExt = highlightActiveLine();
-        const updateListenerExt = EditorView.updateListener.of((update) => {
+      // Add additional extensions for line numbers, active line, and update listener
+      const extensions = [
+        lineNumbers(),
+        highlightActiveLine(),
+        // html(), // 1. HTML language support - TEMPORARILY DISABLED due to version conflict
+        // syntaxHighlighting(comprehensiveVSCodeTheme), // 2. Syntax highlighting - TEMPORARILY DISABLED
+        // cleanEditorTheme, // 3. Theme - TEMPORARILY DISABLED
+        EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             updateContentRef.current(update.state.doc.toString());
           }
-        });
-
-        // Flatten any nested arrays in robustExtensions (shouldn't happen, but be safe)
-        const flattenedRobustExtensions = robustExtensions.flat();
-
-        const extensions = [
-          lineNumbersExt,
-          highlightActiveLineExt,
-          ...flattenedRobustExtensions, // Spread the robust extensions (html, syntax highlighting, theme)
-          updateListenerExt,
-        ];
-
-        console.log('[CodeEditorPane] All extensions prepared:', {
-          totalExtensions: extensions.length,
-          extensionTypes: extensions.map((ext) => {
-            try {
-              return typeof ext === 'function' ? 'function' : (ext?.constructor?.name || typeof ext);
-            } catch (e) {
-              return 'unknown';
-            }
-          }),
-          extensionDetails: extensions.map((ext, idx) => {
-            try {
-              return {
-                index: idx,
-                type: typeof ext,
-                constructor: ext?.constructor?.name,
-                isArray: Array.isArray(ext),
-                isFunction: typeof ext === 'function',
-                hasTo: typeof ext?.to === 'function',
-                hasOf: typeof ext?.of === 'function',
-                // Check if it's a valid CodeMirror extension
-                isExtension: ext && (typeof ext === 'function' || typeof ext?.to === 'function' || typeof ext?.of === 'function'),
-              };
-            } catch (e) {
-              return { index: idx, error: e.message };
-            }
-          }),
-        });
-
-        // Validate extensions before creating EditorState
-        const invalidExtensions = extensions.filter((ext) => {
-          if (!ext) return true;
-          if (typeof ext === 'function') return false; // Functions are valid
-          if (typeof ext?.to === 'function') return false; // Extension objects with .to() are valid
-          if (typeof ext?.of === 'function') return false; // Extension objects with .of() are valid
-          if (Array.isArray(ext)) return true; // Arrays should be flattened
-          return true; // Unknown type
-        });
-
-        if (invalidExtensions.length > 0) {
-          console.error('[CodeEditorPane] Invalid extensions detected:', invalidExtensions);
-          throw new Error(`Invalid CodeMirror extensions detected. This usually means multiple instances of @codemirror packages are loaded.`);
-        }
+        }),
+      ];
 
-        console.log('[CodeEditorPane] Creating EditorState...');
-        const state = EditorState.create({
-          doc: contentValue || '',
-          extensions,
-        });
-        console.log('[CodeEditorPane] EditorState created successfully');
+      const state = EditorState.create({
+        doc: contentValue || '',
+        extensions,
+      });
 
-        viewRef.current = new EditorView({
-          state,
-          parent: editorRef.current,
-        });
-      } catch (error) {
-        // Log error for debugging - this should not happen if webpack config is correct
-        console.error('Error initializing CodeMirror editor:', error);
-        // Re-throw to prevent silent failures
-        throw error;
-      }
+      viewRef.current = new EditorView({
+        state,
+        parent: editorRef.current,
+      });
     }
 
     return () => {
@@ -343,28 +254,19 @@ const CodeEditorPaneComponent = ({
             <TagList
               key="html-editor-taglist"
               label={intl.formatMessage(messages.addLabel)}
-              onTagSelect={(tag) => {
-                // Always use handleTagSelect to insert tag at cursor position
-                handleTagSelect(tag);
-                // Also call parent's onTagSelect callback if provided
-                if (onTagSelect) {
-                  onTagSelect(tag);
-                }
-              }}
-              onContextChange={(context) => {
-                if (onContextChange) {
-                  onContextChange(context);
-                }
-              }}
+              onTagSelect={handleTagSelect}
+              onContextChange={handleTagContextChange}
               className="tag-list-trigger"
-              tags={tags} // Use passed tags from parent component
-              injectedTags={injectedTags} // Use passed injectedTags from parent component
-              location={location} // Use passed location for context
-              selectedOfferDetails={selectedOfferDetails} // Use passed selectedOfferDetails
-              moduleFilterEnabled={
-                location && location?.query && location?.query?.type !== "embedded"
-              }
+              tags={tags}
+              injectedTags={injectedTags}
+              moduleFilterEnabled={moduleFilterEnabled}
+              userLocale={userLocale}
+              channel={channel}
               disabled={readOnly}
+              location={location}
+              selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
+              popoverPlacement="rightTop"
             />
           </CapRow>
         </div>
@@ -387,6 +289,16 @@ CodeEditorPane.propTypes = {
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
   onLabelInsert: PropTypes.func,
+  // 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
 };
 
 // Export with injectIntl - ref forwarding is handled by forwardRef wrapper

package/v2Components/HtmlEditor/components/DeviceToggle/_deviceToggle.scss

@@ -9,7 +9,7 @@
 .html-editor .device-toggle {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  margin-left: 2.5rem;
   padding: 0;
   background-color: $CAP_G10;
   border-radius: 0.25rem 0.25rem 0 0;

package/v2Components/HtmlEditor/components/FullscreenModal/_fullscreenModal.scss

@@ -49,6 +49,7 @@ body .ant-modal-mask+.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal .an
     padding: 0;
     min-height: 3.25rem;
     height: 3.25rem;
+    position: relative;
 
     &__right {
       margin-left: auto;