tess_edit 0.1.1

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

@@ -0,0 +1,137 @@
+// A code field without an editor library: a textarea whose text is
+// transparent, over a copy of the text with HTML, CSS and Liquid colored.
+// Both wrap the same way and scroll together, so the caret and selection of
+// the textarea line up with the colored text. Tab indents, Shift+Tab
+// outdents, and Enter keeps the line's indentation.
+
+import { h } from "tess_edit/ui/dom"
+
+const INDENT = "  "
+// Shared by the textarea and the colored copy, so they lay out the same
+const BOX = "m-0 w-full rounded-md border px-2 py-1.5 font-mono text-xs leading-5 whitespace-pre-wrap break-words [overflow-wrap:anywhere] [tab-size:2] [scrollbar-gutter:stable]"
+
+const LIQUID = /\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}/
+const COLORS = {
+  liquid: "text-purple-700",
+  comment: "text-gray-400 italic",
+  tag: "text-blue-700",
+  attribute: "text-amber-700",
+  string: "text-green-700",
+  property: "text-blue-700",
+  at: "text-purple-700",
+  number: "text-amber-700"
+}
+
+function escape(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+function span(kind, html) {
+  return `<span class="${COLORS[kind]}">${html}</span>`
+}
+
+// Colors the parts of text that match one of the patterns ([kind, regexp]),
+// in order of preference, and passes the rest to plain(text)
+function tokenize(text, patterns, plain = escape) {
+  const source = patterns.map(([, pattern]) => `(${pattern.source})`).join("|")
+  const regexp = new RegExp(source, "g")
+  let html = ""
+  let last = 0
+  for (const match of text.matchAll(regexp)) {
+    html += plain(text.slice(last, match.index))
+    const index = match.slice(1).findIndex((group) => group !== undefined)
+    const [kind, , inner] = patterns[index]
+    html += inner ? inner(match[0]) : span(kind, escape(match[0]))
+    last = match.index + match[0].length
+  }
+  return html + plain(text.slice(last))
+}
+
+const liquidIn = (text) => tokenize(text, [["liquid", LIQUID]])
+
+function htmlTag(tag) {
+  return tokenize(tag, [
+    ["liquid", LIQUID],
+    ["string", /"[^"]*"|'[^']*'/, (string) => span("string", liquidIn(string))],
+    ["tag", /^<\/?[\w-]+|\/?>$/],
+    ["attribute", /[\w:@-]+(?=\s*=)/]
+  ])
+}
+
+export function highlightHtml(text) {
+  return tokenize(text, [
+    ["liquid", LIQUID],
+    ["comment", /<!--[\s\S]*?-->/],
+    // Liquid and quoted values may hold a ">", so they're skipped as a whole
+    ["tag", /<\/?[a-zA-Z](?:\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}|"[^"]*"|'[^']*'|[^>"'])*>?/, htmlTag]
+  ])
+}
+
+export function highlightCss(text) {
+  return tokenize(text, [
+    ["liquid", LIQUID],
+    ["comment", /\/\*[\s\S]*?\*\//],
+    ["string", /"[^"\n]*"|'[^'\n]*'/],
+    ["at", /@[\w-]+/],
+    ["property", /[\w-]+(?=\s*:[^:{};]*[;}])/],
+    ["number", /#[0-9a-fA-F]{3,8}\b|-?\d*\.?\d+(?:px|em|rem|%|vh|vw|pt)?\b/]
+  ])
+}
+
+const HIGHLIGHT = { html: highlightHtml, css: highlightCss }
+
+// Replaces the selection, keeping the textarea's own undo where the browser allows
+function insert(textarea, text) {
+  if (!document.execCommand?.("insertText", false, text)) textarea.setRangeText(text, textarea.selectionStart, textarea.selectionEnd, "end")
+}
+
+function onKeydown(event) {
+  const textarea = event.target
+  const { value, selectionStart: start, selectionEnd: end } = textarea
+  if (event.key === "Tab" && !event.altKey && !event.metaKey && !event.ctrlKey) {
+    event.preventDefault()
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1
+    if (!event.shiftKey && start === end) return insert(textarea, INDENT)
+    // Every line of the selection, indented or outdented
+    textarea.setSelectionRange(lineStart, end)
+    const lines = value.slice(lineStart, end).split("\n")
+    const changed = lines.map((line) => (event.shiftKey ? line.replace(new RegExp(`^ {1,${INDENT.length}}|^\\t`), "") : INDENT + line)).join("\n")
+    insert(textarea, changed)
+    textarea.setSelectionRange(lineStart, lineStart + changed.length)
+  } else if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.isComposing) {
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1
+    const indent = value.slice(lineStart, start).match(/^[ \t]*/)[0]
+    if (!indent) return
+    event.preventDefault()
+    insert(textarea, `\n${indent}`)
+  }
+}
+
+// value, language ("html" or "css"), oninput(value); class sizes the field
+export function codeInput({ value = "", language = "html", oninput, class: className = "min-h-32", readOnly = false }) {
+  const highlight = HIGHLIGHT[language] || escape
+  const colored = h("pre", { "aria-hidden": "true", class: `${BOX} pointer-events-none absolute inset-0 h-full overflow-hidden border-transparent bg-white text-gray-800` })
+  const textarea = h("textarea", {
+    class: `${BOX} ${className} relative block resize-y overflow-y-auto border-gray-300 bg-transparent text-transparent caret-gray-900 outline-none selection:bg-blue-500/25 focus:border-blue-500 focus:ring-1 focus:ring-blue-500`,
+    spellcheck: false,
+    autocapitalize: "off",
+    autocomplete: "off",
+    readOnly,
+    value,
+    onkeydown: onKeydown,
+    onscroll: () => (colored.scrollTop = textarea.scrollTop),
+    oninput: () => {
+      paint()
+      oninput?.(textarea.value)
+    }
+  })
+  // A trailing newline needs a character after it to take up a line
+  const paint = () => {
+    colored.innerHTML = `${highlight(textarea.value)}\n `
+    colored.scrollTop = textarea.scrollTop
+  }
+  paint()
+  const field = h("div", { class: "relative" }, colored, textarea)
+  field.textarea = textarea
+  return field
+}

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

@@ -0,0 +1,35 @@
+// A tiny element builder: h("button", { class: "…", onclick: fn }, "Label", child)
+
+export function h(tag, props = {}, ...children) {
+  const element = document.createElement(tag)
+  for (const [name, value] of Object.entries(props || {})) {
+    if (value === undefined || value === null || value === false) continue
+    if (name.startsWith("on") && typeof value === "function") {
+      element.addEventListener(name.slice(2).toLowerCase(), value)
+    } else if (name === "html") {
+      element.innerHTML = value
+    } else if (name === "dataset") {
+      Object.assign(element.dataset, value)
+    } else if (name === "value" || (name in element && typeof value !== "string")) {
+      // A textarea ignores a value attribute, so values are always set as the property
+      element[name] = value
+    } else {
+      element.setAttribute(name, value === true ? "" : value)
+    }
+  }
+  for (const child of children.flat()) {
+    if (child === null || child === undefined || child === false) continue
+    element.append(child instanceof Node ? child : document.createTextNode(String(child)))
+  }
+  return element
+}
+
+export function debounce(fn, wait) {
+  let timer
+  const debounced = (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), wait)
+  }
+  debounced.cancel = () => clearTimeout(timer)
+  return debounced
+}

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

