@capillarytech/creatives-library 8.0.207 → 8.0.209

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

@@ -0,0 +1,331 @@
+/**
+ * CodeEditorPane - Code editor panel with tabs and CodeMirror 6 integration
+ *
+ * Features:
+ * - Syntax highlighting for HTML, CSS, and JavaScript
+ * - Auto-completion and error checking
+ * - Line numbers and code folding
+ * - Theme support with proper styling
+ */
+
+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 messages from '../../messages';
+
+// Cap UI Components
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+
+// Components
+import TagList from '../../../../v2Containers/TagList';
+
+// Context
+import { useEditorContext } from '../common/EditorContext';
+
+// Styles
+import './_codeEditorPane.scss';
+
+// Legacy CodeMirrorEditor removed - using enhanced implementation only
+
+const CodeEditorPaneComponent = ({
+  intl,
+  readOnly = false,
+  className = '',
+  isFullscreenMode = false,
+  onLabelInsert,
+  forwardedRef
+}) => {
+  const { content, validation } = useEditorContext();
+  const { content: contentValue, updateContent } = content;
+  const editorRef = useRef(null);
+  const viewRef = useRef(null);
+
+  // Create a ref to the latest updateContent function to avoid stale closures
+  const updateContentRef = useRef(updateContent);
+  updateContentRef.current = updateContent;
+
+  // Expose methods and EditorView instance via ref
+  useImperativeHandle(forwardedRef, () => ({
+    // Expose the EditorView instance directly for parent access
+    get view() {
+      return viewRef.current;
+    },
+    viewRef: viewRef, // For compatibility with existing code
+
+    focus: () => {
+      if (viewRef.current) {
+        viewRef.current.focus();
+      }
+    },
+    insertText: (text, position) => {
+      if (viewRef.current) {
+        const view = viewRef.current;
+        const { state: { selection: { main: { head } } } } = view;
+        const pos = position !== undefined ? position : head;
+        view.dispatch({
+          changes: { from: pos, insert: text },
+          selection: { anchor: pos + text.length }
+        });
+      } else {
+        throw new Error('CodeMirror view not initialized');
+      }
+    },
+    getCursor: () => {
+      if (viewRef.current) {
+        const { state: { selection: { main: { head } } } } = viewRef.current;
+        return head;
+      }
+      return 0;
+    },
+    getValue: () => {
+      return contentValue || '';
+    },
+    setValue: (value) => {
+      updateContent(value);
+    },
+    navigateToLine: (line, column = 1) => {
+      if (viewRef.current) {
+        try {
+          const view = viewRef.current;
+          const { state: { doc } } = view;
+          const { lines } = doc;
+          const lineNumber = Math.min(Math.max(1, line), lines);
+          const lineObj = doc.line(lineNumber);
+          const { from, length } = lineObj;
+          const pos = from + Math.min(Math.max(0, column - 1), length);
+
+          view.dispatch({
+            selection: { anchor: pos },
+            effects: EditorView.scrollIntoView(pos, { y: 'center' })
+          });
+          view.focus();
+        } catch (error) {
+          console.warn('Could not navigate to line:', error);
+          if (viewRef.current) {
+            viewRef.current.focus();
+          }
+        }
+      }
+    }
+  }), [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;
+        }
+      } else {
+        console.warn('Invalid tag data:', tagData);
+        return;
+      }
+
+      // 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 }
+      });
+
+      // Focus back to editor
+      view.focus();
+
+      // Call the parent's handleLabelInsert if available
+      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());
+                }
+              })
+            ];
+
+      const state = EditorState.create({
+        doc: contentValue || '',
+        extensions
+      });
+
+      viewRef.current = new EditorView({
+        state,
+        parent: editorRef.current
+      });
+    }
+
+    return () => {
+      // Cleanup cursor styling
+      if (editorRef.current && editorRef.current._cleanupCursorStyling) {
+        editorRef.current._cleanupCursorStyling();
+      }
+
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+
+  // Update editor content when content changes
+  useEffect(() => {
+    if (viewRef.current && contentValue !== viewRef.current.state.doc.toString()) {
+      const { current: view } = viewRef;
+      const { state: { doc: { length } } } = view;
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: length,
+          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>
+
+      </CapRow>
+    );
+};
+
+// Create the forwardRef wrapper
+const CodeEditorPane = forwardRef((props, ref) => (
+  <CodeEditorPaneComponent {...props} forwardedRef={ref} />
+));
+
+CodeEditorPane.displayName = 'CodeEditorPane';
+
+CodeEditorPane.propTypes = {
+  intl: intlShape.isRequired,
+  readOnly: PropTypes.bool,
+  className: PropTypes.string,
+  isFullscreenMode: PropTypes.bool,
+  onLabelInsert: PropTypes.func
+};
+
+// Export with injectIntl - ref forwarding is handled by forwardRef wrapper
+export default injectIntl(CodeEditorPane);
+

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

@@ -0,0 +1,314 @@
+/**
+ * DeviceToggle Component Tests
+ *
+ * Tests for the DeviceToggle component used in InApp variant.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import DeviceToggle from '../index';
+import { DEVICE_TYPES } from '../../../constants';
+
+// Mock Cap UI components
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
+  return function MockCapButton({ children, onClick, className, type }) {
+    return (
+      <button
+        onClick={onClick}
+        className={className}
+        data-type={type}
+        data-testid="cap-button"
+      >
+        {children}
+      </button>
+    );
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapCheckbox', () => {
+  return function MockCapCheckbox({ children, checked, onChange, className }) {
+    return (
+      <label className={className}>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          data-testid="cap-checkbox"
+        />
+        {children}
+      </label>
+    );
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () => {
+  return function MockCapIcon({ type, size }) {
+    return <span data-testid="cap-icon" data-type={type} data-size={size} />;
+  };
+});
+
+// Test messages
+const messages = {
+  android: { id: 'android', defaultMessage: 'Android' },
+  ios: { id: 'ios', defaultMessage: 'iOS' },
+  keepContentSameForBoth: { id: 'keepSame', defaultMessage: 'Keep content same for both' }
+};
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={messages}>
+    {children}
+  </IntlProvider>
+);
+
+describe('DeviceToggle', () => {
+  const defaultProps = {
+    activeDevice: DEVICE_TYPES.ANDROID,
+    onDeviceChange: jest.fn(),
+    keepContentSame: false,
+    onKeepContentSameChange: jest.fn()
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with default props', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} />
+      </TestWrapper>
+    );
+
+    expect(screen.getByText('Android')).toBeInTheDocument();
+    expect(screen.getByText('iOS')).toBeInTheDocument();
+    expect(screen.getByText('Keep content same for both')).toBeInTheDocument();
+  });
+
+  it('shows Android as active by default', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const androidButton = buttons.find(btn => btn.textContent.includes('Android'));
+    const iosButton = buttons.find(btn => btn.textContent.includes('iOS'));
+
+    expect(androidButton).toHaveAttribute('data-type', 'primary');
+    expect(iosButton).toHaveAttribute('data-type', 'default');
+  });
+
+  it('shows iOS as active when specified', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} activeDevice={DEVICE_TYPES.IOS} />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const androidButton = buttons.find(btn => btn.textContent.includes('Android'));
+    const iosButton = buttons.find(btn => btn.textContent.includes('iOS'));
+
+    expect(androidButton).toHaveAttribute('data-type', 'default');
+    expect(iosButton).toHaveAttribute('data-type', 'primary');
+  });
+
+  it('calls onDeviceChange when Android button is clicked', () => {
+    const onDeviceChange = jest.fn();
+
+    render(
+      <TestWrapper>
+        <DeviceToggle
+          {...defaultProps}
+          activeDevice={DEVICE_TYPES.IOS}
+          onDeviceChange={onDeviceChange}
+        />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const androidButton = buttons.find(btn => btn.textContent.includes('Android'));
+
+    fireEvent.click(androidButton);
+
+    expect(onDeviceChange).toHaveBeenCalledWith(DEVICE_TYPES.ANDROID);
+  });
+
+  it('calls onDeviceChange when iOS button is clicked', () => {
+    const onDeviceChange = jest.fn();
+
+    render(
+      <TestWrapper>
+        <DeviceToggle
+          {...defaultProps}
+          activeDevice={DEVICE_TYPES.ANDROID}
+          onDeviceChange={onDeviceChange}
+        />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const iosButton = buttons.find(btn => btn.textContent.includes('iOS'));
+
+    fireEvent.click(iosButton);
+
+    expect(onDeviceChange).toHaveBeenCalledWith(DEVICE_TYPES.IOS);
+  });
+
+  it('does not call onDeviceChange when clicking already active device', () => {
+    const onDeviceChange = jest.fn();
+
+    render(
+      <TestWrapper>
+        <DeviceToggle
+          {...defaultProps}
+          activeDevice={DEVICE_TYPES.ANDROID}
+          onDeviceChange={onDeviceChange}
+        />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const androidButton = buttons.find(btn => btn.textContent.includes('Android'));
+
+    fireEvent.click(androidButton);
+
+    expect(onDeviceChange).not.toHaveBeenCalled();
+  });
+
+  it('renders checkbox in checked state when keepContentSame is true', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} keepContentSame={true} />
+      </TestWrapper>
+    );
+
+    const checkbox = screen.getByTestId('cap-checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('renders checkbox in unchecked state when keepContentSame is false', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} keepContentSame={false} />
+      </TestWrapper>
+    );
+
+    const checkbox = screen.getByTestId('cap-checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('calls onKeepContentSameChange when checkbox is clicked', () => {
+    const onKeepContentSameChange = jest.fn();
+
+    render(
+      <TestWrapper>
+        <DeviceToggle
+          {...defaultProps}
+          onKeepContentSameChange={onKeepContentSameChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkbox = screen.getByTestId('cap-checkbox');
+    fireEvent.click(checkbox);
+
+    expect(onKeepContentSameChange).toHaveBeenCalledWith(true);
+  });
+
+  it('handles checkbox change with boolean value', () => {
+    const onKeepContentSameChange = jest.fn();
+
+    render(
+      <TestWrapper>
+        <DeviceToggle
+          {...defaultProps}
+          keepContentSame={true}
+          onKeepContentSameChange={onKeepContentSameChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkbox = screen.getByTestId('cap-checkbox');
+
+    // Simulate direct boolean value (as might come from Cap UI)
+    fireEvent.click(checkbox);
+
+    expect(onKeepContentSameChange).toHaveBeenCalledWith(false);
+  });
+
+  it('renders device icons correctly', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} />
+      </TestWrapper>
+    );
+
+    const icons = screen.getAllByTestId('cap-icon');
+    expect(icons).toHaveLength(2);
+
+    expect(icons[0]).toHaveAttribute('data-type', 'android');
+    expect(icons[1]).toHaveAttribute('data-type', 'ios');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} className="custom-class" />
+      </TestWrapper>
+    );
+
+    expect(container.firstChild).toHaveClass('device-toggle', 'custom-class');
+  });
+
+  it('handles missing callback functions gracefully', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle
+          activeDevice={DEVICE_TYPES.ANDROID}
+          keepContentSame={false}
+        />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const iosButton = buttons.find(btn => btn.textContent.includes('iOS'));
+    const checkbox = screen.getByTestId('cap-checkbox');
+
+    // Should not throw errors
+    fireEvent.click(iosButton);
+    fireEvent.change(checkbox, { target: { checked: true } });
+
+    expect(screen.getByText('iOS')).toBeInTheDocument();
+  });
+
+  it('renders with proper ARIA attributes', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} />
+      </TestWrapper>
+    );
+
+    const deviceToggle = screen.getByText('Android').closest('.device-toggle');
+    expect(deviceToggle).toBeInTheDocument();
+  });
+
+  it('maintains proper tab order', () => {
+    render(
+      <TestWrapper>
+        <DeviceToggle {...defaultProps} />
+      </TestWrapper>
+    );
+
+    const buttons = screen.getAllByTestId('cap-button');
+    const checkbox = screen.getByTestId('cap-checkbox');
+
+    // All interactive elements should be in the DOM
+    expect(buttons).toHaveLength(2);
+    expect(checkbox).toBeInTheDocument();
+  });
+});
+