@capillarytech/creatives-library 8.0.235 → 8.0.236-alpha.1

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

@@ -31,79 +31,6 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-
-    .cap-button,
-    .ant-btn,
-    button {
-      color: map-get($CAP_PRIMARY, base);
-      border: none;
-      background: $CAP_WHITE;
-      border-radius: 0.25rem;
-      padding: 0.375rem 0.5rem;
-      font-size: 0.875rem;
-      font-family: $FONT_FAMILY;
-      font-weight: 500;
-      height: auto;
-      min-width: 5.9375rem;
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
-      line-height: 1.25rem;
-      text-align: left;
-
-      &:hover {
-        background: $CAP_G09;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.375rem 0.75rem -0.125rem rgba(9, 30, 66, 0.25);
-        color: map-get($CAP_PRIMARY, base);
-        border: none;
-      }
-
-      &:active,
-      &:focus {
-        background: $CAP_G08;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.125rem 0.25rem -0.125rem rgba(9, 30, 66, 0.25);
-        color: map-get($CAP_PRIMARY, base);
-        border: none;
-      }
-
-      .anticon,
-      .cap-icon {
-        font-size: 1rem;
-        color: map-get($CAP_PRIMARY, base);
-      }
-
-      span {
-        font-size: 0.875rem;
-        font-weight: 500;
-        line-height: 1.25rem;
-        color: map-get($CAP_PRIMARY, base);
-        white-space: nowrap;
-      }
-
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-
-    .tooltip-add-label-container {
-
-      .cap-button,
-      .ant-btn {
-        color: map-get($CAP_PRIMARY, base);
-        background: $CAP_WHITE;
-        border: none;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
-      }
-    }
-
-    .cap-button-flat,
-    .cap-button-add {
-      background: $CAP_WHITE;
-      color: map-get($CAP_PRIMARY, base);
-      border: none;
-    }
   }
 
   &__content {
@@ -234,31 +161,6 @@
       top: 0.5rem;
       right: 0.5rem;
       z-index: 20;
-
-      .cap-button,
-      .ant-btn,
-      button {
-        background: $CAP_WHITE;
-        color: map-get($CAP_PRIMARY, base);
-        border: none;
-        border-radius: 0.25rem;
-        padding: 0.375rem 0.5rem;
-        font-size: 0.875rem;
-        font-family: $FONT_FAMILY;
-        font-weight: 500;
-        min-width: 5.9375rem;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
-
-        &:hover {
-          background: $CAP_G09;
-          color: map-get($CAP_PRIMARY, base);
-        }
-
-        &:active {
-          background: $CAP_G08;
-          color: map-get($CAP_PRIMARY, base);
-        }
-      }
     }
 
     .codemirror-editor {

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

@@ -8,7 +8,9 @@
  * - Theme support with proper styling
  */
 
-import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
+import React, {
+  forwardRef, useImperativeHandle, useRef, useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 
 // CodeMirror 6 imports
@@ -16,16 +18,15 @@ 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 messages from '../../messages';
 
 // Cap UI Components
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
 
 // Components
 import TagList from '../../../../v2Containers/TagList';
@@ -44,7 +45,14 @@ const CodeEditorPaneComponent = ({
   className = '',
   isFullscreenMode = false,
   onLabelInsert,
-  forwardedRef
+  forwardedRef,
+  // Tags-related props
+  tags = [],
+  injectedTags = {},
+  location = {},
+  selectedOfferDetails = null,
+  onTagSelect = null,
+  onContextChange = null,
 }) => {
   const { content, validation } = useEditorContext();
   const { content: contentValue, updateContent } = content;
@@ -61,7 +69,7 @@ const CodeEditorPaneComponent = ({
     get view() {
       return viewRef.current;
     },
-    viewRef: viewRef, // For compatibility with existing code
+    viewRef, // For compatibility with existing code
 
     focus: () => {
       if (viewRef.current) {
@@ -75,7 +83,7 @@ const CodeEditorPaneComponent = ({
         const pos = position !== undefined ? position : head;
         view.dispatch({
           changes: { from: pos, insert: text },
-          selection: { anchor: pos + text.length }
+          selection: { anchor: pos + text.length },
         });
       } else {
         throw new Error('CodeMirror view not initialized');
@@ -88,9 +96,7 @@ const CodeEditorPaneComponent = ({
       }
       return 0;
     },
-    getValue: () => {
-      return contentValue || '';
-    },
+    getValue: () => contentValue || '',
     setValue: (value) => {
       updateContent(value);
     },
@@ -107,7 +113,7 @@ const CodeEditorPaneComponent = ({
 
           view.dispatch({
             selection: { anchor: pos },
-            effects: EditorView.scrollIntoView(pos, { y: 'center' })
+            effects: EditorView.scrollIntoView(pos, { y: 'center' }),
           });
           view.focus();
         } catch (error) {
@@ -117,79 +123,99 @@ const CodeEditorPaneComponent = ({
           }
         }
       }
-    }
+    },
   }), [contentValue]);
 
   // Note: handleContentChange removed - using updateContentRef directly in CodeMirror
 
   const handleTagSelect = (tagData) => {
     // Get the unified editor
-    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;
+    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 || '';
         }
-      } else {
+        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) {
         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
+    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 if available
-      if (onLabelInsert) {
-        onLabelInsert(formattedTag, pos);
-      }
+    // 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);
     }
   };
 
   // Initialize CodeMirror effect
   useEffect(() => {
     if (editorRef.current && !viewRef.current) {
-            // 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());
-                }
-              })
-            ];
+      // 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());
+          }
+        }),
+      ];
 
       const state = EditorState.create({
         doc: contentValue || '',
-        extensions
+        extensions,
       });
 
       viewRef.current = new EditorView({
         state,
-        parent: editorRef.current
+        parent: editorRef.current,
       });
     }
 
