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

package/package.json

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

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

@@ -43,7 +43,6 @@ const CodeEditorPaneComponent = ({
   intl,
   readOnly = false,
   className = '',
-  isFullscreenMode = false,
   onLabelInsert,
   forwardedRef,
   // Tags-related props
@@ -54,7 +53,7 @@ const CodeEditorPaneComponent = ({
   onTagSelect = null,
   onContextChange = null,
 }) => {
-  const { content, validation } = useEditorContext();
+  const { content } = useEditorContext();
   const { content: contentValue, updateContent } = content;
   const editorRef = useRef(null);
   const viewRef = useRef(null);
@@ -139,9 +138,7 @@ const CodeEditorPaneComponent = ({
         if (typeof tagData === 'string') {
           tagText = tagData;
         } else if (tagData) {
-          const {
-            text, name, label, value,
-          } = tagData;
+          const { text, name, label, value } = tagData;
           tagText = text || name || label || value || '';
         }
         const formattedTag = tagText ? `{{${tagText}}}` : '';
@@ -194,114 +191,31 @@ const CodeEditorPaneComponent = ({
   // 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) => {
+      // Use the comprehensive extensions from properSyntaxHighlighting.js
+      // This includes: html(), syntaxHighlighting(comprehensiveVSCodeTheme), cleanEditorTheme
+      const robustExtensions = createRobustExtensions();
+
+      // Add additional extensions for line numbers, active line, and update listener
+      const extensions = [
+        lineNumbers(),
+        highlightActiveLine(),
+        ...robustExtensions, // Spread the robust extensions (html, syntax highlighting, theme)
+        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 () => {

package/v2Components/HtmlEditor/utils/properSyntaxHighlighting.js

@@ -76,7 +76,7 @@ export const comprehensiveVSCodeTheme = HighlightStyle.define([
   { tag: tags.link, color: '#4fc1ff', textDecoration: 'underline' },
   { tag: tags.heading, color: '#9cdcfe', fontWeight: 'bold' },
   { tag: tags.emphasis, fontStyle: 'italic' },
-  { tag: tags.strong, fontWeight: 'bold' },
+  { tag: tags.strong, fontWeight: 'bold' }
 ]);
 
 /**
@@ -88,7 +88,7 @@ export const cleanEditorTheme = EditorView.theme({
     height: "500px",
     backgroundColor: "#1e1e1e",
     fontSize: "14px",
-    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace"
   },
   ".cm-content": {
     padding: "12px",
@@ -96,17 +96,17 @@ export const cleanEditorTheme = EditorView.theme({
     fontSize: "14px",
     lineHeight: "20px",
     fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
-    color: "#d4d4d4", // Base text color for all content
+    color: "#d4d4d4" // Base text color for all content
   },
   ".cm-focused": {
-    outline: "none",
+    outline: "none"
   },
   ".cm-editor": {
     borderRadius: "0",
-    border: "none",
+    border: "none"
   },
   ".cm-scroller": {
-    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace"
   },
   ".cm-lineNumbers": {
     fontSize: "14px",
@@ -117,25 +117,25 @@ export const cleanEditorTheme = EditorView.theme({
     paddingLeft: "8px",
     borderRight: "1px solid #3e3e3e",
     minWidth: "45px",
-    textAlign: "right",
+    textAlign: "right"
   },
   ".cm-gutters": {
     backgroundColor: "#1e1e1e",
-    borderRight: "1px solid #3e3e3e",
+    borderRight: "1px solid #3e3e3e"
   },
   ".cm-activeLine": {
-    backgroundColor: "#2a2d2e",
+    backgroundColor: "#2a2d2e"
   },
   ".cm-selection": {
-    backgroundColor: "#264f78",
+    backgroundColor: "#264f78"
   },
   ".cm-cursor": {
-    borderLeft: "2px solid #ffffff",
+    borderLeft: "2px solid #ffffff"
   },
   // Additional fallback for text nodes
   ".cm-line": {
-    color: "#d4d4d4",
-  },
+    color: "#d4d4d4"
+  }
 });
 
 /**
@@ -143,60 +143,21 @@ export const cleanEditorTheme = EditorView.theme({
  * Uses only verified tags to avoid undefined errors
  */
 export const createRobustExtensions = () => {
-  try {
-    // Debug: Check if we're getting the same instances
-    const htmlLang = html();
-    const highlighting = syntaxHighlighting(comprehensiveVSCodeTheme);
-
-    console.log('[createRobustExtensions] Extension instances:', {
-      htmlLang: typeof htmlLang,
-      highlighting: typeof highlighting,
-      cleanEditorTheme: typeof cleanEditorTheme,
-      htmlLangType: htmlLang?.constructor?.name,
-      highlightingType: highlighting?.constructor?.name,
-      highlightingIsArray: Array.isArray(highlighting),
-      comprehensiveVSCodeThemeType: comprehensiveVSCodeTheme?.constructor?.name,
-      // Check if highlighting needs to be spread
-      highlightingLength: Array.isArray(highlighting) ? highlighting.length : 'not array',
-    });
+  return [
+    // 1. HTML language support with proper parsing
+    html(),
 
-    // Handle case where syntaxHighlighting might return an array (shouldn't happen, but be safe)
-    const highlightingExtension = Array.isArray(highlighting) ? highlighting[0] : highlighting;
+    // 2. SAFE syntax highlighting (using only confirmed tags)
+    syntaxHighlighting(comprehensiveVSCodeTheme),
 
-    const extensions = [
-      // 1. HTML language support with proper parsing
-      htmlLang,
-
-      // 2. SAFE syntax highlighting (using only confirmed tags)
-      highlightingExtension,
-
-      // 3. Clean theme (structure only, no color conflicts)
-      cleanEditorTheme,
-    ];
-
-    console.log('[createRobustExtensions] Extensions array created:', {
-      length: extensions.length,
-      allValid: extensions.every((ext) => ext !== null && ext !== undefined),
-      extensionDetails: extensions.map((ext, idx) => ({
-        index: idx,
-        type: typeof ext,
-        constructor: ext?.constructor?.name,
-        isArray: Array.isArray(ext),
-        hasTo: typeof ext?.to === 'function',
-        hasOf: typeof ext?.of === 'function',
-      })),
-    });
-
-    return extensions;
-  } catch (error) {
-    console.error('[createRobustExtensions] Error creating extensions:', error);
-    throw error;
-  }
+    // 3. Clean theme (structure only, no color conflicts)
+    cleanEditorTheme
+  ];
 };
 
 // Export the main function
 export default {
   comprehensiveVSCodeTheme,
   cleanEditorTheme,
-  createRobustExtensions,
-};
+  createRobustExtensions
+};

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -21,6 +21,7 @@
               display: flex;
               width: 200px;
               left: 28%;
+              background-color: $CAP_WHITE;
       
               .inapp-title-POPUP-ANDROID {
                 margin: 10% $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
@@ -62,6 +63,7 @@
               width: 17.571rem;
               left: 18%;
               top: 4.071rem;
+              background-color: $CAP_WHITE;
       
               .inapp-title-HEADER-ANDROID {
                 left: 34%;
@@ -128,6 +130,7 @@
       
       
             .inapp-message-container-FOOTER-ANDROID {
+              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
               justify-content: center;
@@ -201,6 +204,7 @@
             }
       
             .inapp-message-container-FULLSCREEN-ANDROID {
+              background-color: $CAP_WHITE;
               position: absolute;
               top: 10%;
               display: flex;
@@ -239,6 +243,7 @@
             }
       
             .inapp-message-container-POPUP-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               top: 20%;
               display: flex;
@@ -279,6 +284,7 @@
             }
 
             .inapp-message-container-HEADER-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
               width: 16.571rem;
@@ -348,6 +354,7 @@
             }
 
             .inapp-message-container-FOOTER-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               display: flex;
               justify-content: center;
@@ -421,6 +428,7 @@
             }
 
             .inapp-message-container-FULLSCREEN-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               top: 10%;
               display: flex;
@@ -459,6 +467,7 @@
             }
             
             .inapp-message-container-MODAL-ANDROID, .inapp-message-container-MODAL-iOS {
+              background-color: $CAP_WHITE;
               position: absolute;
               top: 30%;
               display: flex;

package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js

@@ -24,24 +24,20 @@ 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);
-        console.log(`✅ HTMLEditor test mode ${!isVisible ? 'activated' : 'deactivated'}`);
+        setIsVisible((prev) => !prev);
       },
 
       // 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"');
         }
@@ -52,7 +48,6 @@ 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(', ')}`);
         }
@@ -61,58 +56,22 @@ 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 () => {
@@ -128,32 +87,40 @@ const HTMLEditorTesting = () => {
   }
 
   return (
-    <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',
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        zIndex: 9999,
         display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderBottom: '1px solid #ddd'
+        flexDirection: 'column',
+        padding: '20px',
       }}>
+      {/* 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
@@ -164,7 +131,7 @@ const HTMLEditorTesting = () => {
             border: 'none',
             padding: '5px 15px',
             borderRadius: '4px',
-            cursor: 'pointer'
+            cursor: 'pointer',
           }}
         >
           Close
@@ -172,12 +139,13 @@ 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}
@@ -185,10 +153,8 @@ const HTMLEditorTesting = () => {
             initialContent={content}
             onContentChange={(newContent) => {
               setContent(newContent);
-              console.log('📝 Content changed:', newContent.substring(0, 100) + '...');
             }}
-            onSave={(savedContent) => {
-              console.log('💾 Content saved:', savedContent);
+            onSave={() => {
             }}
           />
         </IntlProvider>

package/v2Containers/InApp/index.js

@@ -264,21 +264,6 @@ export const InApp = (props) => {
           },
         });
       }
-      // Check for editor-type in template metadata first (most reliable)
-      const storedEditorType = get(versions, `base['editor-type']`, null);
-      const isStoredHTMLTemplate = storedEditorType === INAPP_EDITOR_TYPES.HTML_EDITOR;
-
-      // Check if this is a Bee editor template - if so, it should NOT use HTML editor
-      const isBEEeditorTemplate = get(editContent, 'ANDROID.isBEEeditor') || get(editContent, 'IOS.isBEEeditor');
-
-      // Debug logging
-      console.log('[InApp] Editor type detection:', {
-        storedEditorType,
-        isStoredHTMLTemplate,
-        isBEEeditorTemplate,
-        editContentKeys: Object.keys(editContent || {}),
-      });
-
       const androidContent = editContent?.ANDROID;
       let androidIsHTML = false;
       if (!isEmpty(androidContent)) {
@@ -297,22 +282,7 @@ export const InApp = (props) => {
         const androidCtaLength = androidCtas?.length;
 
         // Check if this is an HTML template
-        // Priority: NOT Bee editor > stored editor-type > media type > style
-        // If it's a Bee editor template, it should NOT be treated as HTML editor
-        androidIsHTML = !isBEEeditorTemplate && (
-          isStoredHTMLTemplate
-          || androidType === INAPP_MEDIA_TYPES.HTML
-          || androidStyle === BIG_HTML
-        );
-
-        console.log('[InApp] Android content check:', {
-          androidIsHTML,
-          isBEEeditorTemplate,
-          androidType,
-          androidStyle,
-          isStoredHTMLTemplate,
-        });
-
+        androidIsHTML = androidType === INAPP_MEDIA_TYPES.HTML || androidStyle === BIG_HTML;
         setIsHTMLTemplate(androidIsHTML);
 
         setTitleAndroid(androidTitle);
@@ -356,21 +326,7 @@ export const InApp = (props) => {
         // Check if this is an HTML template (if Android wasn't HTML, check iOS)
         // Note: androidIsHTML is in the outer scope from the Android content check above
         if (!androidIsHTML) {
-          // Priority: NOT Bee editor > stored editor-type > media type > style
-          const iosIsHTML = !isBEEeditorTemplate && (
-            isStoredHTMLTemplate
-            || iosType === INAPP_MEDIA_TYPES.HTML
-            || iosStyle === BIG_HTML
-          );
-
-          console.log('[InApp] iOS content check:', {
-            iosIsHTML,
-            isBEEeditorTemplate,
-            iosType,
-            iosStyle,
-            isStoredHTMLTemplate,
-          });
-
+          const iosIsHTML = iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML;
           setIsHTMLTemplate(iosIsHTML);
           // Initialize HTML content for HTMLEditor if feature is enabled and it's an HTML template
           if (iosIsHTML) {
@@ -387,12 +343,7 @@ export const InApp = (props) => {
         setTemplateMessageIos(iosMessage);
         // Update templateMediaType if iOS is HTML and Android wasn't
         if (!androidIsHTML) {
-          // Priority: NOT Bee editor > stored editor-type > media type > style
-          const iosIsHTML = !isBEEeditorTemplate && (
-            isStoredHTMLTemplate
-            || iosType === INAPP_MEDIA_TYPES.HTML
-            || iosStyle === BIG_HTML
-          );
+          const iosIsHTML = iosType === INAPP_MEDIA_TYPES.HTML || iosStyle === BIG_HTML;
           if (iosIsHTML) {
             setTemplateMediaType(INAPP_MEDIA_TYPES.HTML);
           } else {
@@ -828,8 +779,6 @@ export const InApp = (props) => {
             ANDROID: androidContent,
             IOS: iosContent,
           },
-          // Store editor-type in template metadata for edit mode detection
-          ...(isHTMLTemplate && { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR }),
         },
       },
       type: INAPP,