@capillarytech/creatives-library 8.0.271 → 8.0.272

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

@@ -15,13 +15,13 @@
  * - Filters dangerous protocols (javascript:, data:, vbscript:)
  * - Variant-aware sanitization (EMAIL vs INAPP with different security levels)
  * - Iframe sandbox uses "allow-scripts" only (no allow-same-origin for security)
- * - Content delivered via blob URLs to isolate iframe from parent origin
+ * - Content delivered via srcdoc attribute for CSP compliance (replaces blob URLs)
  *
  * Previous Security Issues (FIXED):
  * - Removed insecure manual sanitizeJavaScript function that only escaped </script> tags
  * - Replaced with robust DOMPurify-based sanitization for full XSS protection
  * - Removed "allow-same-origin" from iframe sandbox to prevent same-origin access
- * - Implemented blob URL delivery to maintain isolation while allowing script execution
+ * - Replaced blob URLs with srcdoc to comply with CSP frame-src directives
  */
 
 import React, { useMemo, useEffect, useRef } from 'react';
@@ -55,7 +55,7 @@ const PreviewPane = ({
   className = '',
   isFullscreenMode = false,
   isModalContext = false,
-  layoutType = LAYOUT_TYPES.MODAL
+  layoutType = LAYOUT_TYPES.MODAL,
 }) => {
   const { content, layout, variant } = useEditorContext();
 
@@ -103,36 +103,25 @@ const PreviewPane = ({
     return sanitizationResult.sanitized;
   }, [contentValue, variant]);
 
-  // Create blob URL for secure iframe content delivery
-  // This isolates the iframe content from the parent origin while allowing script execution
-  const blobUrlRef = useRef(null);
-  const blobUrl = useMemo(() => {
-    // Clean up previous blob URL to prevent memory leaks
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
+  // Use srcdoc instead of blob URLs for CSP compliance
+  // srcdoc allows embedding HTML directly in iframe without violating frame-src CSP directives
+  // This is more secure and CSP-compliant than blob URLs
+  const iframeContent = useMemo(() => {
+    if (!combinedContent) {
+      return null;
     }
 
-    // Create new blob URL if we have content
-    if (combinedContent) {
-      const blob = new Blob([combinedContent], { type: 'text/html' });
-      blobUrlRef.current = URL.createObjectURL(blob);
-      return blobUrlRef.current;
+    // srcdoc has a size limit (~2MB in some browsers), but for HTML preview content this should be sufficient
+    // If content is too large, we'll fall back to about:blank and log a warning
+    const MAX_SRCDOC_SIZE = 2000000; // 2MB limit
+    if (combinedContent.length > MAX_SRCDOC_SIZE) {
+      console.warn('PreviewPane: Content too large for srcdoc, using about:blank');
+      return null;
     }
 
-    return null;
+    return combinedContent;
   }, [combinedContent]);
 
-  // Cleanup blob URL on unmount
-  useEffect(() => {
-    return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-      }
-    };
-  }, []);
-
   // Generate CSS classes based on view mode
   const getIframeClasses = () => {
     const baseClass = 'preview-pane__iframe';
@@ -154,15 +143,15 @@ const PreviewPane = ({
       // Use layout.mobileWidth or fallback to 375px
       const width = mobileWidth || 375;
       baseStyles.width = `${width}px`;
-      baseStyles.height = '100%'; // Fill container height
     }
-
+    baseStyles.height = '100%'; // Fill container height
     return baseStyles;
   };
 
   const renderDeviceFrame = () => (
     <iframe
-      src={blobUrl || 'about:blank'}
+      src={iframeContent ? undefined : 'about:blank'}
+      srcDoc={iframeContent || undefined}
       title={intl.formatMessage(messages.htmlPreview)}
       className={getIframeClasses()}
       style={getPreviewStyles()}
@@ -173,17 +162,7 @@ const PreviewPane = ({
   const renderEmptyState = () => (
     <div className="preview-empty">
       <div className="empty-content">
-        <div className="empty-icon">📝</div>
-        <p>{intl.formatMessage(messages.startTypingHtml)}</p>
-        <p className="preview-mode-info">
-          {intl.formatMessage(messages.previewMode)}: {
-            viewMode === PREVIEW_MODES.DESKTOP
-              ? intl.formatMessage(messages.desktop)
-              : viewMode === PREVIEW_MODES.MOBILE
-                ? intl.formatMessage(messages.mobile)
-                : intl.formatMessage(messages.mobileDevice)
-          }
-        </p>
+        <p className="preview-mode-info"></p>
       </div>
     </div>
   );
@@ -212,7 +191,7 @@ const PreviewPane = ({
       </CapRow>
 
       <CapRow className="preview-pane__content">
-        {blobUrl ? renderDeviceFrame() : renderEmptyState()}
+        {iframeContent ? renderDeviceFrame() : renderEmptyState()}
       </CapRow>
     </div>
   );
@@ -223,7 +202,7 @@ PreviewPane.propTypes = {
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
   isModalContext: PropTypes.bool,
-  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES))
+  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES)),
 };
 
 export default injectIntl(PreviewPane);

package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss

@@ -161,7 +161,7 @@
 
   // Dragging state styling
   &--dragging &__splitter {
-    background-color: map-get($CAP_PRIMARY, base);
+    background-color: map-get($CAP_SECONDARY, base);
   }
 
   &--dragging &__splitter-line {

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/_validationErrorDisplay.scss

@@ -1,5 +1,7 @@
 /**
  * ValidationErrorDisplay Styles
+ *
+ * When collapsed, panel sticks to footer (header bar only visible).
  */
 
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
@@ -9,10 +11,18 @@
   flex-direction: column;
   width: 100%;
   margin-bottom: 1rem;
+  flex-shrink: 0;
 
   // Ensure proper spacing when used in different contexts
   &:last-child {
     margin-bottom: 0;
+    padding-bottom: 0.25rem;
+  }
+
+  // Collapsed: panel stays in footer as a slim bar (tabs + expand arrow only)
+  &--collapsed {
+    margin-bottom: 0;
+    padding-bottom: 0.25rem;
   }
 
   // Integration with ErrorInfoNote component
@@ -23,9 +33,17 @@
   // Responsive adjustments
   @media (max-width: 768px) {
     margin-bottom: 0.75rem;
+
+    &.validation-error-display--collapsed {
+      margin-bottom: 0;
+    }
   }
 
   @media (max-width: 576px) {
     margin-bottom: 0.5rem;
+
+    &.validation-error-display--collapsed {
+      margin-bottom: 0;
+    }
   }
 }

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

@@ -1,18 +1,15 @@
 /**
- * ValidationErrorDisplay - HTML Editor validation using ErrorInfoNote
+ * ValidationErrorDisplay - HTML Editor validation display
  *
- * This component integrates the existing ErrorInfoNote component with the HTML Editor's
- * validation system, providing a consistent error display that matches the Figma design.
+ * Displays validation errors and warnings in two tabs (Errors, Warnings).
+ * Panel can be collapsed to a sticky footer bar; it does not disappear.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import ErrorInfoNote from '../../../ErrorInfoNote';
-
-import { transformValidationToErrorInfo, hasValidationErrors } from '../../utils/validationAdapter';
-import { HTML_EDITOR_VARIANTS } from '../../constants';
+import { hasValidationErrors } from '../../utils/validationAdapter';
+import ValidationTabs from '../ValidationTabs';
 
 // Styles
 import './_validationErrorDisplay.scss';
@@ -20,51 +17,59 @@ import './_validationErrorDisplay.scss';
 /**
  * ValidationErrorDisplay Component
  *
- * Displays validation errors using the existing ErrorInfoNote component
+ * Displays validation issues in Errors and Warnings tabs; collapse toggles visibility but panel stays in footer.
  */
 const ValidationErrorDisplay = ({
   validation,
-  variant = HTML_EDITOR_VARIANTS.EMAIL,
   onErrorClick,
-  className = ''
+  className = '',
 }) => {
-  // Don't render if no validation or no errors
-  if (!hasValidationErrors(validation)) {
-    return null;
-  }
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
-  // Transform validation data to ErrorInfoNote format
-  const errorData = transformValidationToErrorInfo(validation, variant);
-  const { errorMessages } = errorData || {};
+  const handleToggleCollapse = () => {
+    setIsCollapsed((prev) => !prev);
+  };
 
-  // Handle error click if provided
-  const handleErrorClick = (error) => {
-    onErrorClick?.(error);
+  // Expand panel when user clicks redirection (so panel does not stay stuck to footer)
+  const handleExpand = () => {
+    setIsCollapsed(false);
   };
 
+  if (!hasValidationErrors(validation)) {
+    return null;
+  }
+
   return (
-    <CapRow
-      className={`validation-error-display ${className}`}
+    <div
+      className={`validation-error-display ${isCollapsed ? 'validation-error-display--collapsed' : ''} ${className}`}
       role="alert"
       aria-live="polite"
       aria-label="Validation errors"
     >
-      <ErrorInfoNote
-        errorMessages={errorMessages}
-        onErrorClick={handleErrorClick}
+      <ValidationTabs
+        validation={validation}
+        onErrorClick={onErrorClick}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={handleToggleCollapse}
+        onExpand={handleExpand}
       />
-    </CapRow>
+    </div>
   );
 };
 
 ValidationErrorDisplay.propTypes = {
   validation: PropTypes.shape({
     isValidating: PropTypes.bool,
-    getAllIssues: PropTypes.func
+    getAllIssues: PropTypes.func,
   }),
-  variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)),
   onErrorClick: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+};
+
+ValidationErrorDisplay.defaultProps = {
+  validation: null,
+  onErrorClick: null,
+  className: '',
 };
 
 export default ValidationErrorDisplay;

package/v2Components/HtmlEditor/components/ValidationPanel/_validationPanel.scss

@@ -5,17 +5,17 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .validation-panel {
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  background: #fff;
+  border: 1px solid $CAP_COLOR_16;
+  border-radius: $CAP_SPACE_06;
+  background: $CAP_WHITE;
 
   &--loading {
-    padding: 16px;
+    padding: $CAP_SPACE_16;
     text-align: center;
   }
 
   &--clean {
-    padding: 16px;
+    padding: $CAP_SPACE_16;
     text-align: center;
     background: #f6ffed;
     border-color: #b7eb8f;
@@ -25,7 +25,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: $CAP_SPACE_08;
     color: #666;
     font-size: 14px;
   }
@@ -34,36 +34,36 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: $CAP_SPACE_08;
     color: #52c41a;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: $FONT_WEIGHT_MEDIUM;
   }
 
   &__summary {
     display: flex;
-    gap: 16px;
-    padding: 12px 16px;
-    background: #fafafa;
-    border-bottom: 1px solid #d9d9d9;
-    border-radius: 6px 6px 0 0;
+    gap: $CAP_SPACE_16;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16;
+    background: $CAP_G21;
+    border-bottom: 1px solid $CAP_COLOR_16;
+    border-radius: $CAP_SPACE_06 $CAP_SPACE_06 0 0;
   }
 
   &__summary-item {
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: 12px;
+    gap: $CAP_SPACE_04;
+    font-size: $CAP_SPACE_12;
     color: #666;
 
     &--security {
       color: #ff4d4f;
-      font-weight: 500;
+      font-weight: $FONT_WEIGHT_MEDIUM;
     }
 
     span:first-of-type {
       font-weight: 600;
-      margin-left: 2px;
+      margin-left: $CAP_SPACE_02;
     }
   }
 
@@ -72,7 +72,7 @@
       border: none;
 
       &:last-child {
-        border-radius: 0 0 6px 6px;
+        border-radius: 0 0 $CAP_SPACE_06 $CAP_SPACE_06;
       }
     }
 
@@ -123,8 +123,8 @@
   &__title {
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-weight: 500;
+    gap: $CAP_SPACE_08;
+    font-weight: $FONT_WEIGHT_MEDIUM;
   }
 
   &__issues {
@@ -133,41 +133,41 @@
   }
 
   &__sanitization {
-    border-top: 1px solid #d9d9d9;
+    border-top: 1px solid $CAP_COLOR_16;
     background: #f9f9f9;
   }
 
   &__sanitization-header {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    font-weight: 500;
+    gap: $CAP_SPACE_08;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16;
+    font-weight: $FONT_WEIGHT_MEDIUM;
     color: #666;
     font-size: 13px;
   }
 
   &__sanitization-list {
-    padding: 0 16px 12px;
+    padding: 0 $CAP_SPACE_16 $CAP_SPACE_12;
   }
 
   &__sanitization-item {
-    padding: 4px 0;
-    font-size: 12px;
+    padding: $CAP_SPACE_04 0;
+    font-size: $CAP_SPACE_12;
     color: #8c8c8c;
   }
 }
 
 .validation-issue {
   display: flex;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: $CAP_SPACE_12;
+  padding: $CAP_SPACE_12 $CAP_SPACE_16;
   border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
   transition: background-color 0.2s;
 
   &:hover {
-    background: #fafafa;
+    background: $CAP_G21;
   }
 
   &:last-child {
@@ -189,6 +189,18 @@
   &__icon {
     flex-shrink: 0;
     margin-top: 2px;
+
+    &--error {
+      color: #ff4d4f;
+    }
+
+    &--info {
+      color: #1890ff;
+    }
+
+    &--security {
+      color: #ff4d4f;
+    }
   }
 
   &__content {
@@ -200,14 +212,14 @@
     font-size: 13px;
     line-height: 1.4;
     color: #262626;
-    margin-bottom: 4px;
+    margin-bottom: $CAP_SPACE_04;
     word-break: break-word;
   }
 
   &__meta {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: $CAP_SPACE_08;
     font-size: 11px;
     color: #8c8c8c;
   }
@@ -230,9 +242,9 @@
   &__source {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: $CAP_SPACE_04;
     background: #f0f0f0;
-    padding: 2px 6px;
+    padding: $CAP_SPACE_02 $CAP_SPACE_06;
     border-radius: 3px;
   }
 }

package/v2Components/HtmlEditor/components/ValidationPanel/constants.js

@@ -0,0 +1,6 @@
+// Severity constants
+export const SEVERITY = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info',
+};

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

