@capillarytech/creatives-library 8.0.207 → 8.0.209

package/v2Components/HtmlEditor/constants.js

@@ -0,0 +1,241 @@
+/**
+ * HTML Editor Constants
+ *
+ * Centralized constants for the HTML Editor component
+ */
+
+// HTML Editor Variants
+export const HTML_EDITOR_VARIANTS = {
+  EMAIL: 'email',
+  INAPP: 'inapp'
+};
+
+// Device Types (for InApp variant)
+export const DEVICE_TYPES = {
+  ANDROID: 'android',
+  IOS: 'ios'
+};
+
+// Editor languages
+export const EDITOR_LANGUAGES = {
+  HTML: 'html',
+  CSS: 'css',
+  JAVASCRIPT: 'javascript'
+};
+
+// Preview modes
+export const PREVIEW_MODES = {
+  DESKTOP: 'desktop',
+  MOBILE: 'mobile'
+};
+
+// Device specifications for mobile preview
+export const DEVICE_PRESETS = {
+  ANDROID_PHONE: {
+    key: 'android-phone',
+    width: 393,
+    height: 851,
+    devicePixelRatio: 2.75,
+    userAgent: 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36',
+    platform: 'android',
+    model: 'Pixel 7'
+  },
+  IPHONE: {
+    key: 'iphone',
+    width: 390,
+    height: 844,
+    devicePixelRatio: 3,
+    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)',
+    platform: 'ios',
+    model: 'iPhone 15'
+  }
+};
+
+// Validation severity levels
+export const VALIDATION_SEVERITY = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info'
+};
+
+// Validation types
+export const VALIDATION_TYPES = {
+  HTML: 'html',
+  CSS: 'css',
+  JAVASCRIPT: 'javascript',
+  SECURITY: 'security'
+};
+
+// Error types for preview
+export const PREVIEW_ERROR_TYPES = {
+  RUNTIME: 'runtime',
+  RENDER: 'render',
+  SECURITY: 'security'
+};
+
+// Performance thresholds
+export const PERFORMANCE = {
+  PREVIEW_UPDATE_DEBOUNCE: 300, // ms
+  VALIDATION_DEBOUNCE: 500, // ms
+  AUTO_SAVE_INTERVAL: 30000, // ms
+  MAX_CONTENT_LENGTH: 100000, // characters
+  PERFORMANCE_WARNING_THRESHOLD: 50000 // characters
+};
+
+// Layout constraints
+export const LAYOUT = {
+  MIN_PANE_SIZE: 20, // percentage
+  MAX_PANE_SIZE: 80, // percentage
+  DEFAULT_SPLIT_SIZES: [50, 50], // [left, right] percentages
+  GUTTER_SIZE: 8, // pixels
+  MOBILE_BREAKPOINT: 768, // pixels
+  MOBILE_WIDTH_DEFAULT: 375 // pixels
+};
+
+
+// CodeMirror configuration
+export const CODEMIRROR_CONFIG = {
+  THEME: 'default',
+  FONT_SIZE: 14,
+  FONT_FAMILY: '"Fira Code", "Monaco", "Menlo", "Consolas", monospace',
+  LINE_NUMBERS: true,
+  HIGHLIGHT_ACTIVE_LINE: true,
+  BRACKET_MATCHING: true,
+  AUTO_CLOSE_BRACKETS: true,
+  FOLD_GUTTER: true,
+  SEARCH_ENABLED: true,
+  AUTOCOMPLETE_ENABLED: true,
+  LINT_ENABLED: true
+};
+
+// HTML validation rules (HTMLHint)
+export const HTML_VALIDATION_RULES = {
+  'tag-pair': true,
+  'tag-self-close': true,
+  'tagname-lowercase': true,
+  'attr-lowercase': true,
+  'attr-value-double-quotes': true,
+  'id-unique': true,
+  'src-not-empty': true,
+  'title-require': false,
+  'alt-require': true,
+  'doctype-first': false, // Optional: support both fragments and full documents
+  'doctype-html5': false, // Optional: support both fragments and full documents
+  'head-script-disabled': false,
+  'style-disabled': false,
+  'inline-style-disabled': false,
+  'inline-script-disabled': false,
+  'space-tab-mixed-disabled': 'space',
+  'spec-char-escape': true
+};
+
+// CSS validation rules
+export const CSS_VALIDATION_RULES = {
+  // Will be implemented with Stylelint or similar
+  'property-case': 'lower',
+  'value-case': 'lower',
+  'declaration-colon-space-after': 'always',
+  'declaration-colon-space-before': 'never',
+  'block-closing-brace-newline-after': 'always',
+  'block-opening-brace-space-before': 'always'
+};
+
+// JavaScript validation rules (ESLint-style)
+export const JS_VALIDATION_RULES = {
+  // Basic rules for HTML editor context
+  'no-undef': 'error',
+  'no-unused-vars': 'warn',
+  'no-console': 'warn',
+  'semi': ['error', 'always'],
+  'quotes': ['error', 'single'],
+  'indent': ['error', 2]
+};
+
+// Keyboard shortcuts
+export const KEYBOARD_SHORTCUTS = {
+  SAVE: 'Ctrl+S',
+  SAVE_MAC: 'Cmd+S',
+  FULLSCREEN: 'F11',
+  TOGGLE_PREVIEW: 'Ctrl+P',
+  TOGGLE_PREVIEW_MAC: 'Cmd+P',
+  FORMAT_CODE: 'Shift+Alt+F',
+  FORMAT_CODE_MAC: 'Shift+Option+F',
+  FIND: 'Ctrl+F',
+  FIND_MAC: 'Cmd+F',
+  REPLACE: 'Ctrl+H',
+  REPLACE_MAC: 'Cmd+Option+F'
+};
+
+// Feature flags
+export const FEATURES = {
+  AUTO_SAVE: true,
+  VALIDATION: true,
+  MOBILE_PREVIEW: true,
+  DEVICE_PREVIEW: true,
+  FULLSCREEN_MODE: true,
+  KEYBOARD_SHORTCUTS: true,
+  ERROR_RECOVERY: true,
+  PERFORMANCE_MONITORING: true,
+  ACCESSIBILITY_FEATURES: true
+};
+
+// Animation durations (ms)
+export const ANIMATIONS = {
+  FAST: 150,
+  NORMAL: 300,
+  SLOW: 500,
+  PANEL_RESIZE: 200,
+  FADE_IN: 300,
+  SLIDE_IN: 250
+};
+
+// Z-index layers
+export const Z_INDEX = {
+  BASE: 1,
+  OVERLAY: 1000,
+  MODAL: 1050,
+  FULLSCREEN: 9999,
+  TOOLTIP: 10000
+};
+
+// Default HTML content template
+export const DEFAULT_HTML_CONTENT = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Editor Preview</title>
+    <style>
+        /* Your CSS styles here */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to HTML Editor</h1>
+        <p>Start editing your HTML, CSS, and JavaScript code to see the live preview here.</p>
+        <button id="demoButton">Click me!</button>
+    </div>
+
+    <script>
+        // Your JavaScript code here
+        document.getElementById('demoButton').addEventListener('click', function() {
+            alert('Hello from the HTML Editor!');
+        });
+    </script>
+</body>
+</html>`;

package/v2Components/HtmlEditor/hooks/__tests__/useEditorContent.test.js

@@ -0,0 +1,450 @@
+/**
+ * useEditorContent Hook Tests
+ *
+ * Tests for the useEditorContent custom hook that manages unified editor content state
+ */
+
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import useEditorContent from '../useEditorContent';
+
+// Test wrapper component
+const TestComponent = ({ initialContent, options, onStateChange }) => {
+  const editorState = useEditorContent(initialContent, options);
+
+  React.useEffect(() => {
+    if (onStateChange) {
+      onStateChange(editorState);
+    }
+  });
+
+  return (
+    <div>
+      <div data-testid="content">{editorState.content}</div>
+      <div data-testid="is-dirty">{String(editorState.isDirty)}</div>
+      <div data-testid="is-empty">{String(editorState.isEmpty)}</div>
+      <div data-testid="character-count">{editorState.characterCount}</div>
+      <div data-testid="can-save">{String(editorState.canSave)}</div>
+      <div data-testid="is-large">{String(editorState.isLargeContent)}</div>
+      <div data-testid="auto-save-enabled">{String(editorState.isAutoSaveEnabled)}</div>
+      <button onClick={() => editorState.updateContent('Updated content')} data-testid="update">
+        Update
+      </button>
+      <button onClick={() => editorState.resetContent()} data-testid="reset">
+        Reset
+      </button>
+      <button onClick={() => editorState.saveContent()} data-testid="save">
+        Save
+      </button>
+    </div>
+  );
+};
+
+describe('useEditorContent', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  describe('Initial State', () => {
+    it('initializes with default content when no initial content provided', () => {
+      render(<TestComponent />);
+
+      expect(screen.getByTestId('content')).toHaveTextContent('<!DOCTYPE html>');
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('false');
+      expect(screen.getByTestId('is-empty')).toHaveTextContent('false');
+    });
+
+    it('initializes with provided initial content', () => {
+      render(<TestComponent initialContent="<h1>Test</h1>" />);
+
+      expect(screen.getByTestId('content')).toHaveTextContent('<h1>Test</h1>');
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('false');
+    });
+
+    it('initializes with auto-save enabled by default', () => {
+      render(<TestComponent />);
+
+      expect(screen.getByTestId('auto-save-enabled')).toHaveTextContent('true');
+    });
+
+    it('respects auto-save option', () => {
+      render(<TestComponent options={{ autoSave: false }} />);
+
+      expect(screen.getByTestId('auto-save-enabled')).toHaveTextContent('false');
+    });
+  });
+
+  describe('Content Updates', () => {
+    it('updates content when updateContent is called', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      act(() => {
+        editorState.updateContent('<p>New content</p>');
+      });
+
+      expect(screen.getByTestId('content')).toHaveTextContent('<p>New content</p>');
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('true');
+    });
+
+    it('marks content as dirty after update', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('false');
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('true');
+    });
+
+    it('does not update if content is the same', () => {
+      const onChange = jest.fn();
+      let editorState;
+      render(<TestComponent
+        initialContent="<p>Same</p>"
+        options={{ onChange }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Same</p>');
+      });
+
+      // onChange should not be called if content hasn't changed
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('calls onChange callback when content updates', () => {
+      const onChange = jest.fn();
+      let editorState;
+      render(<TestComponent
+        options={{ onChange }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>New</p>');
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(300);
+      });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('Content State', () => {
+    it('reports isEmpty correctly for empty content', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      // Update to empty content
+      act(() => {
+        editorState.updateContent('');
+      });
+
+      expect(screen.getByTestId('is-empty')).toHaveTextContent('true');
+    });
+
+    it('reports isEmpty correctly for non-empty content', () => {
+      render(<TestComponent initialContent="<p>Content</p>" />);
+
+      expect(screen.getByTestId('is-empty')).toHaveTextContent('false');
+    });
+
+    it('calculates character count correctly', () => {
+      const content = '<p>Test</p>';
+      render(<TestComponent initialContent={content} />);
+
+      expect(screen.getByTestId('character-count')).toHaveTextContent(String(content.length));
+    });
+
+    it('detects large content', async () => {
+      // Create content larger than threshold (make it 100KB to be safe)
+      const largeContent = 'a'.repeat(100000);
+      let editorState;
+      const { rerender } = render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      await act(async () => {
+        editorState.updateContent(largeContent);
+        // Wait for state update
+        await Promise.resolve();
+      });
+
+      // Force TestComponent to re-render and call onStateChange with updated state
+      rerender(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      // Now check the state
+      expect(editorState.isLargeContent).toBe(true);
+    });
+  });
+
+  describe('Reset Functionality', () => {
+    it('resets to initial content', () => {
+      const initialContent = '<h1>Initial</h1>';
+      let editorState;
+      render(<TestComponent
+        initialContent={initialContent}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      expect(screen.getByTestId('content')).toHaveTextContent('<p>Modified</p>');
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('true');
+
+      act(() => {
+        editorState.resetContent();
+      });
+
+      expect(screen.getByTestId('content')).toHaveTextContent(initialContent);
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('false');
+    });
+
+    it('resets to default content if no initial content', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      act(() => {
+        editorState.resetContent();
+      });
+
+      expect(screen.getByTestId('content')).toHaveTextContent('<!DOCTYPE html>');
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('false');
+    });
+  });
+
+  describe('Save Functionality', () => {
+    it('reports canSave as false when no onSave provided', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      expect(screen.getByTestId('can-save')).toHaveTextContent('false');
+    });
+
+    it('reports canSave as true when onSave provided and content is dirty', () => {
+      const onSave = jest.fn();
+      let editorState;
+      render(<TestComponent
+        options={{ onSave }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      expect(screen.getByTestId('can-save')).toHaveTextContent('true');
+    });
+
+    it('calls onSave callback when saveContent is called', async () => {
+      const onSave = jest.fn().mockResolvedValue(true);
+      let editorState;
+      render(<TestComponent
+        options={{ onSave }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      await act(async () => {
+        await editorState.saveContent();
+      });
+
+      expect(onSave).toHaveBeenCalledWith('<p>Modified</p>');
+    });
+
+    it('marks content as saved after successful save', async () => {
+      const onSave = jest.fn().mockResolvedValue(true);
+      let editorState;
+      render(<TestComponent
+        options={{ onSave }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('true');
+
+      await act(async () => {
+        await editorState.saveContent();
+      });
+
+      expect(screen.getByTestId('is-dirty')).toHaveTextContent('false');
+    });
+
+    it('does not save if content is not dirty', async () => {
+      const onSave = jest.fn().mockResolvedValue(true);
+      let editorState;
+      render(<TestComponent
+        options={{ onSave }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      const result = await act(async () => {
+        return await editorState.saveContent();
+      });
+
+      expect(result).toBe(false);
+      expect(onSave).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Auto-save', () => {
+    it('toggles auto-save state', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      expect(screen.getByTestId('auto-save-enabled')).toHaveTextContent('true');
+
+      act(() => {
+        editorState.toggleAutoSave();
+      });
+
+      expect(screen.getByTestId('auto-save-enabled')).toHaveTextContent('false');
+
+      act(() => {
+        editorState.toggleAutoSave();
+      });
+
+      expect(screen.getByTestId('auto-save-enabled')).toHaveTextContent('true');
+    });
+
+    it('auto-saves after interval when enabled and dirty', async () => {
+      const onSave = jest.fn().mockResolvedValue(true);
+      let editorState;
+      render(<TestComponent
+        options={{ onSave, autoSaveInterval: 5000 }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      expect(onSave).not.toHaveBeenCalled();
+
+      await act(async () => {
+        jest.advanceTimersByTime(5000);
+        await Promise.resolve();
+      });
+
+      expect(onSave).toHaveBeenCalled();
+    });
+
+    it('does not auto-save when auto-save is disabled', async () => {
+      const onSave = jest.fn().mockResolvedValue(true);
+      let editorState;
+      render(<TestComponent
+        options={{ onSave, autoSave: false, autoSaveInterval: 5000 }}
+        onStateChange={(state) => { editorState = state; }}
+      />);
+
+      act(() => {
+        editorState.updateContent('<p>Modified</p>');
+      });
+
+      await act(async () => {
+        jest.advanceTimersByTime(5000);
+        await Promise.resolve();
+      });
+
+      expect(onSave).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Validation Integration', () => {
+    it('registers and calls validation callback', () => {
+      const validationCallback = jest.fn();
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      act(() => {
+        editorState.registerValidationCallback(validationCallback);
+      });
+
+      act(() => {
+        editorState.validateContent();
+      });
+
+      expect(validationCallback).toHaveBeenCalled();
+    });
+
+    it('unregisters validation callback', () => {
+      const validationCallback = jest.fn();
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      act(() => {
+        editorState.registerValidationCallback(validationCallback);
+        editorState.unregisterValidationCallback();
+        editorState.validateContent();
+      });
+
+      expect(validationCallback).not.toHaveBeenCalled();
+    });
+
+    it('calls validation callback on content update with debounce', () => {
+      const validationCallback = jest.fn();
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      act(() => {
+        editorState.registerValidationCallback(validationCallback);
+        editorState.updateContent('<p>New</p>');
+      });
+
+      expect(validationCallback).not.toHaveBeenCalled();
+
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+
+      expect(validationCallback).toHaveBeenCalled();
+    });
+  });
+
+  describe('Computed Properties', () => {
+    it('provides content analysis', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      expect(editorState.contentAnalysis).toBeDefined();
+      expect(editorState.contentAnalysis).toHaveProperty('size');
+      expect(editorState.contentAnalysis).toHaveProperty('isLarge');
+    });
+
+    it('provides performance warning flag', () => {
+      let editorState;
+      render(<TestComponent onStateChange={(state) => { editorState = state; }} />);
+
+      expect(editorState.shouldShowPerformanceWarning).toBeDefined();
+      expect(typeof editorState.shouldShowPerformanceWarning).toBe('boolean');
+    });
+  });
+});
+