senren-ui 0.1.5 → 0.2.0

data/templates/controllers/dialog_controller.js

@@ -1,50 +1,76 @@
 import { Controller } from "@hotwired/stimulus"
 
 // senren--dialog
-// Local UI: open/close, focus trap, Escape to close, body scroll lock.
+// Local UI: open/close, Escape to close, body scroll lock.
+//
+// State lives in `openValue`, not in the DOM nodes this controller touches.
+// Actions only assign the value; every DOM change happens in openValueChanged.
+//
+// That inversion is what makes the state server-renderable (render
+// open-value="true" and the dialog is open with no JavaScript), survivable
+// across a Turbo morph, and reachable from a Turbo Stream that changes a single
+// attribute. It is the pattern every stateful Senren controller follows.
 export default class extends Controller {
   static targets = ["overlay", "panel", "trigger"]
-  static values  = { open: Boolean }
+  static values = { open: Boolean }
 
   connect() {
     this._onKey = this._onKey.bind(this)
-    if (this.openValue) this._show()
+    this._onBeforeCache = this._onBeforeCache.bind(this)
+    document.addEventListener("turbo:before-cache", this._onBeforeCache)
   }
 
   disconnect() {
     document.removeEventListener("keydown", this._onKey)
-    document.body.style.overflow = ""
+    document.removeEventListener("turbo:before-cache", this._onBeforeCache)
+    this._releaseScroll()
   }
 
   open(event) {
     event?.preventDefault()
-    this._show()
+    this.openValue = true
   }
 
   close(event) {
     event?.preventDefault()
-    this._hide()
+    this.openValue = false
   }
 
-  _show() {
-    this.openValue = true
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = false
-    if (this.hasPanelTarget)   this.panelTarget.hidden   = false
-    document.addEventListener("keydown", this._onKey)
-    document.body.style.overflow = "hidden"
-    queueMicrotask(() => this.panelTarget?.focus())
-  }
+  // Stimulus calls this during initialization too, so the server-rendered value
+  // paints the first frame.
+  openValueChanged(isOpen, wasOpen) {
+    if (this.hasOverlayTarget) this.overlayTarget.hidden = !isOpen
+    if (this.hasPanelTarget) this.panelTarget.hidden = !isOpen
+
+    if (isOpen) {
+      document.addEventListener("keydown", this._onKey)
+      document.body.style.overflow = "hidden"
+      queueMicrotask(() => this.panelTarget?.focus())
+      this.dispatch("opened")
+      return
+    }
 
-  _hide() {
-    this.openValue = false
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = true
-    if (this.hasPanelTarget)   this.panelTarget.hidden   = true
     document.removeEventListener("keydown", this._onKey)
-    document.body.style.overflow = ""
-    this.triggerTarget?.focus?.()
+    this._releaseScroll()
+    // Only return focus on a real close, not on the initial render.
+    if (wasOpen !== undefined) {
+      this.triggerTarget?.focus?.()
+      this.dispatch("closed")
+    }
   }
 
   _onKey(event) {
-    if (event.key === "Escape") this._hide()
+    if (event.key === "Escape") this.close()
+  }
+
+  // Turbo snapshots the page before navigating away. Without this the scroll
+  // lock is captured while still applied, and a back navigation restores a page
+  // that cannot be scrolled.
+  _onBeforeCache() {
+    this.openValue = false
+  }
+
+  _releaseScroll() {
+    document.body.style.overflow = ""
   }
 }

data/templates/controllers/dropdown_menu_controller.js

@@ -2,35 +2,36 @@ import { Controller } from "@hotwired/stimulus"
 
 // senren--dropdown-menu
 // Local UI: toggle visibility, close on outside click and Escape, basic arrow nav.
+//
+// State lives in `openValue`. Actions assign it; openValueChanged performs
+// every DOM change — including the `data-state` attributes the chevron styling
+// reads — and owns the document listeners.
 export default class extends Controller {
   static targets = ["trigger", "menu"]
+  static values = { open: Boolean }
 
   connect() {
     this._onDocClick = this._onDocClick.bind(this)
     this._onKey = this._onKey.bind(this)
-    this._setOpenState(false)
   }
 
   disconnect() {
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this._stopListening()
   }
 
   toggle(event) {
     event?.preventDefault()
-    this.menuTarget.hidden ? this._show() : this.close()
+    this.openValue = !this.openValue
   }
 
   close() {
-    this._setOpenState(false)
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this.openValue = false
   }
 
   onTriggerKey(event) {
     if (["Enter", " ", "ArrowDown"].includes(event.key)) {
       event.preventDefault()
-      this._show()
+      this.openValue = true
       this._focusItem(0)
     }
   }
@@ -39,32 +40,44 @@ export default class extends Controller {
     const items = this._items()
     const idx = items.indexOf(document.activeElement)
     if (event.key === "ArrowDown") { event.preventDefault(); this._focusItem((idx + 1) % items.length) }
-    if (event.key === "ArrowUp")   { event.preventDefault(); this._focusItem((idx - 1 + items.length) % items.length) }
-    if (event.key === "Escape")    { this.close(); this.triggerTarget?.focus?.() }
+    if (event.key === "ArrowUp") { event.preventDefault(); this._focusItem((idx - 1 + items.length) % items.length) }
+    if (event.key === "Escape") { this.close(); this.triggerTarget?.focus?.() }
   }
 
-  _show() {
-    this._setOpenState(true)
-    document.addEventListener("click", this._onDocClick)
-    document.addEventListener("keydown", this._onKey)
-  }
+  openValueChanged(isOpen) {
+    const state = isOpen ? "open" : "closed"
 
-  _setOpenState(open) {
-    const state = open ? "open" : "closed"
-    this.menuTarget.hidden = !open
+    if (this.hasMenuTarget) this.menuTarget.hidden = !isOpen
     this.element.dataset.state = state
-    this.triggerTarget.dataset.state = state
-    this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false")
 
-    const triggerControl = this._triggerControl()
-    if (triggerControl && triggerControl !== this.triggerTarget) {
-      triggerControl.dataset.state = state
-      triggerControl.setAttribute("aria-expanded", open ? "true" : "false")
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.dataset.state = state
+      this.triggerTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
+
+      const control = this._triggerControl()
+      if (control && control !== this.triggerTarget) {
+        control.dataset.state = state
+        control.setAttribute("aria-expanded", isOpen ? "true" : "false")
+      }
+
+      this.triggerTarget.querySelectorAll("[data-senren-chevron]").forEach((chevron) => {
+        chevron.dataset.state = state
+      })
     }
 
-    this.triggerTarget.querySelectorAll("[data-senren-chevron]").forEach((chevron) => {
-      chevron.dataset.state = state
-    })
+    if (isOpen) {
+      document.addEventListener("click", this._onDocClick)
+      document.addEventListener("keydown", this._onKey)
+      this.dispatch("opened")
+      return
+    }
+
+    this._stopListening()
+  }
+
+  _stopListening() {
+    document.removeEventListener("click", this._onDocClick)
+    document.removeEventListener("keydown", this._onKey)
   }
 
   _triggerControl() {

data/templates/controllers/hover_card_controller.js

@@ -14,4 +14,12 @@ export default class extends Controller {
     clearTimeout(this._showTimer)
     this._hideTimer = setTimeout(() => { if (this.hasPanelTarget) this.panelTarget.hidden = true }, 120)
   }
+
+  // Either timer can still be pending when a Turbo navigation removes the
+  // element, which retains this controller and its detached subtree until it
+  // fires.
+  disconnect() {
+    clearTimeout(this._showTimer)
+    clearTimeout(this._hideTimer)
+  }
 }

data/templates/controllers/invite_member_dialog_controller.js

@@ -8,6 +8,12 @@ export default class extends Controller {
     this.closeOnEscape = this.closeOnEscape.bind(this)
   }
 
+  // open() registers a document-level listener; without this the listener and
+  // the detached subtree survive every Turbo navigation made while open.
+  disconnect() {
+    document.removeEventListener("keydown", this.closeOnEscape)
+  }
+
   open() {
     this.overlayTarget.hidden = false
     this.panelTarget.hidden = false

data/templates/controllers/masked_input_controller.js

@@ -10,7 +10,14 @@ export default class extends Controller {
   static values = { mask: String }
 
   connect() {
-    this.element.addEventListener("input", this._onInput.bind(this))
+    // Keep the bound reference: Stimulus re-connects on Turbo morph/restore,
+    // and an unremovable listener would stack up one mask pass per cycle.
+    this._boundOnInput = this._onInput.bind(this)
+    this.element.addEventListener("input", this._boundOnInput)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("input", this._boundOnInput)
   }
 
   _onInput(event) {

data/templates/controllers/popover_controller.js

@@ -2,8 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 
 // senren--popover
 // Toggles a small panel; closes on outside click and Escape.
+//
+// State lives in `openValue`. Actions assign it; openValueChanged performs
+// every DOM change and owns the document listeners, so the open state is
+// server-renderable and survives a Turbo morph.
 export default class extends Controller {
   static targets = ["trigger", "panel"]
+  static values = { open: Boolean }
 
   connect() {
     this._onDocClick = this._onDocClick.bind(this)
@@ -11,25 +16,35 @@ export default class extends Controller {
   }
 
   disconnect() {
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this._stopListening()
   }
 
   toggle(event) {
     event?.preventDefault()
-    this.panelTarget.hidden ? this._show() : this.close()
+    this.openValue = !this.openValue
   }
 
   close() {
-    this.panelTarget.hidden = true
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this.openValue = false
+  }
+
+  openValueChanged(isOpen) {
+    if (this.hasPanelTarget) this.panelTarget.hidden = !isOpen
+    if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
+
+    if (isOpen) {
+      document.addEventListener("click", this._onDocClick)
+      document.addEventListener("keydown", this._onKey)
+      this.dispatch("opened")
+      return
+    }
+
+    this._stopListening()
   }
 
-  _show() {
-    this.panelTarget.hidden = false
-    document.addEventListener("click", this._onDocClick)
-    document.addEventListener("keydown", this._onKey)
+  _stopListening() {
+    document.removeEventListener("click", this._onDocClick)
+    document.removeEventListener("keydown", this._onKey)
   }
 
   _onDocClick(event) {

data/templates/controllers/rich_text_editor_lite_controller.js

@@ -1,5 +1,17 @@
 import { Controller } from "@hotwired/stimulus"
 
+const ALLOWED_LINK_PROTOCOLS = new Set(["http:", "https:", "mailto:", "tel:"])
+
+// Mirrors the server-side sanitize() allowlist in
+// rich_text_editor_lite_component.html.erb, so both ends agree on what the
+// stored value may contain.
+const ALLOWED_PASTE_TAGS = new Set([
+  "P", "BR", "STRONG", "B", "EM", "I", "A", "UL", "OL", "LI", "H1", "H2", "H3"
+])
+const ALLOWED_PASTE_ATTRIBUTES = new Set(["href", "rel", "target", "data-align"])
+// Dropped whole rather than unwrapped: their text content is code, not prose.
+const DROPPED_PASTE_TAGS = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "IFRAME", "OBJECT", "EMBED"])
+
 // senren--rich-text-editor-lite
 // Local UI: tiny contenteditable toolbar synced to a hidden textarea.
 export default class extends Controller {
@@ -15,7 +27,7 @@ export default class extends Controller {
     this.sync()
     this.rememberSelection()
     this.updateToolbar()
-    this.debug("connect", this.snapshot())
+    this.debug("connect", () => (this.snapshot()))
   }
 
   keepSelection(event) {
@@ -31,7 +43,12 @@ export default class extends Controller {
     if (!event.metaKey && !event.ctrlKey) return
 
     event.preventDefault()
-    window.open(link.href, "_blank", "noopener,noreferrer")
+    // Anchors can arrive from a paste, so gate the protocol here too rather
+    // than trusting the browser to refuse javascript:/data: in window.open.
+    const href = this.normalizeHref(link.getAttribute("href"))
+    if (!href) return
+
+    window.open(href, "_blank", "noopener,noreferrer")
   }
 
   format(event) {
@@ -39,11 +56,11 @@ export default class extends Controller {
     const command = event.currentTarget.dataset.command
     if (!command) return
 
-    this.debug("format:start", { command, before: this.snapshot() })
+    this.debug("format:start", () => ({ command, before: this.snapshot() }))
     this.restoreSelection()
     if (command === "createLink") {
       const url = window.prompt("Paste a URL")
-      this.debug("createLink:prompt", { url, afterPrompt: this.snapshot() })
+      this.debug("createLink:prompt", () => ({ url, afterPrompt: this.snapshot() }))
       if (!url) return
       this.restoreSelection()
       this.insertLink(url)
@@ -63,7 +80,7 @@ export default class extends Controller {
     this.sync()
     this.updateToolbar()
     this.rememberSelection()
-    this.debug("format:done", { command, after: this.snapshot() })
+    this.debug("format:done", () => ({ command, after: this.snapshot() }))
   }
 
   sync() {
@@ -75,6 +92,96 @@ export default class extends Controller {
     requestAnimationFrame(() => this.sync())
   }
 
+  // Handles both paste and drop. The browser's own contenteditable paste path
+  // keeps on* handler attributes, so pasted markup must be rebuilt against an
+  // allowlist before it reaches the document.
+  paste(event) {
+    const transfer = event.clipboardData || event.dataTransfer
+    if (!transfer) return
+
+    event.preventDefault()
+    const html = transfer.getData("text/html")
+    const text = transfer.getData("text/plain")
+
+    if (html) {
+      this.insertSanitized(this.sanitizeToFragment(html))
+    } else if (text) {
+      document.execCommand("insertText", false, text)
+    }
+
+    this.sync()
+    this.rememberSelection()
+    this.updateToolbar()
+  }
+
+  insertSanitized(fragment) {
+    if (fragment.childNodes.length === 0) return
+
+    const range = this.activeRange()
+    if (!range) {
+      this.editorTarget.appendChild(fragment)
+      return
+    }
+
+    const last = fragment.lastChild
+    range.deleteContents()
+    range.insertNode(fragment)
+    if (last) {
+      range.setStartAfter(last)
+      range.collapse(true)
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(range)
+    }
+  }
+
+  // DOMParser builds an inert document: no scripts run and no resources load,
+  // so onerror/onload never fire while we walk the tree.
+  sanitizeToFragment(html) {
+    const parsed = new DOMParser().parseFromString(html, "text/html")
+    return this.sanitizeChildren(parsed.body)
+  }
+
+  sanitizeChildren(node) {
+    const fragment = document.createDocumentFragment()
+    Array.from(node.childNodes).forEach((child) => {
+      const clean = this.sanitizeNode(child)
+      if (clean) fragment.appendChild(clean)
+    })
+    return fragment
+  }
+
+  sanitizeNode(node) {
+    if (node.nodeType === Node.TEXT_NODE) return document.createTextNode(node.nodeValue)
+    if (node.nodeType !== Node.ELEMENT_NODE) return null
+
+    const tag = node.tagName.toUpperCase()
+    if (DROPPED_PASTE_TAGS.has(tag)) return null
+    // Other disallowed elements are unwrapped, not dropped: keep their text.
+    if (!ALLOWED_PASTE_TAGS.has(tag)) return this.sanitizeChildren(node)
+
+    const element = document.createElement(tag.toLowerCase())
+    Array.from(node.attributes).forEach((attr) => {
+      const name = attr.name.toLowerCase()
+      if (!ALLOWED_PASTE_ATTRIBUTES.has(name)) return
+
+      if (name === "href") {
+        const href = this.normalizeHref(attr.value)
+        if (href) element.setAttribute("href", href)
+        return
+      }
+
+      element.setAttribute(name, attr.value)
+    })
+
+    if (tag === "A" && element.hasAttribute("target")) {
+      element.setAttribute("rel", "noopener noreferrer")
+    }
+
+    element.appendChild(this.sanitizeChildren(node))
+    return element
+  }
+
   updateToolbar() {
     this.buttonTargets.forEach((button) => {
       const command = button.dataset.command
@@ -120,9 +227,9 @@ export default class extends Controller {
     const range = selection.getRangeAt(0)
     if (this.rangeInsideEditor(range)) {
       this.savedRange = range.cloneRange()
-      this.debug("rememberSelection:saved", this.describeRange(this.savedRange))
+      this.debug("rememberSelection:saved", () => (this.describeRange(this.savedRange)))
     } else {
-      this.debug("rememberSelection:outside", this.describeRange(range))
+      this.debug("rememberSelection:outside", () => (this.describeRange(range)))
     }
   }
 
@@ -132,17 +239,17 @@ export default class extends Controller {
       const selection = window.getSelection()
       selection.removeAllRanges()
       selection.addRange(this.savedRange)
-      this.debug("restoreSelection:saved", this.describeRange(this.savedRange))
+      this.debug("restoreSelection:saved", () => (this.describeRange(this.savedRange)))
       return
     }
 
-    this.debug("restoreSelection:endFallback", this.snapshot())
+    this.debug("restoreSelection:endFallback", () => (this.snapshot()))
     this.placeCaretAtEnd()
   }
 
   insertLink(rawUrl) {
     const url = this.normalizeUrl(rawUrl)
-    this.debug("insertLink:start", { rawUrl, url, before: this.snapshot() })
+    this.debug("insertLink:start", () => ({ rawUrl, url, before: this.snapshot() }))
     if (!url) return
 
     const range = this.activeRange()
@@ -155,7 +262,7 @@ export default class extends Controller {
     anchor.href = url
     anchor.rel = "noopener noreferrer"
     anchor.target = "_blank"
-    this.debug("insertLink:range", this.describeRange(range))
+    this.debug("insertLink:range", () => (this.describeRange(range)))
 
     if (range.collapsed) {
       anchor.textContent = url
@@ -170,12 +277,12 @@ export default class extends Controller {
     const selection = window.getSelection()
     selection.removeAllRanges()
     selection.addRange(range)
-    this.debug("insertLink:done", { anchor: anchor.outerHTML, after: this.snapshot() })
+    this.debug("insertLink:done", () => ({ anchor: anchor.outerHTML, after: this.snapshot() }))
   }
 
   toggleList(tagName) {
     const range = this.activeRange()
-    this.debug("toggleList:start", { tagName, range: this.describeRange(range), before: this.snapshot() })
+    this.debug("toggleList:start", () => ({ tagName, range: this.describeRange(range), before: this.snapshot() }))
     if (!range) return
 
     const activeList = this.closestElement(range.startContainer, "ul, ol")
@@ -185,12 +292,12 @@ export default class extends Controller {
       } else {
         this.convertList(activeList, tagName)
       }
-      this.debug("toggleList:existingList", { tagName, after: this.snapshot() })
+      this.debug("toggleList:existingList", () => ({ tagName, after: this.snapshot() }))
       return
     }
 
     const blocks = this.selectedBlocks(range)
-    this.debug("toggleList:blocks", { tagName, blocks: blocks.map((block) => block.outerHTML) })
+    this.debug("toggleList:blocks", () => ({ tagName, blocks: blocks.map((block) => block.outerHTML) }))
     if (blocks.length === 0) return
 
     const list = document.createElement(tagName)
@@ -202,15 +309,15 @@ export default class extends Controller {
     })
 
     blocks[0].before(list)
-    blocks.forEach((block) => block.remove())
+    blocks.forEach((block) => { block.remove() })
     this.selectNodeContents(list)
-    this.debug("toggleList:done", { list: list.outerHTML, after: this.snapshot() })
+    this.debug("toggleList:done", () => ({ list: list.outerHTML, after: this.snapshot() }))
   }
 
   formatBlocks(tagName) {
     const normalizedTagName = this.normalizedBlockTag(tagName)
     const range = this.activeRange()
-    this.debug("formatBlocks:start", { tagName: normalizedTagName, range: this.describeRange(range) })
+    this.debug("formatBlocks:start", () => ({ tagName: normalizedTagName, range: this.describeRange(range) }))
     if (!range) return
 
     const blocks = this.selectedBlocks(range)
@@ -218,13 +325,13 @@ export default class extends Controller {
 
     const replacements = blocks.map((block) => this.replaceBlock(block, normalizedTagName))
     this.selectNodeContents(replacements[replacements.length - 1])
-    this.debug("formatBlocks:done", { tagName: normalizedTagName, blocks: replacements.map((block) => block.outerHTML) })
+    this.debug("formatBlocks:done", () => ({ tagName: normalizedTagName, blocks: replacements.map((block) => block.outerHTML) }))
   }
 
   alignBlocks(alignment) {
     const normalizedAlignment = this.normalizedAlignment(alignment)
     const range = this.activeRange()
-    this.debug("alignBlocks:start", { alignment: normalizedAlignment, range: this.describeRange(range) })
+    this.debug("alignBlocks:start", () => ({ alignment: normalizedAlignment, range: this.describeRange(range) }))
     if (!range) return
 
     const blocks = this.selectedBlocks(range)
@@ -237,7 +344,7 @@ export default class extends Controller {
     })
 
     if (blocks.length > 0) this.selectNodeContents(blocks[blocks.length - 1])
-    this.debug("alignBlocks:done", { alignment: normalizedAlignment, blocks: blocks.map((block) => block.outerHTML) })
+    this.debug("alignBlocks:done", () => ({ alignment: normalizedAlignment, blocks: blocks.map((block) => block.outerHTML) }))
   }
 
   unwrapList(list) {
@@ -277,11 +384,49 @@ export default class extends Controller {
     }
   }
 
+  // Shapes that are unsafe in every context. Browsers treat "\" as "/" and
+  // strip TAB/CR/LF before parsing, and any leading "//" is protocol-relative
+  // however many slashes follow — "///evil.example" resolves to
+  // https://evil.example/.
+  rejectedUrlShape(url) {
+    if (url.length === 0) return true
+    if (url.includes("\\")) return true
+    if ([...url].some((ch) => ch.charCodeAt(0) <= 0x1f || ch.charCodeAt(0) === 0x7f)) return true
+
+    return url.startsWith("//")
+  }
+
+  // Policy for an href that already exists in markup — a pasted anchor, or one
+  // being opened. It mirrors safe_url on the server: a relative reference stays
+  // relative, because in HTML `href="settings"` means "relative to this page",
+  // not "the host settings". Promoting it to https://settings/ would turn a
+  // same-origin link into an off-origin one.
+  normalizeHref(rawUrl) {
+    const url = String(rawUrl || "").trim()
+    if (this.rejectedUrlShape(url)) return null
+    if (url.startsWith("#") || url.startsWith("/")) return url
+
+    const scheme = url.match(/^[a-z][a-z0-9+.-]*:/i)
+    if (!scheme) return url
+
+    return ALLOWED_LINK_PROTOCOLS.has(scheme[0].toLowerCase()) ? url : null
+  }
+
+  // Policy for a URL a person typed into the link prompt, where a bare host is
+  // the common case and should become https://host/. Only ever applied to input
+  // the user just entered, never to markup.
   normalizeUrl(rawUrl) {
     const url = String(rawUrl || "").trim()
-    if (url.length === 0) return null
-    if (/^(?:[a-z][a-z0-9+.-]*:|\/|#)/i.test(url)) return url
-    return `https://${url}`
+    if (this.rejectedUrlShape(url)) return null
+    if (url.startsWith("#") || url.startsWith("/")) return url
+
+    const candidate = /^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https://${url}`
+    try {
+      const parsed = new URL(candidate, window.location.origin)
+      return ALLOWED_LINK_PROTOCOLS.has(parsed.protocol) ? parsed.href : null
+    } catch (_) {
+      return null
+    }
   }
 
   activeRange() {
@@ -289,19 +434,19 @@ export default class extends Controller {
     if (selection && selection.rangeCount > 0) {
       const range = selection.getRangeAt(0)
       if (this.rangeInsideEditor(range)) {
-        this.debug("activeRange:selection", this.describeRange(range))
+        this.debug("activeRange:selection", () => (this.describeRange(range)))
         return range
       }
     }
 
     if (this.savedRange && this.rangeInsideEditor(this.savedRange)) {
-      this.debug("activeRange:saved", this.describeRange(this.savedRange))
+      this.debug("activeRange:saved", () => (this.describeRange(this.savedRange)))
       return this.savedRange
     }
 
     this.placeCaretAtEnd()
     const range = window.getSelection().getRangeAt(0)
-    this.debug("activeRange:endFallback", this.describeRange(range))
+    this.debug("activeRange:endFallback", () => (this.describeRange(range)))
     return range
   }
 
@@ -435,9 +580,11 @@ export default class extends Controller {
     return `${node.tagName.toLowerCase()}${id}${classes}`
   }
 
+  // `detail` may be a thunk so callers can defer building expensive payloads
+  // (full innerHTML/textContent snapshots) until debugging is actually on.
   debug(message, detail = {}) {
     if (!this.debugValue) return
 
-    console.debug("[senren rich text]", message, detail)
+    console.debug("[senren rich text]", message, typeof detail === "function" ? detail() : detail)
   }
 }