@@ -21,13 +21,15 @@ import ShieldOutlined from '@ant-design/icons/ShieldOutlined';
 import BugOutlined from '@ant-design/icons/BugOutlined';
 import CodeOutlined from '@ant-design/icons/CodeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
-import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 
 import messages from './messages';
+import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
 import './_validationPanel.scss';
+import { SEVERITY } from './constants';
+import { ISSUE_SOURCES } from '../../utils/validationConstants';
 
 const { Panel } = Collapse;
-
 /**
  * ValidationPanel Component
  */
@@ -37,7 +39,6 @@ const ValidationPanel = ({
   onErrorClick,
   showLineNumbers = true,
   groupBySource = false,
-  variant = 'email'
 }) => {
   const [activeKeys, setActiveKeys] = useState(['errors', 'warnings']);
 
@@ -56,33 +57,35 @@ const ValidationPanel = ({
         groups[source].push(issue);
         return groups;
       }, {});
-    } else {
-      return {
-        errors: allIssues.filter(issue => issue.severity === 'error'),
-        warnings: allIssues.filter(issue => issue.severity === 'warning'),
-        info: allIssues.filter(issue => issue.severity === 'info')
-      };
     }
+    return {
+      errors: allIssues.filter((issue) => issue.severity === SEVERITY.ERROR),
+      warnings: allIssues.filter((issue) => issue.severity === SEVERITY.WARNING),
+      info: allIssues.filter((issue) => issue.severity === SEVERITY.INFO),
+    };
   }, [validation, groupBySource]);
 
