tess_edit 0.1.1

data/app/javascript/tess_edit/ui/text_editing.js

@@ -0,0 +1,124 @@
+// Inline rich-text editing with Tiptap, mounted inside the canvas iframe on the
+// text block's own element, plus the formatting toolbar above the canvas.
+
+import { Color, Editor, StarterKit, TextAlign, TextStyle } from "tess_edit/vendor/tiptap"
+import { h } from "tess_edit/ui/dom"
+import { icon } from "tess_edit/ui/icons"
+
+const BUTTON = "w-7 h-7 flex items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+const ACTIVE = "bg-blue-50 text-blue-700"
+
+export class TextEditing {
+  constructor(toolbar) {
+    this.toolbar = toolbar
+    this.tiptap = null
+  }
+
+  get active() {
+    return !!this.tiptap
+  }
+
+  start(container, content, onUpdate) {
+    this.stop()
+    container.replaceChildren()
+    this.tiptap = new Editor({
+      element: container,
+      content: content || { type: "doc", content: [{ type: "paragraph" }] },
+      extensions: [
+        StarterKit.configure({
+          code: false,
+          codeBlock: false,
+          heading: { levels: [1, 2, 3] },
+          // Liquid in links ({{ url }}) is fine: do not filter URLs.
+          link: { openOnClick: false, autolink: false, linkOnPaste: true, isAllowedUri: () => true }
+        }),
+        TextStyle,
+        Color,
+        TextAlign.configure({ types: ["heading", "paragraph"] })
+      ],
+      autofocus: "end",
+      onUpdate: ({ editor }) => onUpdate(editor.getJSON()),
+      onTransaction: () => this.renderToolbar()
+    })
+    this.renderToolbar()
+    return this.tiptap
+  }
+
+  stop() {
+    if (!this.tiptap) return null
+    const json = this.tiptap.getJSON()
+    this.tiptap.destroy()
+    this.tiptap = null
+    this.toolbar.replaceChildren()
+    this.toolbar.classList.add("hidden")
+    return json
+  }
+
+  renderToolbar() {
+    const editor = this.tiptap
+    if (!editor) return
+    const chain = () => editor.chain().focus()
+    const button = (name, title, active, run) =>
+      h("button", {
+        type: "button",
+        title,
+        class: `${BUTTON} ${active ? ACTIVE : ""}`,
+        html: icon(name),
+        onmousedown: (event) => event.preventDefault(),
+        onclick: run
+      })
+    const separator = () => h("span", { class: "mx-1 h-5 w-px bg-gray-200" })
+
+    const level = [1, 2, 3].find((l) => editor.isActive("heading", { level: l }))
+    const style = h(
+      "select",
+      {
+        class: "h-7 rounded-md border border-gray-300 bg-white px-1.5 text-xs text-gray-800",
+        title: "Paragraph style",
+        onchange: (event) => {
+          const value = Number(event.target.value)
+          value ? chain().setHeading({ level: value }).run() : chain().setParagraph().run()
+        }
+      },
+      h("option", { value: "0", selected: !level }, "Paragraph"),
+      [1, 2, 3].map((l) => h("option", { value: String(l), selected: level === l }, `Heading ${l}`))
+    )
+
+    const currentColor = editor.getAttributes("textStyle").color
+    const color = h("input", {
+      type: "color",
+      title: "Text color",
+      class: "h-7 w-8 cursor-pointer rounded border border-gray-300 bg-white p-0.5",
+      value: /^#[0-9a-f]{6}$/i.test(currentColor || "") ? currentColor : "#000000",
+      onchange: (event) => chain().setColor(event.target.value).run()
+    })
+
+    this.toolbar.replaceChildren(...[
+      style,
+      separator(),
+      button("bold", "Bold (⌘B)", editor.isActive("bold"), () => chain().toggleBold().run()),
+      button("italic", "Italic (⌘I)", editor.isActive("italic"), () => chain().toggleItalic().run()),
+      button("underline", "Underline (⌘U)", editor.isActive("underline"), () => chain().toggleUnderline().run()),
+      button("strike", "Strikethrough", editor.isActive("strike"), () => chain().toggleStrike().run()),
+      color,
+      separator(),
+      button("link", "Link", editor.isActive("link"), () => {
+        const previous = editor.getAttributes("link").href || "https://"
+        const href = window.prompt("Link URL (Liquid allowed, e.g. {{ order.url }})", previous)
+        if (href === null) return
+        href ? chain().extendMarkRange("link").setLink({ href }).run() : chain().extendMarkRange("link").unsetLink().run()
+      }),
+      editor.isActive("link") ? button("unlink", "Remove link", false, () => chain().extendMarkRange("link").unsetLink().run()) : null,
+      separator(),
+      button("align-left", "Align left", editor.isActive({ textAlign: "left" }), () => chain().setTextAlign("left").run()),
+      button("align-center", "Align center", editor.isActive({ textAlign: "center" }), () => chain().setTextAlign("center").run()),
+      button("align-right", "Align right", editor.isActive({ textAlign: "right" }), () => chain().setTextAlign("right").run()),
+      separator(),
+      button("list-bullet", "Bulleted list", editor.isActive("bulletList"), () => chain().toggleBulletList().run()),
+      button("list-ordered", "Numbered list", editor.isActive("orderedList"), () => chain().toggleOrderedList().run()),
+      separator(),
+      button("clear", "Clear formatting", false, () => chain().unsetAllMarks().clearNodes().run())
+    ].filter(Boolean))
+    this.toolbar.classList.remove("hidden")
+  }
+}

