tess_edit 0.1.1

data/app/javascript/tess_edit/core/document.js

@@ -0,0 +1,192 @@
+// The document is a plain JSON tree:
+//   { id, type, attributes: {}, data: {}, children: [] }
+// `attributes` map one-to-one onto MJML attributes, `data` holds everything else
+// (rich text, Liquid expressions, link lists). All functions here are pure apart
+// from the mutating helpers, which change the tree they are given in place.
+
+import { getBlock, paletteItem, typesForRoles } from "tess_edit/core/registry"
+
+export const VERSION = 1
+
+export function uid() {
+  return "b" + Math.random().toString(36).slice(2, 9)
+}
+
+export function clone(value) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+// Builds a node of `type` with the block's defaults; `overrides` are merged in.
+export function createNode(type, overrides = {}) {
+  const definition = getBlock(type)
+  if (!definition) throw new Error(`Unknown block type: ${type}`)
+  const defaults = definition.defaults ? definition.defaults() : {}
+  return {
+    id: uid(),
+    type,
+    attributes: { ...(defaults.attributes || {}), ...(overrides.attributes || {}) },
+    data: { ...(defaults.data || {}), ...(overrides.data || {}) },
+    children: overrides.children || defaults.children || []
+  }
+}
+
+export function createDocument() {
+  return { version: VERSION, ...createNode("root") }
+}
+
+// Calls fn(node, parent, index, depth) for every node, depth first.
+export function walk(node, fn, parent = null, index = 0, depth = 0) {
+  if (fn(node, parent, index, depth) === false) return
+  ;(node.children || []).forEach((child, i) => walk(child, fn, node, i, depth + 1))
+}
+
+export function find(doc, id) {
+  let result = null
+  walk(doc, (node, parent, index) => {
+    if (result) return false
+    if (node.id === id) {
+      result = { node, parent, index }
+      return false
+    }
+  })
+  return result
+}
+
+// Ancestors of `id`, nearest first (not including the node itself).
+export function ancestors(doc, id) {
+  const path = []
+  const visit = (node, trail) => {
+    if (node.id === id) {
+      path.push(...trail.slice().reverse())
+      return true
+    }
+    return (node.children || []).some((child) => visit(child, [...trail, node]))
+  }
+  visit(doc, [])
+  return path
+}
+
+export function isDescendant(doc, ancestorId, id) {
+  return ancestors(doc, id).some((node) => node.id === ancestorId)
+}
+
+// The roles that may be placed directly inside the node with `parentId`.
+// Loop and Condition ("inherit") are transparent: they accept what their
+// nearest other ancestor accepts, except columns.
+export function acceptedRoles(doc, parentId) {
+  const hit = find(doc, parentId)
+  if (!hit) return []
+  const accepts = getBlock(hit.node.type)?.accepts
+  if (accepts !== "inherit") return accepts || []
+  const owner = ancestors(doc, parentId).find((node) => getBlock(node.type)?.accepts !== "inherit")
+  return (owner ? getBlock(owner.type).accepts : getBlock("root").accepts).filter((role) => role !== "column")
+}
+
+// The block types that may be placed directly inside the node with `parentId`.
+export function accepted(doc, parentId) {
+  return typesForRoles(acceptedRoles(doc, parentId))
+}
+
+export function canInsert(doc, parentId, type) {
+  return accepted(doc, parentId).includes(type)
+}
+
+// Whether children of `parentId` flow horizontally (columns in a section).
+export function isHorizontal(doc, parentId) {
+  const hit = find(doc, parentId)
+  return hit ? !!getBlock(hit.node.type)?.horizontal : false
+}
+
+// Gives a node and all of its descendants fresh ids, for duplicating and pasting.
+export function renumber(node) {
+  const copy = clone(node)
+  walk(copy, (n) => {
+    n.id = uid()
+  })
+  return copy
+}
+
+export function insert(doc, parentId, index, node) {
+  const hit = find(doc, parentId)
+  if (!hit) throw new Error(`No node ${parentId}`)
+  hit.node.children ||= []
+  const at = Math.max(0, Math.min(index ?? hit.node.children.length, hit.node.children.length))
+  hit.node.children.splice(at, 0, node)
+  return node
+}
+
+export function remove(doc, id) {
+  const hit = find(doc, id)
+  if (!hit || !hit.parent) return null
+  hit.parent.children.splice(hit.index, 1)
+  return hit
+}
+
+// Moves node `id` to position `index` in `parentId`. `index` is counted in the
+// target's children as they are before the move.
+export function move(doc, id, parentId, index) {
+  if (id === parentId || isDescendant(doc, id, parentId)) return false
+  const hit = find(doc, id)
+  if (!hit || !hit.parent) return false
+  let at = index
+  if (hit.parent.id === parentId && hit.index < index) at -= 1
+  hit.parent.children.splice(hit.index, 1)
+  insert(doc, parentId, at, hit.node)
+  return true
+}
+
+export function duplicate(doc, id) {
+  const hit = find(doc, id)
+  if (!hit || !hit.parent) return null
+  const copy = renumber(hit.node)
+  hit.parent.children.splice(hit.index + 1, 0, copy)
+  return copy
+}
+
+// Sets a value on a node. `key` is "attributes.padding" or "data.subject".
+// An empty string removes an attribute, so MJML falls back to its default.
+export function setValue(doc, id, key, value) {
+  const hit = find(doc, id)
+  if (!hit) return
+  const [scope, name] = key.split(".")
+  hit.node[scope] ||= {}
+  if (scope === "attributes" && (value === "" || value === null || value === undefined)) {
+    delete hit.node[scope][name]
+  } else {
+    hit.node[scope][name] = value
+  }
+}
+
+export function getValue(node, key) {
+  const [scope, name] = key.split(".")
+  return node[scope]?.[name]
+}
+
+// Light validation of a document read from storage or an import.
+export function normalize(input) {
+  const doc = typeof input === "string" ? JSON.parse(input) : clone(input)
+  // The root block was called "page" before; such documents still load.
+  if (doc?.type === "page") doc.type = "root"
+  if (!doc || doc.type !== "root") throw new Error("Not a TessEdit document: the top node must be the root block")
+  walk(doc, (node) => {
+    if (!getBlock(node.type)) throw new Error(`Unknown block type: ${node.type}`)
+    node.id ||= uid()
+    node.attributes ||= {}
+    node.data ||= {}
+    node.children ||= []
+  })
+  doc.version ||= VERSION
+  return doc
+}
+
+// The node (or small tree) a Blocks panel tile creates.
+export function createFromPalette(key) {
+  const item = paletteItem(key)
+  if (!item) throw new Error(`Unknown palette item: ${key}`)
+  return item.create({ createNode })
+}
+
+// The block type of the node a tile creates, used to check where it may go.
+export function itemType(key) {
+  return paletteItem(key)?.type || null
+}

