phlex-reactive 0.14.3 → 0.15.0

data/app/javascript/phlex/reactive/runtime.js

@@ -35,6 +35,8 @@ import * as effectsFeature from "phlex/reactive/features/effects"
 import * as devtoolsFeature from "phlex/reactive/features/devtools"
 import * as hintsFeature from "phlex/reactive/features/hints"
 import * as deferFeature from "phlex/reactive/features/defer"
+import * as sortableFeature from "phlex/reactive/features/sortable"
+import * as presenceFeature from "phlex/reactive/features/presence"
 
 // phlex/reactive/runtime — the reactive controller WITHOUT its feature
 // modules (issue #275): the code both client entries share. It is not an
@@ -198,6 +200,7 @@ export function registerReactiveStreamRender() {
   if (typeof document === "undefined" || typeof document.addEventListener !== "function") return
   streamRenderRegistered = true
   document.addEventListener("turbo:before-stream-render", (event) => {
+    streamIntoRoots(event)
     // The opt-in entry sees every stream (it may hold one for a module the
     // incoming content needs); with no entry hook, a loaded effects module
     // wraps the stream directly — in the default entry, always.
@@ -209,6 +212,39 @@ export function registerReactiveStreamRender() {
 // The names this registration had while it was two listeners.
 export { registerReactiveStreamRender as registerReactiveDismiss, registerReactiveStreamRender as registerReactiveEffects }
 
+// --- A stream into a connected root (issue #356) ---
+// A morph of a root makes it re-read its feature markers (#boundRootMorph); a
+// stream that renders INTO it — append, prepend or update of the root or a
+// child, before, after or replace of a child — fires neither a lifecycle nor
+// a morph of the root, so a marker it brings was never connected. The roots
+// a stream renders into are resolved here, before anything (effects, the opt-in
+// entry's hold) wraps Turbo's render; once that render has run, each one still
+// connected is told (STREAMED, not bubbling: an outer root's content is not
+// its own). The root re-runs its connected features' seeds and connects what
+// the new content needs, in both entries.
+const STREAMED = "reactive:streamed"
+
+function streamIntoRoots(event) {
+  const detail = event.detail
+  const render = detail?.render
+  const stream = detail?.newStream ?? event.target
+  const action = stream?.getAttribute?.("action")
+  const into = /^(append|prepend|update)$/.test(action)
+  if (typeof render !== "function" || !(into || /^(before|after|replace)$/.test(action))) return
+  const id = stream.getAttribute("target")
+  const selector = stream.getAttribute("targets")
+  const roots = new Set()
+  for (const target of id ? [document.getElementById(id)] : selector ? document.querySelectorAll(selector) : []) {
+    const root = (into ? target : target?.parentElement)?.closest?.('[data-controller~="reactive"]')
+    if (root) roots.add(root)
+  }
+  if (roots.size === 0) return
+  detail.render = async (el) => {
+    await render(el)
+    for (const root of roots) if (root.isConnected) root.dispatchEvent(new Event(STREAMED))
+  }
+}
+
 // For the opt-in entry: what to do with a stream before its render — hold it
 // for a module the incoming content needs. `handle(event, effects)` gets the
 // loaded effects module (or undefined) and wraps the stream with it itself.
@@ -236,12 +272,80 @@ export function __resetReactiveStreamRenderForTest() {
 //                            for the attribute AND the property. Nothing else
 //                            (a root's token, a field's class) is held.
 // data-reactive-morph-value on a field lets the morph write it while focused.
+// --- An engine without contenteditable="plaintext-only" (issue #355) ---
+// reactive_editable renders contenteditable="plaintext-only": the browser
+// itself then pastes plain text and inserts "\n" for Enter. An engine without
+// it reads the value as INVALID — the element is not editable, cannot even be
+// focused — so there every reactive editable is switched to "true" (and the
+// bindings feature does the plain-text paste itself). However it reaches the
+// page: present at load, appended by a stream into a root that is already
+// connected, loaded in a frame, written back by a morph of an unfocused
+// editable, or made reactive by a morph. One observer, only in such an engine; elsewhere the probe is all
+// that runs. Detected once per page.
+let plaintextOnly
+let plaintextObserver = null
+const PLAINTEXT_EDITABLE = "[data-reactive-editable][contenteditable=plaintext-only]"
+
+function plaintextSupported() {
+  if (plaintextOnly === undefined) {
+    try {
+      const probe = document.createElement("div")
+      probe.contentEditable = "plaintext-only"
+      plaintextOnly = probe.contentEditable === "plaintext-only"
+    } catch {
+      plaintextOnly = false
+    }
+  }
+  return plaintextOnly
+}
+
+function makeEditable(el) {
+  if (el.matches?.(PLAINTEXT_EDITABLE)) el.setAttribute("contenteditable", "true")
+  el.querySelectorAll?.(PLAINTEXT_EDITABLE).forEach(makeEditable)
+}
+
+export function registerReactivePlaintext() {
+  // (No element factory, no page to observe: never probe a stub document.)
+  if (plaintextObserver || typeof document === "undefined" || typeof document.createElement !== "function") return
+  if (plaintextSupported()) return
+  makeEditable(document)
+  plaintextObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") makeEditable(record.target)
+      else record.addedNodes.forEach(makeEditable)
+    }
+  })
+  plaintextObserver.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    // (a morph can also make an existing plaintext-only element reactive)
+    attributeFilter: ["contenteditable", "data-reactive-editable"],
+  })
+}
+
+// For tests: what the probe answers (undefined probes again), with no
+// observer installed.
+export function __setReactivePlaintextOnlyForTest(value) {
+  plaintextObserver?.disconnect()
+  plaintextObserver = null
+  plaintextOnly = value
+}
+
 let morphFocusRegistered = false
 
