ruby_cms 0.2.1.0 → 1.0.0

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/visual_editor_controller.js

@@ -0,0 +1,721 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Inline content-block editor. One contenteditable field producing light inline
+// HTML (bold / italic / color / size via cb-* classes). No types, no Trix.
+export default class extends Controller {
+  static targets = [
+    "modal",
+    "modalBody",
+    "previewFrame",
+    "editor",
+    "skeleton",
+    "blockKey",
+    "charCount",
+    "lastUpdated",
+    "saveButton",
+    "toast",
+    "toastMessage",
+    "toastUndo",
+    "copyButton",
+    "copyLabel",
+    "statsBadge",
+    "statsDot",
+    "statsText",
+    "outlinePanel",
+    "searchInput",
+    "outlineList",
+    "historyScope"
+  ]
+
+  static values = { currentPage: String, locales: String }
+
+  ALLOWED = { STRONG: 1, B: 1, EM: 1, I: 1, BR: 1, SPAN: 1 }
+  CB_PREFIXES = ["cb-fg-", "cb-size-"]
+
+  connect() {
+    this.currentContentBlockKey = null
+    this.currentContentBlockLocale = null
+    this.currentContentBlockId = null
+    this.currentBlockIndex = 0
+    this._editorLoadToken = 0
+    this._dirty = false
+    this._liveTimer = null
+    this._loadedContent = ""
+    this._undo = null
+    this._previewDark = false
+
+    // Re-apply the chosen preview theme after the iframe reloads (page/locale switch).
+    this.previewFrameTarget.addEventListener("load", () => {
+      if (this._previewDark) this.sendMessageToPreview({ type: "SET_THEME", theme: "dark" })
+    })
+
+    this.boundHandleMessage = this.handleMessage.bind(this)
+    window.addEventListener("message", this.boundHandleMessage)
+
+    // Header controls live outside this controller's element, so wire them via a
+    // document-level [data-ve-command] click handler (also reused by the palette).
+    this.boundCommandClick = (e) => {
+      const el = e.target.closest("[data-ve-command]")
+      if (el) { e.preventDefault(); this.runCommand(el.dataset.veCommand) }
+    }
+    document.addEventListener("click", this.boundCommandClick)
+    this.boundCommandEvent = (e) => this.runCommand(e.detail)
+    window.addEventListener("ve:command", this.boundCommandEvent)
+
+    // Single-key shortcuts for the header controls (b/l/t). Avoids d/v/c/m/a/s/u,
+    // which are the `g`-prefixed nav shortcuts.
+    this.boundKeyShortcut = this.onKeyShortcut.bind(this)
+    window.addEventListener("keydown", this.boundKeyShortcut)
+    this.boundHandleEscape = this.handleEscape.bind(this)
+    document.addEventListener("keydown", this.boundHandleEscape)
+    this.boundToolbarState = this.updateToolbarState.bind(this)
+    document.addEventListener("selectionchange", this.boundToolbarState)
+
+    try { document.execCommand("styleWithCSS", false, false) } catch (_e) { /* noop */ }
+  }
+
+  disconnect() {
+    if (this.boundHandleMessage) window.removeEventListener("message", this.boundHandleMessage)
+    document.removeEventListener("keydown", this.boundHandleEscape)
+    document.removeEventListener("selectionchange", this.boundToolbarState)
+    document.removeEventListener("click", this.boundCommandClick)
+    window.removeEventListener("ve:command", this.boundCommandEvent)
+    window.removeEventListener("keydown", this.boundKeyShortcut)
+  }
+
+  // Dispatch a header/palette command to the right handler.
+  runCommand(cmd) {
+    if (cmd === "panel") this.togglePanel()
+    else if (cmd === "theme") this.toggleTheme()
+    else if (cmd === "locale") this.toggleLocale()
+  }
+
+  onKeyShortcut(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey) return
+    const t = event.target
+    if (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return
+    if (!this.modalTarget.classList.contains("hidden")) return // editing — leave keys alone
+
+    const map = { b: "panel", l: "locale", t: "theme" }
+    const cmd = map[event.key.toLowerCase()]
+    if (!cmd) return
+    event.preventDefault()
+    this.runCommand(cmd)
+  }
+
+  handleMessage(event) {
+    if (event.origin !== window.location.origin) return
+    const { type, blockId, blockIndex, locale } = event.data
+    if (type === "CONTENT_BLOCK_CLICKED") this.openBlockEditor(blockId, blockIndex, locale)
+    else if (type === "TRANSLATION_STATS") this.updateStats(event.data)
+    else if (type === "BLOCK_LIST") this.onBlockList(event.data.blocks || [])
+  }
+
+  async openBlockEditor(blockKey, blockIndex = 0, locale = null) {
+    const loadToken = ++this._editorLoadToken
+    this.currentContentBlockKey = blockKey
+    this.currentBlockIndex = blockIndex
+    this.blockKeyTarget.textContent = blockKey
+
+    // Open immediately with a skeleton; fill once the block loads.
+    this.showSkeleton(true)
+    this.modalTarget.classList.remove("hidden")
+    this.sendMessageToPreview({ type: "HIGHLIGHT_BLOCK", blockId: blockKey, blockIndex })
+
+    try {
+      const response = await fetch(`/admin/content_blocks?search=${encodeURIComponent(blockKey)}&format=json`, {
+        headers: { "Accept": "application/json" }
+      })
+      if (!response.ok) throw new Error("Failed to fetch content block")
+
+      const data = await response.json()
+      const blocks = data.content_blocks || []
+      this._blocks = blocks
+      const currentLocale = locale || this.getCurrentLocale()
+      const exact = blocks.find(b => b.key === blockKey && b.locale === currentLocale)
+      const fallback = blocks.find(b => b.key === blockKey && !b.locale) ||
+        blocks.find(b => b.key === blockKey) || {}
+      const block = exact || {}
+
+      if (loadToken !== this._editorLoadToken) return
+
+      this.currentContentBlockLocale = currentLocale
+      this.currentContentBlockId = block.id || null
+      this.dispatch("block-loaded", { detail: { blockId: block.id } })
+
+      if (this.hasHistoryScopeTarget) {
+        this.historyScopeTarget.setAttribute("data-admin--content-block-history-content-block-id-value", String(block.id || ""))
+      }
+
+      this._loadedContent = String(block.content ?? fallback.content ?? "")
+      this.editorTarget.innerHTML = this._loadedContent
+      this.lastUpdatedTarget.textContent = block.updated_at || "Never"
+      this._dirty = false
+      this.showSkeleton(false)
+      this.updateCharCount()
+      this.updateLocaleControls()
+      setTimeout(() => this.focusEditorEnd(), 50)
+    } catch (error) {
+      console.error("Error loading content block:", error)
+      this.showSkeleton(false)
+      alert("Failed to load content block")
+    }
+  }
+
+  showSkeleton(show) {
+    if (this.hasSkeletonTarget) this.skeletonTarget.classList.toggle("hidden", !show)
+    this.editorTarget.classList.toggle("hidden", show)
+  }
+
+  closeModal() {
+    if (this._dirty && !window.confirm("Niet-opgeslagen wijzigingen verwerpen?")) return
+    this._editorLoadToken += 1
+    this._dirty = false
+    this.modalTarget.classList.add("hidden")
+    this.currentContentBlockKey = null
+    this.currentContentBlockLocale = null
+    this.currentContentBlockId = null
+    this.currentBlockIndex = 0
+
+    if (this.hasHistoryScopeTarget) {
+      const panel = this.historyScopeTarget.querySelector("[data-admin--content-block-history-target='panel']")
+      panel?.classList.add("hidden")
+    }
+
+    this.sendMessageToPreview({ type: "CLEAR_HIGHLIGHT" })
+  }
+
+  handleEscape(event) {
+    if (event.key !== "Escape") return
+    // Modal takes priority; otherwise close the open blocks/settings panel.
+    if (!this.modalTarget.classList.contains("hidden")) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.closeModal()
+    } else if (this.hasOutlinePanelTarget && !this.outlinePanelTarget.classList.contains("hidden")) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.togglePanel()
+    }
+  }
+
+  // ---- Input / live preview / markdown ----------------------------------
+
+  onInput() {
+    this._dirty = true
+    this.maybeMarkdown()
+    this.updateCharCount()
+    this.scheduleLivePreview()
+  }
+
+  scheduleLivePreview() {
+    clearTimeout(this._liveTimer)
+    this._liveTimer = setTimeout(() => {
+      if (!this.currentContentBlockKey) return
+      this.sendMessageToPreview({
+        type: "content-updated",
+        key: this.currentContentBlockKey,
+        content: this.sanitizedHtml(),
+        blockIndex: this.currentBlockIndex ?? 0
+      })
+    }, 250)
+  }
+
+  // Strip formatting on paste — keep the editor content clean.
+  onPaste(event) {
+    event.preventDefault()
+    const text = (event.clipboardData || window.clipboardData).getData("text/plain")
+    document.execCommand("insertText", false, text)
+  }
+
+  // Lightweight markdown: **x** -> bold, _x_ -> italic (best-effort, on the caret's text node).
+  maybeMarkdown() {
+    const sel = window.getSelection()
+    if (!sel || !sel.rangeCount) return
+    const node = sel.anchorNode
+    if (!node || node.nodeType !== Node.TEXT_NODE) return
+
+    const patterns = [
+      { re: /\*\*([^*\n]+)\*\*/, tag: "strong" },
+      { re: /(?:^|[^_])_([^_\n]+)_/, tag: "em", group: 1, markerLen: 1 }
+    ]
+    for (const p of patterns) {
+      const text = node.textContent
+      const m = text.match(p.re)
+      if (!m) continue
+      const inner = p.tag === "strong" ? m[1] : m[1]
+      const full = p.tag === "strong" ? m[0] : `_${m[1]}_`
+      const start = text.indexOf(full)
+      if (start < 0) continue
+
+      const after = node.splitText(start)
+      after.textContent = after.textContent.slice(full.length)
+      const el = document.createElement(p.tag)
+      el.textContent = inner
+      after.parentNode.insertBefore(el, after)
+
+      const range = document.createRange()
+      range.setStartAfter(el)
+      range.collapse(true)
+      sel.removeAllRanges()
+      sel.addRange(range)
+      break
+    }
+  }
+
+  // ---- Toolbar ----------------------------------------------------------
+
+  preventBlur(event) { event.preventDefault() }
+
+  bold() { this.exec("bold") }
+  italic() { this.exec("italic") }
+
+  exec(cmd) {
+    this.editorTarget.focus()
+    document.execCommand(cmd)
+    this._dirty = true
+    this.updateCharCount()
+    this.scheduleLivePreview()
+    this.updateToolbarState()
+  }
+
+  color(event) { this.applyClass(event.currentTarget.dataset.color || "", "cb-fg-") }
+  size(event) { this.applyClass(event.currentTarget.dataset.size || "", "cb-size-") }
+
+  applyClass(cls, prefix) {
+    this.editorTarget.focus()
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0) return
+    let range = sel.getRangeAt(0)
+    if (range.collapsed || !this.editorTarget.contains(range.commonAncestorContainer)) return
+
+    this.clearPrefixInRange(range, prefix)
+
+    if (cls) {
+      range = window.getSelection().getRangeAt(0)
+      const span = document.createElement("span")
+      span.className = cls
+      try {
+        span.appendChild(range.extractContents())
+        range.insertNode(span)
+        const nr = document.createRange()
+        nr.selectNodeContents(span)
+        sel.removeAllRanges()
+        sel.addRange(nr)
+      } catch (_e) { /* awkward selection boundary; skip */ }
+    }
+    this._dirty = true
+    this.updateCharCount()
+    this.scheduleLivePreview()
+    this.updateToolbarState()
+  }
+
+  clearPrefixInRange(range, prefix) {
+    const spans = Array.from(this.editorTarget.querySelectorAll(`span[class*="${prefix}"]`))
+    spans.forEach(span => {
+      if (!range.intersectsNode(span)) return
+      span.className = (span.className || "").split(/\s+/).filter(c => !c.startsWith(prefix)).join(" ")
+      if (!span.className.trim()) this.unwrap(span)
+    })
+  }
+
+  unwrap(node) {
+    const parent = node.parentNode
+    if (!parent) return
+    while (node.firstChild) parent.insertBefore(node.firstChild, node)
+    parent.removeChild(node)
+  }
+
+  // Reflect the selection's formatting in the toolbar.
+  updateToolbarState() {
+    if (this.modalTarget.classList.contains("hidden")) return
+    const sel = window.getSelection()
+    const inEditor = sel && sel.rangeCount && this.editorTarget.contains(sel.anchorNode)
+
+    const setActive = (el, on) => el && el.classList.toggle("cb-active", !!on)
+
+    this.element.querySelectorAll("[data-cmd]").forEach(btn => {
+      let on = false
+      try { on = inEditor && document.queryCommandState(btn.dataset.cmd) } catch (_e) { /* noop */ }
+      setActive(btn, on)
+    })
+
+    const classes = inEditor ? this.ancestorClasses(sel.anchorNode) : []
+    const activeColor = classes.find(c => c.startsWith("cb-fg-")) || ""
+    const activeSize = classes.find(c => c.startsWith("cb-size-")) || ""
+    this.element.querySelectorAll("[data-color]").forEach(b => setActive(b, inEditor && (b.dataset.color || "") === activeColor))
+    this.element.querySelectorAll("[data-size]").forEach(b => setActive(b, inEditor && (b.dataset.size || "") === activeSize))
+  }
+
+  ancestorClasses(node) {
+    const out = []
+    let el = node && node.nodeType === Node.TEXT_NODE ? node.parentElement : node
+    while (el && el !== this.editorTarget) {
+      if (el.classList) out.push(...el.classList)
+      el = el.parentElement
+    }
+    return out
+  }
+
+  // ---- Save / undo ------------------------------------------------------
+
+  updateCharCount() {
+    const len = (this.editorTarget.textContent || "").length
+    this.charCountTarget.textContent = `${len} tekens`
+  }
+
+  sanitizedHtml() {
+    const tmp = document.createElement("div")
+    tmp.innerHTML = this.editorTarget.innerHTML
+    this.clean(tmp)
+    return tmp.innerHTML.trim()
+  }
+
+  clean(node) {
+    Array.from(node.childNodes).forEach(child => {
+      if (child.nodeType === Node.TEXT_NODE) return
+      if (child.nodeType !== Node.ELEMENT_NODE) { child.remove(); return }
+
+      this.clean(child)
+
+      if (!this.ALLOWED[child.tagName]) { this.unwrap(child); return }
+
+      Array.from(child.attributes).forEach(attr => {
+        if (attr.name !== "class") child.removeAttribute(attr.name)
+      })
+
+      if (child.tagName === "SPAN") {
+        const keep = (child.className || "").split(/\s+/)
+          .filter(c => this.CB_PREFIXES.some(p => c.startsWith(p)))
+        if (keep.length) child.className = keep.join(" ")
+        else this.unwrap(child)
+      }
+    })
+  }
+
+  async saveContent(event) {
+    if (event) event.preventDefault()
+    if (!this.currentContentBlockKey) return
+
+    const html = this.sanitizedHtml()
+    const key = this.currentContentBlockKey
+    const locale = this.currentContentBlockLocale || null
+    const blockIndex = this.currentBlockIndex ?? 0
+    const previousContent = this._loadedContent
+
+    try {
+      this.saveButtonTarget.disabled = true
+      this.saveButtonTarget.textContent = "Bezig…"
+
+      const data = await this.persist({ key, content: html, locale })
+
+      this.lastUpdatedTarget.textContent = data.updated_at
+      this._loadedContent = html
+      this._dirty = false
+      this.sendMessageToPreview({ type: "content-updated", key, content: data.content ?? html, blockIndex })
+
+      // Offer a one-click revert to the pre-save content.
+      this._undo = (previousContent !== html) ? { key, locale, blockIndex, content: previousContent } : null
+      this.closeModal()
+      this.showToast(data.message || "Content bijgewerkt", !!this._undo)
+    } catch (error) {
+      console.error("Error saving content:", error)
+      alert(error.message || "Failed to save content")
+    } finally {
+      this.saveButtonTarget.disabled = false
+      this.saveButtonTarget.textContent = "Save"
+    }
+  }
+
+  async undoLastSave() {
+    if (!this._undo) return
+    const { key, locale, blockIndex, content } = this._undo
+    this._undo = null
+    try {
+      const data = await this.persist({ key, content, locale })
+      this.sendMessageToPreview({ type: "content-updated", key, content: data.content ?? content, blockIndex })
+      this.hideToast()
+      this.showToast("Hersteld", false)
+    } catch (error) {
+      console.error("Undo failed:", error)
+    }
+  }
+
+  async persist({ key, content, locale }) {
+    const response = await fetch("/admin/visual_editor/quick_update", {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ key, content_type: "text", content, locale })
+    })
+    const data = await response.json()
+    if (!response.ok || !data.success) throw new Error(data.message || "Failed to save")
+    return data
+  }
+
+  handleKeydown(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+      event.preventDefault()
+      this.saveContent(event)
+      return
+    }
+    if (event.key !== "Enter") return
+
+    if (event.shiftKey) {
+      event.preventDefault()
+      document.execCommand("insertLineBreak")
+      this.onInput()
+      return
+    }
+    event.preventDefault()
+    this.saveContent(event)
+  }
+
+  // ---- Locale -----------------------------------------------------------
+
+  localeList() {
+    return Array.from(this.element.querySelectorAll("[data-locale]")).map(b => b.dataset.locale)
+  }
+
+  otherLocale() {
+    return this.localeList().find(l => l !== this.currentContentBlockLocale)
+  }
+
+  blockForLocale(loc) {
+    return (this._blocks || []).find(b => b.key === this.currentContentBlockKey && b.locale === loc)
+  }
+
+  fallbackBlock() {
+    return (this._blocks || []).find(b => b.key === this.currentContentBlockKey && !b.locale) ||
+      (this._blocks || []).find(b => b.key === this.currentContentBlockKey) || {}
+  }
+
+  switchLocale(event) {
+    const loc = event.currentTarget.dataset.locale
+    if (!loc || loc === this.currentContentBlockLocale) return
+    if (this._dirty && !window.confirm("Niet-opgeslagen wijzigingen verwerpen?")) return
+
+    this.currentContentBlockLocale = loc
+    const exact = this.blockForLocale(loc)
+    this.currentContentBlockId = exact?.id || null
+    this._loadedContent = String(exact?.content ?? this.fallbackBlock().content ?? "")
+    this.editorTarget.innerHTML = this._loadedContent
+    this.lastUpdatedTarget.textContent = exact?.updated_at || "Never"
+    this._dirty = false
+
+    if (this.hasHistoryScopeTarget) {
+      this.historyScopeTarget.setAttribute("data-admin--content-block-history-content-block-id-value", String(exact?.id || ""))
+    }
+    this.updateCharCount()
+    this.updateLocaleControls()
+    setTimeout(() => this.focusEditorEnd(), 30)
+  }
+
+  copyFromOther() {
+    const other = this.otherLocale()
+    const block = other && this.blockForLocale(other)
+    if (!block || !block.content) return
+    this.editorTarget.innerHTML = String(block.content)
+    this._dirty = true
+    this.updateCharCount()
+    this.scheduleLivePreview()
+    setTimeout(() => this.focusEditorEnd(), 30)
+  }
+
+  updateLocaleControls() {
+    this.element.querySelectorAll("[data-locale]").forEach(btn => {
+      btn.classList.toggle("cb-active", btn.dataset.locale === this.currentContentBlockLocale)
+    })
+    const other = this.otherLocale()
+    const otherBlock = other ? this.blockForLocale(other) : null
+    const canCopy = !!(otherBlock && otherBlock.content)
+    if (this.hasCopyButtonTarget) this.copyButtonTarget.classList.toggle("hidden", !canCopy)
+    if (canCopy && this.hasCopyLabelTarget) this.copyLabelTarget.textContent = `Kopieer van ${other.toUpperCase()}`
+  }
+
+  updateStats(data) {
+    if (!this.hasStatsBadgeTarget) return
+    const { total = 0, translated = 0, locale } = data
+    if (!total) { this.statsBadgeTarget.classList.add("hidden"); return }
+    this.statsTextTarget.textContent = `${(locale || "").toUpperCase()} · ${translated}/${total} vertaald`
+    this.statsDotTarget.style.background = translated >= total ? "#4D6E2B" : "#d97706"
+    this.statsBadgeTarget.classList.remove("hidden")
+  }
+
+  // ---- Blocks panel / search -------------------------------------------
+
+  togglePanel() {
+    const hidden = this.outlinePanelTarget.classList.toggle("hidden")
+    if (!hidden) {
+      // Ask the preview for a fresh block list + coverage so the panel is current.
+      this.sendMessageToPreview({ type: "REQUEST_BLOCKS" })
+      this.renderOutline()
+      setTimeout(() => this.searchInputTarget.focus(), 30)
+    }
+  }
+
+  onBlockList(blocks) {
+    this._pageBlocks = blocks
+    if (this.hasOutlinePanelTarget &&
+        !this.outlinePanelTarget.classList.contains("hidden") &&
+        !this.searchInputTarget.value.trim()) {
+      this.renderOutline()
+    }
+  }
+
+  searchBlocks(event) {
+    const q = event.target.value.trim()
+    clearTimeout(this._searchTimer)
+    if (!q) { this.renderOutline(); return }
+    this._searchTimer = setTimeout(() => this.runSearch(q), 250)
+  }
+
+  async runSearch(q) {
+    try {
+      const res = await fetch(`/admin/content_blocks?search=${encodeURIComponent(q)}&format=json`, {
+        headers: { "Accept": "application/json" }
+      })
+      const data = await res.json()
+      const items = (data.content_blocks || []).slice(0, 50).map(b => ({
+        key: b.key, index: 0, locale: b.locale, badge: b.locale, text: this.plainText(b.content)
+      }))
+      this.renderList(items)
+    } catch (error) {
+      console.error("Block search failed:", error)
+    }
+  }
+
+  renderOutline() {
+    const items = (this._pageBlocks || []).map(b => ({
+      key: b.key, index: b.index, text: b.text, missing: b.missing
+    }))
+    this.renderList(items)
+  }
+
+  renderList(items) {
+    const list = this.outlineListTarget
+    list.textContent = ""
+    if (!items.length) {
+      const empty = document.createElement("div")
+      empty.className = "px-3 py-6 text-center text-[12px] text-[#a8a29e]"
+      empty.textContent = "Geen blokken gevonden."
+      list.appendChild(empty)
+      return
+    }
+    items.forEach(it => {
+      const btn = document.createElement("button")
+      btn.type = "button"
+      btn.className = "w-full text-left px-2.5 py-2 rounded-md hover:bg-[#faf8f3] transition-colors flex flex-col gap-0.5"
+      btn.addEventListener("click", () => this.openBlockEditor(it.key, Number(it.index) || 0, it.locale || null))
+
+      const top = document.createElement("div")
+      top.className = "flex items-center gap-1.5"
+      const key = document.createElement("span")
+      key.className = "font-mono text-[11px] text-[#78716c] truncate"
+      key.textContent = it.key
+      top.appendChild(key)
+      if (it.missing) {
+        const dot = document.createElement("span")
+        dot.className = "ml-auto h-1.5 w-1.5 rounded-full flex-shrink-0"
+        dot.style.background = "#d97706"
+        top.appendChild(dot)
+      } else if (it.badge) {
+        const badge = document.createElement("span")
+        badge.className = "ml-auto text-[10px] font-semibold uppercase text-[#a8a29e] flex-shrink-0"
+        badge.textContent = it.badge
+        top.appendChild(badge)
+      }
+
+      const text = document.createElement("div")
+      text.className = "text-[12px] text-[#1c1917] truncate"
+      text.textContent = it.text || "—"
+
+      btn.appendChild(top)
+      btn.appendChild(text)
+      list.appendChild(btn)
+    })
+  }
+
+  plainText(html) {
+    const d = document.createElement("div")
+    d.innerHTML = String(html || "")
+    return (d.textContent || "").trim()
+  }
+
+  // ---- Preview theme ----------------------------------------------------
+
+  toggleTheme() {
+    this._previewDark = !this._previewDark
+    this.sendMessageToPreview({ type: "SET_THEME", theme: this._previewDark ? "dark" : "light" })
+    const label = document.querySelector("[data-ve-theme-label]")
+    if (label) label.textContent = this._previewDark ? "Light" : "Dark"
+    const icon = document.querySelector("[data-ve-theme-icon]")
+    if (icon) {
+      icon.innerHTML = this._previewDark
+        ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>'
+        : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>'
+    }
+  }
+
+  // Reload the preview iframe in the next available locale.
+  toggleLocale() {
+    const iframe = this.previewFrameTarget
+    const url = new URL(iframe.src, window.location.origin)
+    const locales = (this.hasLocalesValue ? this.localesValue : "en,nl")
+      .split(",").map(s => s.trim()).filter(Boolean)
+    if (locales.length < 2) return
+
+    const label = document.querySelector("[data-ve-locale-label]")
+    const current = url.searchParams.get("locale") || label?.dataset.current || locales[0]
+    const next = locales.find(l => l !== current) || locales[0]
+    url.searchParams.set("locale", next)
+    iframe.src = url.toString()
+    if (label) { label.textContent = next.toUpperCase(); label.dataset.current = next }
+  }
+
+  // ---- Helpers ----------------------------------------------------------
+
+  focusEditorEnd() {
+    this.editorTarget.focus()
+    const range = document.createRange()
+    range.selectNodeContents(this.editorTarget)
+    range.collapse(false)
+    const sel = window.getSelection()
+    sel.removeAllRanges()
+    sel.addRange(range)
+  }
+
+  refreshPreview() {
+    const iframe = this.previewFrameTarget
+    iframe.src = iframe.src
+  }
+
+  sendMessageToPreview(message) {
+    const iframe = this.previewFrameTarget
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage(message, window.location.origin)
+    }
+  }
+
+  showToast(message, undoable = false) {
+    this.toastMessageTarget.textContent = message
+    if (this.hasToastUndoTarget) this.toastUndoTarget.classList.toggle("hidden", !undoable)
+    this.toastTarget.classList.remove("hidden")
+    clearTimeout(this._toastTimer)
+    this._toastTimer = setTimeout(() => this.hideToast(), undoable ? 6000 : 3000)
+  }
+
+  hideToast() {
+    this.toastTarget.classList.add("hidden")
+  }
+
+  getCurrentLocale() {
+    const metaLocale = document.querySelector('meta[name="locale"]')
+    if (metaLocale) return metaLocale.content
+    if (document.documentElement.lang) return document.documentElement.lang
+    return "en"
+  }
+}