tess_edit 0.4.3 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c56f2e7b17a8fbd7a3ef64e0c12c14858918b5710ba8d0b50a76c26f4eb3f881
-  data.tar.gz: f99aadcc71360ee330d3583d5e7caac11514945e2d6c01501070f8cc79eda6b4
+  metadata.gz: 1401c4a6e315c3ae6d07dc4ee7cf80ae9b384fb532a570d09f5e6a1593da12a0
+  data.tar.gz: f0045ef4c910b201fade5d8f10245d61636a69f4bafd4fd6200beaaf29db6243
 SHA512:
-  metadata.gz: 674212f3ad1388f2c72e4a025c186be0cac74a599d7020d289b3f2e7d31f3fb9c8141ea7215efd9eeac21d3206646deae3b2bba05507d6b70f183821f32151dc
-  data.tar.gz: de52504e92d98fa3070159c34253542a42a32a9b226920bef1bfde9cc8b2cbd8245deabd6a51f26a20448fd2bb2e910ada14282cc8a210f086ff935e80f9417d
+  metadata.gz: 4a35b96d1c0696e3b1152c06392efa789256443651aaac7705f2df5c58924dc281d25b23b17e23509e6b18fd88bc0c7a7a9d8d693d0a049cfe365887299bf265
+  data.tar.gz: c6fbba58d1b069991db8aef3111950958cbbf6011ab38027cc347a8e7dd67c807a3427b0bdcbcac9ffc23637de25fdab63cbd80db92692a07a15c5eb6f8aa5d3

data/README.md

@@ -220,6 +220,8 @@ The endpoint answers `GET` with the variables at `path` (the roots without one),
 
 `children` says a variable has variables of its own, at the path with its name added; a `collection` is a list of them, and its path goes into its elements (`order.order_lines.product`). The editor offers a collection's `first`, `last` and `size`, and inside a Loop block (`{% for line in order.order_lines %}`) its variable, `line`, asking for `order.order_lines.…` for it. An unknown path answers 404. [Liquidum](https://github.com/entdec/liquidum)'s `/liquidum/variables` answers this way from your drops; the dummy app's `VariablesController` is a fixed example (`/?variables=1`).
 
+The endpoint can change while the editor is open, say when the record a template is for changes: set `data-tess-edit-variables-url-value` again and the editor asks the new one.
+
 A field of your own gets the `{ }` button with `liquid: true`, or `liquid: "expression"` (a condition) or `liquid: "collection"` (what a loop goes over) for Liquid without braces.
 
 ### Translations
