@capillarytech/creatives-library 8.0.208 → 8.0.210

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.208",
+  "version": "8.0.210",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -18,16 +18,30 @@
     "@bugsnag/plugin-react": "7.2.1",
     "@capillarytech/cap-ui-utils": "3.0.4",
     "@capillarytech/vulcan-react-sdk": "^2.3.5",
-    "@newrelic/browser-agent": "^1.293.0",
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/language-data": "^6.5.1",
+    "@codemirror/lint": "^6.9.0",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.5",
+    "@lezer/highlight": "^1.2.1",
     "@mailupinc/bee-plugin": "^1.2.0",
+    "@newrelic/browser-agent": "^1.293.0",
     "babel-cli": "^6.26.0",
     "chalk": "^2.4.2",
     "cheerio": "^1.0.0-rc.3",
     "connected-react-router": "4.5.0",
+    "dompurify": "^3.2.7",
     "flow": "^0.2.3",
     "git": "^0.1.5",
     "history": "4.9.0",
     "html-to-text": "^8.2.1",
+    "htmlhint": "^1.7.1",
     "jest-date-mock": "^1.0.8",
     "jest-environment-jsdom": "27.5.1",
     "jquery": "^3.3.1",

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -0,0 +1,508 @@
+/**
+ * HTMLEditor - Comprehensive HTML Editor with Split-Screen Layout
+ *
+ * Features:
+ * - Split-screen layout with code editor and live preview
+ * - CodeMirror 6 integration for HTML/CSS/JavaScript editing
+ * - Real-time preview with sandboxed iframe
+ * - Mobile/Desktop responsive preview modes
+ * - Comprehensive validation and error handling
+ * - Security-first approach with XSS protection
+ *
+ * Note: Uses injectIntl with forwardRef to provide direct access to CodeEditorPane via ref
+ */
+
+import React, { useRef, useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Layout } from 'antd'; // Fallback - no Cap UI equivalent
+import { injectIntl, intlShape } from 'react-intl';
+
+// Cap UI Components (First Preference)
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapModal from '@capillarytech/cap-ui-library/CapModal';
+
+// Component imports
+import EditorToolbar from './components/EditorToolbar';
+import DeviceToggle from './components/DeviceToggle';
+import SplitContainer from './components/SplitContainer';
+import CodeEditorPane from './components/CodeEditorPane';
+import PreviewPane from './components/PreviewPane';
+import ValidationErrorDisplay from './components/ValidationErrorDisplay';
+import { EditorProvider } from './components/common/EditorContext';
+
+// Hooks and utilities
+import { useEditorContent } from './hooks/useEditorContent';
+import { useInAppContent } from './hooks/useInAppContent';
+import { useLayoutState } from './hooks/useLayoutState';
+import { useValidation } from './hooks/useValidation';
+
+// Constants
+import { HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT } from './constants';
+
+// Styles
+import './_htmlEditor.scss';
+import './components/FullscreenModal/_fullscreenModal.scss';
+
+// Messages
+import messages from './messages';
+
+const HTMLEditor = ({
+  intl,
+  variant = HTML_EDITOR_VARIANTS.EMAIL, // New prop: 'email' or 'inapp'
+  layoutType, // Layout type for InApp variant
+  initialContent = DEFAULT_HTML_CONTENT,
+  onSave,
+  onContentChange,
+  className = '',
+  readOnly = false,
+  showFullscreenButton = true,
+  autoSave = true,
+  autoSaveInterval = 30000, // 30 seconds
+  ...props
+}) => {
+  // Separate refs for main and modal editors to avoid conflicts
+  const mainEditorRef = useRef(null);
+  const modalEditorRef = useRef(null);
+  const [isFullscreenModalOpen, setIsFullscreenModalOpen] = useState(false);
+
+  // Get the currently active editor ref based on fullscreen state
+  const getActiveEditorRef = useCallback(() => {
+    return isFullscreenModalOpen ? modalEditorRef : mainEditorRef;
+  }, [isFullscreenModalOpen]);
+
+  // Initialize custom hooks for state management - always call both hooks to follow Rules of Hooks
+  const isEmailVariant = variant === HTML_EDITOR_VARIANTS.EMAIL;
+
+  const emailOptions = {
+    autoSave: isEmailVariant ? autoSave : false,
+    autoSaveInterval,
+    onSave: isEmailVariant ? onSave : null,
+    onChange: isEmailVariant ? onContentChange : null
+  };
+
+  const emailContent = useEditorContent(
+    isEmailVariant ? initialContent : '',
+    emailOptions
+  );
+
+  // Prepare content for InApp variant
+  const isInAppVariant = variant === HTML_EDITOR_VARIANTS.INAPP;
+
+  let inAppInitialContent = {};
+  if (isInAppVariant) {
+    if (typeof initialContent === 'string') {
+      // Convert string content to device-specific format
+      inAppInitialContent = {
+        [DEVICE_TYPES.ANDROID]: initialContent,
+        [DEVICE_TYPES.IOS]: initialContent
+      };
+    } else {
+      // Use provided device-specific content
+      inAppInitialContent = initialContent;
+    }
+  }
+
+  const inAppOptions = {
+    autoSave: isInAppVariant ? autoSave : false,
+    autoSaveInterval,
+    onSave: isInAppVariant ? onSave : null,
+    onChange: isInAppVariant ? onContentChange : null
+  };
+
+  const inAppContent = useInAppContent(inAppInitialContent, inAppOptions);
+
+  // Use appropriate content hook based on variant
+  const content = variant === HTML_EDITOR_VARIANTS.EMAIL ? emailContent : inAppContent;
+
+  // Destructure content properties for cleaner access throughout component
+  const {
+    activeDevice,
+    keepContentSame,
+    switchDevice,
+    toggleContentSync,
+    getDeviceContent,
+    markAsSaved
+  } = content || {};
+
+  const layout = useLayoutState({
+    splitSizes: [50, 50],
+    viewMode: 'desktop',
+    mobileWidth: 375,
+    isFullscreen: false
+  });
+
+  // Get current content for validation based on variant
+  const currentContent = variant === HTML_EDITOR_VARIANTS.EMAIL
+    ? content?.content
+    : getDeviceContent?.(activeDevice);
+
+  // Create message formatter for sanitizer
+  const formatSanitizerMessage = useCallback((messageKey, values = {}) => {
+    // Map sanitizer message keys to our message structure
+    const messageMap = {
+      'sanitizer.invalidInput': messages.sanitizer.invalidInput,
+      'sanitizer.invalidInputNonEmpty': messages.sanitizer.invalidInputNonEmpty,
+      'sanitizer.sanitizationFailed': messages.sanitizer.sanitizationFailed,
+      'sanitizer.dangerousProtocolDetected': messages.sanitizer.dangerousProtocolDetected,
+      'sanitizer.emailMultimediaNotSupported': messages.sanitizer.emailMultimediaNotSupported,
+      'sanitizer.emailPositioningNotSupported': messages.sanitizer.emailPositioningNotSupported,
+      'sanitizer.emailModernCssLimited': messages.sanitizer.emailModernCssLimited,
+      'sanitizer.emailViewportUnitsNotSupported': messages.sanitizer.emailViewportUnitsNotSupported,
+      'sanitizer.mobileTablesNotFriendly': messages.sanitizer.mobileTablesNotFriendly,
+      'sanitizer.mobileRelativeFontSizes': messages.sanitizer.mobileRelativeFontSizes,
+      'sanitizer.mobileFixedWidthsProblematic': messages.sanitizer.mobileFixedWidthsProblematic,
+      'sanitizer.mobileRelativeUnits': messages.sanitizer.mobileRelativeUnits,
+      'sanitizer.productionValidHtml': messages.sanitizer.productionValidHtml,
+      'sanitizer.productionSanitized': messages.sanitizer.productionSanitized,
+      'sanitizer.productionInlineCss': messages.sanitizer.productionInlineCss,
+      'sanitizer.productionLargeContent': messages.sanitizer.productionLargeContent
+    };
+
+    const messageObj = messageMap[messageKey];
+    return messageObj ? intl.formatMessage(messageObj, values) : messageKey;
+  }, [intl]);
+
+  // Create message formatter for validator
+  const formatValidatorMessage = useCallback((messageKey, values = {}) => {
+    // Map validator message keys to our message structure
+    const messageMap = {
+      'validator.validationFailed': messages.validator.validationFailed,
+      'validator.liquidValidationFailed': messages.validator.liquidValidationFailed,
+      'validator.unsafeProtocolDetected': messages.validator.unsafeProtocolDetected,
+      'validator.scriptTagsDetected': messages.validator.scriptTagsDetected,
+      'validator.outlookIncompatible': messages.validator.outlookIncompatible,
+      'validator.emailCssUnsupported': messages.validator.emailCssUnsupported,
+      'validator.mobileIncompatible': messages.validator.mobileIncompatible,
+      'validator.largeImageDetected': messages.validator.largeImageDetected,
+      'validator.unclosedCssRule': messages.validator.unclosedCssRule,
+      'validator.emptyCssRule': messages.validator.emptyCssRule,
+      'validator.cssValidationFailed': messages.validator.cssValidationFailed
+    };
+
+    const messageObj = messageMap[messageKey];
+    return messageObj ? intl.formatMessage(messageObj, values) : messageKey;
+  }, [intl]);
+
+  const validation = useValidation(currentContent, variant, {
+    enableRealTime: true,
+    debounceMs: 500,
+    enableSanitization: true,
+    securityLevel: 'standard'
+  }, formatSanitizerMessage, formatValidatorMessage);
+
+  // Handle label insertion at cursor position
+  const handleLabelInsert = useCallback((label, position) => {
+    // With injectIntl({ forwardRef: true }), ref points directly to CodeEditorPane
+    const activeEditorRef = getActiveEditorRef();
+    const editor = activeEditorRef.current;
+
+    if (!editor) {
+      CapNotification.warning({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: intl.formatMessage(messages.editorNotReady),
+        duration: 3
+      });
+      return;
+    }
+
+    // Check if the required methods exist
+    if (typeof editor?.insertText !== 'function') {
+      CapNotification.error({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: intl.formatMessage(messages.editorMethodNotAvailable),
+        duration: 4
+      });
+      return;
+    }
+
+    try {
+      // Get current cursor position or use provided position
+      const cursor = position !== undefined
+        ? position
+        : (typeof editor?.getCursor === 'function' ? editor.getCursor() : 0);
+
+      // Insert label at cursor position
+      editor.insertText(label, cursor);
+
+      // Focus the editor if focus method is available
+      editor?.focus?.();
+
+      // Show success notification
+      CapNotification.success({
+        message: intl.formatMessage(messages.labelInserted),
+        description: intl.formatMessage(messages.labelInsertedDescription, { label }),
+        duration: 2
+      });
+    } catch (error) {
+      CapNotification.error({
+        message: intl.formatMessage(messages.labelInsertError),
+        description: error.message,
+        duration: 4
+      });
+    }
+  }, [intl, getActiveEditorRef]);
+
+  // Handle save action
+  const handleSave = useCallback(() => {
+    try {
+      const { html, css, javascript } = content?.content || {};
+      const currentContent = { html, css, javascript };
+
+      if (onSave) {
+        onSave(currentContent);
+      }
+
+      markAsSaved?.();
+
+      CapNotification.success({
+        message: intl.formatMessage(messages.contentSaved),
+        duration: 2
+      });
+    } catch (error) {
+      CapNotification.error({
+        message: intl.formatMessage(messages.saveError),
+        description: error.message,
+        duration: 4
+      });
+    }
+  }, [content, onSave, intl, markAsSaved]);
+
+  // Handle validation error click - navigate to error line in editor
+  const handleValidationErrorClick = useCallback((error) => {
+    const activeEditorRef = getActiveEditorRef();
+    const editorInstance = activeEditorRef.current;
+    const { line, column = 1 } = error || {};
+
+    if (editorInstance && line) {
+      try {
+        // Access the CodeMirror view through the exposed ref methods
+        if (editorInstance?.navigateToLine) {
+          editorInstance.navigateToLine(line, column);
+        } else {
+          editorInstance?.focus?.();
+          // Fallback: just focus the editor if navigation isn't available
+        }
+      } catch (err) {
+        // Fallback: just focus the editor
+        editorInstance?.focus?.();
+      }
+    }
+  }, [getActiveEditorRef]);
+
+  // Handle fullscreen modal
+  const handleOpenFullscreen = useCallback(() => {
+    setIsFullscreenModalOpen(true);
+  }, []);
+
+  const handleCloseFullscreen = useCallback(() => {
+    setIsFullscreenModalOpen(false);
+  }, []);
+
+  // Context value for providers
+  const contextValue = useMemo(() => ({
+    variant,
+    content,
+    layout,
+    validation,
+    editorRef: getActiveEditorRef(),
+    handleLabelInsert,
+    handleSave,
+    readOnly,
+    isFullscreenMode: isFullscreenModalOpen,
+    // InApp specific context
+    ...(variant === HTML_EDITOR_VARIANTS.INAPP && {
+      activeDevice,
+      keepContentSame,
+      switchDevice,
+      toggleContentSync,
+      getDeviceContent,
+      layoutType
+    })
+  }), [
+    variant,
+    content,
+    layout,
+    validation,
+    getActiveEditorRef,
+    handleLabelInsert,
+    handleSave,
+    readOnly,
+    isFullscreenModalOpen,
+    activeDevice,
+    keepContentSame,
+    switchDevice,
+    toggleContentSync,
+    getDeviceContent,
+    layoutType
+  ]);
+
+  // Loading state
+  if (!content || !layout) {
+    return (
+      <CapRow className="html-editor-loading">
+        <CapSpin size="large" tip={intl.formatMessage(messages.initializing)} />
+      </CapRow>
+    );
+  }
+
+  return (
+    <EditorProvider value={contextValue}>
+      <div className={`html-editor html-editor--${variant} ${className}`} {...props}>
+        {/* Editor Toolbar - Conditional based on variant */}
+        {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
+          <EditorToolbar
+            showFullscreenButton={showFullscreenButton}
+            onLabelInsert={handleLabelInsert}
+            onSave={handleSave}
+            onToggleFullscreen={handleOpenFullscreen}
+          />
+        ) : (
+          /* InApp variant: Device Toggle + Toolbar combined */
+          <CapRow className="html-editor__header">
+            <DeviceToggle
+              activeDevice={activeDevice}
+              onDeviceChange={switchDevice}
+              keepContentSame={keepContentSame}
+              onKeepContentSameChange={toggleContentSync}
+            />
+            <EditorToolbar
+              showFullscreenButton={showFullscreenButton}
+              onLabelInsert={handleLabelInsert}
+              onSave={handleSave}
+              onToggleFullscreen={handleOpenFullscreen}
+              variant={variant}
+              showTitle={false} // Hide title in InApp variant
+            />
+          </CapRow>
+        )}
+
+        {/* Main Content Area - Split Container */}
+        <CapRow className="html-editor-content">
+          <SplitContainer className="html-editor-split-container">
+            {/* Code Editor Pane */}
+            <CodeEditorPane
+              ref={mainEditorRef}
+              readOnly={readOnly}
+              onLabelInsert={handleLabelInsert}
+            />
+
+            {/* Preview Pane */}
+            <PreviewPane />
+          </SplitContainer>
+
+          {/* Validation Display - Full Width Below Split Container */}
+          <ValidationErrorDisplay
+            validation={validation}
+            onErrorClick={handleValidationErrorClick}
+            variant={variant}
+            className="html-editor-validation"
+          />
+        </CapRow>
+
+        {/* Fullscreen Modal */}
+        <CapModal
+          title={null} // Remove modal header to avoid duplication
+          visible={isFullscreenModalOpen}
+          onCancel={handleCloseFullscreen}
+          footer={null}
+          maskClosable={false}
+          centered
+          closable={false}
+          width={"90vw"}
+          className="html-editor-fullscreen-modal"
+        >
+          <CapRow className="html-editor-fullscreen">
+            {/* Editor Toolbar - Conditional based on variant */}
+            {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
+              <EditorToolbar
+                showFullscreenButton={true} // Show fullscreen button in modal to allow closing
+                onLabelInsert={handleLabelInsert}
+                onSave={handleSave}
+                isFullscreenMode={true}
+                onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
+              />
+            ) : (
+              /* InApp variant: Device Toggle + Toolbar combined in fullscreen */
+              <CapRow className="html-editor__header html-editor__header--fullscreen">
+                <DeviceToggle
+                  activeDevice={activeDevice}
+                  onDeviceChange={switchDevice}
+                  keepContentSame={keepContentSame}
+                  onKeepContentSameChange={toggleContentSync}
+                />
+                <EditorToolbar
+                  showFullscreenButton={true} // Show fullscreen button in modal to allow closing
+                  onLabelInsert={handleLabelInsert}
+                  onSave={handleSave}
+                  isFullscreenMode={true}
+                  onToggleFullscreen={handleCloseFullscreen} // Close modal when clicked in fullscreen mode
+                  variant={variant}
+                  showTitle={false} // Hide title in InApp variant
+                />
+              </CapRow>
+            )}
+
+            {/* Main Content Area - Split Container */}
+            <CapRow className="html-editor-content-fullscreen">
+              <SplitContainer className="html-editor-split-container-fullscreen">
+                {/* Code Editor Pane */}
+                <CodeEditorPane
+                  ref={modalEditorRef}
+                  readOnly={readOnly}
+                  isFullscreenMode={true}
+                  onLabelInsert={handleLabelInsert}
+                />
+
+              {/* Preview Pane */}
+              <PreviewPane isFullscreenMode={true} isModalContext={true} />
+            </SplitContainer>
+
+            {/* Validation Display in Modal */}
+            <ValidationErrorDisplay
+              validation={validation}
+              onErrorClick={handleValidationErrorClick}
+              variant={variant}
+              className="html-editor-validation"
+            />
+            </CapRow>
+          </CapRow>
+        </CapModal>
+      </div>
+    </EditorProvider>
+  );
+};
+
+HTMLEditor.propTypes = {
+  intl: intlShape.isRequired,
+  variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)), // Added variant prop
+  layoutType: PropTypes.string, // Layout type for InApp variant
+  initialContent: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.objectOf(PropTypes.string) // Per-device content for INAPP variant
+  ]),
+  onSave: PropTypes.func,
+  onContentChange: PropTypes.func,
+  className: PropTypes.string,
+  readOnly: PropTypes.bool,
+  showFullscreenButton: PropTypes.bool,
+  autoSave: PropTypes.bool,
+  autoSaveInterval: PropTypes.number
+};
+
+HTMLEditor.defaultProps = {
+  variant: HTML_EDITOR_VARIANTS.EMAIL, // Default to email variant
+  initialContent: null, // Will use default from useEditorContent hook
+  onSave: null,
+  onContentChange: null,
+  className: '',
+  readOnly: false,
+  showFullscreenButton: true,
+  autoSave: true,
+  autoSaveInterval: 30000
+};
+
+// Export with forwardRef to allow direct access to CodeEditorPane via ref
+export default injectIntl(HTMLEditor, { forwardRef: true });