@@ -0,0 +1,63 @@
+// Small inline SVG icons (24×24, stroke based) so the editor needs no icon font.
+
+const paths = {
+  root: '<rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h4"/>',
+  section: '<rect x="3" y="6" width="18" height="12" rx="2"/>',
+  wrapper: '<rect x="2" y="3" width="20" height="18" rx="2"/><rect x="5" y="7" width="14" height="4" rx="1"/><rect x="5" y="13" width="14" height="4" rx="1"/>',
+  column: '<rect x="8" y="3" width="8" height="18" rx="2"/>',
+  hero: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 10h10M9 14h6"/>',
+  text: '<path d="M5 6V4h14v2M12 4v16M9 20h6"/>',
+  heading: '<path d="M6 4v16M18 4v16M6 12h12"/>',
+  image: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m21 16-5-5-9 9"/>',
+  button: '<rect x="3" y="8" width="18" height="8" rx="4"/><path d="M9 12h6"/>',
+  divider: '<path d="M3 12h18"/><path d="M8 7h8M8 17h8" opacity=".4"/>',
+  spacer: '<path d="M12 4v16M8 8l4-4 4 4M8 16l4 4 4-4"/>',
+  social: '<circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="m8.2 10.9 7.6-3.8M8.2 13.1l7.6 3.8"/>',
+  navbar: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18M7 7h0M10 7h0"/>',
+  code: '<path d="m8 8-4 4 4 4M16 8l4 4-4 4M14 5l-4 14"/>',
+  loop: '<path d="M17 2l3 3-3 3"/><path d="M4 11V9a4 4 0 0 1 4-4h12M7 22l-3-3 3-3"/><path d="M20 13v2a4 4 0 0 1-4 4H4"/>',
+  condition: '<path d="M6 3v6a6 6 0 0 0 6 6h6M6 21v-6M15 12l3 3-3 3"/>',
+  "cols-1": '<rect x="3" y="6" width="18" height="12" rx="1.5"/>',
+  "cols-2": '<rect x="3" y="6" width="8" height="12" rx="1.5"/><rect x="13" y="6" width="8" height="12" rx="1.5"/>',
+  "cols-3": '<rect x="2" y="6" width="5.5" height="12" rx="1"/><rect x="9.25" y="6" width="5.5" height="12" rx="1"/><rect x="16.5" y="6" width="5.5" height="12" rx="1"/>',
+  "cols-4": '<rect x="2" y="6" width="4" height="12" rx="1"/><rect x="7.33" y="6" width="4" height="12" rx="1"/><rect x="12.66" y="6" width="4" height="12" rx="1"/><rect x="18" y="6" width="4" height="12" rx="1"/>',
+  "cols-12": '<rect x="3" y="6" width="5.5" height="12" rx="1.5"/><rect x="10.5" y="6" width="10.5" height="12" rx="1.5"/>',
+  "cols-21": '<rect x="3" y="6" width="10.5" height="12" rx="1.5"/><rect x="15.5" y="6" width="5.5" height="12" rx="1.5"/>',
+  "panels-left": '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M10 4v16"/><path d="M5.5 8h2M5.5 11h2" opacity=".6"/>',
+  "panels-split": '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16M16 4v16"/>',
+  "panels-right": '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M14 4v16"/><path d="M16.5 8h2M16.5 11h2" opacity=".6"/>',
+  lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  trash: '<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>',
+  copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>',
+  move: '<path d="M12 3v18M3 12h18M9 6l3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3"/>',
+  up: '<path d="M12 19V5M6 11l6-6 6 6"/>',
+  parent: '<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-1"/>',
+  undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-4"/>',
+  redo: '<path d="m15 14 5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h4"/>',
+  desktop: '<rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/>',
+  mobile: '<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/>',
+  edit: '<path d="M4 20h4L19 9l-4-4L4 16z"/>',
+  eye: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>',
+  export: '<path d="M12 3v12M7 8l5-5 5 5M5 15v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/>',
+  chevron: '<path d="m9 6 6 6-6 6"/>',
+  close: '<path d="M6 6l12 12M18 6 6 18"/>',
+  bold: '<path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/>',
+  italic: '<path d="M14 5h-4M14 19h-4M14 5l-4 14"/>',
+  underline: '<path d="M7 4v7a5 5 0 0 0 10 0V4M5 20h14"/>',
+  strike: '<path d="M5 12h14M16 6a4 3 0 0 0-8 1c0 4 8 3 8 7a4 3 0 0 1-8 1"/>',
+  link: '<path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1"/>',
+  unlink: '<path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1M3 3l18 18"/>',
+  "align-left": '<path d="M4 6h16M4 10h10M4 14h16M4 18h10"/>',
+  "align-center": '<path d="M4 6h16M7 10h10M4 14h16M7 18h10"/>',
+  "align-right": '<path d="M4 6h16M10 10h10M4 14h16M10 18h10"/>',
+  "list-bullet": '<path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r="1"/><circle cx="4.5" cy="12" r="1"/><circle cx="4.5" cy="18" r="1"/>',
+  "list-ordered": '<path d="M10 6h10M10 12h10M10 18h10M4 4h1v4M4 14h2l-2 3h2"/>',
+  clear: '<path d="M5 6h12M11 6l-3 13M15 15l5 5M20 15l-5 5"/>'
+}
+
+export function icon(name, className = "w-4 h-4") {
+  // Custom blocks may pass their own SVG markup instead of a name.
+  const body = name?.trim().startsWith("<") ? name : paths[name] || paths.section
+  return `<svg class="${className}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`
+}

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