data/app/javascript/tess_edit/core/history.js

@@ -0,0 +1,46 @@
+// Undo/redo over whole-document snapshots. Changes with the same coalesce key
+// within a second (typing in one field) become a single undo step.
+
+export class History {
+  constructor(limit = 100) {
+    this.limit = limit
+    this.undoStack = []
+    this.redoStack = []
+    this.lastKey = null
+    this.lastTime = 0
+  }
+
+  record(snapshot, coalesceKey = null) {
+    const now = Date.now()
+    const coalesce = coalesceKey && coalesceKey === this.lastKey && now - this.lastTime < 1000
+    if (!coalesce) {
+      this.undoStack.push(snapshot)
+      if (this.undoStack.length > this.limit) this.undoStack.shift()
+    }
+    this.redoStack = []
+    this.lastKey = coalesceKey
+    this.lastTime = now
+  }
+
+  undo(current) {
+    if (!this.undoStack.length) return null
+    this.redoStack.push(current)
+    this.lastKey = null
+    return this.undoStack.pop()
+  }
+
+  redo(current) {
+    if (!this.redoStack.length) return null
+    this.undoStack.push(current)
+    this.lastKey = null
+    return this.redoStack.pop()
+  }
+
+  get canUndo() {
+    return this.undoStack.length > 0
+  }
+
+  get canRedo() {
+    return this.redoStack.length > 0
+  }
+}

data/app/javascript/tess_edit/core/lock.js