-  // Get icon for issue type
-  const getIssueIcon = (severity, source) => {
-    if (source === 'security') {
-      return <ShieldOutlined style={{ color: '#ff4d4f' }} />;
+  // Check if an issue is a blocking error (API error, Rule Group #1, or client-side Liquid validation errors)
+  const isBlockingError = (issue) => {
+    const { rule, source, severity } = issue || {};
+    // API errors are blocking
+    if (rule === 'liquid-api-validation' || rule === 'standard-api-validation') {
+      return true;
     }
-
-    switch (severity) {
-      case 'error':
-        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
-      case 'warning':
-        return <WarningOutlined style={{ color: '#faad14' }} />;
-      case 'info':
-        return <InfoCircleOutlined style={{ color: '#1890ff' }} />;
-      default:
-        return <BugOutlined style={{ color: '#666' }} />;
+    // Client-side Liquid validation errors are blocking (genuine syntax errors)
+    if (source === ISSUE_SOURCES.LIQUID && severity === SEVERITY.ERROR) {
+      return true;
+    }
+    // Rule Group #1 errors are blocking
+    if (BLOCKING_ERROR_RULE_IDS.includes(rule)) {
+      return true;
     }
+    return false;
   };
 
+  // Get icon for issue type
+  // Blocking errors use error-icon, warnings use warning
+
   // Get source icon
   const getSourceIcon = (source) => {
     switch (source) {
@@ -106,7 +109,7 @@ const ValidationPanel = ({
         line: issue.line,
         column: issue.column || 1,
         message: issue.message,
-        severity: issue.severity
+        severity: issue.severity,
       });
     }
   };
@@ -125,9 +128,6 @@ const ValidationPanel = ({
         }
       }}
     >
-      <div className="validation-issue__icon">
-        {getIssueIcon(issue.severity, issue.source)}
-      </div>
 
       <div className="validation-issue__content">
         <div className="validation-issue__message">
@@ -137,10 +137,12 @@ const ValidationPanel = ({
         <div className="validation-issue__meta">
           {showLineNumbers && issue.line && (
             <span className="validation-issue__location">
-              <FormattedMessage {...messages.lineColumn} values={{
-                line: issue.line,
-                column: issue.column || 1
-              }} />
+              <FormattedMessage
+                {...messages.lineColumn}
+                values={{
+                  line: issue.line,
+                  column: issue.column || 1,
+                }} />
             </span>
           )}
 
@@ -162,17 +164,21 @@ const ValidationPanel = ({
   );
 
   // Render panel header with count
-  const renderPanelHeader = (title, count, severity) => (
-    <div className="validation-panel__header">
-      <span className="validation-panel__title">
-        {getIssueIcon(severity)}
-        <FormattedMessage {...title} />
-      </span>
-      {count > 0 && (
-        <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
-      )}
-    </div>
-  );
+  const renderPanelHeader = (title, count, severity, issues = []) =>
+  // Check if any issue in this group is a blocking error
+  // Use blocking error icon only if there are blocking errors, otherwise use warning icon
+
+    (
+      <div className="validation-panel__header">
+        <span className="validation-panel__title">
+          <FormattedMessage {...title} />
+        </span>
+        {count > 0 && (
+          <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
+        )}
+      </div>
+    )
+  ;
 
   // Get severity color
   const getSeverityColor = (severity) => {
@@ -241,14 +247,14 @@ const ValidationPanel = ({
             : messages[key] || { id: `htmlEditor.validation.${key}`, defaultMessage: key };
 
           const severity = isSourceGroup
-            ? (issues.find(i => i.severity === 'error') ? 'error' :
-               issues.find(i => i.severity === 'warning') ? 'warning' : 'info')
+            ? (issues.find((i) => i.severity === SEVERITY.ERROR) ? SEVERITY.ERROR
+              : issues.find((i) => i.severity === SEVERITY.WARNING) ? SEVERITY.WARNING : SEVERITY.INFO)
             : key;
 
           return (
             <Panel
               key={key}
-              header={renderPanelHeader(title, issues.length, severity)}
+              header={renderPanelHeader(title, issues.length, severity, issues)}
               className={`validation-panel__panel validation-panel__panel--${severity}`}
             >
               <div className="validation-panel__issues">
@@ -291,7 +297,7 @@ ValidationPanel.propTypes = {
   onErrorClick: PropTypes.func,
   showLineNumbers: PropTypes.bool,
   groupBySource: PropTypes.bool,
-  variant: PropTypes.oneOf(['email', 'inapp'])
+  variant: PropTypes.oneOf(['email', 'inapp']),
 };
 
 export default ValidationPanel;