@@ -0,0 +1,377 @@
+// The Inspect panel: renders the selected block's fields from its
+// definition (blocks/*.js, via core/registry.js) and writes changes back through the editor.
+
+import { imageSource } from "tess_edit/core/media"
+import { getBlock, label } from "tess_edit/core/registry"
+import { find, getValue } from "tess_edit/core/document"
+import { codeInput } from "tess_edit/ui/code_input"
+import { h } from "tess_edit/ui/dom"
+import { icon } from "tess_edit/ui/icons"
+
+const INPUT = "w-full min-w-0 rounded-md border border-gray-300 bg-white px-2 py-1 text-[13px] text-gray-900 shadow-xs outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+
+// "12" → "12px"; anything else is left alone.
+export function withUnit(value) {
+  const text = String(value ?? "").trim()
+  return /^-?\d+(\.\d+)?$/.test(text) ? `${text}px` : text
+}
+
+export function parseSpacing(value) {
+  const parts = String(value || "").trim().split(/\s+/).filter(Boolean)
+  if (!parts.length) return ["", "", "", ""]
+  const [top, right = top, bottom = top, left = right] = parts
+  return [top, right, bottom, left]
+}
+
+export function formatSpacing([top, right, bottom, left]) {
+  const values = [top, right, bottom, left].map((v) => withUnit(v) || "0px")
+  if (![top, right, bottom, left].some((v) => String(v).trim())) return ""
+  if (values.every((v) => v === values[0])) return values[0]
+  if (values[0] === values[2] && values[1] === values[3]) return `${values[0]} ${values[1]}`
+  return values.join(" ")
+}
+
+export class Inspector {
+  constructor(editor, element) {
+    this.editor = editor
+    this.element = element
+    this.openGroups = new Map()
+  }
+
+  render() {
+    const { doc, selectedId } = this.editor
+    const hit = find(doc, selectedId) || { node: doc }
+    const node = hit.node
+    const definition = getBlock(node.type)
+
+    const actions =
+      !this.editor.isFree(node.id)
+        ? []
+        : [
+          ["parent", "Select parent", () => this.editor.selectParent()],
+          ["copy", "Duplicate", () => this.editor.duplicate(node.id)],
+          ["trash", "Delete", () => this.editor.remove(node.id)]
+        ].map(([name, title, onclick]) =>
+          h("button", { type: "button", title, class: "w-7 h-7 flex items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900", html: icon(name), onclick })
+        )
+
+    const header = h(
+      "div",
+      { class: "flex items-center gap-2 px-4 h-12 border-b border-gray-200 shrink-0" },
+      h("span", { class: "text-gray-400", html: icon(definition.icon, "w-4 h-4") }),
+      h("h2", { class: "font-semibold text-gray-900 truncate" }, label(node)),
+      h("div", { class: "ml-auto flex items-center gap-0.5" }, actions)
+    )
+
+    const groups = (definition.fields || []).map((group) => this.group(node, group))
+    const locked = this.editor.lock && node.id !== doc.id && !this.editor.isFree(node.id)
+      ? h("p", { class: "mx-4 mt-3 flex items-center gap-2 rounded-md bg-amber-50 px-3 py-2 text-xs text-amber-800" }, h("span", { html: icon("lock", "w-3.5 h-3.5") }), "Part of the layout")
+      : null
+    // A block's hint explains how to edit it, which a locked block can't be.
+    const hint = definition.hint && !locked ? h("p", { class: "mx-4 mt-3 rounded-md bg-gray-50 px-3 py-2 text-xs text-gray-600" }, definition.hint) : null
+
+    this.element.replaceChildren(header, h("div", { class: "flex-1 overflow-y-auto pb-6" }, locked, hint, groups))
+  }
+
+  group(node, group) {
+    const key = `${node.type}:${group.title}`
+    const open = this.openGroups.has(key) ? this.openGroups.get(key) : !group.collapsed
+    const details = h(
+      "details",
+      { class: "group/field border-b border-gray-100", open, ontoggle: (event) => this.openGroups.set(key, event.currentTarget.open) },
+      h(
+        "summary",
+        { class: "flex items-center gap-1.5 px-4 py-2.5 cursor-pointer select-none text-xs font-semibold uppercase tracking-wide text-gray-500 hover:text-gray-800 list-none [&::-webkit-details-marker]:hidden" },
+        h("span", { html: icon("chevron", "w-3 h-3 transition-transform group-open/field:rotate-90") }),
+        group.title
+      ),
+      // A field's visible(node, editor) shows it only when it applies
+      h("div", { class: "px-4 pb-4 space-y-3" }, group.fields.filter((field) => !field.visible || field.visible(node, this.editor)).map((field) => this.field(node, field)))
+    )
+    return details
+  }
+
+  field(node, field) {
+    const value = getValue(node, field.key) ?? ""
+    const set = (next, options = {}) => this.editor.setValue(node.id, field.key, next, options)
+    // A fieldset disables every input and button of a locked field at once.
+    const editable = this.editor.canEditField(node.id, field.key)
+    const control = editable
+      ? this.control(node, field, value, set)
+      : h("fieldset", { disabled: true, class: "opacity-60" }, this.control(node, field, value, set))
+    const expand = field.type === "code" && editable
+      ? h("button", { type: "button", title: `Edit ${field.label} in a larger window`, class: "absolute right-0 top-0 rounded px-1 text-[11px] font-medium text-blue-600 hover:bg-blue-50", onclick: () => this.expand(node, field) }, "Expand")
+      : null
+    // A div, not a label: a label would forward clicks to the first button or color picker inside it.
+    return h(
+      "div",
+      { class: "relative block" },
+      h("span", { class: "mb-1 block text-xs font-medium text-gray-700" }, field.label),
+      expand,
+      control,
+      field.hint ? h("span", { class: "mt-1 block text-[11px] leading-snug text-gray-500" }, field.hint) : null
+    )
+  }
+
+  control(node, field, value, set) {
+    switch (field.type) {
+      case "textarea":
+        return h("textarea", { class: `${INPUT} min-h-32`, rows: 4, value, oninput: (event) => set(event.target.value) })
+
+      case "code":
+        return codeInput({ value, language: field.language, oninput: set, class: "h-60" })
+
+      case "size":
+        return h("input", {
+          type: "text",
+          class: INPUT,
+          value,
+          placeholder: field.placeholder || "",
+          oninput: (event) => set(withUnit(event.target.value)),
+          onchange: (event) => (event.target.value = withUnit(event.target.value))
+        })
+
+      case "color":
+        return this.color(value, set)
+
+      case "select":
+        return h(
+          "select",
+          { class: INPUT, onchange: (event) => set(event.target.value) },
+          field.options.map((option) => {
+            const optionValue = typeof option === "string" ? option : option.value
+            const optionLabel = typeof option === "string" ? option || "Default" : option.label
+            return h("option", { value: optionValue, selected: optionValue === value }, optionLabel)
+          })
+        )
+
+      case "segmented":
+        return h(
+          "div",
+          { class: "flex rounded-md border border-gray-300 overflow-hidden" },
+          field.options.map((option) =>
+            h(
+              "button",
+              {
+                type: "button",
+                title: value === option.value ? "Click again to use the default" : "",
+                class: `flex-1 px-2 py-1 text-xs border-l first:border-l-0 border-gray-300 ${value === option.value ? "bg-blue-600 text-white" : "bg-white text-gray-700 hover:bg-gray-50"}`,
+                onclick: (event) => {
+                  event.preventDefault()
+                  set(value === option.value ? "" : option.value)
+                  this.render()
+                }
+              },
+              option.label
+            )
+          )
+        )
+
+      case "toggle":
+        return h(
+          "span",
+          { class: "flex items-center gap-2" },
+          h("input", {
+            type: "checkbox",
+            class: "h-4 w-4 rounded border-gray-300 text-blue-600",
+            checked: value === field.on,
+            onchange: (event) => set(event.target.checked ? field.on : field.off)
+          }),
+          h("span", { class: "text-xs text-gray-600" }, value === field.on ? "On" : "Off")
+        )
+
+      case "spacing":
+        return this.spacing(value, set)
+
+      case "list":
+        return this.list(node, field, Array.isArray(value) ? value : [], set)
+
+      case "image":
+        return this.image(node, field, value, set)
+
+      default:
+        return h("input", { type: "text", class: INPUT, value, placeholder: field.placeholder || "", oninput: (event) => set(event.target.value) })
+    }
+  }
+
+  // An image URL, or with the host's images (editor.media, core/media.js) a
+  // choice between one of those, a new upload, and a URL
+  image(node, field, value, set) {
+    const url = h("input", { type: "text", class: INPUT, value, placeholder: field.placeholder || "https://…", oninput: (event) => set(event.target.value) })
+    if (!this.editor.media.enabled) return url
+
+    const source = imageSource(node, this.editor, field)
+    const sources = this.control(node, { type: "segmented", options: [{ value: "upload", label: "Uploaded" }, { value: "web", label: "Web" }] }, source, (next) =>
+      this.editor.setValue(node.id, field.source, next || source)
+    )
+    return h("div", { class: "space-y-1.5" }, sources, source === "upload" ? this.mediaPicker(node, field, getValue(node, field.image)) : url)
+  }
+
+  mediaPicker(node, field, value) {
+    const { images, uploading, error } = this.editor.media
+    const current = images.find((image) => image.id === value)
+    const file = h("input", {
+      type: "file",
+      accept: "image/*",
+      class: "hidden",
+      onchange: (event) => {
+        const chosen = event.target.files[0]
+        if (chosen) this.editor.uploadImage(node.id, chosen, field)
+      }
+    })
+    const select = h(
+      "select",
+      {
+        class: `${INPUT} min-w-0 flex-1`,
+        onchange: (event) => {
+          const image = images.find((option) => option.id === event.target.value)
+          if (image) this.editor.chooseImage(node.id, image, field)
+        }
+      },
+      h("option", { value: "" }, images.length ? "Choose an image" : "No images yet"),
+      images.map((image) => h("option", { value: image.id, selected: image.id === value }, image.name))
+    )
+    return h(
+      "div",
+      {},
+      h(
+        "div",
+        { class: "flex items-center gap-1.5" },
+        select,
+        h("button", { type: "button", class: "shrink-0 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 disabled:opacity-50", disabled: uploading, onclick: () => file.click() }, uploading ? "Uploading…" : "Upload"),
+        file
+      ),
+      error ? h("p", { class: "mt-1 text-[11px] text-red-600", role: "alert" }, error) : null,
+      current ? h("img", { src: current.url, alt: "", class: "mt-2 max-h-24 rounded border border-gray-200" }) : null
+    )
+  }
+
+  // A code field in a dialog over the editor, for more room. Changes apply as
+  // you type, like in the field itself.
+  expand(node, field) {
+    const close = () => {
+      dialog.remove()
+      this.render()
+    }
+    const input = codeInput({ value: getValue(node, field.key) ?? "", language: field.language, oninput: (next) => this.editor.setValue(node.id, field.key, next), class: "h-full min-h-0 resize-none" })
+    input.classList.add("flex-1", "min-h-0")
+    const dialog = h(
+      "div",
+      {
+        class: "absolute inset-0 z-40 flex items-center justify-center bg-gray-900/40 p-6",
+        onmousedown: (event) => event.target === dialog && close(),
+        // Escape closes the dialog, not anything behind it
+        onkeydown: (event) => {
+          if (event.key !== "Escape") return
+          event.stopPropagation()
+          close()
+        }
+      },
+      h(
+        "div",
+        { role: "dialog", "aria-label": field.label, class: "flex h-full max-h-[800px] w-full max-w-5xl flex-col gap-3 rounded-xl bg-white p-4 shadow-xl" },
+        h(
+          "div",
+          { class: "flex items-center gap-3" },
+          h("h3", { class: "text-sm font-semibold text-gray-900" }, label(node) === field.label ? field.label : `${label(node)} · ${field.label}`),
+          field.hint ? h("span", { class: "text-xs text-gray-500" }, field.hint) : null,
+          h("button", { type: "button", title: "Close", class: "ml-auto w-8 h-8 flex items-center justify-center rounded-md text-gray-600 hover:bg-gray-100", html: icon("close"), onclick: close })
+        ),
+        input
+      )
+    )
+    this.editor.root.append(dialog)
+    input.textarea.focus()
+  }
+
+  color(value, set) {
+    const text = h("input", {
+      type: "text", class: `${INPUT} font-mono text-xs`, value, placeholder: "Default", oninput: (event) => {
+        set(event.target.value)
+        if (/^#[0-9a-f]{6}$/i.test(event.target.value)) swatch.value = event.target.value
+      }
+    })
+    const swatch = h("input", {
+      type: "color",
+      class: "h-7 w-8 shrink-0 cursor-pointer rounded border border-gray-300 bg-white p-0.5",
+      value: /^#[0-9a-f]{6}$/i.test(value) ? value : "#ffffff",
+      oninput: (event) => {
+        text.value = event.target.value
+        set(event.target.value)
+      }
+    })
+    return h("span", { class: "flex items-center gap-1.5" }, swatch, text)
+  }
+
+  spacing(value, set) {
+    const values = parseSpacing(value)
+    const inputs = ["Top", "Right", "Bottom", "Left"].map((side, i) =>
+      h(
+        "span",
+        { class: "block" },
+        h("input", {
+          type: "text",
+          class: `${INPUT} text-center px-1`,
+          value: values[i],
+          title: side,
+          placeholder: side[0],
+          oninput: (event) => {
+            values[i] = event.target.value
+            set(formatSpacing(values))
+          }
+        }),
+        h("span", { class: "block text-center text-[10px] text-gray-400" }, side)
+      )
+    )
+    return h("span", { class: "grid grid-cols-4 gap-1" }, inputs)
+  }
+
+  list(node, field, items, set) {
+    const update = (next) => {
+      set(next, { coalesce: false })
+      this.render()
+    }
+    const rows = items.map((item, index) =>
+      h(
+        "div",
+        { class: "rounded-md border border-gray-200 bg-gray-50 p-2 space-y-1.5" },
+        field.item.map((part) =>
+          part.type === "select"
+            ? h(
+              "select",
+              { class: INPUT, onchange: (event) => update(items.map((it, i) => (i === index ? { ...it, [part.name]: event.target.value } : it))) },
+              part.options.map((option) => h("option", { value: option, selected: option === item[part.name] }, option))
+            )
+            : h("input", {
+              type: "text",
+              class: INPUT,
+              placeholder: part.label,
+              value: item[part.name] ?? "",
+              oninput: (event) => {
+                items = items.map((it, i) => (i === index ? { ...it, [part.name]: event.target.value } : it))
+                set(items)
+              }
+            })
+        ),
+        h(
+          "div",
+          { class: "flex justify-end gap-1" },
+          h("button", {
+            type: "button", title: "Move up", class: "w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-gray-200 disabled:opacity-30", disabled: index === 0, html: icon("up", "w-3.5 h-3.5"), onclick: () => {
+              const next = [...items]
+                ;[next[index - 1], next[index]] = [next[index], next[index - 1]]
+              update(next)
+            }
+          }),
+          h("button", { type: "button", title: "Remove", class: "w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-gray-200 hover:text-red-600", html: icon("trash", "w-3.5 h-3.5"), onclick: () => update(items.filter((_, i) => i !== index)) })
+        )
+      )
+    )
+    return h(
+      "div",
+      { class: "space-y-2" },
+      rows,
+      h("button", { type: "button", class: "w-full rounded-md border border-dashed border-gray-300 py-1.5 text-xs text-gray-600 hover:border-blue-400 hover:text-blue-600", onclick: () => update([...items, { ...field.newItem }]) }, "Add")
+    )
+  }
+}