@@ -215,100 +241,52 @@ const CodeEditorPaneComponent = ({
         changes: {
           from: 0,
           to: length,
-          insert: contentValue || ''
-        }
+          insert: contentValue || '',
+        },
       });
     }
   }, [contentValue]);
 
-    return (
-      <CapRow className={`code-editor-pane ${className}`}>
-        {/* Unified Code Editor with Floating Add Label Button */}
-        <CapRow className="code-editor-pane__content">
-          <div className="codemirror-wrapper">
-            <div ref={editorRef} className="codemirror-editor" />
-            {/* Floating Add Label Button */}
-            <CapRow className="code-editor-pane__actions">
-              <TagList
-                key="html-editor-taglist"
-                label={intl.formatMessage(messages.addLabel)}
-                onTagSelect={handleTagSelect}
-                onContextChange={(context) => {
-                }}
-                className="tag-list-trigger"
-                tags={[]} // Empty initially - TagList will fetch from API
-                injectedTags={{
-                  // Add common HTML/Email specific tags as fallback
-                  'Customer Info': {
-                    name: 'Customer Info',
-                    desc: 'Customer information tags',
-                    resolved: true,
-                    'tag-header': true,
-                    subtags: {
-                      'customer.firstName': {
-                        name: 'First Name',
-                        desc: 'Customer first name',
-                        resolved: true
-                      },
-                      'customer.lastName': {
-                        name: 'Last Name',
-                        desc: 'Customer last name',
-                        resolved: true
-                      },
-                      'customer.email': {
-                        name: 'Email',
-                        desc: 'Customer email address',
-                        resolved: true
-                      },
-                      'customer.phone': {
-                        name: 'Phone',
-                        desc: 'Customer phone number',
-                        resolved: true
-                      }
-                    }
-                  },
-                  'Common Tags': {
-                    name: 'Common Tags',
-                    desc: 'Commonly used template tags',
-                    resolved: true,
-                    'tag-header': true,
-                    subtags: {
-                      'organization.name': {
-                        name: 'Organization Name',
-                        desc: 'Organization name',
-                        resolved: true
-                      },
-                      'currentDate': {
-                        name: 'Current Date',
-                        desc: 'Current date',
-                        resolved: true
-                      },
-                      'unsubscribeLink': {
-                        name: 'Unsubscribe Link',
-                        desc: 'Unsubscribe link',
-                        resolved: true
-                      }
-                    }
-                  }
-                }}
-                moduleFilterEnabled={true}
-                userLocale="en"
-                channel="email"
-                disabled={readOnly}
-                location={{
-                  query: {
-                    type: 'html-editor' // Identify the context
-                  }
-                }}
-                selectedOfferDetails={[]}
-                eventContextTags={[]}
-              />
-            </CapRow>
-          </div>
-        </CapRow>
-
+  return (
+    <CapRow className={`code-editor-pane ${className}`}>
+      {/* Unified Code Editor with Floating Add Label Button */}
+      <CapRow className="code-editor-pane__content">
+        <div className="codemirror-wrapper">
+          <div ref={editorRef} className="codemirror-editor" />
+          {/* Floating Add Label Button */}
+          <CapRow className="code-editor-pane__actions">
+            <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);
+                }
+              }}
+              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"
+              }
+              disabled={readOnly}
+            />
+          </CapRow>
+        </div>
       </CapRow>