@@ -0,0 +1,36 @@
+// Locking a document, for editing one part of a design that is otherwise
+// fixed, such as a template's own content in its layout:
+//
+//   { "except": ["content"], "fields": ["data.subject", "data.preheader"] }
+//
+// With a lock, only what is inside a block whose type is in `except` can
+// change: those blocks take new children, and everything below them can be
+// edited, moved, duplicated and deleted. The `except` blocks themselves stay
+// where they are. Of the root, only the listed `fields` can change. Without a
+// lock (null) everything can change.
+
+import { ancestors, find } from "tess_edit/core/document"
+
+export function parseLock(value) {
+  if (!value) return null
+  const lock = typeof value === "string" ? JSON.parse(value) : value
+  return { except: lock.except || [], fields: lock.fields || [] }
+}
+
+// Whether the node may be edited, moved, duplicated or deleted.
+export function isFree(doc, lock, id) {
+  if (!lock) return true
+  return ancestors(doc, id).some((node) => lock.except.includes(node.type))
+}
+
+// Whether blocks may be added to, or moved into, the node.
+export function canFill(doc, lock, parentId) {
+  if (!lock) return true
+  const hit = find(doc, parentId)
+  return !!hit && (lock.except.includes(hit.node.type) || isFree(doc, lock, parentId))
+}
+
+export function canEditField(doc, lock, id, key) {
+  if (!lock || isFree(doc, lock, id)) return true
+  return id === doc.id && lock.fields.includes(key)
+}

data/app/javascript/tess_edit/core/media.js

@@ -0,0 +1,54 @@
+// Images to choose from, kept by the host app. The editor's mediaUrl answers:
+//
+//   GET                                → { images: [{ id, url, name }] }
+//   POST multipart/form-data, "file"   → { id, url, name }, or { errors: [...] }
+//
+// `id` is the host's own reference to the image, `url` is where the email
+// loads it from. An image field (type "image") stores both: the URL in its
+// key, the id and where the image comes from in its `image` and `source` keys.
+
+import { getValue } from "tess_edit/core/document"
+
+function csrfHeaders() {
+  const token = document.querySelector("meta[name='csrf-token']")?.content
+  return token ? { "X-CSRF-Token": token } : {}
+}
+
+async function json(response, action) {
+  const result = (response.headers.get("Content-Type") || "").includes("json") ? await response.json() : null
+  if (!response.ok || !result) throw new Error(result?.errors?.join(", ") || `${action} failed (${response.status} ${response.statusText})`)
+  return result
+}
+
+export async function fetchMedia(url) {
+  const response = await fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" })
+  return (await json(response, "Loading the images")).images || []
+}
+
+export async function uploadMedia(url, file) {
+  const body = new FormData()
+  body.append("file", file)
+  const response = await fetch(url, { method: "POST", headers: { Accept: "application/json", ...csrfHeaders() }, body, credentials: "same-origin" })
+  return json(response, "The upload")
+}
+
+// The Image block's image field
+export const IMAGE_FIELD = { key: "attributes.src", image: "data.image", source: "data.source" }
+
+// An image field for an image attribute, e.g. a background:
+//   imageField("attributes.background-url", "Background image", "data.background")
+export function imageField(key, label, image) {
+  return { key, label, type: "image", image, source: `${image}Source` }
+}
+
+// The image fields of a block definition
+export function imageFields(definition) {
+  return (definition?.fields || []).flatMap((group) => group.fields || []).filter((field) => field.type === "image")
+}
+
+// Where a field's image comes from: "upload" (one of the host's images) or
+// "web" (any URL). Without a mediaUrl there are only web images.
+export function imageSource(node, editor, field = IMAGE_FIELD) {
+  if (!editor?.media?.enabled) return "web"
+  return getValue(node, field.source) || (getValue(node, field.image) ? "upload" : "web")
+}

data/app/javascript/tess_edit/core/registry.js

