From 569a1e700d363937857f6a645c106c6e06763e14 Mon Sep 17 00:00:00 2001
From: Philipp <git@pentacent.com>
Date: Mon, 19 Aug 2024 14:17:50 +0200
Subject: [PATCH] Add MJML support

This commit adds MJML support to Keila.

Huge thanks to @jdrouet for his Rust implementation of MJML and @paulgoetze for the Elixir wrapper
---
 assets/js/campaign-editors/mjml/helpers.js    |  18 +
 assets/js/campaign-editors/mjml/index.js      |  51 ++
 assets/js/campaign-editors/mjml/tags.js       | 537 ++++++++++++++++
 assets/js/campaign-editors/mjml/theme.js      |  37 ++
 assets/js/hooks/campaign-edit-live.js         |  11 +-
 assets/package-lock.json                      | 597 +++++++++++++++++-
 assets/package.json                           |   3 +
 lib/keila/mailings/builder.ex                 |   6 +
 lib/keila/mailings/builder/mjml.ex            |  40 ++
 lib/keila/mailings/schemas/campaign.ex        |   2 +
 .../mailings/schemas/campaign_settings.ex     |   2 +-
 .../api/schemas/mailings_campaign.ex          |  17 +-
 .../controllers/campaign_controller.ex        |   2 +
 lib/keila_web/live/campaign_edit_live.ex      |   2 +
 .../templates/campaign/_mjml_editor.html.heex |  96 +++
 .../campaign/_settings_dialog.html.heex       |   5 +-
 .../templates/campaign/edit_live.html.heex    |   4 +
 .../templates/campaign/new.html.heex          |  17 +-
 mix.exs                                       |   3 +-
 mix.lock                                      |   2 +
 .../email_templates/default-mjml-content.mjml | 121 ++++
 .../20240524220616_add_mjml_body.exs          |   9 +
 priv/vendor/keila-icons/mjml.svg              |   9 +
 23 files changed, 1583 insertions(+), 8 deletions(-)
 create mode 100644 assets/js/campaign-editors/mjml/helpers.js
 create mode 100644 assets/js/campaign-editors/mjml/index.js
 create mode 100644 assets/js/campaign-editors/mjml/tags.js
 create mode 100644 assets/js/campaign-editors/mjml/theme.js
 create mode 100644 lib/keila/mailings/builder/mjml.ex
 create mode 100644 lib/keila_web/templates/campaign/_mjml_editor.html.heex
 create mode 100644 priv/email_templates/default-mjml-content.mjml
 create mode 100644 priv/repo/migrations/20240524220616_add_mjml_body.exs
 create mode 100644 priv/vendor/keila-icons/mjml.svg

