tess_edit 0.1.1

data/app/javascript/tess_edit/blocks/raw.js

@@ -0,0 +1,18 @@
+export default {
+  type: "raw",
+  name: "HTML",
+  icon: "code",
+  category: "content",
+  roles: ["body", "content"],
+  defaults: () => ({ data: { html: '<p style="margin:0;padding:10px 25px;">Custom HTML</p>' } }),
+  fields: [{ title: "HTML", fields: [{ key: "data.html", label: "HTML", type: "code", hint: "Copied into the email as-is. Liquid works here too." }] }],
+  render: {
+    mjml(node, { editor, context }) {
+      const html = node.data.html || ""
+      if (!editor) return `<mj-raw>${html}</mj-raw>`
+      // mj-raw output cannot carry a class, so the canvas shows it inside a text block.
+      const text = `<mj-text css-class="tess-${node.id}" padding="0px">${html}</mj-text>`
+      return context === "column" ? text : `<mj-section padding="0px"><mj-column>${text}</mj-column></mj-section>`
+    }
+  }
+}

data/app/javascript/tess_edit/blocks/root.js

@@ -0,0 +1,83 @@
+// The root of every document: renders the whole <mjml> document, with the
+// email's subject, preview text and theme in <mj-head>.
+
+export default {
+  type: "root",
+  name: "Root",
+  icon: "root",
+  roles: [],
+  accepts: ["body", "wrapper"],
+  defaults: () => ({
+    attributes: { width: "600px", "background-color": "#f3f4f6" },
+    data: {
+      subject: "",
+      preheader: "",
+      breakpoint: "480px",
+      fontFamily: "Helvetica, Arial, sans-serif",
+      fontSize: "14px",
+      lineHeight: "1.6",
+      textColor: "#111827",
+      css: ""
+    }
+  }),
+  fields: [
+    {
+      title: "Email",
+      fields: [
+        { key: "data.subject", label: "Subject", type: "text" },
+        { key: "data.preheader", label: "Preview text", type: "text", hint: "Shown after the subject in most inboxes." }
+      ]
+    },
+    {
+      title: "Layout",
+      fields: [
+        { key: "attributes.width", label: "Width", type: "size", placeholder: "600px" },
+        { key: "data.breakpoint", label: "Breakpoint", type: "size", placeholder: "480px", hint: "Below this width columns stack." },
+        { key: "attributes.background-color", label: "Background", type: "color" }
+      ]
+    },
+    {
+      title: "Theme",
+      fields: [
+        { key: "data.fontFamily", label: "Font family", type: "text" },
+        { key: "data.fontSize", label: "Font size", type: "size" },
+        { key: "data.lineHeight", label: "Line height", type: "text" },
+        { key: "data.textColor", label: "Text color", type: "color" }
+      ]
+    },
+    {
+      title: "Custom CSS",
+      collapsed: true,
+      fields: [{ key: "data.css", label: "CSS", type: "code", language: "css", hint: "Added to the email's <style> block." }]
+    }
+  ],
+  render: {
+    mjml(node, { attrs, cssClass, children, indent, escapeText, escapeAttribute }) {
+      const d = node.data || {}
+      const head = []
+      if (d.subject) head.push(`<mj-title>${escapeText(d.subject)}</mj-title>`)
+      if (d.preheader) head.push(`<mj-preview>${escapeText(d.preheader)}</mj-preview>`)
+      if (d.breakpoint) head.push(`<mj-breakpoint width="${escapeAttribute(d.breakpoint)}" />`)
+      head.push(
+        [
+          "<mj-attributes>",
+          `  <mj-all${attrs({ "font-family": d.fontFamily })} />`,
+          `  <mj-text${attrs({ "font-size": d.fontSize, "line-height": d.lineHeight, color: d.textColor })} />`,
+          "</mj-attributes>"
+        ].join("\n")
+      )
+      if (d.css) head.push(`<mj-style>\n${d.css}\n</mj-style>`)
+
+      return [
+        "<mjml>",
+        "  <mj-head>",
+        indent(head.join("\n"), 2),
+        "  </mj-head>",
+        `  <mj-body${attrs(node.attributes, cssClass(node))}>`,
+        indent(children(node, "body").join("\n"), 2),
+        "  </mj-body>",
+        "</mjml>"
+      ].join("\n")
+    }
+  }
+}

data/app/javascript/tess_edit/blocks/section.js

@@ -0,0 +1,40 @@
+import { ALIGN, background, border, padding } from "tess_edit/blocks/fields"
+import { imageField } from "tess_edit/core/media"
+
+const section = (createNode, widths) =>
+  createNode("section", { children: widths.map((width) => createNode("column", { attributes: width ? { width } : {} })) })
+
+const layouts = [
+  ["section-1", "1 column", "cols-1", [null]],
+  ["section-2", "2 columns", "cols-2", ["50%", "50%"]],
+  ["section-3", "3 columns", "cols-3", ["33.33%", "33.33%", "33.33%"]],
+  ["section-4", "4 columns", "cols-4", ["25%", "25%", "25%", "25%"]],
+  ["section-1-2", "1 : 2", "cols-12", ["33.33%", "66.67%"]],
+  ["section-2-1", "2 : 1", "cols-21", ["66.67%", "33.33%"]]
+]
+
+export default {
+  type: "section",
+  name: "Section",
+  icon: "section",
+  roles: ["body"],
+  accepts: ["column"],
+  horizontal: true,
+  defaults: () => ({ attributes: { padding: "20px 0px" } }),
+  fields: [
+    {
+      title: "Section",
+      fields: [
+        background,
+        imageField("attributes.background-url", "Background image", "data.background"),
+        { key: "attributes.full-width", label: "Full width", type: "toggle", on: "full-width", off: "" },
+        { key: "attributes.direction", label: "Column order", type: "segmented", options: [{ value: "ltr", label: "Left to right" }, { value: "rtl", label: "Right to left" }] },
+        { key: "attributes.text-align", label: "Align", type: "segmented", options: ALIGN },
+        padding
+      ]
+    },
+    border
+  ],
+  palette: layouts.map(([key, label, icon, widths]) => ({ key, label, icon, category: "layout", create: ({ createNode }) => section(createNode, widths) })),
+  render: { mjml: (node, { container }) => container("mj-section", node) }
+}