@@ -0,0 +1,94 @@
+// The block registry. Every block, built-in or added by a host app, is one
+// definition registered here:
+//
+//   registerBlock({
+//     type: "product",                 // stored in the document JSON
+//     name: "Product",                 // shown in Layers, Inspect and on the canvas
+//     icon: "image",                   // a built-in icon name, or SVG markup for a 24×24 viewBox
+//     roles: ["content"],              // where it may be placed, see below
+//     accepts: undefined,              // roles it takes as children, "inherit", or undefined for a leaf
+//     defaults: () => ({ attributes: {}, data: {} }),
+//     fields: [{ title: "Product", fields: [{ key: "data.sku", label: "SKU", type: "text" }] }],
+//                                      // a field's visible: (node, editor) => boolean shows it only when it applies;
+//                                      // imageField(key, label, idKey) (core/media.js) makes an image field;
+//                                      // a "code" field takes language: "html" (default) or "css"
+//     hint: "Shown at the top of Inspect.",
+//     label: (node) => `Product · ${node.data.sku}`,   // optional, for Layers and the canvas
+//     richText: "data.content",        // optional: a Tiptap JSON value edited on the canvas by double-click
+//     palette: [{ key, label, icon, category, create: ({ createNode }) => node }],  // optional
+//     render: { mjml: (node, ctx) => "<mj-text …>" } // ctx: see export/mjml.js
+//   })
+//
+// Roles: "body" (inside the page or a wrapper: sections, heroes), "wrapper",
+// "column" (inside a section) and "content" (inside a column or hero). A
+// container accepts the roles in its `accepts`; Loop and Condition use
+// "inherit" and accept what their nearest other container accepts.
+//
+// Without a `palette`, a block with a `category` gets one tile in the Blocks
+// panel; `palette: []` gives it none. Registering a type again replaces it.
+
+import { builtinBlocks, builtinCategories } from "tess_edit/blocks/builtin"
+
+const definitions = new Map()
+const categoryList = new Map()
+
+export function registerCategory({ key, label, order = 100 }) {
+  if (!key || !label) throw new Error("A category needs a key and a label")
+  categoryList.set(key, { key, label, order })
+}
+
+export function registerBlock(definition) {
+  const { type, name, render } = definition || {}
+  if (!type || typeof type !== "string") throw new Error("A block needs a type")
+  if (!name) throw new Error(`Block ${type} needs a name`)
+  if (typeof render?.mjml !== "function") throw new Error(`Block ${type} needs render.mjml(node, ctx)`)
+  if (type !== "root" && !(definition.roles || []).length) throw new Error(`Block ${type} needs roles, e.g. ["content"]`)
+
+  const palette = (definition.palette ?? (definition.category ? [{ key: type, label: name, icon: definition.icon, category: definition.category }] : [])).map((item) => ({
+    icon: definition.icon,
+    category: definition.category,
+    create: ({ createNode }) => createNode(type),
+    ...item,
+    type
+  }))
+  definitions.set(type, { roles: [], ...definition, palette })
+  return definitions.get(type)
+}
+
+export function getBlock(type) {
+  return definitions.get(type)
+}
+
+export function blockTypes() {
+  return [...definitions.keys()]
+}
+
+export function isContainer(type) {
+  return !!getBlock(type)?.accepts
+}
+
+// The block types that may go where the given roles are accepted.
+export function typesForRoles(roles) {
+  return [...definitions.values()].filter((definition) => definition.roles.some((role) => roles.includes(role))).map((definition) => definition.type)
+}
+
+export function categories() {
+  return [...categoryList.values()].sort((a, b) => a.order - b.order)
+}
+
+// Tiles for the Blocks panel, in registration order.
+export function paletteItems() {
+  return [...definitions.values()].flatMap((definition) => definition.palette)
+}
+
+export function paletteItem(key) {
+  return paletteItems().find((item) => item.key === key)
+}
+
+export function label(node) {
+  const definition = getBlock(node.type)
+  return definition?.label?.(node) || definition?.name || node.type
+}
+
+builtinCategories.forEach(registerCategory)
+builtinBlocks.forEach(registerBlock)

data/app/javascript/tess_edit/core/starter.js

