@capillarytech/creatives-library 8.0.236-alpha.7 → 8.0.236

package/v2Components/HtmlEditor/__tests__/index.lazy.test.js

@@ -9,23 +9,19 @@ import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 // Mock CapSpin before importing the component
-jest.mock('@capillarytech/cap-ui-library/CapSpin', () => function MockCapSpin({ size }) {
-  return <div data-testid="cap-spin" data-size={size}>Loading...</div>;
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => {
+  return function MockCapSpin({ size }) {
+    return <div data-testid="cap-spin" data-size={size}>Loading...</div>;
+  };
 });
 
 // Mock the HTMLEditor component
 jest.mock('../HTMLEditor', () => {
-  const MockHTMLEditor = function MockHTMLEditor(props) {
-    return (
-      <div data-testid="html-editor">
-Mock HTML Editor -
-        {props.variant}
-      </div>
-    );
-  };
   return {
     __esModule: true,
-    default: MockHTMLEditor,
+    default: function MockHTMLEditor(props) {
+      return <div data-testid="html-editor">Mock HTML Editor - {props.variant}</div>;
+    }
   };
 });
 
@@ -117,8 +113,7 @@ describe('index.lazy.js', () => {
         expect(screen.getByTestId('html-editor')).toBeInTheDocument();
       });
 
-      const editor = screen.getByTestId('html-editor');
-      expect(editor.textContent).toBe('Mock HTML Editor -email');
+      expect(screen.getByText(/Mock HTML Editor - email/)).toBeInTheDocument();
     });
 
     it('shows fallback while loading', async () => {
@@ -139,7 +134,7 @@ describe('index.lazy.js', () => {
         <HTMLEditorLazy
           variant="inapp"
           onSave={mockOnSave}
-          readOnly
+          readOnly={true}
           className="custom-class"
         />
       );
@@ -148,8 +143,7 @@ describe('index.lazy.js', () => {
         expect(screen.getByTestId('html-editor')).toBeInTheDocument();
       });
 
-      const editor = screen.getByTestId('html-editor');
-      expect(editor.textContent).toBe('Mock HTML Editor -inapp');
+      expect(screen.getByText(/Mock HTML Editor - inapp/)).toBeInTheDocument();
     });
 
     it('has correct display name', async () => {
@@ -221,7 +215,7 @@ describe('index.lazy.js', () => {
       render(
         <HTMLEditorLazy
           className="custom-editor"
-          readOnly
+          readOnly={true}
           showFullscreenButton={false}
           autoSave={false}
           autoSaveInterval={60000}
@@ -535,3 +529,4 @@ describe('index.lazy.js', () => {
     });
   });
 });
+

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -28,7 +28,6 @@
       padding: 0;
       min-height: 3.25rem;
       height: 3.25rem;
-      position: relative;
 
       // Right-align toolbar actions
       &__right {
@@ -129,7 +128,6 @@
         padding: 0;
         min-height: 3.25rem; // 52px = 3.25rem
         height: 3.25rem;
-        position: relative;
 
         // Right-align toolbar actions
         &__right {
@@ -269,6 +267,10 @@
 
 // Focus states and accessibility
 .html-editor {
+  &:focus-within {
+    outline: 0.125rem solid map-get($CAP_PRIMARY, base); // 2px = 0.125rem
+    outline-offset: -0.125rem; // -2px = -0.125rem
+  }
 
   // High contrast mode support
   @media (prefers-contrast: high) {

package/v2Components/HtmlEditor/_index.lazy.scss

@@ -13,6 +13,7 @@
   align-items: center;
   min-height: 25rem; // 400px = 25rem
   background: $CAP_G11; // Light background similar to #fafbfc
+  border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
   border-radius: 0.5rem; // 8px = 0.5rem
   flex-direction: column;
   gap: 1rem; // 16px = 1rem

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

@@ -31,6 +31,79 @@
     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 {
@@ -40,7 +113,7 @@
     overflow: auto;
     position: relative;
     height: 100%;
-    max-height: 34.25rem;
+    max-height: 31.25rem;
     background-color: $CAP_G01;
   }
 
@@ -150,7 +223,7 @@
   .codemirror-wrapper {
     position: relative;
     height: 100%;
-    max-height: 34.25rem;
+    max-height: 31.25rem;
     background-color: $CAP_G01;
     border-radius: 0;
     overflow: hidden;
@@ -161,6 +234,31 @@
       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 {
@@ -198,6 +296,7 @@
       }
 
       .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

@@ -8,57 +8,45 @@
  * - Theme support with proper styling
  */
 
-import React, {
-  forwardRef, useImperativeHandle, useRef, useEffect, useCallback,
-} from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // CodeMirror 6 imports
 import { EditorState } from '@codemirror/state';
 import { EditorView, lineNumbers, highlightActiveLine } from '@codemirror/view';
 
+// Import our comprehensive syntax highlighting solution
+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
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
 
 // 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 = '',
-  forwardedRef,
-  // Tag-related props - tags are fetched and managed by parent component
-  tags = [],
-  injectedTags = {},
-  location,
-  eventContextTags = [],
-  selectedOfferDetails = [],
-  channel,
-  userLocale = 'en',
-  moduleFilterEnabled = true,
-  onTagContextChange,
+  isFullscreenMode = false,
+  onLabelInsert,
+  forwardedRef
 }) => {
-  const { content } = useEditorContext();
+  const { content, validation } = useEditorContext();
   const { content: contentValue, updateContent } = content;
   const editorRef = useRef(null);
   const viewRef = useRef(null);
@@ -73,7 +61,7 @@ const CodeEditorPaneComponent = ({
     get view() {
       return viewRef.current;
     },
-    viewRef, // For compatibility with existing code
+    viewRef: viewRef, // For compatibility with existing code
 
     focus: () => {
       if (viewRef.current) {
@@ -87,7 +75,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');
@@ -100,7 +88,9 @@ const CodeEditorPaneComponent = ({
       }
       return 0;
     },
-    getValue: () => contentValue || '',
+    getValue: () => {
+      return contentValue || '';
+    },
     setValue: (value) => {
       updateContent(value);
     },
@@ -117,7 +107,7 @@ const CodeEditorPaneComponent = ({
 
           view.dispatch({
             selection: { anchor: pos },
-            effects: EditorView.scrollIntoView(pos, { y: 'center' }),
+            effects: EditorView.scrollIntoView(pos, { y: 'center' })
           });
           view.focus();
         } catch (error) {
@@ -127,7 +117,7 @@ const CodeEditorPaneComponent = ({
           }
         }
       }
-    },
+    }
   }), [contentValue]);
 
   // Note: handleContentChange removed - using updateContentRef directly in CodeMirror
@@ -143,9 +133,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;
         if (!tagText) {
           console.warn('Invalid tag data:', tagData);
@@ -159,59 +147,49 @@ const CodeEditorPaneComponent = ({
       // For unified HTML editor, insert as template variable
       const formattedTag = `{{${tagText}}}`;
 
-      // Insert the tag at cursor position directly
+      // Insert the tag at cursor position
       view.dispatch({
         changes: { from: pos, insert: formattedTag },
-        selection: { anchor: pos + formattedTag.length },
+        selection: { anchor: pos + formattedTag.length }
       });
 
       // Focus back to editor
       view.focus();
 
-      // 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
+      // Call the parent's handleLabelInsert if available
+      if (onLabelInsert) {
+        onLabelInsert(formattedTag, pos);
+      }
     }
   };
 
-  // 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) {
-      // 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());
-          }
-        }),
-      ];
+            // 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
       });
     }
 
