@capillarytech/creatives-library 8.0.262 → 8.0.263

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.262",
+  "version": "8.0.263",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/ErrorInfoNote/index.js

@@ -406,7 +406,7 @@ const ErrorSection = ({
             <CapButton
               type="flat"
               className="add-btn"
-              onClick={() => window.open('https://docs.capillarytech.com/docs/liquid-language-in-messages', '_blank')}
+              onClick={() => window.open(LIQUID_DOC_URL, '_blank')}
             >
               <FormattedMessage {...messages.liquidDoc} />
               <CapIcon size="s" type="launch" />

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -42,6 +42,7 @@ import { useValidation } from './hooks/useValidation';
 import {
   HTML_EDITOR_VARIANTS, DEVICE_TYPES, DEFAULT_HTML_CONTENT, TAG, EMBEDDED, DEFAULT, FULL, ALL, SMS, EMAIL,
   BLOCKING_ERROR_RULE_IDS,
+  VALIDATION_SEVERITY,
 } from './constants';
 
 // Styles
@@ -50,12 +51,13 @@ import './components/FullscreenModal/_fullscreenModal.scss';
 
 // Messages
 import messages from './messages';
+import { ISSUE_SOURCES } from './utils/validationConstants';
 
 /** Check if an issue is a blocking error (Errors tab). Non-blocking = Warnings. */
 const isBlockingError = (issue) => {
   const { rule, source, severity } = issue || {};
   if (rule === 'liquid-api-validation' || rule === 'standard-api-validation') return true;
-  if (source === 'liquid-validator' && severity === 'error') return true;
+  if (source === ISSUE_SOURCES.LIQUID && severity === VALIDATION_SEVERITY.ERROR) return true;
   if (BLOCKING_ERROR_RULE_IDS.includes(rule)) return true;
   return false;
 };

package/v2Components/HtmlEditor/components/EditorToolbar/_editorToolbar.scss

@@ -20,7 +20,6 @@
   &__left {
     display: flex;
     align-items: center;
-    gap: 1rem;
     flex-shrink: 0;
   }
 

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

@@ -12,17 +12,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layout, Typography } from 'antd';
-import { injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import { FONT_COLOR_01, CAP_SPACE_08, CAP_SPACE_02 } from '@capillarytech/cap-ui-library/styled/variables';
 
 // Component imports
 import { useEditorContext } from '../common/EditorContext';
 
 // Constants
-import { HTML_EDITOR_VARIANTS } from '../../constants';
+import { HTML_EDITOR_VARIANTS, LIQUID_DOC_URL } from '../../constants';
 
 // Styles
 import './_editorToolbar.scss';
@@ -66,6 +68,29 @@ const EditorToolbar = ({
               : intl.formatMessage(messages.htmlEditor)
             }
           </Text>
+          <CapTooltipWithInfo
+            title={(
+              <FormattedMessage
+                {...messages.htmlEditorTooltip}
+                values={{
+                  docLink: (
+                    <a
+                      href={LIQUID_DOC_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <FormattedMessage {...messages.viewDocumentation} />
+                    </a>
+                  ),
+                }}
+              />
+            )}
+            infoIconProps={{
+              style: { marginLeft: CAP_SPACE_08, color: FONT_COLOR_01 },
+            }}
+            autoAdjustOverflow
+            placement="top"
+          />
         </CapRow>
       )}
 

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

@@ -27,6 +27,7 @@ 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;
 /**
@@ -72,7 +73,7 @@ const ValidationPanel = ({
       return true;
     }
     // Client-side Liquid validation errors are blocking (genuine syntax errors)
-    if (source === 'liquid-validator' && severity === 'error') {
+    if (source === ISSUE_SOURCES.LIQUID && severity === SEVERITY.ERROR) {
       return true;
     }
     // Rule Group #1 errors are blocking
@@ -246,8 +247,8 @@ 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 (

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

@@ -17,11 +17,12 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 
 // Messages
 import messages from './messages';
-import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
+import { BLOCKING_ERROR_RULE_IDS, VALIDATION_SEVERITY } from '../../constants';
 
 // Styles
 import './_validationTabs.scss';
 import { StyledCapTab } from '../../../../v2Containers/MobilePushNew/style';
+import { ISSUE_SOURCES } from '../../utils/validationConstants';
 
 /**
  * Group issues into Errors (blocking) and Warnings (non-blocking)
@@ -51,7 +52,7 @@ const isBlockingError = (issue) => {
     return true;
   }
   // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  if (source === 'liquid-validator' && severity === 'error') {
+  if (source === ISSUE_SOURCES.LIQUID && severity === VALIDATION_SEVERITY.ERROR) {
     return true;
   }
   // Rule Group #1 errors are blocking

package/v2Components/HtmlEditor/constants.js

@@ -4,6 +4,9 @@
  * Centralized constants for the HTML Editor component
  */
 
+// Documentation URL for Liquid / HTML editor
+export const LIQUID_DOC_URL = 'https://docs.capillarytech.com/docs/liquid-language-in-messages';
+
 // HTML Editor Variants
 export const HTML_EDITOR_VARIANTS = {
   EMAIL: 'email',

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -10,7 +10,8 @@ import {
 } from 'react';
 import { validateHTML, extractAndValidateCSS } from '../utils/htmlValidator';
 import { sanitizeHTML, isContentSafe, findUnsafeContent } from '../utils/contentSanitizer';
-import { BLOCKING_ERROR_RULE_IDS } from '../constants';
+import { BLOCKING_ERROR_RULE_IDS, VALIDATION_SEVERITY } from '../constants';
+import { ISSUE_SOURCES } from '../utils/validationConstants';
 
 /**
  * Custom hook for managing HTML/CSS validation
@@ -341,25 +342,25 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     const apiLiquidErrors = (apiValidationErrors?.liquidErrors || []).map((errorMessage) => {
       const extractedLine = extractLineNumberFromMessage(errorMessage);
       return {
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: errorMessage,
         line: extractedLine,
         column: null,
         rule: 'liquid-api-validation',
-        severity: 'error',
-        source: 'liquid-validator',
+        severity: VALIDATION_SEVERITY.ERROR,
+        source: ISSUE_SOURCES.LIQUID,
       };
     });
 
     const apiStandardErrors = (apiValidationErrors?.standardErrors || []).map((errorMessage) => {
       const extractedLine = extractLineNumberFromMessage(errorMessage);
       return {
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: errorMessage,
         line: extractedLine,
         column: null,
         rule: 'standard-api-validation',
-        severity: 'error',
+        severity: VALIDATION_SEVERITY.ERROR,
         source: 'api-validator',
       };
     });
@@ -374,19 +375,19 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
         ? getLineAndColumnFromPosition(contentStr, issue.position)
         : { line: 1, column: 1 };
       return {
-        type: isBlocking ? 'error' : 'warning',
+        type: isBlocking ? VALIDATION_SEVERITY.ERROR : VALIDATION_SEVERITY.WARNING,
         message: `Security issue: ${issue.type}`,
         line,
         column,
         rule: isBlocking ? 'sanitizer.dangerousProtocolDetected' : 'security-violation',
-        severity: isBlocking ? 'error' : 'warning',
+        severity: isBlocking ? VALIDATION_SEVERITY.ERROR : VALIDATION_SEVERITY.WARNING,
         source: 'security',
       };
     });
 
     // Sanitization warnings (Rule Group #1 entries have rule set by contentSanitizer)
     const sanitizationAsIssues = (validationState.sanitizationWarnings || []).map((w) => {
-      const sev = BLOCKING_ERROR_RULE_IDS.includes(w.rule) ? 'error' : 'warning';
+      const sev = BLOCKING_ERROR_RULE_IDS.includes(w.rule) ? VALIDATION_SEVERITY.ERROR : VALIDATION_SEVERITY.WARNING;
       return {
         ...w,
         severity: sev,
@@ -451,7 +452,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
 
   const protocolTypes = ['JavaScript Protocol', 'Data URL', 'VBScript Protocol'];
   // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === 'liquid-validator' && e.severity === 'error');
+  const hasClientSideLiquidErrors = (validationState.htmlErrors || []).some((e) => e.source === ISSUE_SOURCES.LIQUID && e.severity === VALIDATION_SEVERITY.ERROR);
   const hasBlockingErrors = (validationState.sanitizationWarnings || []).some((w) => BLOCKING_ERROR_RULE_IDS.includes(w.rule)) || (validationState.securityIssues || []).some((s) => protocolTypes.includes(s?.type)) || hasApiErrors || hasClientSideLiquidErrors;
 
   return {

package/v2Components/HtmlEditor/messages.js

@@ -328,6 +328,16 @@ export default defineMessages({
     },
   },
 
+  htmlEditorTooltip: {
+    id: `${scope}.htmlEditorTooltip`,
+    defaultMessage: 'This editor supports standard HTML for emails. Avoid CSS frameworks, external stylesheets, and scripts. {docLink}',
+  },
+
+  viewDocumentation: {
+    id: `${scope}.viewDocumentation`,
+    defaultMessage: 'View documentation',
+  },
+
   // HTML Validator messages
   validator: {
     // General validation messages

package/v2Components/HtmlEditor/utils/liquidTemplateSupport.js

@@ -7,6 +7,8 @@ import { html } from '@codemirror/lang-html';
 import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { EditorView } from '@codemirror/view';
+import { VALIDATION_SEVERITY } from '../constants';
+import { ISSUE_SOURCES } from './validationConstants';
 
 /**
  * Liquid Template Syntax Patterns
@@ -145,13 +147,13 @@ export class LiquidValidator {
         } else {
           // Stray closing brace - no matching opening brace
           this.errors.push({
-            type: 'error',
+            type: VALIDATION_SEVERITY.ERROR,
             message: 'Stray closing }} without matching opening {{',
             line: this.getLineNumber(html, position),
             column: 1,
             rule: 'liquid-stray-closing-output',
-            severity: 'error',
-            source: 'liquid-validator',
+            severity: VALIDATION_SEVERITY.ERROR,
+            source: ISSUE_SOURCES.LIQUID,
           });
         }
       }
@@ -162,13 +164,13 @@ export class LiquidValidator {
       // Report each unclosed opening brace
       stack.forEach((position) => {
         this.errors.push({
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: 'unclosed Liquid output tag - missing }}',
           line: this.getLineNumber(html, position),
           column: 1,
           rule: 'liquid-unclosed-output',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -197,13 +199,13 @@ export class LiquidValidator {
     if (openTags.length > closeTags.length) {
       const unmatchedCount = openTags.length - closeTags.length;
       this.errors.push({
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: `${unmatchedCount} unclosed Liquid logic tag(s) - missing %}`,
         line: this.getLineNumber(html, openTags[openTags.length - 1]),
         column: 1,
         rule: 'liquid-unclosed-logic',
-        severity: 'error',
-        source: 'liquid-validator',
+        severity: VALIDATION_SEVERITY.ERROR,
+        source: ISSUE_SOURCES.LIQUID,
       });
     }
   }
@@ -218,13 +220,13 @@ export class LiquidValidator {
     if (nestedOutput) {
       nestedOutput.forEach((match) => {
         this.errors.push({
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: `Nested braces in Liquid output tag: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-nested-braces',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -235,13 +237,13 @@ export class LiquidValidator {
     if (nestedLogic) {
       nestedLogic.forEach((match) => {
         this.errors.push({
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: `Nested braces in Liquid logic tag: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-nested-braces',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -302,23 +304,23 @@ export class LiquidValidator {
 
         if (!lastOpening) {
           this.errors.push({
-            type: 'error',
+            type: VALIDATION_SEVERITY.ERROR,
             message: `Unexpected closing tag: {% ${keyword} %}`,
             line: tag.line,
             column: 1,
             rule: 'liquid-unexpected-closing',
-            severity: 'error',
-            source: 'liquid-validator',
+            severity: VALIDATION_SEVERITY.ERROR,
+            source: ISSUE_SOURCES.LIQUID,
           });
         } else if (lastOpening.keyword !== expectedOpening) {
           this.errors.push({
-            type: 'error',
+            type: VALIDATION_SEVERITY.ERROR,
             message: `Mismatched Liquid tags: {% ${lastOpening.keyword} %} ... {% ${keyword} %}`,
             line: tag.line,
             column: 1,
             rule: 'liquid-mismatched-tags',
-            severity: 'error',
-            source: 'liquid-validator',
+            severity: VALIDATION_SEVERITY.ERROR,
+            source: ISSUE_SOURCES.LIQUID,
           });
         }
       }
@@ -329,13 +331,13 @@ export class LiquidValidator {
       stack.forEach(({ keyword, tag }) => {
         const expectedClosing = pairs[keyword];
         const error = {
-          type: 'error',
+          type: VALIDATION_SEVERITY.ERROR,
           message: `Unclosed Liquid tag: {% ${keyword} %} - missing {% ${expectedClosing} %}`,
           line: tag.line,
           column: 1,
           rule: 'liquid-unclosed-tag',
-          severity: 'error',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.ERROR,
+          source: ISSUE_SOURCES.LIQUID,
         };
         this.errors.push(error);
       });
@@ -344,13 +346,13 @@ export class LiquidValidator {
     // Check for unclosed opening tags
     stack.forEach((unclosed) => {
       this.errors.push({
-        type: 'error',
+        type: VALIDATION_SEVERITY.ERROR,
         message: `Unclosed Liquid tag: {% ${unclosed.keyword} %}`,
         line: unclosed.tag.line,
         column: 1,
         rule: 'liquid-unclosed-tag',
-        severity: 'error',
-        source: 'liquid-validator',
+        severity: VALIDATION_SEVERITY.ERROR,
+        source: ISSUE_SOURCES.LIQUID,
       });
     });
   }
@@ -364,13 +366,13 @@ export class LiquidValidator {
     if (malformedFilters) {
       malformedFilters.forEach((match) => {
         this.warnings.push({
-          type: 'warning',
+          type: VALIDATION_SEVERITY.WARNING,
           message: `Malformed Liquid filter: ${match.trim()}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-malformed-filter',
-          severity: 'warning',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.WARNING,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }
@@ -401,13 +403,13 @@ export class LiquidValidator {
         // Only show info for truly custom/unknown filters
         // Standard Liquid filters are now included in commonFilters list
         this.info.push({
-          type: 'info',
+          type: VALIDATION_SEVERITY.INFO,
           message: `Using filter: ${filterName}`,
           line: this.getLineNumber(html, filterMatch.index),
           column: 1,
           rule: 'liquid-filter-usage',
-          severity: 'info',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.INFO,
+          source: ISSUE_SOURCES.LIQUID,
         });
       }
     }
@@ -422,13 +424,13 @@ export class LiquidValidator {
     if (suspiciousVariables) {
       suspiciousVariables.forEach((match) => {
         this.warnings.push({
-          type: 'warning',
+          type: VALIDATION_SEVERITY.WARNING,
           message: `Potentially undefined variable: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-undefined-variable',
-          severity: 'warning',
-          source: 'liquid-validator',
+          severity: VALIDATION_SEVERITY.WARNING,
+          source: ISSUE_SOURCES.LIQUID,
         });
       });
     }

package/v2Components/MobilePushPreviewV2/constants.js

@@ -0,0 +1,6 @@
+export const DEVICE_TYPES = {
+  ANDROID: 'android',
+  IOS: 'ios',
+};
+
+export const IPHONE = 'iphone';

package/v2Components/MobilePushPreviewV2/index.js

@@ -16,6 +16,7 @@ import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 import { getCtaObject } from '../../v2Containers/InApp/utils';
 import { CAROUSEL, VIDEO } from '../../v2Containers/MobilePushNew/constants';
+import { DEVICE_TYPES, IPHONE } from './constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -57,7 +58,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const isBeeFreeTemplate = get(androidContent, 'isBEEeditor') || get(iosContent, 'isBEEeditor');
       if (isBeeFreeTemplate) {
         // Normalize device to 'android' or 'ios' for comparison
-        const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+        const normalizedDevice = device === IPHONE ? DEVICE_TYPES.IOS : device?.toLowerCase();
         const isAndroid = normalizedDevice === ANDROID.toLowerCase();
         content = {
           inAppPreviewContent: isAndroid ? androidContent?.beeHtml : iosContent?.beeHtml,
@@ -78,7 +79,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         ctaData: getCtaObject(iosContent?.expandableDetails?.ctas),
       };
       // Normalize device to 'android' or 'ios' for comparison
-      const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+      const normalizedDevice = device === IPHONE ? DEVICE_TYPES.IOS : device?.toLowerCase();
       const isAndroid = normalizedDevice === ANDROID.toLowerCase();
       content = {
         inAppPreviewContent: isAndroid ? androidPreviewContent : iosPreviewContent,
@@ -149,7 +150,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
 
   getPreview(device) {
     // Normalize device to 'android' or 'ios' for comparison
-    const normalizedDevice = device === 'iphone' ? 'ios' : device?.toLowerCase();
+    const normalizedDevice = device === IPHONE ? DEVICE_TYPES.IOS : device?.toLowerCase();
     const deviceParam = normalizedDevice === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
       <TemplatePreview