@@ -0,0 +1,89 @@
+// A sample document for new, empty editors and the demo page.
+
+import { createDocument, createNode } from "tess_edit/core/document"
+
+const paragraph = (...content) => ({ type: "paragraph", content })
+const text = (value, marks) => (marks ? { type: "text", text: value, marks } : { type: "text", text: value })
+const doc = (...content) => ({ type: "doc", content })
+
+const section = (attributes, ...columns) => createNode("section", { attributes, children: columns })
+const column = (attributes, ...children) => createNode("column", { attributes, children })
+
+export function starterDocument() {
+  const page = createDocument()
+  page.data.subject = "Your order {{ order.number }}"
+  page.data.preheader = "Thanks for shopping with us, {{ customer.first_name }}."
+
+  page.children = [
+    section(
+      { padding: "24px 0px 8px" },
+      column(
+        {},
+        createNode("text", {
+          attributes: { align: "center", "font-size": "20px", "font-weight": "700", "letter-spacing": "1px" },
+          data: { content: doc(paragraph(text("ACME STORE"))) }
+        })
+      )
+    ),
+    section(
+      { "background-color": "#ffffff", padding: "32px 0px", "border-radius": "8px" },
+      column(
+        {},
+        createNode("text", {
+          attributes: { "font-size": "26px", "font-weight": "700", "line-height": "1.3" },
+          data: { content: doc(paragraph(text("Thanks for your order, {{ customer.first_name }}!"))) }
+        }),
+        createNode("text", {
+          data: {
+            content: doc(
+              paragraph(text("We've received order "), text("{{ order.number }}", [{ type: "bold" }]), text(" and will let you know when it ships.")),
+              paragraph(),
+              paragraph(text("Here's what you ordered:"))
+            )
+          }
+        }),
+        createNode("loop", {
+          data: { variable: "line", collection: "order.lines" },
+          children: [
+            createNode("text", {
+              attributes: { padding: "4px 25px" },
+              data: { content: doc(paragraph(text("{{ line.quantity }} × {{ line.name }} — {{ line.total | money }}"))) }
+            })
+          ]
+        }),
+        createNode("divider", { attributes: { padding: "16px 25px" } }),
+        createNode("button", { attributes: { href: "{{ order.url }}" }, data: { content: "View your order" } })
+      )
+    ),
+    createNode("condition", {
+      data: { expression: "customer.orders_count == 1" },
+      children: [
+        section(
+          { padding: "24px 0px 0px" },
+          column(
+            { width: "50%" },
+            createNode("image", { attributes: { src: "https://placehold.co/600x400/dbeafe/1e3a8a.png?text=Welcome", padding: "0px 12px 0px 25px", "border-radius": "6px" } })
+          ),
+          column(
+            { width: "50%", "vertical-align": "middle" },
+            createNode("text", {
+              data: { content: doc(paragraph(text("Welcome!", [{ type: "bold" }])), paragraph(text("This is your first order. Here's 10% off the next one with code WELCOME10."))) }
+            })
+          )
+        )
+      ]
+    }),
+    section(
+      { padding: "24px 0px" },
+      column(
+        {},
+        createNode("social"),
+        createNode("text", {
+          attributes: { align: "center", "font-size": "12px", color: "#6b7280" },
+          data: { content: doc(paragraph(text("ACME Store · Main Street 1 · Amsterdam")), paragraph(text("Unsubscribe", [{ type: "link", attrs: { href: "{{ unsubscribe_url }}" } }]))) }
+        })
+      )
+    )
+  ]
+  return page
+}

data/app/javascript/tess_edit/export/compile.js

@@ -0,0 +1,28 @@
+// MJML → HTML on the server. The editor posts the MJML to the engine's compile
+// endpoint, which compiles it with MRML (TessEdit.compile in Ruby), so the
+// canvas shows the same HTML the host app sends.
+//
+// Resolves to { html, errors }: html is null when the MJML could not be
+// compiled or the request failed, with the reasons in errors. Resolves to null
+// when the request was aborted through options.signal.
+
+export const COMPILE_URL = "/tess_edit/compile"
+
+export async function compile(mjml, { url = COMPILE_URL, signal } = {}) {
+  const token = document.querySelector("meta[name='csrf-token']")?.content
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Accept: "application/json", ...(token ? { "X-CSRF-Token": token } : {}) },
+      body: JSON.stringify({ mjml }),
+      credentials: "same-origin",
+      signal
+    })
+    const result = (response.headers.get("Content-Type") || "").includes("json") ? await response.json() : null
+    if (!result) return { html: null, errors: [`The compile request failed (${response.status} ${response.statusText})`] }
+    return { html: result.html ?? null, errors: result.errors || [] }
+  } catch (error) {
+    if (error.name === "AbortError") return null
+    return { html: null, errors: [`The compile request failed: ${error.message}`] }
+  }
+}

data/app/javascript/tess_edit/export/mjml.js