-    );
+
+    </CapRow>
+  );
 };
 
 // Create the forwardRef wrapper
@@ -323,9 +301,8 @@ CodeEditorPane.propTypes = {
   readOnly: PropTypes.bool,
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
-  onLabelInsert: PropTypes.func
+  onLabelInsert: PropTypes.func,
 };
 
 // Export with injectIntl - ref forwarding is handled by forwardRef wrapper
 export default injectIntl(CodeEditorPane);
-

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

@@ -220,6 +220,7 @@
 
 // Integration with editor toolbar
 .html-editor.html-editor--inapp {
+  margin-top: 4%;
   .editor-toolbar {
     padding: 0 1rem 0 0; // Remove left padding to align with device toggle
     background-color: $CAP_G10;

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

@@ -32,7 +32,7 @@ const DeviceToggle = ({
   onDeviceChange,
   keepContentSame = false,
   onKeepContentSameChange,
-  className = ''
+  className = '',
 }) => {
   const handleDeviceClick = (device) => {
     if (onDeviceChange && device !== activeDevice) {
@@ -97,7 +97,7 @@ DeviceToggle.propTypes = {
   onDeviceChange: PropTypes.func,
   keepContentSame: PropTypes.bool,
   onKeepContentSameChange: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 DeviceToggle.defaultProps = {
@@ -105,7 +105,7 @@ DeviceToggle.defaultProps = {
   onDeviceChange: null,
   keepContentSame: false,
   onKeepContentSameChange: null,
-  className: ''
+  className: '',
 };
 
 export default injectIntl(DeviceToggle);

package/v2Components/HtmlEditor/components/InAppPreviewPane/DeviceFrame.js

@@ -14,9 +14,7 @@ const DeviceFrame = ({
   className = '',
   ...props
 }) => {
-  const getFrameAsset = () => {
-    return device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;
-  };
+  const getFrameAsset = () => device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;
 
   const getFrameStyles = () => {
     const baseStyles = {
@@ -26,14 +24,13 @@ const DeviceFrame = ({
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
       backgroundSize: 'contain',
-      filter: 'drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) brightness(1.05) contrast(1.1)'
     };
 
     // Unified dimensions - both devices use the same size since assets are identical
     return {
       ...baseStyles,
       width: '450px',
-      height: '920px'
+      height: '920px',
     };
   };
 
@@ -45,7 +42,7 @@ const DeviceFrame = ({
       {...props}
     >
 
-        {children}
+      {children}
 
     </div>
   );
@@ -54,7 +51,7 @@ const DeviceFrame = ({
 DeviceFrame.propTypes = {
   device: PropTypes.oneOf(Object.values(DEVICE_TYPES)),
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 export default DeviceFrame;