mj-liquid in visual email editor

Author: pierre-b

.claude/scripts/gemini.sh

@@ -5,7 +5,7 @@
 
 set -e
 
-MODEL="gemini-3-pro-preview"
+MODEL="gemini-3.1-pro-preview"
 API_URL="https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:generateContent"
 
 if [ -z "$GEMINI_API_KEY" ]; then

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 - **Demo**: Demo workspace now includes French and Spanish translations for all 4 email templates, showcasing the multi-language feature
 - **Templates**: Downloaded template files now use the template's name as filename instead of a generic name (#286)
 - **Email Builder**: Added `mj-liquid` block type for embedding raw MJML+Liquid code in the visual editor, enabling dynamic structural content like for-loops generating columns or conditional sections
+- **Security**: Upgraded liquidjs to 10.25.0
 
 ## [28.0] - 2026-03-05
 

console/package-lock.json

@@ -73,7 +73,7 @@
     "highlight.js": "^11.10.0",
     "html2canvas": "^1.4.1",
     "is-hotkey": "^0.2.0",
-    "liquidjs": "^10.24.0",
+    "liquidjs": "^10.25.0",
     "lodash": "^4.17.23",
     "lodash.throttle": "^4.1.1",
     "lowlight": "^3.3.0",

console/package.json

@@ -9,8 +9,11 @@ import { App } from 'antd'
 vi.mock('../services/api/auth', () => ({
   authService: {
     signIn: vi.fn(),
-    verifyCode: vi.fn()
-  }
+    verifyCode: vi.fn(),
+    getCurrentUser: vi.fn().mockRejectedValue(new Error('Not authenticated')),
+    logout: vi.fn().mockResolvedValue(undefined)
+  },
+  isRootUser: vi.fn().mockReturnValue(false)
 }))
 
 // Mock the navigate function and useSearch

console/src/__tests__/SignInPage.test.tsx

@@ -63,12 +63,33 @@ const catalanMessages = {
   'Welcome {name}': 'Benvingut {name}',
 }
 
+const portugueseBRMessages = {
+  Hello: 'Olá',
+  Goodbye: 'Tchau',
+  'Welcome {name}': 'Bem-vindo {name}',
+}
+
+const japaneseMessages = {
+  Hello: 'こんにちは',
+  Goodbye: 'さようなら',
+  'Welcome {name}': 'ようこそ {name}',
+}
+
+const italianMessages = {
+  Hello: 'Ciao',
+  Goodbye: 'Arrivederci',
+  'Welcome {name}': 'Benvenuto {name}',
+}
+
 // Mock the dynamic imports for locale files
 vi.mock('../i18n/locales/en.po', () => ({ messages: englishMessages }))
 vi.mock('../i18n/locales/fr.po', () => ({ messages: frenchMessages }))
 vi.mock('../i18n/locales/es.po', () => ({ messages: spanishMessages }))
 vi.mock('../i18n/locales/de.po', () => ({ messages: germanMessages }))
 vi.mock('../i18n/locales/ca.po', () => ({ messages: catalanMessages }))
+vi.mock('../i18n/locales/pt-BR.po', () => ({ messages: portugueseBRMessages }))
+vi.mock('../i18n/locales/ja.po', () => ({ messages: japaneseMessages }))
+vi.mock('../i18n/locales/it.po', () => ({ messages: italianMessages }))
 
 describe('i18n utility functions', () => {
   beforeEach(() => {
@@ -141,7 +162,7 @@ describe('i18n utility functions', () => {
 
   describe('locales and localeNames', () => {
     it('exports all supported locales', () => {
-      expect(locales).toEqual(['en', 'fr', 'es', 'de', 'ca'])
+      expect(locales).toEqual(['en', 'fr', 'es', 'de', 'ca', 'pt-BR', 'ja', 'it'])
     })
 
     it('exports locale names for all locales', () => {
@@ -151,6 +172,9 @@ describe('i18n utility functions', () => {
         es: 'Español',
         de: 'Deutsch',
         ca: 'Català',
+        'pt-BR': 'Português (Brasil)',
+        ja: '日本語',
+        it: 'Italiano',
       })
     })
 
@@ -226,7 +250,7 @@ describe('LocaleContext', () => {
       expect(screen.getByTestId('is-loading')).toHaveTextContent('ready')
     })
 
-    expect(screen.getByTestId('locale-count')).toHaveTextContent('5')
+    expect(screen.getByTestId('locale-count')).toHaveTextContent('8')
   })
 
   it('provides locale name for current locale', async () => {

console/src/__tests__/i18n.test.tsx

@@ -37,6 +37,25 @@ export function TestI18nWrapper({ children }: { children: ReactNode }) {
   return <I18nProvider i18n={i18n}>{children}</I18nProvider>
 }
 
+// Mock localStorage (jsdom doesn't provide full implementation)
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+  return {
+    getItem: vi.fn((key: string) => store[key] || null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key]
+    }),
+    clear: vi.fn(() => {
+      store = {}
+    })
+  }
+})()
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+
 // Mock window.matchMedia for Ant Design
 Object.defineProperty(window, 'matchMedia', {
   writable: true,

console/src/__tests__/setup.tsx

@@ -463,7 +463,8 @@ export class EmailBlockClass {
       type !== 'mj-preview' &&
       type !== 'mj-title' &&
       type !== 'mj-style' &&
-      type !== 'mj-raw'
+      type !== 'mj-raw' &&
+      type !== 'mj-liquid'
     ) {
       block.children = []
     }
@@ -475,6 +476,7 @@ export class EmailBlockClass {
       type === 'mj-title' ||
       type === 'mj-preview' ||
       type === 'mj-raw' ||
+      type === 'mj-liquid' ||
       type === 'mj-style'
     ) {
       // For mj-text blocks, ensure content is wrapped in <p> tags (Tiptap always wraps in <p>)

console/src/components/email_builder/EmailBlockClass.tsx

@@ -156,6 +156,11 @@ const MJML_TAGS = [
     insertText: '<mj-raw>\n\t$0\n</mj-raw>',
     detail: 'Raw HTML'
   },
+  {
+    label: 'mj-liquid',
+    insertText: '{% for item in $1 %}\n\t$0\n{% endfor %}',
+    detail: 'Liquid template block'
+  },
   {
     label: 'mj-head',
     insertText: '<mj-head>\n\t$0\n</mj-head>',

console/src/components/email_builder/MjmlCodeEditor.tsx

@@ -20,6 +20,7 @@ import { MjTitleBlock } from './MjTitleBlock'
 import { MjHeadBlock } from './MjHeadBlock'
 import { MjAttributesBlock } from './MjAttributesBlock'
 import { MjRawBlock } from './MjRawBlock'
+import { MjLiquidBlock } from './MjLiquidBlock'
 import { MjSocialElementBlock } from './MjSocialElementBlock'
 // Import other block types as they're created
 // import { MjImageBlock } from './MjImageBlock'
@@ -52,6 +53,7 @@ export class EmailBlockFactory {
       ['mj-preview', MjPreviewBlock],
       ['mj-title', MjTitleBlock],
       ['mj-raw', MjRawBlock],
+      ['mj-liquid', MjLiquidBlock],
       ['mj-social-element', MjSocialElementBlock]
     ])