@@ -237,43 +215,100 @@ 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={handleTagContextChange}
-              className="tag-list-trigger"
-              tags={tags}
-              injectedTags={injectedTags}
-              moduleFilterEnabled={moduleFilterEnabled}
-              userLocale={userLocale}
-              channel={channel}
-              disabled={readOnly}
-              location={location}
-              selectedOfferDetails={selectedOfferDetails}
-              eventContextTags={eventContextTags}
-              popoverPlacement="rightTop"
-            />
-          </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={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>
 
-    </CapRow>
-  );
+      </CapRow>
+    );
 };
 
 // Create the forwardRef wrapper
@@ -288,18 +323,9 @@ CodeEditorPane.propTypes = {
   readOnly: PropTypes.bool,
   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
+  onLabelInsert: PropTypes.func
 };
 
 // Export with injectIntl - ref forwarding is handled by forwardRef wrapper
 export default injectIntl(CodeEditorPane);
+

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

@@ -9,7 +9,7 @@
 .html-editor .device-toggle {
   display: flex;
   align-items: center;
-  margin-left: 2.5rem;
+  gap: 1rem;
   padding: 0;
   background-color: $CAP_G10;
   border-radius: 0.25rem 0.25rem 0 0;
@@ -220,7 +220,6 @@
 
 // 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/FullscreenModal/_fullscreenModal.scss

@@ -49,7 +49,6 @@ 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;