data/app/javascript/tess_edit/ui/tree.js

@@ -0,0 +1,138 @@
+// The Layers panel: the document as a collapsible tree that can be reordered by
+// dragging. Rows also take blocks dragged from the Blocks panel.
+
+import { canInsert, find, isDescendant } from "tess_edit/core/document"
+import { getBlock, isContainer, label } from "tess_edit/core/registry"
+import { h } from "tess_edit/ui/dom"
+import { icon } from "tess_edit/ui/icons"
+
+export class Tree {
+  constructor(editor, element) {
+    this.editor = editor
+    this.element = element
+    this.collapsed = new Set()
+  }
+
+  render() {
+    const { doc } = this.editor
+    this.element.replaceChildren(h("ul", { class: "py-1", role: "tree" }, this.row(doc, 0)))
+    this.element.querySelector("[aria-selected='true']")?.scrollIntoView({ block: "nearest" })
+  }
+
+  row(node, depth) {
+    const { selectedId } = this.editor
+    const children = node.children || []
+    const open = !this.collapsed.has(node.id)
+    const selected = node.id === selectedId
+    const container = isContainer(node.type)
+    // Layout parts under a lock; the root shows no lock, as some of its fields may be open.
+    const locked = !!this.editor.lock && node.id !== this.editor.doc.id && !this.editor.canFill(node.id)
+
+    const toggle = h(
+      "button",
+      {
+        type: "button",
+        class: `w-4 h-4 shrink-0 flex items-center justify-center text-gray-400 hover:text-gray-700 ${children.length ? "" : "invisible"}`,
+        onclick: (event) => {
+          event.stopPropagation()
+          open ? this.collapsed.add(node.id) : this.collapsed.delete(node.id)
+          this.render()
+        },
+        html: icon("chevron", `w-3 h-3 transition-transform ${open ? "rotate-90" : ""}`)
+      }
+    )
+
+    const add = container && this.editor.accepted(node.id).length
+      ? h("button", {
+          type: "button",
+          title: "Add a block inside",
+          class: "ml-auto hidden group-hover:flex w-5 h-5 items-center justify-center rounded text-gray-500 hover:bg-gray-200 hover:text-gray-900",
+          html: icon("plus", "w-3.5 h-3.5"),
+          onclick: (event) => {
+            event.stopPropagation()
+            this.editor.openInsertMenu(node.id, children.length, event.currentTarget.getBoundingClientRect())
+          }
+        })
+      : null
+
+    const line = h(
+      "div",
+      {
+        class: `group relative flex items-center gap-1.5 pr-2 h-7 cursor-pointer select-none rounded-md mx-1 ${selected ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`,
+        style: `padding-left:${depth * 14 + 4}px`,
+        role: "treeitem",
+        "aria-selected": selected ? "true" : "false",
+        draggable: this.editor.isFree(node.id),
+        dataset: { id: node.id },
+        onclick: () => this.editor.select(node.id),
+        ondragstart: (event) => {
+          event.stopPropagation()
+          event.dataTransfer.effectAllowed = "move"
+          event.dataTransfer.setData("text/plain", node.id)
+          this.editor.startDrag({ kind: "move", id: node.id, type: node.type })
+        },
+        ondragend: () => this.editor.endDrag(),
+        ondragover: (event) => this.onDragOver(event, node),
+        ondragleave: () => this.clearMarker(),
+        ondrop: (event) => this.onDrop(event, node),
+        onmouseenter: () => this.editor.canvas?.setHover(node.id),
+        onmouseleave: () => this.editor.canvas?.setHover(null)
+      },
+      toggle,
+      h("span", { class: `shrink-0 ${getBlock(node.type)?.accepts === "inherit" ? "text-amber-600" : "text-gray-400"}`, html: icon(getBlock(node.type)?.icon, "w-4 h-4") }),
+      h("span", { class: `truncate text-[13px] ${locked ? "text-gray-400" : ""}` }, label(node)),
+      locked ? h("span", { class: "ml-auto shrink-0 text-gray-300", title: "Part of the layout", html: icon("lock", "w-3.5 h-3.5") }) : add,
+      h("div", { class: "tess-tree-marker pointer-events-none absolute left-1 right-1 hidden" })
+    )
+
+    return h("li", { role: "none" }, line, open && children.length ? h("ul", { role: "group" }, children.map((child) => this.row(child, depth + 1))) : null)
+  }
+
+  // Top third: before, bottom third: after, middle: inside (when allowed).
+  position(event, node) {
+    const drag = this.editor.drag
+    if (!drag) return null
+    const doc = this.editor.doc
+    const ok = (parentId) => this.editor.canFill(parentId) && canInsert(doc, parentId, drag.type) && !(drag.kind === "move" && (parentId === drag.id || isDescendant(doc, drag.id, parentId)))
+    const rect = event.currentTarget.getBoundingClientRect()
+    const ratio = (event.clientY - rect.top) / rect.height
+    const hit = find(doc, node.id)
+    if (drag.kind === "move" && drag.id === node.id) return null
+    const inside = ok(node.id) ? { parentId: node.id, index: (node.children || []).length, marker: "inside" } : null
+    const sibling = (after) => (hit.parent && ok(hit.parent.id) ? { parentId: hit.parent.id, index: hit.index + (after ? 1 : 0), marker: after ? "after" : "before" } : null)
+    if (ratio < 0.3) return sibling(false) || inside
+    // Below an expanded container the next row is its first child, so "after" means "first inside".
+    const expanded = !this.collapsed.has(node.id) && node.children?.length
+    if (ratio > 0.7) return (expanded && inside ? { ...inside, index: 0 } : null) || sibling(true) || inside
+    return inside || sibling(ratio > 0.5)
+  }
+
+  onDragOver(event, node) {
+    const target = this.position(event, node)
+    this.clearMarker()
+    if (!target) return
+    event.preventDefault()
+    event.stopPropagation()
+    const marker = event.currentTarget.querySelector(".tess-tree-marker")
+    marker.classList.remove("hidden")
+    marker.className = `tess-tree-marker pointer-events-none absolute left-1 right-1 ${
+      target.marker === "inside" ? "inset-y-0 rounded-md ring-2 ring-blue-500 bg-blue-500/5" : target.marker === "before" ? "top-0 h-0.5 bg-blue-600" : "bottom-0 h-0.5 bg-blue-600"
+    }`
+    this.markerElement = marker
+  }
+
+  onDrop(event, node) {
+    const target = this.position(event, node)
+    this.clearMarker()
+    if (!target) return
+    event.preventDefault()
+    event.stopPropagation()
+    this.editor.drop(this.editor.drag, target.parentId, target.index)
+    this.editor.endDrag()
+  }
+
+  clearMarker() {
+    if (this.markerElement) this.markerElement.className = "tess-tree-marker pointer-events-none absolute left-1 right-1 hidden"
+    this.markerElement = null
+  }
+}