data/app/javascript/tess_edit/blocks/social.js

@@ -0,0 +1,39 @@
+import { align, padding, typography } from "tess_edit/blocks/fields"
+
+export default {
+  type: "social",
+  name: "Social",
+  icon: "social",
+  category: "content",
+  roles: ["content"],
+  defaults: () => ({
+    attributes: { mode: "horizontal", align: "center", "icon-size": "24px", padding: "10px 25px" },
+    data: {
+      elements: [
+        { name: "facebook", href: "https://facebook.com/", label: "" },
+        { name: "instagram", href: "https://instagram.com/", label: "" },
+        { name: "linkedin", href: "https://linkedin.com/", label: "" }
+      ]
+    }
+  }),
+  fields: [
+    {
+      title: "Social",
+      fields: [
+        { key: "data.elements", label: "Links", type: "list", item: [{ name: "name", label: "Network", type: "select", options: ["facebook", "instagram", "linkedin", "x", "youtube", "github", "pinterest", "web"] }, { name: "href", label: "URL" }, { name: "label", label: "Label" }], newItem: { name: "web", href: "https://", label: "" } },
+        { key: "attributes.mode", label: "Mode", type: "segmented", options: [{ value: "horizontal", label: "Horizontal" }, { value: "vertical", label: "Vertical" }] },
+        { key: "attributes.icon-size", label: "Icon size", type: "size" },
+        { key: "attributes.icon-padding", label: "Icon padding", type: "spacing" },
+        align,
+        padding
+      ]
+    },
+    typography()
+  ],
+  render: {
+    mjml(node, { element, attrs, escapeText }) {
+      const elements = (node.data.elements || []).map((item) => `  <mj-social-element${attrs({ name: item.name, href: item.href })}>${escapeText(item.label)}</mj-social-element>`)
+      return element("mj-social", node, `\n${elements.join("\n")}\n`)
+    }
+  }
+}

data/app/javascript/tess_edit/blocks/spacer.js

@@ -0,0 +1,10 @@
+export default {
+  type: "spacer",
+  name: "Spacer",
+  icon: "spacer",
+  category: "content",
+  roles: ["content"],
+  defaults: () => ({ attributes: { height: "24px" } }),
+  fields: [{ title: "Spacer", fields: [{ key: "attributes.height", label: "Height", type: "size" }, { key: "attributes.container-background-color", label: "Background", type: "color" }] }],
+  render: { mjml: (node, { element }) => element("mj-spacer", node) }
+}

data/app/javascript/tess_edit/blocks/text.js

@@ -0,0 +1,39 @@
+import { align, padding, typography } from "tess_edit/blocks/fields"
+
+const doc = (text) => ({ type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text }] }] })
+
+export function plainText(content) {
+  if (!content) return ""
+  if (content.type === "text") return content.text || ""
+  return (content.content || []).map(plainText).join(" ")
+}
+
+export default {
+  type: "text",
+  name: "Text",
+  icon: "text",
+  roles: ["content"],
+  // The canvas edits data.content with Tiptap on double-click.
+  richText: "data.content",
+  defaults: () => ({ attributes: { padding: "10px 25px" }, data: { content: doc("Write something here. Use {{ variables }} for Liquid.") } }),
+  fields: [
+    { title: "Text", fields: [align, padding, { key: "attributes.container-background-color", label: "Background", type: "color" }, { key: "attributes.height", label: "Height", type: "size" }] },
+    typography()
+  ],
+  hint: "Double-click the text on the canvas to edit it.",
+  label(node) {
+    const text = plainText(node.data.content).trim()
+    return text ? `Text · ${text.slice(0, 32)}` : "Text"
+  },
+  palette: [
+    { key: "text", label: "Text", category: "content" },
+    {
+      key: "heading",
+      label: "Heading",
+      icon: "heading",
+      category: "content",
+      create: ({ createNode }) => createNode("text", { attributes: { "font-size": "24px", "font-weight": "700", "line-height": "1.3" }, data: { content: doc("Heading") } })
+    }
+  ],
+  render: { mjml: (node, { element, richText }) => element("mj-text", node, richText(node.data.content)) }
+}

data/app/javascript/tess_edit/blocks/wrapper.js

@@ -0,0 +1,24 @@
+import { background, border, padding } from "tess_edit/blocks/fields"
+import { imageField } from "tess_edit/core/media"
+
+export default {
+  type: "wrapper",
+  name: "Wrapper",
+  icon: "wrapper",
+  category: "layout",
+  roles: ["wrapper"],
+  accepts: ["body"],
+  defaults: () => ({ attributes: { padding: "20px 0px", "background-color": "#ffffff" } }),
+  fields: [
+    { title: "Wrapper", fields: [background, imageField("attributes.background-url", "Background image", "data.background"), { key: "attributes.full-width", label: "Full width", type: "toggle", on: "full-width", off: "" }, padding] },
+    border
+  ],
+  palette: [
+    {
+      key: "wrapper",
+      label: "Wrapper",
+      create: ({ createNode }) => createNode("wrapper", { children: [createNode("section", { children: [createNode("column")] })] })
+    }
+  ],
+  render: { mjml: (node, { container }) => container("mj-wrapper", node) }
+}