+//
+// A reactive_editable (issue #351) is held the same way, but its "value" is its
+// CHILDREN: a focused one keeps them (text and caret) while every attribute
+// still morphs — copied here from the render, then the element's morph is
+// cancelled (cancelling is all-or-nothing in Idiomorph). Its contenteditable
+// stays as it is: the runtime switches it to "true" in an engine without
+// plaintext-only (registerReactivePlaintext, #355). Every morph of an editable, held or not, records the
+// render's text as its SERVER TEXT (the Escape revert, the dirty baseline).
 function holdsTypedValue(el) {
   return (
     el === document.activeElement &&
-    (el.localName === "input" || el.localName === "textarea") &&
+    (el.localName === "input" || el.localName === "textarea" || el.hasAttribute("data-reactive-editable")) &&
     !el.hasAttribute("data-reactive-morph-value") &&
     !!el.closest('[data-controller~="reactive"]')
   )
@@ -254,11 +358,26 @@ export function registerReactiveMorphFocus() {
   document.addEventListener("turbo:before-morph-element", (event) => {
     const el = event.target
     const next = event.detail?.newElement // absent when Turbo asks before a removal
-    if (!next || event.defaultPrevented || el.localName !== "input" || !holdsTypedValue(el)) return
+    if (!next || event.defaultPrevented) return
+    if (el.hasAttribute?.("data-reactive-editable")) {
+      serverTexts.set(el, editableValue(next))
+      if (!holdsTypedValue(el)) return
+      for (const { name } of [...el.attributes]) {
+        if (!next.hasAttribute(name) && name !== "contenteditable") el.removeAttribute(name)
+      }
+      for (const { name, value } of next.attributes) {
+        if (name !== "contenteditable" && el.getAttribute(name) !== value) el.setAttribute(name, value)
+      }
+      return event.preventDefault()
+    }
+    if (el.localName !== "input" || !holdsTypedValue(el)) return
     const value = next.getAttribute("value")
     if (value == null) el.removeAttribute("value")
     else if (el.getAttribute("value") !== value) el.setAttribute("value", value)
   })
+  // An editable a morph never reached (a stream append) records its server
+  // text when first focused — before anything can be typed into it.
+  document.addEventListener("focusin", (event) => seedServerText(event.target))
   document.addEventListener("turbo:before-morph-attribute", (event) => {
     if (event.detail?.attributeName === "value" && holdsTypedValue(event.target)) event.preventDefault()
   })
@@ -462,6 +581,7 @@ export function registerReactiveActions() {
   registerReactiveDefer()
   registerReactiveStreamRender()
   registerReactiveMorphFocus()
+  registerReactivePlaintext()
   registerReactiveOffline()
   registerReactiveDev()
 }
@@ -623,6 +743,51 @@ export const EDITOR_SELECTOR =
   ":is(lexxy-editor, trix-editor, [contenteditable=''], [contenteditable=true], [contenteditable=plaintext-only])"
 export const EDITOR_TAGS = new Set(["lexxy-editor", "trix-editor"])
 
+// A reactive_editable's value (issue #351): its text with line breaks — a
+// <br> is one, a block element (the <div> a contenteditable=true Enter
+// inserts) starts and ends a line — "\r\n" normalised, ONE trailing newline
+// dropped (the <br> browsers keep at the end), and folded to spaces when the
+// field is single-line. Read from the DOM, not innerText: no layout, the same
+// on a detached render and under any white-space.
+export function editableValue(el) {
+  let text = ""
+  // A block's edge asks for a line break; the next text or <br> pays it,
+  // once, unless the text already ends in one.
+  let line = false
+  const add = (s) => {
+    if (line && text && !text.endsWith("\n")) text += "\n"
+    line = false
+    text += s
+  }
+  const walk = (node) => {
+    for (const child of node.childNodes) {
+      const block = /^(div|p|li)$/.test(child.localName)
+      if (block) line = true
+      if (child.nodeType === 3) child.data && add(child.data)
+      else if (child.localName === "br") add("\n")
+      else if (child.nodeType === 1) walk(child)
+      if (block) line = true
+    }
+  }
+  walk(el)
+  text = text.replace(/\r\n?/g, "\n").replace(/\n$/, "")
+  return el.getAttribute("data-reactive-editable") === "multi" ? text : text.replace(/\n/g, " ")
+}
+
+// element -> the text of its last server render (issue #351): what Escape
+// reverts to and what dirty tracking diffs against. Seeded when the root
+// connects (or on first focus) and advanced by every morph of the element.
+const serverTexts = new WeakMap()
+
+function seedServerText(el) {
+  if (el?.hasAttribute?.("data-reactive-editable") && !serverTexts.has(el)) serverTexts.set(el, editableValue(el))
+}
+
+export function serverText(el) {
+  seedServerText(el)
+  return serverTexts.get(el)
+}
+
 // A RICH editor (lexxy/trix) is only ready once its custom element upgraded —
 // Trix defines its elements in a setTimeout after load — and exposes the
 // string `value` accessor; reading it before that yields "", which is issue
@@ -697,6 +862,13 @@ const CLIENT_OPS = Object.freeze({
     }
   },
 
+  // Write this tab's presence state (issue #358) through the root's
+  // presence_set action. The feature warns outside a reactive_presence root.
+  presence: (el, args) =>
+    __SPLIT__
+      ? withFeature("presence", (presence) => presence.set(el, args.state))
+      : presenceFeature.set(el, args.state),
+
   // Dispatch a bubbling CustomEvent (issue #96). RAW element.dispatchEvent — the
   // controller SHADOWS Stimulus's this.dispatch helper, so it must not be used.
   dispatch: (el, args) => {
@@ -894,6 +1066,23 @@ function keyFilterMatches(filter, event, keyMappings) {
   return typeof key === "string" && key.toLowerCase() === event.key.toLowerCase()
 }
 
+// Issue #357: a shortcut: ("mod+z", or { keys, inEditable }) is a window
+// keydown whose `mod` is meta on Apple platforms and ctrl elsewhere. Ruby
+// renders a meta twin and a ctrl twin; Stimulus filters the key, and this
+// decides whether the twin that fired is this platform's and whether the
+// target is one the user is typing in. Either miss is a complete no-op.
+// (Stimulus typecasts a digit shortcut, "1", to a number: hence String().)
+const shortcutKeys = (spec) => (spec && typeof spec === "object" ? spec.keys : String(spec))
+// A shortcut record keeps a bare `on: "keydown"`, so bindingMatches lets every
+// keydown through and this check, per record, picks the chord that fired.
+function shortcutApplies(spec, event, keyMappings) {
+  const target = event.target
+  if (spec?.inEditable !== true && (target?.isContentEditable || /^(input|textarea|select)$/.test(target?.localName)))
+    return false
+  const mod = /[Mm]ac|iP/.test(navigator.userAgentData?.platform ?? navigator.platform) ? "meta" : "ctrl"
+  return keyFilterMatches(shortcutKeys(spec).replace(/^mod\+/, `${mod}+`), event, keyMappings)
+}
+
 // Parse data-reactive-ops-param into binding records. Stimulus typecasts a
 // lone record to an object; several records stay a string (JSON.parse fails on
 // the join) and are split here. A LEGACY [[op, args]] list (array or JSON
@@ -1184,8 +1373,9 @@ function formNeeded(root) {
 
 // Show bindings and cross-root show targets, completion bindings, option
 // filtering, the bulk-selection group bindings (enable, select-all, count —
-// issue #319) and their cross-root targets (#343), the tag-chip input and
-// draft nested rows: a form's client-only bindings. The root declares one, or
+// issue #319) and their cross-root targets (#343), the tag-chip input, draft
+// nested rows and editable text's keys and paste (#351): a form's client-only
+// bindings. The root declares one, or
 // owns an element that does. (The probes the connect-time gates ran before
 // the split, unchanged.)
 function bindingsNeeded(root) {
@@ -1195,7 +1385,7 @@ function bindingsNeeded(root) {
     ) ||
     (root.querySelectorAll?.("[data-reactive-show-field], [data-reactive-show]") ?? []).length > 0 ||
     root.querySelector?.(
-      "[data-reactive-nested-json], [data-reactive-nested-list], [data-reactive-confirm-when-param], [data-reactive-enable], [data-reactive-select-all], [data-reactive-count]",
+      "[data-reactive-nested-json], [data-reactive-nested-list], [data-reactive-confirm-when-param], [data-reactive-enable], [data-reactive-select-all], [data-reactive-count], [data-reactive-editable]",
     ) != null
   )
 }
@@ -1205,6 +1395,19 @@ function computeNeeded(root) {
   return root.getAttribute?.("data-reactive-compute-inputs-param") != null
 }
 
+// Sortable lists (issue #350): the root is, or holds, a sortable list or a
+// source list. (A nested root's list loads the module for its parent too; the
+// module then checks ownership before it picks a row up.)
+function sortableNeeded(root) {
+  const lists = "[data-reactive-sortable],[data-reactive-sortable-source]"
+  return Boolean(root.matches?.(lists) || root.querySelector?.(lists))
+}
+
+// Presence (issue #358): the root is a reactive_presence roster.
+function presenceNeeded(root) {
+  return root.getAttribute?.("data-reactive-presence") != null
+}
+
 const PRODUCTION_FEATURES = [
   // (Its `waiting` hook is the opt-in entry's: core.js.) The draft restore
   // writes what a request reads, so it gates.
@@ -1215,6 +1418,11 @@ const PRODUCTION_FEATURES = [
   ["bindings", [bindingsNeeded, null, null, true]],
   // The seed writes output fields a request collects, so it gates.
   ["compute", [computeNeeded, null, null, true]],
+  // Nothing it does at connect is read by a request: it never gates.
+  ["sortable", [sortableNeeded, null]],
+  // Its announce is a request of its own; nothing it does at connect is read
+  // by another request: it never gates.
+  ["presence", [presenceNeeded, null]],
   [
     // Stream effects and dismissing flashes are document-level: the module
     // has no connect. A root that DECLARES an effect only gets it fetched
@@ -1378,7 +1586,7 @@ function featureTimeoutMs() {
 export function reactiveFeatureNames() {
   return __SPLIT__
     ? [...FEATURES.keys()]
-    : ["persist", "defer", "form", "bindings", "compute", "effects", "hints", "devtools"]
+    : ["persist", "defer", "form", "bindings", "compute", "sortable", "presence", "effects", "hints", "devtools"]
 }
 
 export function __setReactiveFeatureForTest(name, needs, load, waiting, gates) {
@@ -1400,6 +1608,8 @@ export function __loadReactiveFeatureForTest(name) {
     form: formFeature,
     bindings: bindingsFeature,
     compute: computeFeature,
+    sortable: sortableFeature,
+    presence: presenceFeature,
     effects: effectsFeature,
     hints: hintsFeature,
     devtools: devtoolsFeature,
@@ -1440,6 +1650,9 @@ const FEATURE_SHARED = {
   enter: enterReactiveActivity,
   exit: exitReactiveActivity,
   count: countReactiveRequest,
+  // The editable collector and server text (issue #351), for the draft.
+  text: editableValue,
+  served: serverText,
   waiting: new WeakMap(),
 }
 
@@ -1449,6 +1662,8 @@ const DEFER = 2
 const FORM = 4
 const BINDINGS = 8
 const COMPUTE = 16
+const SORTABLE = 32
+const PRESENCE = 64
 
 // The default entry's features are part of this file: install them now, as
 // the opt-in entry does when one arrives.
@@ -1670,7 +1885,7 @@ export default class extends Controller {
   #featureTurns = new Map() // name -> settles once that feature has had its turn to connect
   #featureEpoch = 0
   #featureHandle // the `core` handle features receive, built on first use
-  // The default entry (issue #305): one bit per feature, PERSIST … COMPUTE —
+  // The default entry (issue #305): one bit per feature, PERSIST … PRESENCE —
   // asked for (its marker read true) and connected on this connection.
   #featuresAsked = 0
   #featuresOn = 0
@@ -1714,13 +1929,23 @@ export default class extends Controller {
     // without any marker, before and after the morph, a few attribute reads and
     // never an import. (turbo:morph-element BUBBLES: only a morph of the root
     // itself counts.) A tokenless, client-only root has no such listener.
+    // The same listener hears an editable being focused (issue #351): a stream
+    // can append a root's first reactive_editable without morphing the root,
+    // and its keys and paste need the bindings feature before anything is
+    // typed into it. And it hears a stream that rendered into the root
+    // (STREAMED, issue #356): the features already connected re-run their
+    // seeds first (a morph's own listeners do that for a morph), then what the
+    // new content needs connects.
     if (this.element.getAttribute?.("data-reactive-token-value") != null || deferNeeded(this.element)) {
       this.#boundRootMorph = (event) => {
-        if (event.target !== this.element) return
+        if (event.type === "focusin" ? !event.target.hasAttribute?.("data-reactive-editable") : event.target !== this.element) return
+        if (event.type === STREAMED) this.#reseed()
         if (__SPLIT__) this.#loadFeatures(true)
         else this.#connectFeaturesNow(true)
       }
       this.element.addEventListener?.("turbo:morph-element", this.#boundRootMorph)
+      this.element.addEventListener?.("focusin", this.#boundRootMorph)
+      this.element.addEventListener?.(STREAMED, this.#boundRootMorph)
     }
 
     // Feature modules (issue #275): connect the ones that are here and START
@@ -1731,6 +1956,10 @@ export default class extends Controller {
     // re-runs the seeds itself (#reseed). Never awaited — connect() must reach
     // the drain at the end in the same task (issue #274: an await before it
     // runs a waking click twice).
+    // The editables' server texts (issue #351), before a draft restore
+    // writes into them.
+    this.element.querySelectorAll?.("[data-reactive-editable]").forEach(seedServerText)
+
     this.#featureEpoch++
     this.featuresReady = FEATURES_READY
     if (__SPLIT__) this.#loadFeatures()
@@ -1754,6 +1983,8 @@ export default class extends Controller {
       this.#connectFeatureNow(FORM, "form", formNeeded, (core) => formFeature.connect(this, core, morphed))
       this.#connectFeatureNow(BINDINGS, "bindings", bindingsNeeded, (core) => bindingsFeature.connect(this, core, morphed))
       this.#connectFeatureNow(COMPUTE, "compute", computeNeeded, (core) => computeFeature.connect(this, core, morphed))
+      this.#connectFeatureNow(SORTABLE, "sortable", sortableNeeded, (core) => sortableFeature.connect(this, core))
+      this.#connectFeatureNow(PRESENCE, "presence", presenceNeeded, (core) => presenceFeature.connect(this, core))
     }
   }
 
@@ -1790,6 +2021,8 @@ export default class extends Controller {
       if (on & FORM) this.#disconnectFeatureNow("form", () => formFeature.disconnect(this, core))
       if (on & BINDINGS) this.#disconnectFeatureNow("bindings", () => bindingsFeature.disconnect(this, core))
       if (on & COMPUTE) this.#disconnectFeatureNow("compute", () => computeFeature.disconnect(this, core))
+      if (on & SORTABLE) this.#disconnectFeatureNow("sortable", () => sortableFeature.disconnect(this, core))
+      if (on & PRESENCE) this.#disconnectFeatureNow("presence", () => presenceFeature.disconnect(this, core))
     }
   }
 
@@ -1957,7 +2190,9 @@ export default class extends Controller {
     this.#featureHandle ??= {
       emit: (name, detail, options) => this.#emit(name, detail, options),
       reseed: () => this.#reseed(),
-      proceed: (target, action, params) => this.#proceed(target, action, params),
+      // Resolves with the reply's HTML once the request has applied, or with
+      // nothing when it failed or was vetoed. `busy` is on(busy:)'s hint.
+      proceed: (target, action, params, busy) => this.#proceed(target, action, params, 0, 0, null, busy),
       forgetToken: () => {
         this.#tokenCache = undefined
       },
@@ -1976,6 +2211,11 @@ export default class extends Controller {
         ),
       listnavOptions: (event) => this.#listnavOptions(event),
       collectFields: () => this.#collectFields(),
+      // A reactive_editable's value and its last server-rendered text (#351),
+      // and whether the engine has contenteditable="plaintext-only" (#355).
+      plain: plaintextSupported,
+      text: editableValue,
+      served: serverText,
       // The confirm gate, as dispatch() runs it: the resolver inside the chain
       // (a synchronous throw is a cancel), never a rejection out.
       confirm: (message, context) =>
@@ -1988,15 +2228,17 @@ export default class extends Controller {
 
   // Re-run the connect-time seeds that read field values, in connect() order
   // — for a feature that changed those values after connect() ran (the draft
-  // restore). Each is the same re-sync its feature runs after a morph; a root
-  // that did not opt into one skips it. on-complete re-ARMS without firing.
+  // restore), or content a stream rendered into the root (issue #356). Each is
+  // the same re-sync its feature runs after a morph; a root that did not opt
+  // into one skips it. on-complete re-ARMS without firing. Form and bindings
+  // also wire a binding whose gate reads true only now (a stream's content).
   #reseed() {
     if (!__SPLIT__) {
-      if (this.#featuresOn & FORM) formFeature.scan(this, this.#featureCore())
+      if (this.#featuresOn & FORM) formFeature.reseed(this)
       if (this.#featuresOn & BINDINGS) bindingsFeature.reseed(this)
       if (this.#featuresOn & COMPUTE) computeFeature.seed(this)
     } else {
-      this.#features.get("form")?.scan(this, this.#featureCore())
+      this.#features.get("form")?.reseed(this)
       this.#features.get("bindings")?.reseed(this)
       this.#features.get("compute")?.seed(this)
     }
@@ -2168,6 +2410,8 @@ export default class extends Controller {
     this.#clearAllThrottles()
     if (this.#boundRootMorph) {
       this.element.removeEventListener?.("turbo:morph-element", this.#boundRootMorph)
+      this.element.removeEventListener?.("focusin", this.#boundRootMorph)
+      this.element.removeEventListener?.(STREAMED, this.#boundRootMorph)
     }
     // Early triggers (issue #273): a disconnected root records again.
     earlyState().connected.delete(this.element)
@@ -2194,9 +2438,13 @@ export default class extends Controller {
     // modifier params (issue #80). The client decides preventDefault behavior
     // from event.params — set by the Ruby on() — never by sniffing the
     // Stimulus descriptor.
-    const { action, params, debounce, throttle, confirm, confirmWhen, outside, window: windowBound, optimistic } =
+    const { action, params, debounce, throttle, confirm, confirmWhen, outside, window: windowBound, optimistic, shortcut } =
       event.params
     if (!action) return
+    // A shortcut (issue #357) that is the other platform's twin, or pressed
+    // in a field the user is typing in, is a complete no-op: the native
+    // default (text undo) proceeds and nothing is announced.
+    if (shortcut != null && !shortcutApplies(shortcut, event, this.application?.schema?.keyMappings)) return
 
     // The pending-state hint (issue #181): data-reactive-busy-param. During a
     // deploy overlap a page rendered by the PREVIOUS gem still emits the old
@@ -2243,7 +2491,11 @@ export default class extends Controller {
     // (which has no form-navigation default to lose) skips it and flips now, and
     // the failure revert snaps it back. A `change`-bound trigger is unaffected —
     // `change` isn't cancelable, so preventDefault was already a no-op there.
-    if (!windowBound && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
+    //
+    // A shortcut (issue #357) IS prevented: its key filter has already narrowed
+    // the window binding to one chord the page claims (mod+s must not also open
+    // the browser's save dialog).
+    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
 
     // A reactive_lazy(on:) shell's trigger (issue #276) goes through the one
     // materialize entry point, which dedupes it against the observer, the
@@ -2382,6 +2634,10 @@ export default class extends Controller {
       // A detail miss (issue #346) is a complete no-op — checked before the
       // once record is spent, preventDefault and the confirm gate.
       if (!detailMatches(record, event)) continue
+      // So is a shortcut that is not this platform's twin or fired in an
+      // editable target (issue #357).
+      if (record.shortcut != null && !shortcutApplies(record.shortcut, event, this.application?.schema?.keyMappings))
+        continue
       if (onceBindingSpent(this, event, record)) continue
       this.#runBinding(record.legacy ? { ...params, ops: record.ops } : record, event, trigger)
     }
@@ -2389,7 +2645,7 @@ export default class extends Controller {
 
   // One on_client binding (issue #95): its outside guard, preventDefault rule,
   // confirm gate, then its ops — every flag read from the binding itself.
-  #runBinding({ ops, confirm, confirmWhen, outside, window: windowBound }, event, trigger) {
+  #runBinding({ ops, confirm, confirmWhen, outside, window: windowBound, shortcut }, event, trigger) {
     // Outside guard FIRST — identical semantics to dispatch() (issue #80): an
     // outside: trigger is a COMPLETE no-op for events inside this root, before
     // preventDefault and before any op runs.
@@ -2401,7 +2657,8 @@ export default class extends Controller {
     // would kill native clicks site-wide (issue #80 rationale). Runs BEFORE the
     // (possibly async) confirm gate below — a native default can't wait for a
     // pending dialog (same ordering as dispatch()).
-    if (!windowBound) event.preventDefault()
+    // A shortcut (issue #357) is prevented: it is one chord the page claims.
+    if (shortcut != null || !windowBound) event.preventDefault()
 
     // Resolve the effective confirm message — static string, or the conditional
     // Hash form (issue #179) evaluated over collected fields (a promise of it
@@ -2942,6 +3199,12 @@ export default class extends Controller {
         // already gets the action's HTTP response. Harmless without pgbus.
         const connectionId = this.#connectionId()
         if (connectionId) headers["X-Pgbus-Connection"] = connectionId
+        // A presence root's own connection (issue #358): the row its presence
+        // writes land on, whatever source comes first on the page.
+        const presence =
+          presenceNeeded(this.element) &&
+          document.getElementById(`reactive-presence-src-${this.element.id}`)?.getAttribute("connection-id")
+        if (presence) headers["X-Reactive-Presence"] = presence
 
         // ONLY `fetch` itself is the network boundary — offline, DNS, a reset
         // connection. Everything below this inner try (reading the body,
@@ -3068,6 +3331,9 @@ export default class extends Controller {
       // complete a tick later. Apps needing post-morph timing listen to Turbo's
       // own events; this one is for "the action round trip succeeded".
       this.#emit("reactive:applied", { action, params: allParams, html })
+      // What core.proceed resolves with: a feature can tell a reply that
+      // applied from a failure (every other exit returns nothing).
+      return html
     } catch (error) {
       // The server already processed this action successfully (we're past the
       // fetch) — a throw here is a CLIENT-side apply failure (a malformed
@@ -3290,7 +3556,9 @@ export default class extends Controller {
         // property — only the attribute — so read getAttribute, not el.name.
         const name = el.getAttribute("name")
         if (!name) return
-        const own = el.value ?? el.textContent ?? el.innerHTML ?? ""
+        const own = el.getAttribute("data-reactive-editable") != null
+          ? editableValue(el)
+          : (el.value ?? el.textContent ?? el.innerHTML ?? "")
         // A `[]` name is a group here too: the editor APPENDS its value
         // instead of replacing the slot. Assigning a scalar posted
         // `{"notes[]": "<p>x</p>"}` while the draft snapshot pushed the same

data/lib/phlex/reactive/component/dsl.rb

@@ -356,6 +356,11 @@ module Phlex
               raise ArgumentError, "#{self}: reactive_dormant takes true or false, got #{dormant.inspect}"
             end
 
+            # Issue #358: a dormant root never connects, so it could never join.
+            # A ClientBindings-only class has no presence declaration to refuse.
+            refuse_dormant_presence! if dormant && respond_to?(:reactive_presence_declaration) &&
+                                        reactive_presence_declaration
+
             Phlex::Reactive::Dormant.reject_visible_lazy!(self) if dormant
 
             Registry.write_scalar(self, :dormant, dormant)

data/lib/phlex/reactive/component/editable.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Phlex
+  module Reactive
+    module Component
+      # Editable text (issue #351): a contenteditable element as a first-class,
+      # PLAIN-TEXT field — an inline title, a card label, a note edited where
+      # it is shown.
+      #
+      #   h3(**reactive_editable(:title, placeholder: "Untitled")) { @card.title }
+      #   p(**reactive_editable(:summary, multiline: true)) { @card.summary }
+      #   h3(**mix(reactive_editable(:title), on(:rename, event: "input", debounce: 300))) { @card.title }
+      #
+      # The element is the caller's; this renders its attributes. The client
+      # then gives it what an input gets:
+      #   * collect — its text, line breaks as "\n" (a single-line field folds
+      #     them to spaces), posted under the (scope-aware) param name;
+      #   * a morph while it is focused keeps its text and caret (attributes
+      #     still morph); unfocused, the server's text wins;
+      #   * paste and drop insert plain text; Enter runs on_enter: (a
+      #     single-line field swallows it by default); Escape reverts;
+      #   * reactive_dirty and reactive_persist treat it like an input.
+      #
+      # Plain text only — a rich editor (Lexxy, Trix) is collected by `.value`.
+      # The placeholder is CSS's to draw:
+      #   [data-reactive-placeholder]:empty::before { content: attr(data-reactive-placeholder) }
+      module Editable
+        # on_enter: a Phlex::Reactive::JS chain (run on Enter, root-scoped like
+        # on_client) or :submit (request-submit the form the field is in).
+        # on_escape: :revert (restore the last server-rendered text and blur)
+        # or nil. spellcheck: false renders spellcheck="false".
+        def reactive_editable(name, multiline: false, placeholder: nil, on_enter: nil, on_escape: :revert,
+                              spellcheck: true, **attrs)
+          raise ArgumentError, "reactive_editable needs a param name (e.g. reactive_editable(:title))" if name.to_s.empty?
+
+          data = { reactive_editable: multiline ? "multi" : "single" }
+          data[:reactive_editable_enter] = editable_enter(on_enter) unless on_enter.nil?
+          data[:reactive_editable_escape] = editable_escape(on_escape) unless on_escape.nil?
+          aria = { multiline: multiline ? "true" : "false" }
+          if placeholder
+            aria[:placeholder] = placeholder
+            data[:reactive_placeholder] = placeholder
+          end
+          binding = { name: scoped_field_name(name), contenteditable: "plaintext-only", role: "textbox", aria:, data: }
+          binding[:spellcheck] = "false" unless spellcheck
+          # Named by `reactive_dirty only:` → its own trackDirty descriptor, as
+          # reactive_field does (issue #184).
+          data[:action] = "input->reactive#trackDirty" if field_dirty_tracked?(name)
+          # An explicit scalar (name:, role:, …) REPLACES the binding's, as
+          # reactive_field's escape hatch does — mix would space-join two
+          # strings. data:/aria: hashes deep-merge.
+          mix(binding.reject { |key, _| attrs.key?(key) && !attrs[key].is_a?(Hash) }, attrs)
+        end
+
+        private
+
+        def editable_enter(on_enter)
+          return "submit" if on_enter == :submit
+
+          unless on_enter.is_a?(Phlex::Reactive::JS)
+            raise ArgumentError,
+              "reactive_editable on_enter: takes a Phlex::Reactive::JS chain (e.g. js.focus(\"#next\")) " \
+              "or :submit, got #{on_enter.inspect}"
+          end
+          raise ArgumentError, "reactive_editable on_enter: got a JS chain with no ops — a dead Enter" if on_enter.empty?
+
+          on_enter.ops.to_json
+        end
+
+        def editable_escape(on_escape)
+          return "revert" if on_escape == :revert
+
+          raise ArgumentError, "reactive_editable on_escape: takes :revert or nil, got #{on_escape.inspect}"
+        end
+      end
+    end
+  end
+end