@capillarytech/creatives-library 8.0.271-alpha.0 → 8.0.271

package/v2Components/HtmlEditor/utils/liquidTemplateSupport.js

@@ -7,8 +7,6 @@ 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
@@ -36,7 +34,7 @@ export const LIQUID_PATTERNS = {
   OPERATORS: /\b(and|or|not|contains|in|==|!=|<|>|<=|>=)\b/g,
 
   // String literals in Liquid
-  STRING_LITERALS: /(["'])((?:\\.|(?!\1)[^\\])*?)\1/g,
+  STRING_LITERALS: /(["'])((?:\\.|(?!\1)[^\\])*?)\1/g
 };
 
 /**
@@ -70,7 +68,7 @@ export const liquidVSCodeTheme = HighlightStyle.define([
   { tag: tags.atom, color: '#4ec9b0' }, // Liquid filters
   { tag: tags.punctuation, color: '#d4d4d4' },
   { tag: tags.bracket, color: '#ffd700' },
-  { tag: tags.brace, color: '#ffd700' },
+  { tag: tags.brace, color: '#ffd700' }
 ]);
 
 /**
@@ -147,13 +145,13 @@ export class LiquidValidator {
         } else {
           // Stray closing brace - no matching opening brace
           this.errors.push({
-            type: VALIDATION_SEVERITY.ERROR,
+            type: 'error',
             message: 'Stray closing }} without matching opening {{',
             line: this.getLineNumber(html, position),
             column: 1,
             rule: 'liquid-stray-closing-output',
-            severity: VALIDATION_SEVERITY.ERROR,
-            source: ISSUE_SOURCES.LIQUID,
+            severity: 'error',
+            source: 'liquid-validator'
           });
         }
       }
@@ -162,15 +160,15 @@ export class LiquidValidator {
     // After scan, any remaining entries on stack are unclosed opening braces
     if (stack.length > 0) {
       // Report each unclosed opening brace
-      stack.forEach((position) => {
+      stack.forEach(position => {
         this.errors.push({
-          type: VALIDATION_SEVERITY.ERROR,
+          type: 'error',
           message: 'unclosed Liquid output tag - missing }}',
           line: this.getLineNumber(html, position),
           column: 1,
           rule: 'liquid-unclosed-output',
-          severity: VALIDATION_SEVERITY.ERROR,
-          source: ISSUE_SOURCES.LIQUID,
+          severity: 'error',
+          source: 'liquid-validator'
         });
       });
     }
@@ -199,13 +197,13 @@ export class LiquidValidator {
     if (openTags.length > closeTags.length) {
       const unmatchedCount = openTags.length - closeTags.length;
       this.errors.push({
-        type: VALIDATION_SEVERITY.ERROR,
+        type: 'error',
         message: `${unmatchedCount} unclosed Liquid logic tag(s) - missing %}`,
         line: this.getLineNumber(html, openTags[openTags.length - 1]),
         column: 1,
         rule: 'liquid-unclosed-logic',
-        severity: VALIDATION_SEVERITY.ERROR,
-        source: ISSUE_SOURCES.LIQUID,
+        severity: 'error',
+        source: 'liquid-validator'
       });
     }
   }
@@ -218,15 +216,15 @@ export class LiquidValidator {
     const nestedOutputPattern = /\{\{[^}]*\{\{[^}]*\}\}/g;
     const nestedOutput = html.match(nestedOutputPattern);
     if (nestedOutput) {
-      nestedOutput.forEach((match) => {
+      nestedOutput.forEach(match => {
         this.errors.push({
-          type: VALIDATION_SEVERITY.ERROR,
+          type: 'error',
           message: `Nested braces in Liquid output tag: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-nested-braces',
-          severity: VALIDATION_SEVERITY.ERROR,
-          source: ISSUE_SOURCES.LIQUID,
+          severity: 'error',
+          source: 'liquid-validator'
         });
       });
     }
@@ -235,15 +233,15 @@ export class LiquidValidator {
     const nestedLogicPattern = /\{%[^%]*\{%[^%]*%\}/g;
     const nestedLogic = html.match(nestedLogicPattern);
     if (nestedLogic) {
-      nestedLogic.forEach((match) => {
+      nestedLogic.forEach(match => {
         this.errors.push({
-          type: VALIDATION_SEVERITY.ERROR,
+          type: 'error',
           message: `Nested braces in Liquid logic tag: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-nested-braces',
-          severity: VALIDATION_SEVERITY.ERROR,
-          source: ISSUE_SOURCES.LIQUID,
+          severity: 'error',
+          source: 'liquid-validator'
         });
       });
     }
@@ -264,10 +262,10 @@ export class LiquidValidator {
 
       logicTags.push({
         full: match[0],
-        content,
-        keyword,
+        content: content,
+        keyword: keyword,
         position: match.index,
-        line: this.getLineNumber(html, match.index),
+        line: this.getLineNumber(html, match.index)
       });
     }
 
@@ -281,78 +279,61 @@ export class LiquidValidator {
   validateBalancedTags(logicTags) {
     const stack = [];
     const pairs = {
-      if: 'endif',
-      unless: 'endunless',
-      for: 'endfor',
-      case: 'endcase',
-      capture: 'endcapture',
-      comment: 'endcomment',
-      tablerow: 'endtablerow',
-      raw: 'endraw',
+      'if': 'endif',
+      'unless': 'endunless',
+      'for': 'endfor',
+      'case': 'endcase',
+      'capture': 'endcapture',
+      'comment': 'endcomment',
+      'tablerow': 'endtablerow',
+      'raw': 'endraw'
     };
 
-    logicTags.forEach((tag) => {
-      const {keyword} = tag;
+    logicTags.forEach(tag => {
+      const keyword = tag.keyword;
 
       if (pairs[keyword]) {
         // Opening tag
         stack.push({ keyword, tag });
       } else if (Object.values(pairs).includes(keyword)) {
         // Closing tag
-        const expectedOpening = Object.keys(pairs).find((key) => pairs[key] === keyword);
+        const expectedOpening = Object.keys(pairs).find(key => pairs[key] === keyword);
         const lastOpening = stack.pop();
 
         if (!lastOpening) {
           this.errors.push({
-            type: VALIDATION_SEVERITY.ERROR,
+            type: 'error',
             message: `Unexpected closing tag: {% ${keyword} %}`,
             line: tag.line,
             column: 1,
             rule: 'liquid-unexpected-closing',
-            severity: VALIDATION_SEVERITY.ERROR,
-            source: ISSUE_SOURCES.LIQUID,
+            severity: 'error',
+            source: 'liquid-validator'
           });
         } else if (lastOpening.keyword !== expectedOpening) {
           this.errors.push({
-            type: VALIDATION_SEVERITY.ERROR,
+            type: 'error',
             message: `Mismatched Liquid tags: {% ${lastOpening.keyword} %} ... {% ${keyword} %}`,
             line: tag.line,
             column: 1,
             rule: 'liquid-mismatched-tags',
-            severity: VALIDATION_SEVERITY.ERROR,
-            source: ISSUE_SOURCES.LIQUID,
+            severity: 'error',
+            source: 'liquid-validator'
           });
         }
       }
     });
 
     // Check for unclosed opening tags
-    if (stack.length > 0) {
-      stack.forEach(({ keyword, tag }) => {
-        const expectedClosing = pairs[keyword];
-        const error = {
-          type: VALIDATION_SEVERITY.ERROR,
-          message: `Unclosed Liquid tag: {% ${keyword} %} - missing {% ${expectedClosing} %}`,
-          line: tag.line,
-          column: 1,
-          rule: 'liquid-unclosed-tag',
-          severity: VALIDATION_SEVERITY.ERROR,
-          source: ISSUE_SOURCES.LIQUID,
-        };
-        this.errors.push(error);
-      });
-    }
-
-    // Check for unclosed opening tags
-    stack.forEach((unclosed) => {
+    stack.forEach(unclosed => {
       this.errors.push({
-        type: VALIDATION_SEVERITY.ERROR,
+        type: 'error',
         message: `Unclosed Liquid tag: {% ${unclosed.keyword} %}`,
         line: unclosed.tag.line,
         column: 1,
         rule: 'liquid-unclosed-tag',
-        severity: VALIDATION_SEVERITY.ERROR,
-        source: ISSUE_SOURCES.LIQUID,
+        severity: 'error',
+        source: 'liquid-validator'
       });
     });
   }
@@ -364,52 +345,35 @@ export class LiquidValidator {
     // Check for malformed filters
     const malformedFilters = html.match(/\|\s*\||\|\s*$/gm);
     if (malformedFilters) {
-      malformedFilters.forEach((match) => {
+      malformedFilters.forEach(match => {
         this.warnings.push({
-          type: VALIDATION_SEVERITY.WARNING,
+          type: 'warning',
           message: `Malformed Liquid filter: ${match.trim()}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-malformed-filter',
-          severity: VALIDATION_SEVERITY.WARNING,
-          source: ISSUE_SOURCES.LIQUID,
+          severity: 'warning',
+          source: 'liquid-validator'
         });
       });
     }
 
     // Check for common filter usage
-    // Standard Liquid filters that are commonly used and shouldn't trigger info messages
-    // This list includes standard Liquid filters to avoid false positives
-    const commonFilters = [
-      // String filters
-      'capitalize', 'upcase', 'downcase', 'strip', 'lstrip', 'rstrip', 'strip_html', 'strip_newlines',
-      'truncate', 'truncatewords', 'prepend', 'append', 'remove', 'remove_first', 'replace', 'replace_first',
-      'split', 'join', 'concat', 'escape', 'escape_once', 'newline_to_br',
-      // Array filters
-      'first', 'last', 'size', 'slice', 'sort', 'sort_natural', 'map', 'where', 'uniq', 'compact', 'reverse',
-      // Number filters
-      'abs', 'ceil', 'floor', 'round', 'times', 'divided_by', 'modulo', 'minus', 'plus', 'at_least', 'at_most',
-      // Date filters
-      'date',
-      // Other common filters
-      'default', 'url_encode', 'url_decode',
-    ];
+    const commonFilters = ['date', 'capitalize', 'upcase', 'downcase', 'strip', 'truncate', 'default'];
     const filterPattern = /\|\s*([a-zA-Z_][a-zA-Z0-9_]*)/g;
     let filterMatch;
 
     while ((filterMatch = filterPattern.exec(html)) !== null) {
       const filterName = filterMatch[1];
       if (!commonFilters.includes(filterName)) {
-        // Only show info for truly custom/unknown filters
-        // Standard Liquid filters are now included in commonFilters list
         this.info.push({
-          type: VALIDATION_SEVERITY.INFO,
+          type: 'info',
           message: `Using filter: ${filterName}`,
           line: this.getLineNumber(html, filterMatch.index),
           column: 1,
           rule: 'liquid-filter-usage',
-          severity: VALIDATION_SEVERITY.INFO,
-          source: ISSUE_SOURCES.LIQUID,
+          severity: 'info',
+          source: 'liquid-validator'
         });
       }
     }
@@ -422,15 +386,15 @@ export class LiquidValidator {
     // Check for undefined variable patterns (basic check)
     const suspiciousVariables = html.match(/\{\{\s*[^}]*undefined[^}]*\s*\}\}/g);
     if (suspiciousVariables) {
-      suspiciousVariables.forEach((match) => {
+      suspiciousVariables.forEach(match => {
         this.warnings.push({
-          type: VALIDATION_SEVERITY.WARNING,
+          type: 'warning',
           message: `Potentially undefined variable: ${match}`,
           line: this.getLineNumber(html, html.indexOf(match)),
           column: 1,
           rule: 'liquid-undefined-variable',
-          severity: VALIDATION_SEVERITY.WARNING,
-          source: ISSUE_SOURCES.LIQUID,
+          severity: 'warning',
+          source: 'liquid-validator'
         });
       });
     }
@@ -453,7 +417,7 @@ export class LiquidValidator {
       isValid: this.errors.length === 0,
       errors: this.errors,
       warnings: this.warnings,
-      info: this.info,
+      info: this.info
     };
   }
 }
@@ -461,58 +425,60 @@ export class LiquidValidator {
 /**
  * Enhanced CodeMirror extensions with Liquid support
  */
-export const createLiquidExtensions = () => [
-  // HTML language support (base)
-  html(),
-
-  // Enhanced syntax highlighting with Liquid support
-  syntaxHighlighting(liquidVSCodeTheme),
-
-  // Editor theme
-  EditorView.theme({
-    "&": {
-      height: "500px",
-      backgroundColor: "#1e1e1e",
-      fontSize: "14px",
-      fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
-    },
-    ".cm-content": {
-      padding: "12px",
-      backgroundColor: "#1e1e1e",
-      fontSize: "14px",
-      lineHeight: "20px",
-      fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
-      color: "#d4d4d4",
-    },
-    ".cm-focused": {
-      outline: "none",
-    },
-    ".cm-lineNumbers": {
-      fontSize: "14px",
-      lineHeight: "20px",
-      color: "#858585",
-      backgroundColor: "#1e1e1e",
-      paddingRight: "8px",
-      paddingLeft: "8px",
-      borderRight: "1px solid #3e3e3e",
-      minWidth: "45px",
-      textAlign: "right",
-    },
-    ".cm-gutters": {
-      backgroundColor: "#1e1e1e",
-      borderRight: "1px solid #3e3e3e",
-    },
-    ".cm-activeLine": {
-      backgroundColor: "#2a2d2e",
-    },
-    ".cm-selection": {
-      backgroundColor: "#264f78",
-    },
-    ".cm-cursor": {
-      borderLeft: "2px solid #ffffff",
-    },
-  }),
-];
+export const createLiquidExtensions = () => {
+  return [
+    // HTML language support (base)
+    html(),
+
+    // Enhanced syntax highlighting with Liquid support
+    syntaxHighlighting(liquidVSCodeTheme),
+
+    // Editor theme
+    EditorView.theme({
+      "&": {
+        height: "500px",
+        backgroundColor: "#1e1e1e",
+        fontSize: "14px",
+        fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace"
+      },
+      ".cm-content": {
+        padding: "12px",
+        backgroundColor: "#1e1e1e",
+        fontSize: "14px",
+        lineHeight: "20px",
+        fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+        color: "#d4d4d4"
+      },
+      ".cm-focused": {
+        outline: "none"
+      },
+      ".cm-lineNumbers": {
+        fontSize: "14px",
+        lineHeight: "20px",
+        color: "#858585",
+        backgroundColor: "#1e1e1e",
+        paddingRight: "8px",
+        paddingLeft: "8px",
+        borderRight: "1px solid #3e3e3e",
+        minWidth: "45px",
+        textAlign: "right"
+      },
+      ".cm-gutters": {
+        backgroundColor: "#1e1e1e",
+        borderRight: "1px solid #3e3e3e"
+      },
+      ".cm-activeLine": {
+        backgroundColor: "#2a2d2e"
+      },
+      ".cm-selection": {
+        backgroundColor: "#264f78"
+      },
+      ".cm-cursor": {
+        borderLeft: "2px solid #ffffff"
+      }
+    })
+  ];
+};
 
 /**
  * Validates HTML content with Liquid template support
@@ -530,22 +496,22 @@ export const validateLiquidHTML = (html, variant = 'email') => {
  */
 export const LIQUID_SNIPPETS = {
   // Output tags
-  customer_name: '{{ customer.first_name }} {{ customer.last_name }}',
-  customer_email: '{{ customer.email }}',
-  current_date: '{{ "now" | date: "%B %d, %Y" }}',
-  organization_name: '{{ organization.name }}',
+  'customer_name': '{{ customer.first_name }} {{ customer.last_name }}',
+  'customer_email': '{{ customer.email }}',
+  'current_date': '{{ "now" | date: "%B %d, %Y" }}',
+  'organization_name': '{{ organization.name }}',
 
   // Logic tags
-  if_statement: '{% if condition %}\n  <!-- content -->\n{% endif %}',
-  for_loop: '{% for item in collection %}\n  {{ item.name }}\n{% endfor %}',
-  unless_statement: '{% unless condition %}\n  <!-- content -->\n{% endunless %}',
-  case_statement: '{% case variable %}\n  {% when "value1" %}\n    <!-- content -->\n  {% when "value2" %}\n    <!-- content -->\n  {% else %}\n    <!-- default content -->\n{% endcase %}',
+  'if_statement': '{% if condition %}\n  <!-- content -->\n{% endif %}',
+  'for_loop': '{% for item in collection %}\n  {{ item.name }}\n{% endfor %}',
+  'unless_statement': '{% unless condition %}\n  <!-- content -->\n{% endunless %}',
+  'case_statement': '{% case variable %}\n  {% when "value1" %}\n    <!-- content -->\n  {% when "value2" %}\n    <!-- content -->\n  {% else %}\n    <!-- default content -->\n{% endcase %}',
 
   // Common filters
-  date_filter: '{{ date_variable | date: "%B %d, %Y" }}',
-  capitalize_filter: '{{ text | capitalize }}',
-  truncate_filter: '{{ text | truncate: 50 }}',
-  default_filter: '{{ variable | default: "Default Value" }}',
+  'date_filter': '{{ date_variable | date: "%B %d, %Y" }}',
+  'capitalize_filter': '{{ text | capitalize }}',
+  'truncate_filter': '{{ text | truncate: 50 }}',
+  'default_filter': '{{ variable | default: "Default Value" }}'
 };
 
 export default {
@@ -554,5 +520,5 @@ export default {
   LiquidValidator,
   createLiquidExtensions,
   validateLiquidHTML,
-  LIQUID_SNIPPETS,
+  LIQUID_SNIPPETS
 };

package/v2Components/HtmlEditor/utils/properSyntaxHighlighting.js

@@ -76,7 +76,7 @@ export const comprehensiveVSCodeTheme = HighlightStyle.define([
   { tag: tags.link, color: '#4fc1ff', textDecoration: 'underline' },
   { tag: tags.heading, color: '#9cdcfe', fontWeight: 'bold' },
   { tag: tags.emphasis, fontStyle: 'italic' },
-  { tag: tags.strong, fontWeight: 'bold' },
+  { tag: tags.strong, fontWeight: 'bold' }
 ]);
 
 /**
@@ -88,7 +88,7 @@ export const cleanEditorTheme = EditorView.theme({
     height: "500px",
     backgroundColor: "#1e1e1e",
     fontSize: "14px",
-    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace"
   },
   ".cm-content": {
     padding: "12px",
@@ -96,17 +96,17 @@ export const cleanEditorTheme = EditorView.theme({
     fontSize: "14px",
     lineHeight: "20px",
     fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
-    color: "#d4d4d4", // Base text color for all content
+    color: "#d4d4d4" // Base text color for all content
   },
   ".cm-focused": {
-    outline: "none",
+    outline: "none"
   },
   ".cm-editor": {
     borderRadius: "0",
-    border: "none",
+    border: "none"
   },
   ".cm-scroller": {
-    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace"
   },
   ".cm-lineNumbers": {
     fontSize: "14px",
@@ -117,45 +117,47 @@ export const cleanEditorTheme = EditorView.theme({
     paddingLeft: "8px",
     borderRight: "1px solid #3e3e3e",
     minWidth: "45px",
-    textAlign: "right",
+    textAlign: "right"
   },
   ".cm-gutters": {
     backgroundColor: "#1e1e1e",
-    borderRight: "1px solid #3e3e3e",
+    borderRight: "1px solid #3e3e3e"
   },
   ".cm-activeLine": {
-    backgroundColor: "#2a2d2e",
+    backgroundColor: "#2a2d2e"
   },
   ".cm-selection": {
-    backgroundColor: "#264f78",
+    backgroundColor: "#264f78"
   },
   ".cm-cursor": {
-    borderLeft: "2px solid #ffffff",
+    borderLeft: "2px solid #ffffff"
   },
   // Additional fallback for text nodes
   ".cm-line": {
-    color: "#d4d4d4",
-  },
+    color: "#d4d4d4"
+  }
 });
 
 /**
  * ROBUST Extension Creator - Single, clean implementation
  * Uses only verified tags to avoid undefined errors
  */
-export const createRobustExtensions = () => [
-  // 1. HTML language support with proper parsing
-  html(),
+export const createRobustExtensions = () => {
+  return [
+    // 1. HTML language support with proper parsing
+    html(),
 
-  // 2. SAFE syntax highlighting (using only confirmed tags)
-  syntaxHighlighting(comprehensiveVSCodeTheme),
+    // 2. SAFE syntax highlighting (using only confirmed tags)
+    syntaxHighlighting(comprehensiveVSCodeTheme),
 
-  // 3. Clean theme (structure only, no color conflicts)
-  cleanEditorTheme,
-];
+    // 3. Clean theme (structure only, no color conflicts)
+    cleanEditorTheme
+  ];
+};
 
 // Export the main function
 export default {
   comprehensiveVSCodeTheme,
   cleanEditorTheme,
-  createRobustExtensions,
-};
+  createRobustExtensions
+};