tess_edit 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 50c19876ccbb3401a38a0f73b8ae1806e80f4c79cccdd98a5242b7dc8d5e87b9
+  data.tar.gz: 5178aa9ca3d9ea111742b0aadd623b35fb453921bdd6a15b91d2a150d291a77b
+SHA512:
+  metadata.gz: b7dc4f718aa387537e33c7a8b02cae8dfd5ca57a0e0e9681270bdb2b1f6e52bca4e63bdd914ad9d15cbfece7217964cc16366b45e12f89eb54068efe849af286
+  data.tar.gz: edf5c6f4d1c0c164ab355caf88311ab4992ce1615ccd612c751adda75c575c693453b480ad212ac8527456a6d7058ba76ae750b6c615965f1b75527de7a4e307

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Tom de Grunt
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,225 @@
+# TessEdit
+
+TessEdit is a drag-and-drop email editor for Rails, written in plain JavaScript with Stimulus. You build an email from blocks; the editor stores the design as JSON and exports [MJML](https://mjml.io) and responsive HTML. Blocks can hold [Liquid](https://shopify.github.io/liquid/), which survives into the HTML so it can be rendered at send time.
+
+The interface follows familiar layout: blocks and a layers tree on the left, the email in the middle, and Inspect, with the selected block's settings, on the right.
+
+![TessEdit interface](docs/overview.png)
+
+## Features
+
+- Blocks: Section (1-4 columns), Column, Wrapper, Hero, Text, Heading, Image, Button, Divider, Spacer, Social, Navbar and raw HTML.
+- Liquid blocks: **Loop** (`{% for line in order.lines %}`) and **Condition** (`{% if order.total > 100 %}`) wrap other blocks.
+- Drag from the Blocks panel onto the canvas or into the Layers tree; move blocks on the canvas (drag handle) or in the tree; plus buttons and empty-column placeholders open an "Add block" menu.
+- Rich text editing on the canvas with [Tiptap](https://tiptap.dev): bold, italic, underline, strikethrough, colour, links (Liquid allowed in the URL), alignment, lists and headings.
+- Undo/redo, duplicate, delete, keyboard shortcuts (⌘Z, ⇧⌘Z, ⌘D, Delete, Enter to edit text, Esc).
+- Desktop and mobile preview, and a preview of the HTML as sent.
+- Panels on both sides, or combined as tabs in one sidebar on the left or right to give the canvas more room.
+- Code dialog to view, copy or download the JSON, MJML and HTML, and to load JSON.
+
+## Installation
+
+```ruby
+gem "tess_edit", github: "tdegrunt/tess_edit"
+```
+
+The engine adds its pins to your import map. Mount it for the compile endpoint (see [Compiling](#compiling)):
+
+```ruby
+# config/routes.rb
+mount TessEdit::Engine => "/tess_edit"
+```
+
+Register the controller with your Stimulus application:
+
+```js
+// app/javascript/application.js
+import { application } from "controllers/application"
+import { registerTessEdit } from "tess_edit"
+
+registerTessEdit(application)
+```
+
+### Tailwind CSS 4 required
+
+The editor builds its interface with Tailwind classes, so it needs Tailwind CSS 4 through [`tailwindcss-rails`](https://github.com/rails/tailwindcss-rails) 4.3 or later. Tailwind 3 is not supported.
+
+```ruby
+gem "tailwindcss-rails", ">= 4.3"
+```
+
+Import the editor's styles after Tailwind itself:
+
+```css
+/* app/assets/tailwind/application.css */
+@import "tailwindcss";
+@import "../builds/tailwind/tess_edit";
+```
+
+`app/assets/builds/tailwind/tess_edit.css` is generated by `bin/rails tailwindcss:build` (and `tailwindcss:watch`, `bin/dev`) from the gem's `app/assets/tailwind/tess_edit/engine.css`. It points to wherever the gem is installed, so the line above is the same on every machine. Leave `app/assets/builds` out of version control, as Rails apps do by default. If the import fails because the file is missing, run `bin/rails tailwindcss:engines` or a build once.
+
+## Usage
+
+Give the controller an element with a height and, optionally, hidden inputs to keep up to date:
+
+```erb
+<div data-controller="tess-edit" style="height: 80vh">
+  <%= form.hidden_field :json, data: { tess_edit_target: "jsonInput" } %>
+  <%= form.hidden_field :mjml, data: { tess_edit_target: "mjmlInput" } %>
+  <%= form.hidden_field :html, data: { tess_edit_target: "htmlInput" } %>
+</div>
+```
+
+The editor loads the document from the `jsonInput` (or from `data-tess-edit-document-value`). With neither, it starts with a sample email; set `data-tess-edit-sample-value="false"` to start with an empty email.
+
+`data-tess-edit-panels-value` sets the default panel layout: `split` (Blocks and Layers on the left, Inspect on the right, the default), `left` or `right` (Blocks, Layers and Inspect as tabs in one sidebar on that side). People can switch with the buttons in the top bar; their choice is remembered in the browser. When the editor is narrower than 1000px, it puts all panels on the left so the canvas keeps its room, and goes back to the chosen layout when it is wide enough again.
+
+Every change updates the inputs and dispatches `tess-edit:change` with `{ json, mjml, html, errors, document }` in `event.detail`. When the MJML can't be compiled, `html` is empty and `errors` says why; the editor shows the reason under the canvas. The controller instance is available as `element.tessEdit`, with `getDocument()`, `setDocument(json)` and `export()`.
+
+### What gets stored
+
+| Field | Contents |
+|---|---|
+| `json` | The block tree. The source of truth; load it back into the editor. |
+| `mjml` | MJML generated from the JSON. Loops and conditions are `<mj-raw>{% ... %}</mj-raw>`. |
+| `html` | The MJML compiled to HTML on the server, with Liquid left in place. |
+
+Render the HTML with Liquid when sending. A host app can also store only the JSON or MJML and compile on its own with `TessEdit.compile(mjml)`.
+
+### Compiling
+
+The editor turns the JSON into MJML in the browser and has the server compile the MJML to HTML, with [MRML](https://github.com/jdrouet/mrml) (the `mrml` gem, precompiled, no Node or Rust needed). The canvas, the preview and the `html` input all come from the same compiler the host app uses when it sends:
+
+```ruby
+result = TessEdit.compile(mjml)
+result.html   # nil when the MJML can't be parsed
+result.errors # [] or the reasons
+```
+
+The editor posts to `/tess_edit/compile`, debounced, with the page's CSRF token (`csrf_meta_tags`). Mounted elsewhere, give the editor the path with `data-tess-edit-compile-url-value`. The endpoint's controller inherits from `ActionController::Base`; make it inherit from one of your controllers so it sits behind the same sign-in and authorization:
+
+```ruby
+# config/initializers/tess_edit.rb
+TessEdit.parent_controller = "Admin::BaseController"
+``` Liquid inside HTML attributes, such as a button link of `{{ order.url }}`, has its double quotes changed to single quotes, which Liquid treats the same.
+
+### The document format
+
+```json
+{
+  "version": 1, "id": "b1x2y3z", "type": "root",
+  "attributes": { "width": "600px", "background-color": "#f3f4f6" },
+  "data": { "subject": "...", "preheader": "...", "fontFamily": "..." },
+  "children": [
+    { "id": "...", "type": "section", "attributes": { "padding": "20px 0px" }, "data": {}, "children": [
+      { "id": "...", "type": "column", "attributes": {}, "data": {}, "children": [
+        { "id": "...", "type": "text", "attributes": { "align": "center" }, "data": { "content": { "type": "doc", "content": [] } }, "children": [] }
+      ] }
+    ] }
+  ]
+}
+```
+
+The top node is the `root` block, which renders the `<mjml>` document with the subject, preview text and theme. Documents from before its rename, with `"type": "page"`, still load. `attributes` map onto MJML attributes; `data` holds everything else. Text content is Tiptap (ProseMirror) JSON, so other renderers, such as a PDF renderer, can walk it.
+
+### Locking a layout
+
+To let people fill in one part of a design that is otherwise fixed, such as a template's own content inside a shared layout, give the editor a lock:
+
+```erb
+<div data-controller="tess-edit"
+  data-tess-edit-lock-value='<%= {except: ["content"], fields: ["data.subject", "data.preheader"]}.to_json %>'>
+```
+
+Only what is inside blocks of the types in `except` can change: those blocks take new blocks, and everything in them can be edited, moved, duplicated and deleted. The blocks themselves stay where they are. Of the root, only the listed `fields` can change. Everything else still shows on the canvas and can be selected, with its settings disabled in Inspect and a lock in Layers. A tile clicked while a locked block is selected goes at the end of the first block it is allowed in, and the Code dialog shows the JSON without loading it. The editor still stores the whole document; taking the open part out of it is up to the host app. The `except` types are usually a custom block, like the demo's Content block in `test/dummy/app/javascript/blocks/content.js`.
+
+### Images
+
+By default images are URLs. To let people choose from your app's images and upload new ones, give the editor an endpoint with `data-tess-edit-media-url-value`. Every image then has a source, Uploaded (a dropdown of your images with an Upload button) or Web (a URL): the Image block's image and the background images of heroes, sections and wrappers. New Image blocks start as Uploaded. An image file dragged from the desktop onto the canvas is uploaded and put in the nearest block with an image, an Image block or else the background of the hero, section or wrapper it's dropped on, and shows straight away while it uploads.
+
+The endpoint answers two requests, both as JSON:
+
+- `GET`: the images to choose from, `{"images": [{"id": "…", "url": "https://…", "name": "logo.png"}]}`
+- `POST` (multipart, the file in `file`, with the page's CSRF token): the uploaded image, `{"id": "…", "url": "…", "name": "…"}`, or `{"errors": ["…"]}` with an error status
+
+A block stores the image's `url` in the attribute (`src`, `background-url`) and its `id` next to it in `data`: `data.image` for the Image block, `data.background` for backgrounds. How images are stored and who may upload them is up to your app; the dummy app's `MediaController` is a minimal example (`/?media=1`).
+
+A block of your own gets the same with an image field, `imageField("attributes.background-url", "Background image", "data.background")`, imported from `tess_edit`.
+
+### Blocks and custom blocks
+
+Every block is a plugin: one module in `app/javascript/tess_edit/blocks/` with its defaults, its Inspect fields, its Blocks panel tiles and a `render.mjml` hook. The built-in blocks are registered the same way a host app registers its own, so register yours before the editor connects:
+
+```js
+import { application } from "controllers/application"
+import { fields, registerBlock, registerCategory, registerTessEdit } from "tess_edit"
+
+registerCategory({ key: "shop", label: "Shop", order: 40 })
+
+registerBlock({
+  type: "product",                       // stored in the document JSON
+  name: "Product",
+  icon: "image",                         // a built-in icon name, or SVG markup (24×24 viewBox)
+  category: "shop",                      // gives it one tile; use `palette: [...]` for more, or none
+  roles: ["content"],                    // goes where content goes: columns, heroes, Liquid blocks in them
+  defaults: () => ({ attributes: { padding: "10px 25px" }, data: { sku: "" } }),
+  fields: [{ title: "Product", fields: [{ key: "data.sku", label: "SKU", type: "text" }, fields.padding] }],
+  label: (node) => `Product · ${node.data.sku}`,
+  render: {
+    mjml: (node, { element, escapeText }) =>
+      element("mj-text", node, `{{ products['${escapeText(node.data.sku)}'].title }}`)
+  }
+})
+
+registerTessEdit(application)
+```
+
+Roles say where a block may go: `body` (in the root or a wrapper, like sections and heroes), `wrapper`, `column` (in a section) and `content` (in a column or hero). A container lists the roles it takes in `accepts`; Loop and Condition use `"inherit"`. The full definition, and the helpers a render hook gets (`element`, `container`, `children`, `liquid`, `attrs`, `richText`, ...), are described at the top of `core/registry.js` and `export/mjml.js`. Blocks render only through their `render` hooks, so a later renderer (PDF) adds a hook per block next to `mjml`. Stored documents don't change; a document with a block type that isn't registered fails `normalize`.
+
+## Development
+
+The dummy app in `test/dummy` serves a demo page:
+
+```bash
+cd test/dummy && bin/dev
+```
+
+`/?lock=1` opens a locked layout (`test/dummy/config/demo_layout.json`) with only its Content block, subject and preview text open.
+
+`/?media=1` gives the editor the demo's image endpoint (`MediaController`), so images can be chosen from a list, uploaded, or dragged onto the canvas from the desktop; uploads go to `test/dummy/tmp/media`. Without it, images are URLs only. The options combine, e.g. `/?lock=1&media=1`.
+
+Tests:
+
+```bash
+npm test               # JavaScript: document model, export, MJML snapshots (Node 22+)
+bin/rails test         # Rails: engine, compile endpoint, MRML and Liquid rendering of the snapshots
+bin/rails test:system  # The editor in Chrome, through Selenium
+```
+
+`npm test` compares the MJML of every block, and of the sample email, with the files in `test/javascript/snapshots`. The Rails tests compile those files with MRML and render the sample with Liquid. After an intended change in output, regenerate them and review the diff:
+
+```bash
+UPDATE_SNAPSHOTS=1 npm test
+```
+
+System tests use a local headless Chrome. With `SELENIUM_URL` set, such as `http://selenium:4444/` in a devcontainer, they use that Selenium server instead and serve the app on this machine's address (or `CAPYBARA_APP_HOST`). `HEADLESS=0` shows the browser.
+
+Tiptap is vendored as a single ES module bundle in `vendor/javascript/tess_edit`. To update it:
+
+```bash
+cd script/vendor && npm install && node build.mjs
+```
+
+## Backlog
+
+Ideas for later, not planned yet:
+
+- **Importing MJML.** Turn an existing MJML template into a TessEdit document, so designs made elsewhere can be edited here. Parts without a matching block could become HTML blocks.
+- **Images whose address is Liquid.** An image with a `src` like `{{ product.image_url }}` shows as a broken image on the canvas. It should show a placeholder there instead, and in Inspect say that the address is filled in when the email is sent.
+- **A translation block.** Text that differs per language in one design, e.g. a block with a version of its text per locale, so a host app doesn't need a design per language.
+- **Text extensions from the host app.** Tiptap (the vendored bundle exports `Node`, `Mark` and `Extension`) can be extended, but the editor's extensions, the email HTML of rich text (`export/richtext.js`) and the text toolbar are fixed. A call like `registerTextExtension({ extension, toHtml(node, children), button })` would add all three, as `registerBlock` does for blocks. A Liquid variable shown as a chip (`{{ customer.first_name }}`) would be a first example; a translation could be one too. Extensions that need ProseMirror itself (plugins, node views) also need those exported from the same bundle.
+- **Dropping an image file where there's no image.** A file dropped on an empty spot in the canvas could add a new Image block there with the upload, instead of being refused.
+
+## License
+
+MIT. The vendored Tiptap is MIT licensed too; MRML, through the `mrml` gem, is MIT licensed.

data/Rakefile

@@ -0,0 +1,3 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/app/assets/tailwind/tess_edit/engine.css

@@ -0,0 +1,10 @@
+/* TessEdit builds its interface with Tailwind classes in JavaScript.
+ *
+ * tailwindcss-rails (4.3 or later) finds this file and generates
+ * app/assets/builds/tailwind/tess_edit.css in the host app, which imports it by
+ * its installed path. The host app adds to app/assets/tailwind/application.css:
+ *
+ *   @import "../builds/tailwind/tess_edit";
+ *
+ * Paths here are relative to this file, so they work wherever the gem is installed. */
+@source "../../../javascript/tess_edit";

data/app/controllers/tess_edit/application_controller.rb

@@ -0,0 +1,5 @@
+module TessEdit
+  class ApplicationController < TessEdit.parent_controller.constantize
+    protect_from_forgery with: :exception
+  end
+end

data/app/controllers/tess_edit/compilations_controller.rb

@@ -0,0 +1,10 @@
+module TessEdit
+  # POST /tess_edit/compile with { mjml: "..." }: the HTML the editor shows on
+  # its canvas and stores in its html input.
+  class CompilationsController < ApplicationController
+    def create
+      result = TessEdit.compile(params.require(:mjml))
+      render json: {html: result.html, errors: result.errors}, status: result.errors.empty? ? :ok : :unprocessable_content
+    end
+  end
+end

data/app/helpers/tess_edit/application_helper.rb

@@ -0,0 +1,4 @@
+module TessEdit
+  module ApplicationHelper
+  end
+end

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

@@ -0,0 +1,26 @@
+// The built-in blocks, registered by core/registry.js in this order. The
+// order is also the order of tiles in the Blocks panel.
+
+import root from "tess_edit/blocks/root"
+import wrapper from "tess_edit/blocks/wrapper"
+import section from "tess_edit/blocks/section"
+import column from "tess_edit/blocks/column"
+import hero from "tess_edit/blocks/hero"
+import text from "tess_edit/blocks/text"
+import image from "tess_edit/blocks/image"
+import button from "tess_edit/blocks/button"
+import divider from "tess_edit/blocks/divider"
+import spacer from "tess_edit/blocks/spacer"
+import social from "tess_edit/blocks/social"
+import navbar from "tess_edit/blocks/navbar"
+import raw from "tess_edit/blocks/raw"
+import loop from "tess_edit/blocks/loop"
+import condition from "tess_edit/blocks/condition"
+
+export const builtinCategories = [
+  { key: "layout", label: "Layout", order: 10 },
+  { key: "content", label: "Content", order: 20 },
+  { key: "liquid", label: "Liquid", order: 30 }
+]
+
+export const builtinBlocks = [root, section, column, wrapper, hero, text, image, button, divider, spacer, social, navbar, raw, loop, condition]

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

@@ -0,0 +1,32 @@
+import { align, border, padding, typography } from "tess_edit/blocks/fields"
+
+export default {
+  type: "button",
+  name: "Button",
+  icon: "button",
+  category: "content",
+  roles: ["content"],
+  defaults: () => ({
+    attributes: { href: "#", "background-color": "#2563eb", color: "#ffffff", "border-radius": "6px", "inner-padding": "12px 24px", padding: "10px 25px", "font-weight": "600" },
+    data: { content: "Click here" }
+  }),
+  fields: [
+    {
+      title: "Button",
+      fields: [
+        { key: "data.content", label: "Label", type: "text" },
+        { key: "attributes.href", label: "Link", type: "text" },
+        { key: "attributes.target", label: "Open in", type: "segmented", options: [{ value: "_blank", label: "New tab" }, { value: "_self", label: "Same tab" }] },
+        { key: "attributes.background-color", label: "Button color", type: "color" },
+        { key: "attributes.width", label: "Width", type: "size", placeholder: "Auto" },
+        align,
+        { key: "attributes.inner-padding", label: "Inner padding", type: "spacing" },
+        padding
+      ]
+    },
+    typography(),
+    border
+  ],
+  label: (node) => `Button · ${node.data.content || ""}`,
+  render: { mjml: (node, { element, escapeText }) => element("mj-button", node, escapeText(node.data.content)) }
+}

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

@@ -0,0 +1,24 @@
+import { VERTICAL_ALIGN, background, border, padding } from "tess_edit/blocks/fields"
+
+export default {
+  type: "column",
+  name: "Column",
+  icon: "column",
+  category: "layout",
+  roles: ["column"],
+  accepts: ["content"],
+  defaults: () => ({ attributes: {} }),
+  fields: [
+    {
+      title: "Column",
+      fields: [
+        { key: "attributes.width", label: "Width", type: "text", placeholder: "Auto", hint: "In px or %, e.g. 50%." },
+        { key: "attributes.vertical-align", label: "Vertical align", type: "segmented", options: VERTICAL_ALIGN },
+        background,
+        padding
+      ]
+    },
+    border
+  ],
+  render: { mjml: (node, { container }) => container("mj-column", node) }
+}

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

@@ -0,0 +1,15 @@
+export default {
+  type: "condition",
+  name: "Condition",
+  icon: "condition",
+  category: "liquid",
+  roles: ["body", "content"],
+  accepts: "inherit",
+  defaults: () => ({ data: { expression: "customer.vip" } }),
+  fields: [{ title: "Condition", fields: [{ key: "data.expression", label: "Show when", type: "text", hint: "A Liquid condition, e.g. order.total > 100." }] }],
+  hint: "Shows its blocks only when the condition is true: {% if expression %}.",
+  label: (node) => `If ${node.data.expression || "…"}`,
+  render: {
+    mjml: (node, { liquid }) => liquid(node, `{% if ${node.data.expression || "true"} %}`, "{% endif %}")
+  }
+}

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

@@ -0,0 +1,24 @@
+import { align, padding } from "tess_edit/blocks/fields"
+
+export default {
+  type: "divider",
+  name: "Divider",
+  icon: "divider",
+  category: "content",
+  roles: ["content"],
+  defaults: () => ({ attributes: { "border-color": "#e5e7eb", "border-width": "1px", padding: "10px 25px" } }),
+  fields: [
+    {
+      title: "Divider",
+      fields: [
+        { key: "attributes.border-color", label: "Color", type: "color" },
+        { key: "attributes.border-width", label: "Thickness", type: "size" },
+        { key: "attributes.border-style", label: "Style", type: "segmented", options: [{ value: "solid", label: "Solid" }, { value: "dashed", label: "Dashed" }, { value: "dotted", label: "Dotted" }] },
+        { key: "attributes.width", label: "Width", type: "text", placeholder: "100%" },
+        align,
+        padding
+      ]
+    }
+  ],
+  render: { mjml: (node, { element }) => element("mj-divider", node) }
+}

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

@@ -0,0 +1,42 @@
+// Field definitions shared by the built-in blocks, and usable by custom ones.
+// A field: { key: "attributes.padding" | "data.subject", label, type, ... }.
+// Types: text, textarea, code, size, color, select, segmented, toggle,
+// spacing and list; see ui/inspector.js.
+
+export const ALIGN = [
+  { value: "left", label: "Left" },
+  { value: "center", label: "Center" },
+  { value: "right", label: "Right" }
+]
+
+export const VERTICAL_ALIGN = [
+  { value: "top", label: "Top" },
+  { value: "middle", label: "Middle" },
+  { value: "bottom", label: "Bottom" }
+]
+
+export const padding = { key: "attributes.padding", label: "Padding", type: "spacing" }
+export const align = { key: "attributes.align", label: "Align", type: "segmented", options: ALIGN }
+export const background = { key: "attributes.background-color", label: "Background", type: "color" }
+
+export const typography = (extra = []) => ({
+  title: "Typography",
+  fields: [
+    { key: "attributes.font-family", label: "Font family", type: "text", placeholder: "Inherit" },
+    { key: "attributes.font-size", label: "Font size", type: "size", placeholder: "13px" },
+    { key: "attributes.line-height", label: "Line height", type: "text", placeholder: "1" },
+    { key: "attributes.letter-spacing", label: "Letter spacing", type: "size" },
+    { key: "attributes.font-weight", label: "Font weight", type: "select", options: ["", "300", "400", "500", "600", "700", "800"] },
+    { key: "attributes.color", label: "Text color", type: "color" },
+    ...extra
+  ]
+})
+
+export const border = {
+  title: "Border",
+  collapsed: true,
+  fields: [
+    { key: "attributes.border", label: "Border", type: "text", placeholder: "1px solid #e5e7eb" },
+    { key: "attributes.border-radius", label: "Radius", type: "size" }
+  ]
+}

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

@@ -0,0 +1,60 @@
+import { VERTICAL_ALIGN, background, padding } from "tess_edit/blocks/fields"
+import { imageField } from "tess_edit/core/media"
+
+const headline = { type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text: "A big headline" }] }] }
+
+export default {
+  type: "hero",
+  name: "Hero",
+  icon: "hero",
+  roles: ["body"],
+  accepts: ["content"],
+  defaults: () => ({
+    attributes: {
+      mode: "fixed-height",
+      height: "320px",
+      "background-url": "https://placehold.co/1200x640/1f2937/1f2937.png",
+      "background-width": "600px",
+      "background-height": "320px",
+      "background-color": "#1f2937",
+      "vertical-align": "middle",
+      padding: "40px 0px"
+    }
+  }),
+  fields: [
+    {
+      title: "Hero",
+      fields: [
+        { key: "attributes.mode", label: "Mode", type: "segmented", options: [{ value: "fixed-height", label: "Fixed height" }, { value: "fluid-height", label: "Fluid" }] },
+        { key: "attributes.height", label: "Height", type: "size" },
+        { key: "attributes.vertical-align", label: "Vertical align", type: "segmented", options: VERTICAL_ALIGN },
+        padding
+      ]
+    },
+    {
+      title: "Background",
+      fields: [
+        imageField("attributes.background-url", "Image", "data.background"),
+        { key: "attributes.background-width", label: "Image width", type: "size" },
+        { key: "attributes.background-height", label: "Image height", type: "size" },
+        { key: "attributes.background-position", label: "Position", type: "text", placeholder: "center center" },
+        background
+      ]
+    }
+  ],
+  palette: [
+    {
+      key: "hero",
+      label: "Hero",
+      category: "layout",
+      create: ({ createNode }) =>
+        createNode("hero", {
+          children: [
+            createNode("text", { attributes: { align: "center", color: "#ffffff", "font-size": "32px", "font-weight": "700", padding: "10px 25px" }, data: { content: headline } }),
+            createNode("button", { attributes: { align: "center", "background-color": "#ffffff", color: "#111827" }, data: { content: "Find out more" } })
+          ]
+        })
+    }
+  ],
+  render: { mjml: (node, { container }) => container("mj-hero", node) }
+}

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

@@ -0,0 +1,29 @@
+import { align, padding } from "tess_edit/blocks/fields"
+import { IMAGE_FIELD } from "tess_edit/core/media"
+
+export default {
+  type: "image",
+  name: "Image",
+  icon: "image",
+  category: "content",
+  roles: ["content"],
+  defaults: () => ({ attributes: { src: "https://placehold.co/1200x600/e5e7eb/9ca3af.png?text=Image", alt: "", padding: "10px 25px" } }),
+  // A new image from the Blocks panel starts as an uploaded one (when the host keeps images)
+  palette: [{ key: "image", label: "Image", create: ({ createNode }) => createNode("image", { data: { source: "upload" } }) }],
+  fields: [
+    {
+      title: "Image",
+      fields: [
+        { ...IMAGE_FIELD, label: "Image", type: "image" },
+        { key: "attributes.alt", label: "Alt text", type: "text" },
+        { key: "attributes.href", label: "Link", type: "text" },
+        { key: "attributes.width", label: "Width", type: "size", placeholder: "Full" },
+        { key: "attributes.height", label: "Height", type: "size", placeholder: "Auto" },
+        align,
+        padding
+      ]
+    },
+    { title: "Border", collapsed: true, fields: [{ key: "attributes.border", label: "Border", type: "text" }, { key: "attributes.border-radius", label: "Radius", type: "size" }, { key: "attributes.container-background-color", label: "Background", type: "color" }] }
+  ],
+  render: { mjml: (node, { element }) => element("mj-image", node) }
+}

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

@@ -0,0 +1,23 @@
+export default {
+  type: "loop",
+  name: "Loop",
+  icon: "loop",
+  category: "liquid",
+  roles: ["body", "content"],
+  accepts: "inherit",
+  defaults: () => ({ data: { variable: "item", collection: "items" } }),
+  fields: [
+    {
+      title: "Loop",
+      fields: [
+        { key: "data.variable", label: "Variable", type: "text", hint: "The name each item gets, e.g. line." },
+        { key: "data.collection", label: "Collection", type: "text", hint: "What to loop over, e.g. invoice.lines." }
+      ]
+    }
+  ],
+  hint: "Repeats its blocks for each item: {% for variable in collection %}.",
+  label: (node) => `For ${node.data.variable || "item"} in ${node.data.collection || "…"}`,
+  render: {
+    mjml: (node, { liquid }) => liquid(node, `{% for ${node.data.variable || "item"} in ${node.data.collection || "items"} %}`, "{% endfor %}")
+  }
+}

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

@@ -0,0 +1,49 @@
+import { align } from "tess_edit/blocks/fields"
+
+export default {
+  type: "navbar",
+  name: "Navbar",
+  icon: "navbar",
+  category: "content",
+  roles: ["content"],
+  defaults: () => ({
+    attributes: { align: "center" },
+    data: {
+      links: [
+        { label: "Home", href: "https://example.com/" },
+        { label: "Products", href: "https://example.com/products" },
+        { label: "Contact", href: "https://example.com/contact" }
+      ],
+      color: "#111827",
+      fontSize: "14px",
+      linkPadding: "10px 15px"
+    }
+  }),
+  fields: [
+    {
+      title: "Navbar",
+      fields: [
+        { key: "data.links", label: "Links", type: "list", item: [{ name: "label", label: "Label" }, { name: "href", label: "URL" }], newItem: { label: "Link", href: "https://" } },
+        align,
+        { key: "attributes.hamburger", label: "Hamburger on mobile", type: "toggle", on: "hamburger", off: "" }
+      ]
+    },
+    {
+      title: "Links",
+      fields: [
+        { key: "data.color", label: "Color", type: "color" },
+        { key: "data.fontSize", label: "Font size", type: "size" },
+        { key: "data.fontFamily", label: "Font family", type: "text", placeholder: "Inherit" },
+        { key: "data.linkPadding", label: "Padding", type: "spacing" }
+      ]
+    }
+  ],
+  render: {
+    mjml(node, { element, attrs, escapeText }) {
+      const d = node.data
+      const linkAttrs = { color: d.color, "font-size": d.fontSize, "font-family": d.fontFamily, padding: d.linkPadding }
+      const links = (d.links || []).map((link) => `  <mj-navbar-link${attrs({ href: link.href, ...linkAttrs })}>${escapeText(link.label)}</mj-navbar-link>`)
+      return element("mj-navbar", node, `\n${links.join("\n")}\n`)
+    }
+  }
+}