b37270c11d
Pivot the template editor toward email-marketing-grade visual editing
by replacing grapesjs-preset-newsletter (permissive HTML, fails to parse
nested table structures) with grapesjs-mjml (the industry-standard
email markup language used by Mailchimp/Sendgrid/Twilio).
Why MJML: it was specifically designed to solve the "visual editor +
email-safe HTML" problem. You write semantic <mj-section>, <mj-column>,
<mj-button>, <mj-image> components — MJML compiles them to the gnarly
email-safe HTML with Outlook fallbacks + responsive media queries
auto-generated. Source is 3x more compact than hand-written HTML and
parses cleanly in visual editors.
Backend (lib/campaigns.js):
- Add `mjml` (v5, async) dependency. Compilation happens server-side
at SAVE time only; the send-worker reads pre-compiled .html (no
per-recipient compile cost).
- Each template can now be in 'mjml' or 'html' format. Detection by
file extension on disk: .mjml present → format='mjml', otherwise
format='html'. Source of truth for MJML templates = .mjml file;
.html is the auto-compiled output kept alongside for the send-worker.
- GET /campaigns/templates → returns { name, format, size } per template.
- GET /campaigns/templates/:name → returns { format, mjml?, html }
(mjml field present only when format=mjml; html always present).
- PUT /campaigns/templates/:name accepts:
{ mjml: "<mjml>..." } → compile to HTML, save both .mjml + .html
{ html: "..." } → save .html only (legacy path, unchanged)
Compilation errors return 400 with details (MJML validation soft mode).
Both files backed up as .bak-<ts>.<ext> before overwrite.
Frontend (TemplateEditorPage.vue):
- Detect format from API response on load.
- For format='mjml': swap grapesjs-preset-newsletter for grapesjs-mjml
plugin. Editor's getHtml() returns MJML source (not compiled HTML);
Save POSTs the MJML, hub compiles + persists both files.
- For format='html': existing behavior unchanged.
- Editor is destroyed + reinitialized when format changes (different
plugin sets).
- Custom variable blocks ({{firstname}}, {{amount}}, etc.) work for
both formats — they're text content, format-agnostic.
API client (apps/ops/src/api/campaigns.js):
- saveTemplate(name, content, { format }) routes to the right PUT body
shape based on format param.
Prototype: gift-email-fr-mjml — full MJML conversion of the simple
variant, ~7.5 KB MJML source compiling to ~32 KB email-safe HTML with
0 validation errors. All 6 Mustache variables preserved through
compilation (firstname, amount, gift_url, description, commitment_months,
year). User compares the MJML editor experience to the existing HTML
templates and decides whether to migrate the others.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
48 lines
1.2 KiB
JSON
48 lines
1.2 KiB
JSON
{
|
|
"name": "ops-app",
|
|
"version": "0.1.0",
|
|
"description": "Targo Ops — Unified ISP operations platform",
|
|
"productName": "Targo Ops",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "quasar dev",
|
|
"build": "quasar build -m pwa",
|
|
"lint": "eslint --ext .js,.vue ./src"
|
|
},
|
|
"dependencies": {
|
|
"@quasar/extras": "^1.16.12",
|
|
"@twilio/voice-sdk": "^2.18.1",
|
|
"chart.js": "^4.5.1",
|
|
"cytoscape": "^3.33.2",
|
|
"grapesjs": "^0.22.16",
|
|
"grapesjs-mjml": "^1.0.8",
|
|
"grapesjs-preset-newsletter": "^1.0.2",
|
|
"idb-keyval": "^6.2.1",
|
|
"lucide-vue-next": "^1.0.0",
|
|
"pinia": "^2.1.7",
|
|
"quasar": "^2.16.10",
|
|
"sip.js": "^0.21.2",
|
|
"vue": "^3.4.21",
|
|
"vue-chartjs": "^5.3.3",
|
|
"vue-router": "^4.3.0",
|
|
"vuedraggable": "^4.1.0"
|
|
},
|
|
"devDependencies": {
|
|
"@quasar/app-vite": "^1.10.0",
|
|
"eslint": "^8.57.0",
|
|
"eslint-plugin-vue": "^9.24.0",
|
|
"sass": "^1.72.0",
|
|
"workbox-build": "7.0.x",
|
|
"workbox-cacheable-response": "7.0.x",
|
|
"workbox-core": "7.0.x",
|
|
"workbox-expiration": "7.0.x",
|
|
"workbox-precaching": "7.0.x",
|
|
"workbox-routing": "7.0.x",
|
|
"workbox-strategies": "7.0.x"
|
|
},
|
|
"engines": {
|
|
"node": "^18 || ^20",
|
|
"npm": ">= 6.13.4"
|
|
}
|
|
}
|