@@ -0,0 +1,116 @@
+// JSON document → MJML. Each block renders itself through its render.mjml(node,
+// ctx) hook (see blocks/*.js); this file holds the shared helpers in `ctx`.
+//
+// With { editor: true } the output is meant for the editing canvas: every
+// element gets a css-class "tess-<id>" so clicks map back to blocks, empty
+// containers get a placeholder ("tessph-<id>"), and Liquid tags are left out so
+// loops and conditions show their content once.
+//
+// Without it, Loop and Condition blocks emit their Liquid tags inside <mj-raw>,
+// which MJML copies into the HTML unchanged, so Liquid can run on the compiled HTML.
+//
+// The ctx a block's render.mjml gets:
+//   editor              true when rendering for the canvas
+//   context             where the node sits: "body" (mj-body, mj-wrapper),
+//                       "section" (mj-section) or "column" (mj-column, mj-hero)
+//   attrs(a, extra)     ` name="value"` pairs, empty values left out
+//   cssClass(node)      { "css-class": "tess-<id> <the block's own css-class>" }
+//                       in the editor, {} otherwise
+//   element(tag, node, inner?)  <tag> with the node's attributes and class;
+//                       self-closing without inner
+//   container(tag, node)        <tag> around the node's rendered children
+//   children(node, context?)    the children's MJML, as an array
+//   liquid(node, open, close)   children wrapped in Liquid tags (not in the editor)
+//   indent(text, level), escapeText, escapeAttribute, richText(content)
+
+import { getBlock } from "tess_edit/core/registry"
+import { escapeAttribute, escapeText, richTextToHtml } from "tess_edit/export/richtext"
+
+const PLACEHOLDER_COLOR = "#94a3b8"
+
+function attrs(attributes = {}, extra = {}) {
+  return Object.entries({ ...attributes, ...extra })
+    .filter(([, value]) => value !== undefined && value !== null && value !== "")
+    .map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`)
+    .join("")
+}
+
+function indent(text, level) {
+  const pad = "  ".repeat(level)
+  return text
+    .split("\n")
+    .map((line) => (line ? pad + line : line))
+    .join("\n")
+}
+
+// What a container's children render as, from the roles it accepts.
+function childContext(definition, context) {
+  const accepts = definition?.accepts
+  if (!Array.isArray(accepts)) return context
+  if (accepts.includes("column")) return "section"
+  if (accepts.includes("content")) return "column"
+  return "body"
+}
+
+class Renderer {
+  constructor(options) {
+    this.editor = !!options.editor
+  }
+
+  // The marker class goes first, before the block's own css-class, so the
+  // canvas finds blocks by the start of the class attribute.
+  cssClass(node) {
+    if (!this.editor) return {}
+    return { "css-class": [`tess-${node.id}`, node.attributes?.["css-class"]].filter(Boolean).join(" ") }
+  }
+
+  children(node, context) {
+    const kids = node.children || []
+    if (!kids.length && this.editor) return [this.placeholder(node, context)]
+    return kids.map((child) => this.node(child, context))
+  }
+
+  placeholder(node, context) {
+    const text = context === "body" ? "Drop a section here" : context === "section" ? "Drop a column here" : "Drop content here"
+    const mjText = `<mj-text css-class="tessph-${node.id}" align="center" color="${PLACEHOLDER_COLOR}" font-size="13px" padding="18px 25px">${text}</mj-text>`
+    if (context === "column") return mjText
+    if (context === "section") return `<mj-column css-class="tessph-${node.id}">\n  ${mjText}\n</mj-column>`
+    return `<mj-section css-class="tessph-${node.id}">\n  <mj-column>\n    ${mjText}\n  </mj-column>\n</mj-section>`
+  }
+
+  context(context) {
+    return {
+      editor: this.editor,
+      context,
+      attrs,
+      indent,
+      escapeText,
+      escapeAttribute,
+      richText: richTextToHtml,
+      cssClass: (node) => this.cssClass(node),
+      children: (node, childCtx) => this.children(node, childCtx ?? childContext(getBlock(node.type), context)),
+      element: (tag, node, inner) => {
+        const open = `<${tag}${attrs(node.attributes, this.cssClass(node))}`
+        return inner === undefined ? `${open} />` : `${open}>${inner}</${tag}>`
+      },
+      container: (tag, node) => {
+        const inner = this.children(node, childContext(getBlock(node.type), context)).join("\n")
+        return `<${tag}${attrs(node.attributes, this.cssClass(node))}>\n${indent(inner, 1)}\n</${tag}>`
+      },
+      liquid: (node, open, close) => {
+        const inner = this.children(node, context)
+        if (this.editor) return inner.join("\n")
+        return [`<mj-raw>${open}</mj-raw>`, ...inner, `<mj-raw>${close}</mj-raw>`].join("\n")
+      }
+    }
+  }
+
+  node(node, context) {
+    const render = getBlock(node.type)?.render?.mjml
+    return render ? render(node, this.context(context)) : ""
+  }
+}
+
+export function toMjml(doc, options = {}) {
+  return new Renderer(options).node(doc, null)
+}