@@ -276,6 +278,32 @@ registerTessEdit(application)
 
 Roles say where a block may go: `body` (in the email 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: `mjml` for emails, and a hook of its own for each kit. Stored documents don't change; a document with a block type that isn't registered fails `normalize`.
 
+`extendBlock(type, { fields })` adds fields to a block that is registered: a group with the title of one of its groups adds to that one, any other goes last, or before the group its `before` names.
+
+#### Your own form fields in Inspect
+
+A `slot` field shows an element of your page in Inspect, for settings that aren't part of the document, such as a template's trigger in your own form fields. Render the element inside the editor, hidden, as a `slot` target named by `data-tess-edit-slot`:
+
+```erb
+<div data-controller="tess-edit">
+  <div data-tess-edit-target="slot" data-tess-edit-slot="trigger" hidden>
+    <%= form.select :event, … %>
+  </div>
+</div>
+```
+
+```js
+extendBlock("email", {
+  fields: [{ title: "When", before: "Message", fields: [{
+    key: "trigger", label: "Trigger", type: "slot", slot: "trigger",
+    summary: (element) => element.querySelector("select").selectedOptions[0]?.text,  // shown while collapsed
+    open: (element) => Boolean(element.querySelector("[role=alert]"))             // open at first, e.g. with errors
+  }] }]
+})
+```
+
+With a `summary` the field shows collapsed to it, with a button to edit it; without one the element always shows. Its values are your form fields, submitted with the form; without the element the field doesn't show. The element moves into Inspect once and stays there, hidden while another block is selected, so your Stimulus controllers in it keep their state. Combining or splitting the panels moves it again: its controllers reconnect then, with the values typed and chosen written into the fields' attributes first. The demo has one at `/?slots=1` (`test/dummy/app/javascript/slots.js`).
+
 A select field's `options` can be a function of the editor, `options: (editor) => [...]`, for choices from your app. Give the editor those with `data-tess-edit-options-value` (JSON), which blocks read as `editor.options`.
 
 ## Kits
@@ -301,6 +329,8 @@ A block is part of the email kit unless it says otherwise. `extendBlock` adds ki
 
 Loading a document into the editor of another kit fails with a message saying which editor it is for.
 
+
+A kit can leave out `blocks`: with `blocks: false` it is its root alone, such as a text message with its fields in Inspect, and the editor has no Blocks and Layers panels. Its `canvas` and `outputs` hooks get the editor's `options` and `element` too, for a canvas that previews from your app (`/?kit=memo` in the demo), where a link with `data-tess-open` opens in a new tab instead of selecting; the canvas renders again when `data-tess-edit-variables-url-value` changes. A field's `hint` can be a function of its value, `` hint: (value, node) => `${value.length} / 160` ``, kept up to date as it's typed. Code fields color `html`, `xml`, `css` and `yaml`.
 ## Development
 
 The dummy app in `test/dummy` serves a demo page:

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

@@ -22,7 +22,7 @@ export default {
   }),
   fields: [
     {
-      title: "Email",
+      title: "Message",
       fields: [
         { key: "data.subject", label: "Subject", type: "text", liquid: true },
         { key: "data.preheader", label: "Preview text", type: "text", liquid: true, hint: "Shown after the subject in most inboxes." }

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

@@ -1,8 +1,10 @@
 // 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. A select's options can be a
-// function of the editor, options(editor), for choices the host gives.
+// spacing, list and slot (an element of the host's); see ui/inspector.js. A select's options can be a
+// function of the editor, options(editor), for choices the host gives. A
+// field's hint can be a function of its value, hint(value, node), shown as
+// it's typed (a counter).
 // `liquid` gives a field a button to insert the host's variables (see
 // Inspector#variables).
 

data/app/javascript/tess_edit/controllers/editor_controller.js

@@ -11,14 +11,16 @@
 //             as tabs on one side). The default; a choice made in the editor's
 //             top bar is remembered per browser. Below NARROW_WIDTH the editor
 //             puts all panels on the left, whatever the choice, to leave room
-//             for the canvas.
+//             for the canvas. A kit without blocks (blocks: false) has Inspect
+//             on the right only.
 //   compileUrl  the endpoint that compiles the email kit's MJML to HTML (default
 //               /tess_edit/compile, the engine mounted at /tess_edit)
 //   mediaUrl    the host's images, chosen and uploaded in Image blocks (see
 //               core/media.js); without it images only have a URL
 //   variablesUrl  the variables a template can use, suggested while typing {{
 //                 and browsed with { } buttons (see core/variables.js), e.g.
-//                 Liquidum's /liquidum/variables?roots=…
+//                 Liquidum's /liquidum/variables?roots=…; a host can change it,
+//                 e.g. when the class a template is for changes
 //   translationsUrl  the host's translations for Liquid's t filter ({{ '.greeting' | t }}),
 //                    shown in a language chosen in the top bar, listed and edited
 //                    while pointed at, and made from selected text (see
@@ -34,6 +36,8 @@
 // Targets (all optional, usually hidden inputs in a form):
 //   jsonInput, mjmlInput, htmlInput  kept up to date with every change, with
 //                    the kit's outputs (an <output>Input target for each)
+//   slot             an element of the host's, named by data-tess-edit-slot,
+//                    that a "slot" field shows in Inspect (see ui/inspector.js)
 // Events:
 //   tess-edit:change  detail: { json, ...the kit's outputs, errors, document }:
 //                     for an email { json, mjml, html, errors, document }, with
@@ -77,7 +81,7 @@ function placed(node, at) {
 
 export default class extends Controller {
   static values = { kit: { type: String, default: DEFAULT_KIT }, document: String, sample: { type: Boolean, default: true }, frame: { type: Boolean, default: true }, panels: { type: String, default: "split" }, compileUrl: { type: String, default: COMPILE_URL }, mediaUrl: String, variablesUrl: String, translationsUrl: String, lock: String, blocks: String, options: String }
-  static targets = ["jsonInput", "mjmlInput", "htmlInput"]
+  static targets = ["jsonInput", "mjmlInput", "htmlInput", "slot"]
 
   connect() {
     this.kit = getKit(this.kitValue)
@@ -123,6 +127,24 @@ export default class extends Controller {
     this.element.tessEdit = this
   }
 
+  // Points the editor at other variables (variablesUrl), once it's connected
+  variablesUrlValueChanged() {
+    if (!this.variables) return
+    this.variables = new Variables(this.variablesUrlValue)
+    if (!this.variableMenu && this.variables.enabled) {
+      this.variableMenu = new VariableMenu(this)
+      this.textEditing.menu = this.variableMenu
+    }
+    this.inspector.render()
+    // A kit's canvas may depend on them, like a preview with sample values
+    this.scheduleCanvas()
+  }
+
+  // The host's element for a slot field, if it gave one
+  slot(name) {
+    return this.slotTargets.find((element) => element.dataset.tessEditSlot === name) || null
+  }
+
   // --- translations -------------------------------------------------------------
 
   // The language translations show in: the one chosen in the top bar, else
@@ -407,6 +429,13 @@ export default class extends Controller {
     const panelClass = (border, width) => `${width} shrink-0 flex flex-col ${border} border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 min-h-0`
     // Only the sidebars move: moving <main> would reload the canvas iframe and blank it.
     if (!this.main.isConnected) this.body.append(this.main)
+    this.inspector?.freezeSlots()
+    if (!this.hasBlocks) {
+      this.inspectPanel.className = panelClass("border-l", "w-80")
+      if (this.inspectorElement.parentNode !== this.inspectPanel) this.inspectPanel.replaceChildren(this.inspectorElement)
+      if (this.main.nextSibling !== this.inspectPanel) this.main.after(this.inspectPanel)
+      return
+    }
     this.sidePanel.replaceChildren(this.leftTabs, this.blocksElement, this.treeElement)
     if (this.layout === "split") {
       this.sidePanel.className = panelClass("border-r", "w-64")
@@ -451,11 +480,17 @@ export default class extends Controller {
     this.resizeObserver.observe(this.root)
   }
 
-  // The layout in use: the chosen one, unless the editor is too narrow to split.
+  // The layout in use: the chosen one, unless the editor is too narrow to
+  // split, or the kit has no blocks
   get layout() {
+    if (!this.hasBlocks) return "split"
     return this.narrow && this.panels === "split" ? "left" : this.panels
   }
 
+  get hasBlocks() {
+    return this.kit.blocks !== false
+  }
+
   storedPanels() {
     return this.stored(PANELS_KEY)
   }
@@ -505,7 +540,8 @@ export default class extends Controller {
       this.kit.devices?.length ? toggle(this.device, this.kit.devices.map((device) => [device.key, device.icon, device.title]), (device) => this.setDevice(device)) : null,
       this.translations.enabled ? this.translationLocaleMenu() : null,
       h("div", { class: "flex-1" }),
-      toggle(
+      // Without blocks there are no panels to arrange
+      this.hasBlocks && toggle(
         this.layout,
         [
           ["left", "panels-left", "All panels on the left"],
@@ -514,7 +550,7 @@ export default class extends Controller {
         ],
         (panels) => this.setPanels(panels)
       ),
-      h("span", { class: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-700" }),
+      this.hasBlocks && h("span", { class: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-700" }),
       h("button", { type: "button", title: "Undo (⌘Z)", class: TOOL, disabled: !this.history.canUndo, html: icon("undo"), onclick: () => this.undo() }),
       h("button", { type: "button", title: "Redo (⇧⌘Z)", class: TOOL, disabled: !this.history.canRedo, html: icon("redo"), onclick: () => this.redo() }),
       h(
@@ -590,7 +626,7 @@ export default class extends Controller {
   async run(channel, render) {
     this.requests[channel]?.abort()
     const request = (this.requests[channel] = new AbortController())
-    const result = await render({ compileUrl: this.compileUrlValue, signal: request.signal })
+    const result = await render({ compileUrl: this.compileUrlValue, signal: request.signal, options: this.options, element: this.element })
     return request.signal.aborted ? null : result
   }
 

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

@@ -49,12 +49,17 @@
 //     starter: () => doc,              // the sample document
 //     devices: [{ key, icon, title, width }],  // optional: canvas widths in the top bar
 //     previewTitle: "…",               // the Preview button's title
-//     canvas: async (doc, { editor, compileUrl, signal }) => ({ html, errors }),
+//     canvas: async (doc, { editor, compileUrl, signal, options, element }) => ({ html, errors }),
 //                                      // the canvas's HTML, with the tess-<id> and tessph-<id>
-//                                      // classes when editor is true; null when aborted
-//     outputs: async (doc, { compileUrl, signal }) => ({ outputs: { html: "…" }, errors }),
+//                                      // classes when editor is true; null when aborted.
+//                                      // options are the editor's (data-tess-edit-options-value),
+//                                      // element its element, for a kit that reads its page;
+//                                      // a link with data-tess-open opens in a new tab
+//     outputs: async (doc, { compileUrl, signal, options, element }) => ({ outputs: { html: "…" }, errors }),
 //                                      // what the editor stores besides the JSON (the inputs,
 //                                      // the change event and the Code dialog); null when aborted
+//     blocks: false,                   // optional: a kit of its root alone, such as a text
+//                                      // message, has no Blocks and Layers panels
 //     notes: { html: "…" },            // optional: what each output is, in the Code dialog
 //     errors: "The email could not be compiled"  // shown before the reasons
 //   })
@@ -65,8 +70,9 @@
 //
 //   extendBlock("text", { kits: ["note"], render: { note: (node, ctx) => "<div>…</div>" } })
 //
-// which adds the kits and render hooks (and any fields, in groups of their
-// own) to the block as it is registered, also when another gem replaced it.
+// which adds the kits and render hooks (and any fields, to its groups or in
+// groups of their own) to the block as it is registered, also when another
+// gem replaced it.
 
 import { builtinBlocks, builtinCategories } from "tess_edit/blocks/builtin"
 import { builtinKits } from "tess_edit/kits/builtin"
@@ -154,7 +160,9 @@ export function registerBlock(definition) {
   return definitions.get(type)
 }
 
-// Adds kits, render hooks and field groups to a registered block
+// Adds kits, render hooks and field groups to a registered block. A group
+// with the title of one it has adds its fields to that one; a new group goes
+// last, or before the group its `before` names.
 export function extendBlock(type, { kits = [], render = {}, fields = [] } = {}) {
   const definition = definitions.get(type)
   if (!definition) throw new Error(`No block ${type} to extend`)
@@ -162,11 +170,19 @@ export function extendBlock(type, { kits = [], render = {}, fields = [] } = {})
     ...definition,
     kits: [...new Set([...definition.kits, ...kits])],
     render: { ...definition.render, ...render },
-    fields: [...(definition.fields || []), ...fields]
+    fields: fields.reduce(addGroup, definition.fields || [])
   })
   return definitions.get(type)
 }
 
+function addGroup(groups, { before, ...group }) {
+  if (groups.some((existing) => existing.title === group.title)) {
+    return groups.map((existing) => (existing.title === group.title ? { ...existing, fields: [...existing.fields, ...group.fields] } : existing))
+  }
+  const index = groups.findIndex((existing) => existing.title === before)
+  return index < 0 ? [...groups, group] : [...groups.slice(0, index), group, ...groups.slice(index)]
+}
+
 export function getBlock(type) {
   return definitions.get(type)
 }

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

@@ -90,7 +90,13 @@ export class Canvas {
     if (mode === "edit") {
       this.listen()
       this.annotate()
-    } else doc.addEventListener("click", (event) => event.target.closest("a") && event.preventDefault(), true)
+    } else {
+      doc.addEventListener("click", (event) => {
+        if (!event.target.closest("a")) return
+        event.preventDefault()
+        this.openLink(event)
+      }, true)
+    }
     this.refresh()
   }
 
@@ -327,6 +333,7 @@ export class Canvas {
     if (this.editor.editingId && event.target.closest?.(".ProseMirror")) return
     if (event.target.closest?.("#tess-overlay")) return
     event.preventDefault()
+    if (this.openLink(event)) return
     if (this.free.swallowClick()) return
     const hit = this.hit(event.target)
     if (hit?.placeholder) {
@@ -342,6 +349,15 @@ export class Canvas {
     this.editor.select(hit ? hit.id : this.editor.doc.id, { reveal: true })
   }
 
+  // A link a kit marks with data-tess-open, part of its canvas rather than of
+  // the document (a link to a designer), opens in a new tab
+  openLink(event) {
+    const link = event.target.closest?.("a[data-tess-open][href]")
+    if (!link) return false
+    window.open(link.href, "_blank", "noopener")
+    return true
+  }
+
   onDoubleClick(event) {
     const hit = this.hit(event.target)
     if (hit && !hit.placeholder && getBlock(find(this.editor.doc, hit.id).node.type)?.richText) this.editor.startEditing(hit.id)

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

@@ -1,5 +1,6 @@
 // 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.
+// transparent, over a copy of the text with HTML (or XML), CSS, YAML 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.
@@ -78,7 +79,17 @@ export function highlightCss(text) {
   ])
 }
 
-const HIGHLIGHT = { html: highlightHtml, css: highlightCss }
+export function highlightYaml(text) {
+  return tokenize(text, [
+    ["liquid", LIQUID],
+    ["comment", /(?:^|(?<=\s))#[^\n]*/],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'[^'\n]*'/, (string) => span("string", liquidIn(string))],
+    ["property", /[A-Za-z_$][\w $.-]*(?=:(?:\s|$))/],
+    ["number", /\b(?:-?\d+(?:\.\d+)?|true|false|null)\b/]
+  ])
+}
+
+const HIGHLIGHT = { html: highlightHtml, xml: highlightHtml, css: highlightCss, yaml: highlightYaml }
 
 // Replaces the selection, keeping the textarea's own undo where the browser allows
 function insert(textarea, text) {
@@ -107,7 +118,7 @@ function onKeydown(event) {
   }
 }
 
-// value, language ("html" or "css"), oninput(value); class sizes the field
+// value, language ("html", "xml", "css" or "yaml"), 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 dark:bg-gray-700 text-gray-800 dark:text-gray-200` })

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

@@ -33,3 +33,35 @@ export function debounce(fn, wait) {
   debounced.cancel = () => clearTimeout(timer)
   return debounced
 }
+
+// Puts items into parent in this order. Kept elements (a Set) are never
+// taken out: they are hidden when not among the items and stay where they
+// are when they are, with the other items put around them. Moving an element
+// reconnects the Stimulus controllers inside it, which is what keeping
+// avoids. Any other child goes.
+export function place(parent, items, kept = new Set()) {
+  const wanted = new Set(items)
+  for (const child of [...parent.children]) {
+    if (wanted.has(child)) continue
+    if (kept.has(child)) child.hidden = true
+    else child.remove()
+  }
+  let previous = null
+  for (const item of items) {
+    if (kept.has(item)) item.hidden = false
+    if (item.parentNode !== parent) previous ? previous.after(item) : parent.prepend(item)
+    previous = item
+  }
+}
+
+// Writes the values of the fields in element into their attributes, for
+// when it has to move: controllers that copy markup (outerHTML) as they
+// reconnect, like Satis's toggle, then keep what was typed and chosen.
+export function freeze(element) {
+  element.querySelectorAll("input, textarea, select").forEach((field) => {
+    if (field.tagName === "SELECT") [...field.options].forEach((option) => option.toggleAttribute("selected", option.selected))
+    else if (field.tagName === "TEXTAREA") field.textContent = field.value
+    else if (["checkbox", "radio"].includes(field.type)) field.toggleAttribute("checked", field.checked)
+    else if (field.type !== "file") field.setAttribute("value", field.value)
+  })
+}

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

@@ -1,5 +1,18 @@
 // 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.
+//
+// A "slot" field shows an element of the host's, rendered with the page:
+//
+//   <div data-tess-edit-target="slot" data-tess-edit-slot="trigger" hidden>…form fields…</div>
+//   { key: "trigger", label: "When", type: "slot", slot: "trigger",
+//     summary: (element) => "Account · created", open: (element) => false }
+//
+// Its values are the host's form fields, not part of the document. With a
+// summary it shows collapsed to that, with a button to edit it, and
+// open(element) opens it at first, e.g. when it has errors; without one it
+// always shows. The element is never recreated, so the
+// host's Stimulus controllers in it keep their state: it and its group stay
+// in Inspect, hidden while another block is selected (see place in ui/dom.js).
 
 import { imageSource } from "tess_edit/core/media"
 import { getBlock, label } from "tess_edit/core/registry"
@@ -7,7 +20,7 @@ import { find, getValue } from "tess_edit/core/document"
 import { translationCalls } from "tess_edit/core/translations"
 import { loopScope } from "tess_edit/core/variables"
 import { codeInput } from "tess_edit/ui/code_input"
-import { h } from "tess_edit/ui/dom"
+import { freeze, h, place } from "tess_edit/ui/dom"
 import { icon } from "tess_edit/ui/icons"
 import { inputAdapter, suggestIn } from "tess_edit/ui/variable_menu"
 
@@ -42,6 +55,17 @@ export class Inspector {
     this.adapters = new Map()
     this.inputs = new Map()
     this.hints = []
+    // Groups with a slot, and the slots, by key: kept, never rendered again
+    this.keptGroups = new Map()
+    this.slots = new Map()
+    this.header = h("div", { class: "flex items-center gap-2 px-4 h-12 border-b border-gray-200 dark:border-gray-700 shrink-0" })
+    this.body = h("div", { class: "flex-1 overflow-y-auto pb-6" })
+    this.element.append(this.header, this.body)
+  }
+
+  // Before Inspect moves (see the editor's arrangePanels)
+  freezeSlots() {
+    this.slots.forEach(({ element }) => freeze(element))
   }
 
   // Again, when the translations or the editor's language change
@@ -70,29 +94,45 @@ export class Inspector {
           h("button", { type: "button", title, class: "w-7 h-7 flex items-center justify-center rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100", html: icon(name), onclick })
         )
 
-    const header = h(
-      "div",
-      { class: "flex items-center gap-2 px-4 h-12 border-b border-gray-200 dark:border-gray-700 shrink-0" },
+    this.header.replaceChildren(
       h("span", { class: "text-gray-400 dark:text-gray-500", html: icon(definition.icon, "w-4 h-4") }),
       h("h2", { class: "font-semibold text-gray-900 dark:text-gray-100 truncate" }, label(node)),
       h("div", { class: "ml-auto flex items-center gap-0.5" }, actions)
     )
 
-    // A group shows when one of its fields applies (see visible below)
-    const groups = (definition.fields || []).filter((group) => group.fields.some((field) => !field.visible || field.visible(node, this.editor))).map((group) => this.group(node, group))
+    // A group shows when one of its fields applies (see shows below)
+    const groups = (definition.fields || []).filter((group) => group.fields.some((field) => this.shows(node, field))).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 dark:bg-amber-900/30 px-3 py-2 text-xs text-amber-800 dark:text-amber-200" }, 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 dark:bg-gray-700/50 px-3 py-2 text-xs text-gray-600 dark:text-gray-300" }, definition.hint) : null
 
-    this.element.replaceChildren(header, h("div", { class: "flex-1 overflow-y-auto pb-6" }, locked, hint, groups))
+    place(this.body, [locked, hint, ...groups].filter(Boolean), new Set([...this.keptGroups.values()].map((kept) => kept.details)))
+  }
+
+  // A field's visible(node, editor) shows it only when it applies; a slot
+  // only when the host gave its element
+  shows(node, field) {
+    if (field.type === "slot" && !this.editor.slot(field.slot)) return false
+    return !field.visible || field.visible(node, this.editor)
   }
 
   group(node, group) {
     const key = `${node.type}:${group.title}`
     const open = this.openGroups.has(key) ? this.openGroups.get(key) : !group.collapsed
-    const details = h(
+    const fields = group.fields.filter((field) => this.shows(node, field)).map((field) => this.field(node, field))
+    const kept = this.keptGroups.get(key) || (group.fields.some((field) => field.type === "slot") ? this.keepGroup(key, group) : null)
+    if (kept) {
+      kept.details.open = open
+      place(kept.list, fields, new Set([...this.slots.values()].map((slot) => slot.wrapper)))
+      return kept.details
+    }
+    return this.groupElement(key, group, open, h("div", { class: "px-4 pb-4 space-y-3" }, fields))
+  }
+
+  groupElement(key, group, open, list) {
+    return h(
       "details",
       { class: "group/field border-b border-gray-100 dark:border-gray-700", open, ontoggle: (event) => this.openGroups.set(key, event.currentTarget.open) },
       h(
@@ -101,13 +141,20 @@ export class Inspector {
         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)))
+      list
     )
-    return details
+  }
+
+  keepGroup(key, group) {
+    const list = h("div", { class: "px-4 pb-4 space-y-3" })
+    const kept = { details: this.groupElement(key, group, !group.collapsed, list), list }
+    this.keptGroups.set(key, kept)
+    return kept
   }
 
   field(node, field) {
+    if (field.type === "slot") return this.slot(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.
@@ -128,15 +175,22 @@ export class Inspector {
       ? h("button", { type: "button", title: "Make translatable: keep the selected text, or all of it, as a translation", class: "rounded px-1 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/40", html: icon("translate", "w-3.5 h-3.5"), onclick: () => this.makeTranslatable(input) })
       : null
     const tools = expand || variables || translate ? h("span", { class: "absolute right-0 top-0 flex items-center gap-0.5" }, expand, variables, translate) : null
+    // A hint can be a function of the value, kept up to date as it's typed: hint(value, node)
+    const hint = field.hint ? h("span", { class: "mt-1 block text-[11px] leading-snug text-gray-500 dark:text-gray-400" }) : null
+    const showHint = () => {
+      const current = find(this.editor.doc, node.id)?.node || node
+      hint.textContent = typeof field.hint === "function" ? field.hint(getValue(current, field.key) ?? "", current) : field.hint
+    }
+    if (hint) showHint()
     // 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" },
+      { class: "relative block", oninput: typeof field.hint === "function" ? showHint : null },
       h("span", { class: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300" }, field.label),
       tools,
       control,
       input ? this.translationHint(input) : null,
-      field.hint ? h("span", { class: "mt-1 block text-[11px] leading-snug text-gray-500 dark:text-gray-400" }, field.hint) : null
+      hint
     )
   }
 
@@ -222,6 +276,48 @@ export class Inspector {
     }
   }
 
+  // The host's element, collapsed to its summary until edited
+  slot(field) {
+    let slot = this.slots.get(field.slot)
+    if (!slot) {
+      const element = this.editor.slot(field.slot)
+      const summary = h("span", { class: "min-w-0 flex-1 truncate text-[13px] text-gray-700 dark:text-gray-300" })
+      const button = h("button", { type: "button", class: "ml-auto shrink-0 rounded px-1.5 py-0.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/40", "aria-expanded": "false", onclick: () => this.toggleSlot(slot) })
+      const holder = h("div", { class: "pt-1" })
+      slot = {
+        field,
+        element,
+        summary,
+        button,
+        holder,
+        open: !field.summary || Boolean(field.open?.(element)),
+        wrapper: h("div", { class: "block" }, h("span", { class: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300" }, field.label), h("div", { class: "flex items-center gap-2" }, summary, button), holder)
+      }
+      // Its only move: it reconnects, with what was typed so far
+      freeze(element)
+      holder.append(element)
+      element.hidden = false
+      this.slots.set(field.slot, slot)
+    }
+    this.showSlot(slot)
+    return slot.wrapper
+  }
+
+  toggleSlot(slot) {
+    slot.open = !slot.open
+    this.showSlot(slot)
+  }
+
+  showSlot(slot) {
+    const { open, field, element, button, holder, summary } = slot
+    holder.hidden = !open
+    button.parentElement.hidden = !field.summary
+    button.textContent = open ? "Done" : "Edit"
+    button.setAttribute("aria-expanded", String(open))
+    summary.hidden = open
+    summary.textContent = open ? "" : field.summary?.(element) || ""
+  }
+
   // Suggests the host's Liquid variables (editor.variables) while typing {{ in
   // a text field. A field's `liquid` also gives it a { } button to browse
   // them: true for Liquid in text, "expression" for a condition, "collection"

data/lib/tess_edit/version.rb

@@ -1,3 +1,3 @@
 module TessEdit
-  VERSION = "0.4.3"
+  VERSION = "0.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tess_edit
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - Tom de Grunt