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

Author: wmnnd

assets/js/campaign-editors/mjml/helpers.js

@@ -0,0 +1,21 @@
+import { acceptCompletion, completionStatus } from "@codemirror/autocomplete"
+import { indentLess, indentMore } from "@codemirror/commands"
+
+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 }))
+    }
+  })
+}

assets/js/campaign-editors/mjml/index.js

@@ -0,0 +1,50 @@
+import { defaultKeymap } 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 { indentAndAutocompleteWithTab, saveUpdates } from "./helpers.js"
+import tags from "./tags.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 }
+      )
+    })
+  }
+}