@capillarytech/creatives-library 8.0.249 → 8.0.250-alpha.0

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

@@ -0,0 +1,391 @@
+/**
+ * ValidationTabs Component
+ *
+ * Displays validation errors in a tabbed interface with 3 categories:
+ * - HTML issues: General HTML/CSS validation errors and warnings
+ * - Label issues: Tag syntax errors (open/close tags, attributes, brackets)
+ * - Liquid issues: Liquid expression errors (shown when liquid content is detected, even if liquid feature is disabled)
+ */
+
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+
+// Cap UI Library
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+
+// Messages
+import messages from './messages';
+import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
+
+// Styles
+import './_validationTabs.scss';
+
+// Constants for issue sources
+const ISSUE_SOURCES = {
+  HTMLHINT: 'htmlhint',
+  CSS_VALIDATOR: 'css-validator',
+  CUSTOM: 'custom',
+  SECURITY: 'security',
+  LIQUID: 'liquid-validator',
+};
+
+// Label issue patterns - syntax errors related to tags
+const LABEL_ISSUE_PATTERNS = [
+  'tag must be paired',
+  'open tag match failed',
+  'closed tag match failed',
+  'unclosed',
+  'missing required',
+  'tag-pair',
+  'attr-value-not-empty',
+  'attr-no-duplication',
+  'tag-self-close',
+  'spec-char-escape',
+  'tagname-lowercase',
+  'attr-lowercase',
+  'id-unique',
+  'src-not-empty',
+  'alt-require',
+];
+
+/**
+ * Categorize issues into HTML, Label, and Liquid categories
+ */
+const categorizeIssues = (allIssues) => {
+  const htmlIssues = [];
+  const labelIssues = [];
+  const liquidIssues = [];
+
+  allIssues.forEach((issue) => {
+    const { source, rule, message } = issue;
+    const messageLower = (message || '').toLowerCase();
+    const ruleLower = (rule || '').toLowerCase();
+
+    // Check if it's a Liquid issue - ONLY by source, not by message content
+    // This prevents false positives where HTML errors mention liquid syntax
+    if (source === ISSUE_SOURCES.LIQUID) {
+      liquidIssues.push(issue);
+      return;
+    }
+
+    // Check if it's a Label (tag syntax) issue
+    const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
+      (pattern) => messageLower.includes(pattern.toLowerCase())
+        || ruleLower.includes(pattern.toLowerCase()),
+    );
+
+    if (isLabelIssue) {
+      labelIssues.push(issue);
+      return;
+    }
+
+    // Default to HTML issues
+    htmlIssues.push(issue);
+  });
+
+  return { htmlIssues, labelIssues, liquidIssues };
+};
+
+/**
+ * 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;
+  }
+  // Client-side Liquid validation errors are blocking (genuine syntax errors)
+  if (source === 'liquid-validator' && severity === 'error') {
+    return true;
+  }
+  // Rule Group #1 errors are blocking
+  if (BLOCKING_ERROR_RULE_IDS.includes(rule)) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Get icon based on whether issue is blocking error or warning
+ * Blocking errors use error-icon, warnings use alert-warning
+ */
+const getSeverityIcon = (issue) => {
+  if (isBlockingError(issue)) {
+    return <CapIcon type="error-icon" className="validation-tabs__icon validation-tabs__icon--error" />;
+  }
+  // All other issues (warnings, non-blocking) use warning icon
+  return <CapIcon type="alert-warning" className="validation-tabs__icon validation-tabs__icon--warning" />;
+};
+
+/**
+ * ValidationTabContent - Renders the content for each tab
+ */
+const ValidationTabContent = ({
+  issues,
+  onErrorClick,
+}) => {
+  if (!issues || issues.length === 0) {
+    return null;
+  }
+
+  const handleNavigateClick = (issue, e) => {
+    e.stopPropagation();
+    if (onErrorClick) {
+      // Always call onErrorClick to acknowledge the error (enables buttons)
+      // If line number exists, navigate to it; otherwise just acknowledge and focus editor
+      onErrorClick({
+        line: issue.line || 1, // Default to line 1 if no line number (for API errors)
+        column: issue.column || 1,
+        message: issue.message,
+        severity: issue.severity,
+      });
+    }
+  };
+
+  return (
+    <div className="validation-tabs__content">
+      {issues.map((issue, index) => {
+        const {
+          message, line, column,
+        } = issue;
+        const key = `${message}-${line}-${column}-${index}`;
+        const isBlocking = isBlockingError(issue);
+        const displaySeverity = isBlocking ? 'error' : 'warning';
+
+        return (
+          <div
+            key={key}
+            className={`validation-tabs__item validation-tabs__item--${displaySeverity}`}
+          >
+            <div className="validation-tabs__item-icon">
+              {getSeverityIcon(issue)}
+            </div>
+            <div className="validation-tabs__item-content">
+              <span className="validation-tabs__item-message">
+                {message}
+              </span>
+              {line && (
+                <span className="validation-tabs__item-location">
+                  <FormattedMessage
+                    {...messages.lineChar}
+                    values={{ line, char: column || 1 }}
+                  />
+                </span>
+              )}
+            </div>
+            {/* Always show redirection icon for errors (even API errors without line numbers) */}
+            {/* Clicking it acknowledges the error and enables buttons */}
+            <CapTooltip title={line ? `Line ${line}, Char ${column || 1}` : 'Click to acknowledge error and focus editor'}>
+              <button
+                type="button"
+                className="validation-tabs__item-navigate"
+                onClick={(e) => handleNavigateClick(issue, e)}
+                aria-label={line ? `Line ${line}, Char ${column || 1}` : 'Acknowledge error'}
+              >
+                <CapIcon type="redirection" />
+              </button>
+            </CapTooltip>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ValidationTabContent.propTypes = {
+  issues: PropTypes.array,
+  onErrorClick: PropTypes.func,
+};
+
+ValidationTabContent.defaultProps = {
+  issues: [],
+  onErrorClick: null,
+};
+
+/**
+ * ValidationTabs Component
+ */
+const ValidationTabs = ({
+  intl,
+  validation,
+  onErrorClick,
+  onClose,
+  className,
+}) => {
+  const [activeKey, setActiveKey] = useState(null);
+
+  // Categorize issues
+  const { htmlIssues, labelIssues, liquidIssues } = useMemo(() => {
+    if (!validation) {
+      return { htmlIssues: [], labelIssues: [], liquidIssues: [] };
+    }
+
+    // Get all issues from validation
+    const allIssues = validation.getAllIssues ? validation.getAllIssues() : [];
+    const categorized = categorizeIssues(allIssues);
+    return categorized;
+  }, [validation]);
+
+  // Calculate counts
+  const htmlCount = htmlIssues.length;
+  const labelCount = labelIssues.length;
+  const liquidCount = liquidIssues.length;
+  // Include liquid issues in total count even when liquid is disabled
+  // This ensures liquid errors are shown when liquid content is detected but feature is disabled
+  const totalCount = htmlCount + labelCount + liquidCount;
+
+  // Set default active key when issues change
+  useMemo(() => {
+    if (htmlCount > 0 && !activeKey) {
+      setActiveKey('html');
+    } else if (labelCount > 0 && !activeKey) {
+      setActiveKey('label');
+    } else if (liquidCount > 0 && !activeKey) {
+      // Show liquid tab even when liquid is disabled if liquid content is detected
+      setActiveKey('liquid');
+    }
+  }, [htmlCount, labelCount, liquidCount, activeKey]);
+
+  // Don't render if no issues
+  if (totalCount === 0) {
+    return null;
+  }
+
+  // Build tab panes (CapTab uses 'panes' with 'tab' and 'content' properties)
+  const tabPanes = [];
+
+  if (htmlCount > 0) {
+    tabPanes.push({
+      key: 'html',
+      tab: (
+        <CapTooltip title={`${intl.formatMessage(messages.htmlIssues)} (${htmlCount})`}>
+          <span className="validation-tabs__tab-label">
+            <FormattedMessage {...messages.htmlIssues} />
+            <span className="validation-tabs__tab-count">
+              (
+              {htmlCount}
+              )
+            </span>
+          </span>
+        </CapTooltip>
+      ),
+      content: (
+        <ValidationTabContent
+          issues={htmlIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+
+  if (labelCount > 0) {
+    tabPanes.push({
+      key: 'label',
+      tab: (
+        <CapTooltip title={`${intl.formatMessage(messages.labelIssues)} (${labelCount})`}>
+          <span className="validation-tabs__tab-label">
+            <FormattedMessage {...messages.labelIssues} />
+            <span className="validation-tabs__tab-count">
+              (
+              {labelCount}
+              )
+            </span>
+          </span>
+        </CapTooltip>
+      ),
+      content: (
+        <ValidationTabContent
+          issues={labelIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+
+  // Show liquid issues tab even when liquid is disabled if liquid content is detected
+  // This allows users to see errors when they add liquid content but liquid feature is not enabled
+  if (liquidCount > 0) {
+    tabPanes.push({
+      key: 'liquid',
+      tab: (
+        <CapTooltip title={`${intl.formatMessage(messages.liquidIssues)} (${liquidCount})`}>
+          <span className="validation-tabs__tab-label">
+            <FormattedMessage {...messages.liquidIssues} />
+            <span className="validation-tabs__tab-count">
+              (
+              {liquidCount}
+              )
+            </span>
+          </span>
+        </CapTooltip>
+      ),
+      content: (
+        <ValidationTabContent
+          issues={liquidIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+
+  // Handle close
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className={`validation-tabs ${className || ''}`}>
+      <CapRow className="validation-tabs__header">
+        <CapTab
+          activeKey={activeKey || (tabPanes[0]?.key)}
+          onChange={setActiveKey}
+          panes={tabPanes}
+          className="validation-tabs__tabs"
+        />
+        <CapRow className="validation-tabs__actions">
+          <CapTooltip title={intl.formatMessage(messages.closePanel)}>
+            <button
+              type="button"
+              className="validation-tabs__close"
+              onClick={handleClose}
+              aria-label={intl.formatMessage(messages.closePanel)}
+            >
+              <CapIcon type="close" />
+            </button>
+          </CapTooltip>
+        </CapRow>
+      </CapRow>
+    </div>
+  );
+};
+
+ValidationTabs.propTypes = {
+  intl: intlShape.isRequired,
+  validation: PropTypes.shape({
+    getAllIssues: PropTypes.func,
+  }),
+  onErrorClick: PropTypes.func,
+  onClose: PropTypes.func,
+  isLiquidEnabled: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+ValidationTabs.defaultProps = {
+  validation: null,
+  onErrorClick: null,
+  onClose: null,
+  isLiquidEnabled: false,
+  className: '',
+};
+
+export default injectIntl(ValidationTabs);

package/v2Components/HtmlEditor/components/ValidationTabs/messages.js

@@ -0,0 +1,51 @@
+/**
+ * ValidationTabs Messages
+ *
+ * Internationalization messages for the ValidationTabs component
+ */
+
+import { defineMessages } from 'react-intl';
+
+const scope = 'app.components.HtmlEditor.ValidationTabs';
+
+export default defineMessages({
+  // Tab labels
+  htmlIssues: {
+    id: `${scope}.htmlIssues`,
+    defaultMessage: 'HTML issues',
+  },
+  labelIssues: {
+    id: `${scope}.labelIssues`,
+    defaultMessage: 'Label issues',
+  },
+  liquidIssues: {
+    id: `${scope}.liquidIssues`,
+    defaultMessage: 'Liquid issues',
+  },
+
+  // Error item labels
+  syntaxError: {
+    id: `${scope}.syntaxError`,
+    defaultMessage: 'Syntax Error',
+  },
+  lineChar: {
+    id: `${scope}.lineChar`,
+    defaultMessage: 'Line {line}, Char {char}.',
+  },
+
+  // Tooltips
+  navigateToError: {
+    id: `${scope}.navigateToError`,
+    defaultMessage: 'Go to error location',
+  },
+  closePanel: {
+    id: `${scope}.closePanel`,
+    defaultMessage: 'Close validation panel',
+  },
+
+  // Liquid documentation
+  liquidDocumentation: {
+    id: `${scope}.liquidDocumentation`,
+    defaultMessage: 'Liquid documentation',
+  },
+});

package/v2Components/HtmlEditor/constants.js

@@ -7,26 +7,26 @@
 // HTML Editor Variants
 export const HTML_EDITOR_VARIANTS = {
   EMAIL: 'email',
-  INAPP: 'inapp'
+  INAPP: 'inapp',
 };
 
 // Device Types (for InApp variant)
 export const DEVICE_TYPES = {
   ANDROID: 'android',
-  IOS: 'ios'
+  IOS: 'ios',
 };
 
 // Editor languages
 export const EDITOR_LANGUAGES = {
   HTML: 'html',
   CSS: 'css',
-  JAVASCRIPT: 'javascript'
+  JAVASCRIPT: 'javascript',
 };
 
 // Preview modes
 export const PREVIEW_MODES = {
   DESKTOP: 'desktop',
-  MOBILE: 'mobile'
+  MOBILE: 'mobile',
 };
 
 // Device specifications for mobile preview
@@ -38,7 +38,7 @@ export const DEVICE_PRESETS = {
     devicePixelRatio: 2.75,
     userAgent: 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36',
     platform: 'android',
-    model: 'Pixel 7'
+    model: 'Pixel 7',
   },
   IPHONE: {
     key: 'iphone',
@@ -47,30 +47,43 @@ export const DEVICE_PRESETS = {
     devicePixelRatio: 3,
     userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)',
     platform: 'ios',
-    model: 'iPhone 15'
-  }
+    model: 'iPhone 15',
+  },
 };
 
 // Validation severity levels
 export const VALIDATION_SEVERITY = {
   ERROR: 'error',
   WARNING: 'warning',
-  INFO: 'info'
+  INFO: 'info',
 };
 
+/**
+ * Rule Group #1: Input & Sanitization Errors.
+ * ONLY these rules are treated as BLOCKING ERROR for Save/Update/Preview/Test.
+ * All other rule groups (HTML/CSS/Liquid, compatibility, security, etc.) are WARNING only.
+ * Backward compatibility: CKEditor legacy templates (unclosed CSS, indentation, etc.) must never block.
+ */
+export const BLOCKING_ERROR_RULE_IDS = [
+  'sanitizer.invalidInput',
+  'sanitizer.invalidInputNonEmpty',
+  'sanitizer.sanitizationFailed',
+  'sanitizer.dangerousProtocolDetected',
+];
+
 // Validation types
 export const VALIDATION_TYPES = {
   HTML: 'html',
   CSS: 'css',
   JAVASCRIPT: 'javascript',
-  SECURITY: 'security'
+  SECURITY: 'security',
 };
 
 // Error types for preview
 export const PREVIEW_ERROR_TYPES = {
   RUNTIME: 'runtime',
   RENDER: 'render',
-  SECURITY: 'security'
+  SECURITY: 'security',
 };
 
 // Performance thresholds
@@ -79,7 +92,7 @@ export const PERFORMANCE = {
   VALIDATION_DEBOUNCE: 500, // ms
   AUTO_SAVE_INTERVAL: 30000, // ms
   MAX_CONTENT_LENGTH: 100000, // characters
-  PERFORMANCE_WARNING_THRESHOLD: 50000 // characters
+  PERFORMANCE_WARNING_THRESHOLD: 50000, // characters
 };
 
 // Layout constraints
@@ -89,7 +102,7 @@ export const LAYOUT = {
   DEFAULT_SPLIT_SIZES: [50, 50], // [left, right] percentages
   GUTTER_SIZE: 8, // pixels
   MOBILE_BREAKPOINT: 768, // pixels
-  MOBILE_WIDTH_DEFAULT: 375 // pixels
+  MOBILE_WIDTH_DEFAULT: 375, // pixels
 };
 
 
@@ -105,7 +118,7 @@ export const CODEMIRROR_CONFIG = {
   FOLD_GUTTER: true,
   SEARCH_ENABLED: true,
   AUTOCOMPLETE_ENABLED: true,
-  LINT_ENABLED: true
+  LINT_ENABLED: true,
 };
 
 // HTML validation rules (HTMLHint)
@@ -126,7 +139,7 @@ export const HTML_VALIDATION_RULES = {
   'inline-style-disabled': false,
   'inline-script-disabled': false,
   'space-tab-mixed-disabled': 'space',
-  'spec-char-escape': true
+  'spec-char-escape': true,
 };
 
 // CSS validation rules
@@ -137,7 +150,7 @@ export const CSS_VALIDATION_RULES = {
   'declaration-colon-space-after': 'always',
   'declaration-colon-space-before': 'never',
   'block-closing-brace-newline-after': 'always',
-  'block-opening-brace-space-before': 'always'
+  'block-opening-brace-space-before': 'always',
 };
 
 // JavaScript validation rules (ESLint-style)
@@ -148,7 +161,7 @@ export const JS_VALIDATION_RULES = {
   'no-console': 'warn',
   'semi': ['error', 'always'],
   'quotes': ['error', 'single'],
-  'indent': ['error', 2]
+  'indent': ['error', 2],
 };
 
 // Keyboard shortcuts
@@ -163,7 +176,7 @@ export const KEYBOARD_SHORTCUTS = {
   FIND: 'Ctrl+F',
   FIND_MAC: 'Cmd+F',
   REPLACE: 'Ctrl+H',
-  REPLACE_MAC: 'Cmd+Option+F'
+  REPLACE_MAC: 'Cmd+Option+F',
 };
 
 // Feature flags
@@ -176,7 +189,7 @@ export const FEATURES = {
   KEYBOARD_SHORTCUTS: true,
   ERROR_RECOVERY: true,
   PERFORMANCE_MONITORING: true,
-  ACCESSIBILITY_FEATURES: true
+  ACCESSIBILITY_FEATURES: true,
 };
 
 // Animation durations (ms)
@@ -186,7 +199,7 @@ export const ANIMATIONS = {
   SLOW: 500,
   PANEL_RESIZE: 200,
   FADE_IN: 300,
-  SLIDE_IN: 250
+  SLIDE_IN: 250,
 };
 
 // Z-index layers
@@ -195,7 +208,7 @@ export const Z_INDEX = {
   OVERLAY: 1000,
   MODAL: 1050,
   FULLSCREEN: 9999,
-  TOOLTIP: 10000
+  TOOLTIP: 10000,
 };
 
 // Default HTML content template
@@ -239,3 +252,12 @@ export const DEFAULT_HTML_CONTENT = `<!DOCTYPE html>
     </script>
 </body>
 </html>`;
+
+// Constants for tag API calls
+export const TAG = 'TAG';
+export const EMBEDDED = 'embedded';
+export const DEFAULT = 'default';
+export const FULL = 'full';
+export const ALL = 'all';
+export const SMS = 'SMS';
+export const EMAIL = 'EMAIL';