data/config/importmap.rb

@@ -0,0 +1,6 @@
+# Pins for the tess_edit gem. The vendored bundles are built by script/vendor/build.mjs.
+
+pin "tess_edit", to: "tess_edit/index.js"
+pin_all_from TessEdit::Engine.root.join("app/javascript/tess_edit"), under: "tess_edit", to: "tess_edit"
+
+pin "tess_edit/vendor/tiptap", to: "tess_edit/tiptap.js"

data/config/routes.rb

@@ -0,0 +1,3 @@
+TessEdit::Engine.routes.draw do
+  post "compile", to: "compilations#create", as: :compile
+end

data/lib/tasks/tess_edit_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :tess_edit do
+#   # Task goes here
+# end

data/lib/tess_edit/engine.rb

@@ -0,0 +1,18 @@
+module TessEdit
+  class Engine < ::Rails::Engine
+    isolate_namespace TessEdit
+
+    initializer "tess_edit.assets" do |app|
+      if app.config.respond_to?(:assets)
+        app.config.assets.paths << root.join("app/javascript")
+        app.config.assets.paths << root.join("vendor/javascript")
+      end
+    end
+
+    initializer "tess_edit.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/javascript")
+      app.config.importmap.cache_sweepers << root.join("vendor/javascript")
+    end
+  end
+end

data/lib/tess_edit/version.rb

@@ -0,0 +1,3 @@
+module TessEdit
+  VERSION = "0.1.1"
+end

data/lib/tess_edit.rb

@@ -0,0 +1,28 @@
+require "importmap-rails"
+require "stimulus-rails"
+require "mrml"
+require "tess_edit/version"
+require "tess_edit/engine"
+
+module TessEdit
+  Result = Data.define(:html, :errors)
+
+  # The controller the engine's controllers inherit from, as a string. Set it
+  # to a controller of the host app, such as "Admin::BaseController", so the
+  # compile endpoint is behind the same sign-in and authorization:
+  #
+  #   # config/initializers/tess_edit.rb
+  #   TessEdit.parent_controller = "Admin::BaseController"
+  mattr_accessor :parent_controller, default: "ActionController::Base"
+
+  # Compiles MJML to HTML with MRML. Liquid passes through untouched. When the
+  # MJML can't be parsed, html is nil and errors holds the reason.
+  #
+  # Browsers submit form fields with CRLF line endings, which MRML can't parse
+  # in mj-head, so line endings become LF first.
+  def self.compile(mjml)
+    Result.new(html: MRML::Template.new(mjml.to_s.gsub(/\r\n?/, "\n")).to_html, errors: [])
+  rescue MRML::Error => error
+    Result.new(html: nil, errors: [error.message])
+  end
+end