diff --git a/assets/js/campaign-editors/mjml/helpers.js b/assets/js/campaign-editors/mjml/helpers.js
new file mode 100644
index 00000000..1b0fd01f
--- /dev/null
+++ b/assets/js/campaign-editors/mjml/helpers.js
@@ -0,0 +1,18 @@
+export const indentAndAutocompleteWithTab = {
+  key: "Tab",
+  preventDefault: true,
+  shift: indentLess,
+  run: (e) => {
+    if (!completionStatus(e.state)) return indentMore(e)
+    return acceptCompletion(e)
+  }
+}
+
+export const saveUpdates = (source) => {
+  return EditorView.updateListener.of((e) => {
+    if (e.docChanged) {
+      source.value = e.state.doc.toString()
+      source.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  })
+}
diff --git a/assets/js/campaign-editors/mjml/index.js b/assets/js/campaign-editors/mjml/index.js
new file mode 100644
index 00000000..912cef55
--- /dev/null
+++ b/assets/js/campaign-editors/mjml/index.js
@@ -0,0 +1,51 @@
+import { acceptCompletion, completionStatus } from "@codemirror/autocomplete"
+import { defaultKeymap, indentLess, indentMore } from "@codemirror/commands"
+import { html } from "@codemirror/lang-html"
+import { EditorState } from "@codemirror/state"
+import { EditorView, keymap } from "@codemirror/view"
+import { basicSetup } from "codemirror"
+
+import tags from "./autocomplete.js"
+import { indentAndAutocompleteWithTab, saveUpdates } from "./helpers.js"
+import theme from "./theme.js"
+
+export default class MjmlEditor {
+  constructor(place, source) {
+    this.source = source
+    this.place = place
+
+    let state = EditorState.create({
+      doc: source.value,
+      extensions: [
+        basicSetup,
+        html({ extraTags: tags, selfClosingTags: true }),
+        keymap.of([...defaultKeymap, indentAndAutocompleteWithTab]),
+        theme,
+        saveUpdates(source)
+      ]
+    })
+
+    this.view = new EditorView({
+      state: state,
+      parent: place
+    })
+
+    place.parentNode.parentNode.addEventListener("x-show-image-dialog", () => {
+      document
+        .querySelector("[data-dialog-for=image]")
+        .dispatchEvent(new CustomEvent("x-show", { detail: {} }))
+      window.addEventListener(
+        "update-image",
+        (e) => {
+          const { src } = e.detail
+          if (!src) {
+            this.view.focus()
+            return
+          }
+          this.view.dispatch(this.view.state.replaceSelection(src))
+        },
+        { once: true }
+      )
+    })
+  }
+}
diff --git a/assets/js/campaign-editors/mjml/tags.js b/assets/js/campaign-editors/mjml/tags.js
new file mode 100644
index 00000000..0f94912d
--- /dev/null
+++ b/assets/js/campaign-editors/mjml/tags.js
@@ -0,0 +1,537 @@
+export default = {
+  mjml: {
+    children: ["mj-head", "mj-body"],
+    globalAttrs: false
+  },
+  "mj-head": {
+    children: [
+      "mj-attributes",
+      "mj-preview",
+      "mj-title",
+      "mj-font",
+      "mj-breakpoint",
+      "mj-raw"
+    ],
+    globalAttrs: false
+  },
+  "mj-body": {
+    children: ["mj-section", "mj-wrapper", "mj-raw"],
+    globalAttrs: false
+  },
+  "mj-accordion": {
+    attrs: {
+      "css-class": null,
+      "container-background-color": null,
+      border: null,
+      "font-family": null,
+      "icon-align": null,
+      "icon-wrapped-url": null,
+      "icon-wrapped-alt": null,
+      "icon-unwrapped-url": null,
+      "icon-unwrapped-alt": null,
+      "icon-position": null,
+      "icon-height": null,
+      "icon-width": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "padding-top": null,
+      padding: null
+    },
+    globalAttrs: false
+  },
+  "mj-accordion-element": {
+    attrs: {
+      "background-color": null,
+      "font-family": null,
+      "icon-align": null,
+      "icon-wrapped-url": null,
+      "icon-wrapped-alt": null,
+      "icon-unwrapped-url": null,
+      "icon-unwrapped-alt": null,
+      "icon-position": null,
+      "icon-height": null,
+      "icon-width": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-accordion-title": {
+    attrs: {
+      "background-color": null,
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "padding-top": null,
+      padding: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-accordion-text": {
+    attrs: {
+      "background-color": null,
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "padding-top": null,
+      padding: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-breakpoint": {
+    attrs: {
+      width: null
+    },
+    globalAttrs: false
+  },
+  "mj-attributes": {
+    children: ["mj-section", "mj-column", "mj-text", "mj-button", "mj-image"],
+    globalAttrs: false
+  },
+  "mj-button": {
+    attrs: {
+      "background-color": null,
+      "container-background-color": null,
+      border: null,
+      "border-bottom": null,
+      "border-left": null,
+      "border-right": null,
+      "border-top": null,
+      "border-radius": null,
+      "font-style": null,
+      "font-size": null,
+      "font-weight": null,
+      "font-family": null,
+      color: null,
+      "text-decoration": null,
+      "text-transform": null,
+      align: null,
+      "vertical-align": null,
+      "line-height": null,
+      href: null,
+      rel: null,
+      "inner-padding": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      width: null,
+      height: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-carousel": {
+    attrs: {
+      align: null,
+      "border-radius": null,
+      "background-color": null,
+      thumbnails: null,
+      "tb-border": null,
+      "tb-border-radius": null,
+      "tb-hover-border-color": null,
+      "tb-selected-border-color": null,
+      "tb-width": null,
+      "left-icon": null,
+      "right-icon": null,
+      "icon-width": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-carousel-image": {
+    attrs: {
+      src: null,
+      "thumbnails-src": null,
+      href: null,
+      rel: null,
+      alt: null,
+      title: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-class": {
+    attrs: {
+      name: null
+    },
+    globalAttrs: false
+  },
+  "mj-column": {
+    attrs: {
+      "background-color": null,
+      border: null,
+      "border-bottom": null,
+      "border-left": null,
+      "border-right": null,
+      "border-top": null,
+      "border-radius": null,
+      width: null,
+      "vertical-align": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-divider": {
+    attrs: {
+      "border-color": null,
+      "border-style": null,
+      "border-width": null,
+      width: null,
+      "container-background-color": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-group": {
+    attrs: {
+      width: null,
+      "vertical-align": null,
+      "background-color": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-font": {
+    attrs: {
+      href: null,
+      name: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-hero": {
+    attrs: {
+      width: null,
+      mode: null,
+      height: null,
+      "background-width": null,
+      "background-height": null,
+      "background-url": null,
+      "background-color": null,
+      "background-position": null,
+      padding: null,
+      "padding-top": null,
+      "padding-right": null,
+      "padding-left": null,
+      "padding-bottom": null,
+      "vertical-align": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-image": {
+    attrs: {
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "container-background-color": null,
+      border: null,
+      "border-radius": null,
+      width: null,
+      height: null,
+      src: null,
+      href: null,
+      rel: null,
+      alt: null,
+      align: null,
+      title: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-invoice": {
+    attrs: {
+      align: null,
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "line-height": null,
+      border: null,
+      "container-background-color": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      intl: null,
+      format: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-invoice-item": {
+    attrs: {
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "line-height": null,
+      border: null,
+      "text-align": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      name: null,
+      price: null,
+      quantity: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-list": {
+    attrs: {
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "line-height": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-location": {
+    attrs: {
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "font-weight": null,
+      href: null,
+      rel: null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "img-src": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-navbar": {
+    attrs: {
+      hamburger: null,
+      align: null,
+      "ico-open": null,
+      "ico-close": null,
+      "ico-padding": null,
+      "ico-padding-top": null,
+      "ico-padding-right": null,
+      "ico-padding-bottom": null,
+      "ico-padding-left": null,
+      "ico-align": null,
+      "ico-color": null,
+      "ico-font-size": null,
+      "ico-font-family": null,
+      "ico-text-transform": null,
+      "ico-text-decoration": null,
+      "ico-line-height": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-navbar-link": {
+    attrs: {
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "font-style": null,
+      "font-weight": null,
+      "line-height": null,
+      "text-decoration": null,
+      "text-transform": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      rel: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-preview": {
+    globalAttrs: false
+  },
+  "mj-raw": {
+    globalAttrs: false
+  },
+  "mj-section": {
+    attrs: {
+      "full-width": null,
+      border: null,
+      "border-bottom": null,
+      "border-left": null,
+      "border-right": null,
+      "border-top": null,
+      "border-radius": null,
+      "background-color": null,
+      "background-url": null,
+      "background-repeat": null,
+      "background-size": null,
+      "vertical-align": null,
+      "text-align": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      direction: null,
+      "css-class": null
+    },
+    children: ["mj-column"],
+    globalAttrs: false
+  },
+  "mj-social": {
+    attrs: {
+      align: null,
+      "border-radius": null,
+      "container-background-color": null,
+      color: null,
+      "font-family": null,
+      "font-size": null,
+      "font-style": null,
+      "font-weight": null,
+      "icon-size": null,
+      "inner-padding": null,
+      "line-height": null,
+      mode: null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "padding-top": null,
+      padding: null,
+      "table-layout": null,
+      "vertical-align": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-social-element": {
+    attrs: {
+      align: null,
+      "background-color": null,
+      color: null,
+      "border-radius": null,
+      "font-family": null,
+      "font-size": null,
+      "font-style": null,
+      "font-weight": null,
+      href: null,
+      "icon-color": null,
+      "icon-size": null,
+      "line-height": null,
+      name: null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "padding-top": null,
+      padding: null,
+      src: null,
+      target: null,
+      "text-decoration": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-spacer": {
+    attrs: {
+      height: null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-table": {
+    attrs: {
+      color: null,
+      cellpadding: null,
+      cellspacing: null,
+      "font-family": null,
+      "font-size": null,
+      "line-height": null,
+      "container-background-color": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      width: null,
+      "table-layout": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-text": {
+    attrs: {
+      align: null,
+      "background-color": null,
+      color: null,
+      "container-background-color": null,
+      "font-family": null,
+      "font-size": null,
+      "font-style": null,
+      "font-weight": null,
+      height: null,
+      "letter-spacing": null,
+      "line-height": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "padding-top": null,
+      padding: null,
+      "text-decoration": null,
+      "text-transform": null,
+      "vertical-align": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  "mj-title": { globalAttrs: false },
+  "mj-wrapper": {
+    attrs: {
+      "full-width": null,
+      border: null,
+      "border-bottom": null,
+      "border-left": null,
+      "border-right": null,
+      "border-top": null,
+      "border-radius": null,
+      "background-color": null,
+      "background-url": null,
+      "background-repeat": null,
+      "background-size": null,
+      "vertical-align": null,
+      "text-align": null,
+      padding: null,
+      "padding-top": null,
+      "padding-bottom": null,
+      "padding-left": null,
+      "padding-right": null,
+      "css-class": null
+    },
+    globalAttrs: false
+  },
+  children: ["mj-section"],
+  globalAttrs: false
+}
diff --git a/assets/js/campaign-editors/mjml/theme.js b/assets/js/campaign-editors/mjml/theme.js
new file mode 100644
index 00000000..9e6c578c
--- /dev/null
+++ b/assets/js/campaign-editors/mjml/theme.js
@@ -0,0 +1,37 @@
+import { EditorView } from "prosemirror-view"
+
+export default EditorView.theme(
+  {
+    "&": {
+      color: "#f4f4f5",
+      backgroundColor: "#030712"
+    },
+    ".cm-content": {
+      caretColor: "#f9fafb"
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "#f9fafb"
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+      backgroundColor: "#083344 !important"
+    },
+    ".cm-selectionBackground, ::selection": {
+      backgroundColor: "#083344"
+    },
+    ".cm-selectionMatch": {
+      backgroundColor: "#155e75"
+    },
+    ".cm-gutters": {
+      backgroundColor: "#111827",
+      color: "#6b7280",
+      border: "none"
+    },
+    ".ͼe": {
+      color: "#93c5fd"
+    },
+    ".ͼi": {
+      color: "#4ade80"
+    }
+  },
+  { dark: true }
+)
diff --git a/assets/js/hooks/campaign-edit-live.js b/assets/js/hooks/campaign-edit-live.js
index a5a947bf..39afe4b9 100644
--- a/assets/js/hooks/campaign-edit-live.js
+++ b/assets/js/hooks/campaign-edit-live.js
@@ -1,6 +1,7 @@
 import BlockEditor from "../campaign-editors/block"
 import { MarkdownEditor } from "../campaign-editors/markdown"
 import MarkdownSimpleEditor from "../campaign-editors/markdown-simple"
+import MjmlEditor from "../campaign-editors/mjml"
 
 const putHtmlPreview = (el) => {
   const content = el.innerText
@@ -38,6 +39,13 @@ const BlockEditorHook = {
   }
 }
 
+const MjmlEditorHook = {
+  mounted() {
+    let place = this.el.querySelector(".editor")
+    new MjmlEditor(place, document.querySelector("#campaign_mjml_body"))
+  }
+}
+
 const HtmlPreviewHook = {
   mounted() {
     putHtmlPreview(this.el)
@@ -51,5 +59,6 @@ export {
   BlockEditorHook as BlockEditor,
   HtmlPreviewHook as HtmlPreview,
   MarkdownEditorHook as MarkdownEditor,
-  MarkdownSimpleEditorHook as MarkdownSimpleEditor
+  MarkdownSimpleEditorHook as MarkdownSimpleEditor,
+  MjmlEditorHook as MjmlEditor
 }
diff --git a/assets/package-lock.json b/assets/package-lock.json
index e4a5fe37..f5f9d9c7 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -4,9 +4,10 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "assets",
       "license": "agpl-3.0",
       "dependencies": {
+        "@codemirror/basic-setup": "^0.20.0",
+        "@codemirror/lang-html": "^6.4.9",
         "@editorjs/editorjs": "git+https://github.com/pentacent/editor.js.git#ff6e6ac3272f29e02229cd97ebffa5acf6c0e0fe",
         "@editorjs/header": "^2.7.0",
         "@editorjs/image": "^2.8.1",
@@ -16,6 +17,7 @@
         "@editorjs/quote": "^2.5.0",
         "alpinejs": "^2.8.0",
         "chart.js": "^4.1.1",
+        "codemirror": "^6.0.1",
         "nprogress": "^0.2.0",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
@@ -99,6 +101,230 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
+      "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.20.0.tgz",
+      "integrity": "sha512-W/ERKMLErWkrVLyP5I8Yh8PXl4r+WFNkdYVSzkXYPQv2RMPSkWpr2BgggiSJ8AHF/q3GuApncDD8I4BZz65fyg==",
+      "deprecated": "In version 6.0, this package has been renamed to just 'codemirror'",
+      "dependencies": {
+        "@codemirror/autocomplete": "^0.20.0",
+        "@codemirror/commands": "^0.20.0",
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/lint": "^0.20.0",
+        "@codemirror/search": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/autocomplete": {
+      "version": "0.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.20.3.tgz",
+      "integrity": "sha512-lYB+NPGP+LEzAudkWhLfMxhTrxtLILGl938w+RcFrGdrIc54A+UgmCoz+McE3IYRFp4xyQcL4uFJwo+93YdgHw==",
+      "dependencies": {
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/commands": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.20.0.tgz",
+      "integrity": "sha512-v9L5NNVA+A9R6zaFvaTbxs30kc69F6BkOoiEbeFw4m4I0exmDEKBILN6mK+GksJtvTzGBxvhAPlVFTdQW8GB7Q==",
+      "dependencies": {
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/language": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.20.2.tgz",
+      "integrity": "sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "@lezer/common": "^0.16.0",
+        "@lezer/highlight": "^0.16.0",
+        "@lezer/lr": "^0.16.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/lint": {
+      "version": "0.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.20.3.tgz",
+      "integrity": "sha512-06xUScbbspZ8mKoODQCEx6hz1bjaq9m8W8DxdycWARMiiX1wMtfCh/MoHpaL7ws/KUMwlsFFfp2qhm32oaCvVA==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.2",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/search": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.20.1.tgz",
+      "integrity": "sha512-ROe6gRboQU5E4z6GAkNa2kxhXqsGNbeLEisbvzbOeB7nuDYXUZ70vGIgmqPu0tB+1M3F9yWk6W8k2vrFpJaD4Q==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/state": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz",
+      "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ=="
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/view": {
+      "version": "0.20.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz",
+      "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@lezer/common": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.16.1.tgz",
+      "integrity": "sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA=="
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@lezer/highlight": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-0.16.0.tgz",
+      "integrity": "sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==",
+      "dependencies": {
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@lezer/lr": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.16.3.tgz",
+      "integrity": "sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==",
+      "dependencies": {
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.0.tgz",
+      "integrity": "sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
+      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
+      "integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
+      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.32.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.32.0.tgz",
+      "integrity": "sha512-AgVNvED2QTsZp5e3syoHLsrWtwJFYWdx1Vr/m3f4h1ATQz0ax60CfXF3Htdmk69k2MlYZw8gXesnQdHtzyVmAw==",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@codexteam/icons": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.1.0.tgz",
@@ -280,6 +506,57 @@
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.1.tgz",
       "integrity": "sha512-hW0GwZj06z/ZFUW2Espl7toVDjghJN+EKqyXzPSV8NV89d5BYp5rRMBJoc+aUN0x5OXDMeRQHazejr2Xmqj2tw=="
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.8.tgz",
+      "integrity": "sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.17",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.17.tgz",
+      "integrity": "sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -874,6 +1151,20 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/codex-notifier": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz",
@@ -915,6 +1206,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2393,6 +2689,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -2898,6 +3199,225 @@
         "regenerator-runtime": "^0.13.11"
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
+      "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/basic-setup": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.20.0.tgz",
+      "integrity": "sha512-W/ERKMLErWkrVLyP5I8Yh8PXl4r+WFNkdYVSzkXYPQv2RMPSkWpr2BgggiSJ8AHF/q3GuApncDD8I4BZz65fyg==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.20.0",
+        "@codemirror/commands": "^0.20.0",
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/lint": "^0.20.0",
+        "@codemirror/search": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0"
+      },
+      "dependencies": {
+        "@codemirror/autocomplete": {
+          "version": "0.20.3",
+          "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.20.3.tgz",
+          "integrity": "sha512-lYB+NPGP+LEzAudkWhLfMxhTrxtLILGl938w+RcFrGdrIc54A+UgmCoz+McE3IYRFp4xyQcL4uFJwo+93YdgHw==",
+          "requires": {
+            "@codemirror/language": "^0.20.0",
+            "@codemirror/state": "^0.20.0",
+            "@codemirror/view": "^0.20.0",
+            "@lezer/common": "^0.16.0"
+          }
+        },
+        "@codemirror/commands": {
+          "version": "0.20.0",
+          "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.20.0.tgz",
+          "integrity": "sha512-v9L5NNVA+A9R6zaFvaTbxs30kc69F6BkOoiEbeFw4m4I0exmDEKBILN6mK+GksJtvTzGBxvhAPlVFTdQW8GB7Q==",
+          "requires": {
+            "@codemirror/language": "^0.20.0",
+            "@codemirror/state": "^0.20.0",
+            "@codemirror/view": "^0.20.0",
+            "@lezer/common": "^0.16.0"
+          }
+        },
+        "@codemirror/language": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.20.2.tgz",
+          "integrity": "sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==",
+          "requires": {
+            "@codemirror/state": "^0.20.0",
+            "@codemirror/view": "^0.20.0",
+            "@lezer/common": "^0.16.0",
+            "@lezer/highlight": "^0.16.0",
+            "@lezer/lr": "^0.16.0",
+            "style-mod": "^4.0.0"
+          }
+        },
+        "@codemirror/lint": {
+          "version": "0.20.3",
+          "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.20.3.tgz",
+          "integrity": "sha512-06xUScbbspZ8mKoODQCEx6hz1bjaq9m8W8DxdycWARMiiX1wMtfCh/MoHpaL7ws/KUMwlsFFfp2qhm32oaCvVA==",
+          "requires": {
+            "@codemirror/state": "^0.20.0",
+            "@codemirror/view": "^0.20.2",
+            "crelt": "^1.0.5"
+          }
+        },
+        "@codemirror/search": {
+          "version": "0.20.1",
+          "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.20.1.tgz",
+          "integrity": "sha512-ROe6gRboQU5E4z6GAkNa2kxhXqsGNbeLEisbvzbOeB7nuDYXUZ70vGIgmqPu0tB+1M3F9yWk6W8k2vrFpJaD4Q==",
+          "requires": {
+            "@codemirror/state": "^0.20.0",
+            "@codemirror/view": "^0.20.0",
+            "crelt": "^1.0.5"
+          }
+        },
+        "@codemirror/state": {
+          "version": "0.20.1",
+          "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz",
+          "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ=="
+        },
+        "@codemirror/view": {
+          "version": "0.20.7",
+          "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz",
+          "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==",
+          "requires": {
+            "@codemirror/state": "^0.20.0",
+            "style-mod": "^4.0.0",
+            "w3c-keyname": "^2.2.4"
+          }
+        },
+        "@lezer/common": {
+          "version": "0.16.1",
+          "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.16.1.tgz",
+          "integrity": "sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA=="
+        },
+        "@lezer/highlight": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-0.16.0.tgz",
+          "integrity": "sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==",
+          "requires": {
+            "@lezer/common": "^0.16.0"
+          }
+        },
+        "@lezer/lr": {
+          "version": "0.16.3",
+          "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.16.3.tgz",
+          "integrity": "sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==",
+          "requires": {
+            "@lezer/common": "^0.16.0"
+          }
+        }
+      }
+    },
+    "@codemirror/commands": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.0.tgz",
+      "integrity": "sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
+      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
+      "integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/search": {
+      "version": "6.5.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
+      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
+    },
+    "@codemirror/view": {
+      "version": "6.32.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.32.0.tgz",
+      "integrity": "sha512-AgVNvED2QTsZp5e3syoHLsrWtwJFYWdx1Vr/m3f4h1ATQz0ax60CfXF3Htdmk69k2MlYZw8gXesnQdHtzyVmAw==",
+      "requires": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "@codexteam/icons": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.1.0.tgz",
@@ -3083,6 +3603,57 @@
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.1.tgz",
       "integrity": "sha512-hW0GwZj06z/ZFUW2Espl7toVDjghJN+EKqyXzPSV8NV89d5BYp5rRMBJoc+aUN0x5OXDMeRQHazejr2Xmqj2tw=="
     },
+    "@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "@lezer/css": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.8.tgz",
+      "integrity": "sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "@lezer/javascript": {
+      "version": "1.4.17",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.17.tgz",
+      "integrity": "sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==",
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3555,6 +4126,20 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "codex-notifier": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz",
@@ -3593,6 +4178,11 @@
         "yaml": "^1.10.0"
       }
     },
+    "crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4646,6 +5236,11 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index d906c02f..6811952e 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -6,6 +6,8 @@
     "deploy": "NODE_ENV=production tailwindcss --input=css/app.scss --output=../priv/static/css/app.css --postcss --minify"
   },
   "dependencies": {
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/lang-html": "^6.4.9",
     "@editorjs/editorjs": "git+https://github.com/pentacent/editor.js.git#ff6e6ac3272f29e02229cd97ebffa5acf6c0e0fe",
     "@editorjs/header": "^2.7.0",
     "@editorjs/image": "^2.8.1",
@@ -15,6 +17,7 @@
     "@editorjs/quote": "^2.5.0",
     "alpinejs": "^2.8.0",
     "chart.js": "^4.1.1",
+    "codemirror": "^6.0.1",
     "nprogress": "^0.2.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
diff --git a/lib/keila/mailings/builder.ex b/lib/keila/mailings/builder.ex
index 1bf02559..b1fcc912 100644
--- a/lib/keila/mailings/builder.ex
+++ b/lib/keila/mailings/builder.ex
@@ -201,6 +201,12 @@ defmodule Keila.Mailings.Builder do
     end
   end
 
+  defp put_body(email, campaign = %{settings: %{type: :mjml}}, assigns) do
+    mjml_content = campaign.mjml_body || ""
+
+    __MODULE__.MJML.put_body(email, mjml_content, assigns)
+  end
+
   defp fetch_styles(campaign)
 
   defp fetch_styles(%Campaign{template: %Template{styles: styles}}) when is_list(styles) do
diff --git a/lib/keila/mailings/builder/mjml.ex b/lib/keila/mailings/builder/mjml.ex
new file mode 100644
index 00000000..f88ad552
--- /dev/null
+++ b/lib/keila/mailings/builder/mjml.ex
@@ -0,0 +1,40 @@
+defmodule Keila.Mailings.Builder.MJML do
+  @moduledoc """
+  Builder for MJML emails.
+  """
+  require KeilaWeb.Gettext
+
+  import Swoosh.Email
+  import KeilaWeb.Gettext
+
+  @spec put_body(Swoosh.Email.t(), String.t(), map()) :: Swoosh.Email.t()
+  def put_body(email, mjml_content, assigns \\ %{}) do
+    with {:ok, rendered_mjml} <- render_mjml(mjml_content),
+         {:ok, html_body} <- render_liquid(rendered_mjml, assigns) do
+      html_body(email, html_body)
+    else
+      {:error, reason} ->
+        email |> text_body(reason) |> header("X-Keila-Invalid", reason)
+    end
+  end
+
+  defp render_mjml(input) do
+    case Mjml.to_html(input) do
+      {:ok, output} ->
+        {:ok, output}
+
+      {:error, reason} ->
+        {:error, gettext("Error compiling MJML: %{reason}", reason: reason)}
+    end
+  end
+
+  defp render_liquid(input, assigns) do
+    case Keila.Mailings.Builder.LiquidRenderer.render_liquid(input, assigns) do
+      {:ok, output} ->
+        {:ok, output}
+
+      {:error, reason} ->
+        {:error, gettext("Error compiling Liquid: %{reason}", reason: reason)}
+    end
+  end
+end
diff --git a/lib/keila/mailings/schemas/campaign.ex b/lib/keila/mailings/schemas/campaign.ex
index e498a348..b3d3d982 100644
--- a/lib/keila/mailings/schemas/campaign.ex
+++ b/lib/keila/mailings/schemas/campaign.ex
@@ -10,6 +10,7 @@ defmodule Keila.Mailings.Campaign do
     :text_body,
     :html_body,
     :json_body,
+    :mjml_body,
     :preview_text,
     :sender_id,
     :template_id,
@@ -23,6 +24,7 @@ defmodule Keila.Mailings.Campaign do
     field(:text_body, :string)
     field(:html_body, :string)
     field(:json_body, :map)
+    field(:mjml_body, :string)
     field(:preview_text, :string)
     field(:data, Keila.Repo.JsonField)
     field(:sent_at, :utc_datetime)
diff --git a/lib/keila/mailings/schemas/campaign_settings.ex b/lib/keila/mailings/schemas/campaign_settings.ex
index 96dd878a..8e0c8e5c 100644
--- a/lib/keila/mailings/schemas/campaign_settings.ex
+++ b/lib/keila/mailings/schemas/campaign_settings.ex
@@ -3,7 +3,7 @@ defmodule Keila.Mailings.Campaign.Settings do
   import Ecto.Changeset
 
   embedded_schema do
-    field(:type, Ecto.Enum, values: [:text, :markdown, :block])
+    field(:type, Ecto.Enum, values: [:text, :markdown, :block, :mjml])
     field(:enable_wysiwyg, :boolean, default: true)
     field(:do_not_track, :boolean, default: false)
   end
diff --git a/lib/keila_web/api/schemas/mailings_campaign.ex b/lib/keila_web/api/schemas/mailings_campaign.ex
index 769b3b74..6becd25b 100644
--- a/lib/keila_web/api/schemas/mailings_campaign.ex
+++ b/lib/keila_web/api/schemas/mailings_campaign.ex
@@ -35,6 +35,20 @@ defmodule KeilaWeb.Api.Schemas.MailingsCampaign do
       }
       """
     },
+    mjml_body: %{
+      type: :string,
+      example: """
+      <mjml>
+        <mj-body>
+          <mj-section>
+            <mj-column>
+              <mj-text>Hello I’m an MJML campaign!</mj-text>
+            </mj-column>
+          </mj-section>
+        </mj-body>
+      </mjml>
+      """
+    },
     data: %{
       type: :map,
       example: %{
@@ -50,7 +64,7 @@ defmodule KeilaWeb.Api.Schemas.MailingsCampaign do
         type: %{
           type: :string,
           required: true,
-          enum: ["markdown", "text", "block"],
+          enum: ["markdown", "text", "block", "mjml"],
           example: "markdown"
         }
       }
@@ -114,6 +128,7 @@ defmodule KeilaWeb.Api.Schemas.MailingsCampaign.Params do
     :subject,
     :text_body,
     :json_body,
+    :mjml_body,
     :settings,
     :template_id,
     :sender_id,
diff --git a/lib/keila_web/controllers/campaign_controller.ex b/lib/keila_web/controllers/campaign_controller.ex
index 0c488c52..0e26ba7a 100644
--- a/lib/keila_web/controllers/campaign_controller.ex
+++ b/lib/keila_web/controllers/campaign_controller.ex
@@ -8,6 +8,7 @@ defmodule KeilaWeb.CampaignController do
 
   @default_text_body File.read!("priv/email_templates/default-text-content.txt")
   @default_markdown_body File.read!("priv/email_templates/default-markdown-content.md")
+  @default_mjml_body File.read!("priv/email_templates/default-mjml-content.mjml")
 
   @spec index(Plug.Conn.t(), map()) :: Plug.Conn.t()
   def index(conn, _params) do
@@ -70,6 +71,7 @@ defmodule KeilaWeb.CampaignController do
     # TODO Maybe this would be better implemented as a Context module function
     case get_in(params, ["settings", "type"]) do
       "markdown" -> Map.put(params, "text_body", @default_markdown_body)
+      "mjml" -> Map.put(params, "mjml_body", @default_mjml_body)
       _ -> Map.put(params, "text_body", @default_text_body)
     end
   end
diff --git a/lib/keila_web/live/campaign_edit_live.ex b/lib/keila_web/live/campaign_edit_live.ex
index 3ae0c8b1..7ca10439 100644
--- a/lib/keila_web/live/campaign_edit_live.ex
+++ b/lib/keila_web/live/campaign_edit_live.ex
@@ -215,6 +215,8 @@ defmodule KeilaWeb.CampaignEditLive do
 
   defp transform_style_selector(selector, :text), do: selector
 
+  defp transform_style_selector(selector, :mjml), do: selector
+
   @markdown_editor_selector "#wysiwyg .editor"
   @markdown_editor_content_selector "#wysiwyg .editor .ProseMirror"
   defp transform_style_selector(selector, :markdown) do
diff --git a/lib/keila_web/templates/campaign/_mjml_editor.html.heex b/lib/keila_web/templates/campaign/_mjml_editor.html.heex
new file mode 100644
index 00000000..cd222375
--- /dev/null
+++ b/lib/keila_web/templates/campaign/_mjml_editor.html.heex
@@ -0,0 +1,96 @@
+<div id="mjml-editor-toolbar w-full" phx-update="ignore">
+  <div class="wysiwyg--menu bg-white relative shadow z-10 flex overflow-x-auto mt-4">
+    <button
+      title={gettext("Insert image")}
+      class="flex w-10 h-10 p-2 items-center justify-center bg-white hover:bg-emerald-100 text-black"
+      @click.prevent="$dispatch('x-show-image-dialog')"
+    >
+      <%= render_icon(:photograph) %>
+    </button>
+    <button
+      title={gettext("Expand editor")}
+      class="flex w-10 h-10 p-2 items-center justify-center bg-white hover:bg-emerald-100 text-black"
+      @click.prevent="$dispatch('x-toggle-expand-editor')"
+    >
+      <%= render_icon(:arrows_expand) %>
+    </button>
+
+    <div class="flex-grow"></div>
+
+    <button
+      title={gettext("Preview")}
+      class="flex w-10 h-10 p-2 items-center justify-center bg-white hover:bg-emerald-100 text-black"
+      @click.prevent="$dispatch('x-toggle-preview')"
+    >
+      <%= render_icon(:eye) %>
+    </button>
+  </div>
+</div>
+
+<% f = form_for(@changeset, "#") %>
+<div class="flex" x-data="{previewMode: false, previewDevice: 'desktop', editorExpanded: false}">
+  <%= textarea(f, :mjml_body,
+    rows: 20,
+    class: "hidden",
+    phx_debounce: "1000"
+  ) %>
+  <div
+    id="mjml-editor-container"
+    class="editor flex-grow flex-shrink-0 transition-all"
+    :class="editorExpanded ? 'w-2/3' : 'w-2/5'"
+    phx-update="ignore"
+    x-on:x-toggle-expand-editor.document="editorExpanded = !editorExpanded"
+  >
+  </div>
+  <div
+    id="preview-container-mjml"
+    class="flex-grow flex-shrink w-1/3 flex flex-col"
+    phx-update="ignore"
+    x-on:x-toggle-preview.document="previewMode = !previewMode"
+    x-on:x-toggle-desktop-preview.document="previewDevice = 'desktop'"
+    x-on:x-toggle-mobile-preview.document="previewDevice = 'mobile'"
+    :class="previewMode ? 'fixed z-40 w-full min-h-full inset-0 bg-gray-900 items-center' : 'w-3/5 flex-grow'"
+  >
+    <div x-show="previewMode" style="display: none">
+      <div class="relative shadow z-10 flex overflow-x-auto my-4">
+        <div class="flex-grow"></div>
+        <button
+          title={gettext("Desktop preview")}
+          class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
+          :class="previewDevice == 'desktop' && 'bg-gray-700'"
+          @click.prevent="$dispatch('x-toggle-desktop-preview')"
+        >
+          <%= render_icon(:desktop_computer) %>
+        </button>
+        <button
+          title={gettext("Mobile preview")}
+          class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
+          :class="previewDevice == 'mobile' && 'bg-gray-700'"
+          @click.prevent="$dispatch('x-toggle-mobile-preview')"
+        >
+          <%= render_icon(:device_mobile) %>
+        </button>
+        <div class="w-4"></div>
+        <button
+          x-show="previewMode"
+          @click.prevent="previewMode = !previewMode"
+          class="h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
+        >
+          <%= gettext("Close preview") %>
+        </button>
+      </div>
+    </div>
+    <iframe
+      id="html-preview"
+      src="about:blank"
+      data-source="html-preview-data"
+      class="bg-gray-100 flex-grow transition-all"
+      :class="previewMode ? 'w-20 flex-grow-0 h-full' : ''"
+      :style="previewMode ? previewDevice == 'desktop' ? 'width: 100%' : 'width: 360px' : ''"
+    >
+    </iframe>
+  </div>
+  <div id="html-preview-data" phx-hook="HtmlPreview" class="hidden" data-iframe="html-preview">
+    <%= @preview %>
+  </div>
+</div>
diff --git a/lib/keila_web/templates/campaign/_settings_dialog.html.heex b/lib/keila_web/templates/campaign/_settings_dialog.html.heex
index 9d2212d9..75b7c3e1 100644
--- a/lib/keila_web/templates/campaign/_settings_dialog.html.heex
+++ b/lib/keila_web/templates/campaign/_settings_dialog.html.heex
@@ -74,7 +74,8 @@
               [
                 {gettext("Markdown"), "markdown"},
                 {gettext("Text only"), "text"},
-                {gettext("Block Editor"), "block"}
+                {gettext("Block Editor"), "block"},
+                {gettext("MJML"), "mjml"}
               ],
               x_model: "type"
             ) %>
@@ -105,7 +106,7 @@
           </div>
         </template>
 
-        <template x-if="type === 'markdown' || type === 'block'">
+        <template x-if="type === 'markdown' || type === 'block' || type === 'mjml'">
           <div class="form-row flex flex-col">
             <%= label(f, :preview_text) do %>
               <%= gettext("Preview Text") %><br />
diff --git a/lib/keila_web/templates/campaign/edit_live.html.heex b/lib/keila_web/templates/campaign/edit_live.html.heex
index 2b495b37..31ec2b18 100644
--- a/lib/keila_web/templates/campaign/edit_live.html.heex
+++ b/lib/keila_web/templates/campaign/edit_live.html.heex
@@ -119,6 +119,10 @@
               </div>
             <% (type == :block) -> %>
               <%= render("_block_editor.html", assigns) %>
+            <% (type == :mjml) -> %>
+              <div id="mjml-container" phx-hook="MjmlEditor">
+                <%= render("_mjml_editor.html", assigns) %>
+              </div>
             <% true -> %>
               <div id="markdown-simple-container" phx-hook="MarkdownSimpleEditor">
                 <%= render("_markdown_editor.html", assigns) %>
diff --git a/lib/keila_web/templates/campaign/new.html.heex b/lib/keila_web/templates/campaign/new.html.heex
index 066ae457..f5668782 100644
--- a/lib/keila_web/templates/campaign/new.html.heex
+++ b/lib/keila_web/templates/campaign/new.html.heex
@@ -121,6 +121,21 @@
               beta
             </span>
           </label>
+
+          <%= radio_button(fs, :type, "mjml", class: "hidden", x_model: "type") %>
+          <label
+            for={input_id(fs, :type, "mjml")}
+            class="bg-gray-800 p-4"
+            x-bind:class="type == 'mjml' && 'outline outline-2 outline-green-500'"
+          >
+            <h3 class="text-bold text-xl"><%= gettext("MJML") %></h3>
+            <div class="flex w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-300 rounded text-gray-600 p-2 my-4">
+              <%= render_icon(:mjml) %>
+            </div>
+            <p class="text-sm">
+              <%= gettext("Build fully customized responsive email layouts with MJML.") %>
+            </p>
+          </label>
         </div>
       <% end) %>
     </div>
@@ -148,7 +163,7 @@
       </div>
     </template>
 
-    <template x-if="type === 'markdown' || type === 'block'">
+    <template x-if="type === 'markdown' || type === 'block' || type === 'mjml'">
       <div class="flex flex-col">
         <%= label(f, :preview_text) do %>
           <%= gettext("Preview Text") %><br />
diff --git a/mix.exs b/mix.exs
index 67d70958..4c548e1f 100644
--- a/mix.exs
+++ b/mix.exs
@@ -81,7 +81,8 @@ defmodule Keila.MixProject do
       {:php_serializer, "~> 2.0"},
       {:open_api_spex, "~> 3.11"},
       {:ex_rated, "~> 2.1"},
-      {:tls_certificate_check, "~> 1.20"}
+      {:tls_certificate_check, "~> 1.20"},
+      {:mjml, "~> 4.0"}
     ]
   end
 
diff --git a/mix.lock b/mix.lock
index 3d74d8e8..7347cd61 100644
--- a/mix.lock
+++ b/mix.lock
@@ -36,6 +36,7 @@
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
   "mime": {:hex, :mime, "2.0.5", "dc34c8efd439abe6ae0343edbb8556f4d63f178594894720607772a041b04b02", [:mix], [], "hexpm", "da0d64a365c45bc9935cc5c8a7fc5e49a0e0f9932a761c55d6c52b142780a05c"},
   "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"},
+  "mjml": {:hex, :mjml, "4.0.0", "3418c1a975112766f92b8786a17d53640a4a1c8c7dedb621016a08e1e1447d20", [:mix], [{:rustler, ">= 0.0.0", [hex: :rustler, repo: "hexpm", optional: true]}, {:rustler_precompiled, "~> 0.7.0", [hex: :rustler_precompiled, repo: "hexpm", optional: false]}], "hexpm", "0886a411f9a850bc4ac6b878c9c0dbea168669176fde1f6583acf55fa8b628dd"},
   "nimble_csv": {:hex, :nimble_csv, "1.1.0", "b1dba4a86be9e03065c9de829050468e591f569100332db949e7ce71be0afc25", [:mix], [], "hexpm", "e986755bc302832cac429be6deda0fc9d82d3c82b47abefb68b3c17c9d949a3f"},
   "nimble_parsec": {:hex, :nimble_parsec, "1.2.3", "244836e6e3f1200c7f30cb56733fd808744eca61fd182f731eac4af635cc6d0b", [:mix], [], "hexpm", "c8d789e39b9131acf7b99291e93dae60ab48ef14a7ee9d58c6964f59efb570b0"},
   "oban": {:hex, :oban, "2.18.0", "092d20bfd3d70c7ecb70960f8548d300b54bb9937c7f2e56b388f3a9ed02ec68", [:mix], [{:ecto_sql, "~> 3.10", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:ecto_sqlite3, "~> 0.9", [hex: :ecto_sqlite3, repo: "hexpm", optional: true]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16", [hex: :postgrex, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "aace1eff6f8227ae38d4274af967d96f051c2f0a5152f2ef9809dd1f97866745"},
@@ -55,6 +56,7 @@
   "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"},
   "postgrex": {:hex, :postgrex, "0.19.0", "f7d50e50cb42e0a185f5b9a6095125a9ab7e4abccfbe2ab820ab9aa92b71dbab", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "dba2d2a0a8637defbf2307e8629cb2526388ba7348f67d04ec77a5d6a72ecfae"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
+  "rustler_precompiled": {:hex, :rustler_precompiled, "0.7.2", "097f657e401f02e7bc1cab808cfc6abdc1f7b9dc5e5adee46bf2fd8fdcce9ecf", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: false]}, {:rustler, "~> 0.23", [hex: :rustler, repo: "hexpm", optional: true]}], "hexpm", "7663faaeadc9e93e605164dcf9e69168e35f2f8b7f2b9eb4e400d1a8e0fe2999"},
   "solid": {:hex, :solid, "0.14.1", "61b454dc7e7bf8a56926e805a0d047f817a993c28af71c9b79b840482da1ba5a", [:mix], [{:nimble_parsec, "~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "5fda2b9176d7a71f52cca7f694d8ca75aed3f1b5b76dd175ada30b2756f96bae"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "sweet_xml": {:hex, :sweet_xml, "0.7.1", "a2cac8e2101237e617dfa9d427d44b8aff38ba6294f313ffb4667524d6b71b98", [:mix], [], "hexpm", "8bc7b7b584a6a87113071d0d2fd39fe2251cf2224ecaeed7093bdac1b9c1555f"},
diff --git a/priv/email_templates/default-mjml-content.mjml b/priv/email_templates/default-mjml-content.mjml
new file mode 100644
index 00000000..01648b95
--- /dev/null
+++ b/priv/email_templates/default-mjml-content.mjml
@@ -0,0 +1,121 @@
+<mjml>
+  <mj-head>
+    <mj-title>{{ campaign.subject }}</mj-title>
+    <mj-preview>{{ campaign.preview_text }}</mj-preview>
+    <mj-attributes>
+      <mj-text
+        font-size="15px"
+        line-height="1.6"
+        color="#111827"
+        font-family="inter, sans-serif"
+      ></mj-text>
+      <mj-button
+        font-size="15px"
+        line-height="1.6"
+        color="#111827"
+        font-family="inter, sans-serif"
+      ></mj-button>
+    </mj-attributes>
+    <mj-style inline="inline">
+      a { color: inherit; text-decoration: underline; }
+    </mj-style>
+  </mj-head>
+  <mj-body background-color="#f3f4f6">
+    <mj-section>
+      <mj-column>
+        <mj-image
+          width="175px"
+          src="https://www.keila.io/newsletter-assets/logo-with-text.png"
+        ></mj-image>
+      </mj-column>
+    </mj-section>
+    <mj-section background-color="#ffffff">
+      <mj-column>
+        <mj-text font-size="18px">
+          Hey {{contact.first_name }}, this is an
+          <strong>MJML</strong> campaign!
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section
+      background-url="https://www.keila.io/newsletter-assets/ai-elephant.jpg"
+      padding="80px 20px"
+    >
+      <mj-column></mj-column>
+      <mj-column background-color="#dcfce7">
+        <mj-text>
+          MJML is an easy way to create complex email layouts with multiple
+          columns that are fully responsive and work on a wide range of devices.
+        </mj-text>
+        <mj-text>
+          Lorem Ipsum Dolor Sit Amet Consecuteor Est Lirum Larum.
+        </mj-text>
+        <mj-button
+          background-color="#111827"
+          color="white"
+          href="https://www.keila.io"
+        >
+          Click me!
+        </mj-button>
+      </mj-column>
+    </mj-section>
+    <mj-section background-color="#ffffff" padding-bottom="0">
+      <mj-column>
+        <mj-text font-weight="bold"> Use Multiple Columns! </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section background-color="#ffffff" padding-top="0">
+      <mj-column>
+        <mj-text>Build responsive email templates with MJML.</mj-text>
+      </mj-column>
+      <mj-column>
+        <mj-text
+          >Use the <code>&lt;mj-raw&gt;</code> tag to include
+          <a href="https://shopify.github.io/liquid/" target="_blank"
+            >Liquid template</a
+          >
+          tags.</mj-text
+        >
+      </mj-column>
+      <mj-column>
+        <mj-text
+          >If you prefer simpler emails, you can also write newsletters in
+          Markdown!</mj-text
+        >
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-column>
+        <mj-text align="center"
+          >The following sections are dynamically generated with
+          Liquid:</mj-text
+        >
+      </mj-column>
+    </mj-section>
+    <mj-raw
+      >{% assign colors = "#41b8da,#8bb746,#0b3622" | split: "," %}</mj-raw
+    >
+    <mj-raw>{% for color in colors %}</mj-raw>
+    <mj-section background-color="{{ color }}" padding="20px">
+      <mj-column padding-top="20px">
+        <mj-text font-size="31px" color="#ffffff">{{ color }}</mj-text>
+      </mj-column>
+      <mj-column background-color="#ffffff">
+        <mj-text font-size="18px" font-weight="bold"
+          >Section #{{forloop.index}}</mj-text
+        >
+        <mj-text> This is a dynamically generated section. </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-raw>{% endfor %}</mj-raw>
+    <mj-section>
+      <mj-column>
+        <mj-text font-size="12.5px" align="center">
+          Powered by Keila - Open Source Newsletters
+          <br />
+          <a style="color: #292524" href="{{unsubscribe_link}}">Unsubscribe</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/priv/repo/migrations/20240524220616_add_mjml_body.exs b/priv/repo/migrations/20240524220616_add_mjml_body.exs
new file mode 100644
index 00000000..6f9a6e06
--- /dev/null
+++ b/priv/repo/migrations/20240524220616_add_mjml_body.exs
@@ -0,0 +1,9 @@
+defmodule Keila.Repo.Migrations.AddMjmlBody do
+  use Ecto.Migration
+
+  def change do
+    alter table("mailings_campaigns") do
+      add :mjml_body, :text
+    end
+  end
+end
diff --git a/priv/vendor/keila-icons/mjml.svg b/priv/vendor/keila-icons/mjml.svg
new file mode 100644
index 00000000..7621c1af
--- /dev/null
+++ b/priv/vendor/keila-icons/mjml.svg
@@ -0,0 +1,9 @@
+
+<svg xml:space="preserve" viewBox="0 0 1024 1024">
+  <g transform="translate(288 318)" fill="currentColor">
+    <circle cx="398" cy="49.5" r="49" class="st1"/>
+    <circle cx="398" cy="338.5" r="49" class="st1"/>
+    <circle cx="50" cy="194.5" r="49" class="st1"/>
+    <path d="M261.4 98.5H49.5C22.3 98.5 0 76.2 0 49S22.3-.5 49.5-.5h211.9c27.2 0 49.5 22.3 49.5 49.5s-22.3 49.5-49.5 49.5zm136.1 145h-212c-27.2 0-49.5-22.3-49.5-49.5s22.3-49.5 49.5-49.5h211.9c27.2 0 49.5 22.3 49.5 49.5.1 27.2-22.2 49.5-49.4 49.5zM261.4 388H49.5C22.3 388 0 365.7 0 338.5S22.3 289 49.5 289h211.9c27.2 0 49.5 22.3 49.5 49.5S288.6 388 261.4 388z" class="st1"/>
+  </g>
+</svg>