infodocs 0.3.0

data/app/controllers/infodocs/tags_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Infodocs
+  class TagsController < ApplicationController
+    def index
+      @tag = Page.normalize_tags(params[:tag]).first
+      @tags = visible_tags
+      @pages = @tag ? visible_pages.select { |page| page.tags.include?(@tag) } : []
+    end
+  end
+end

data/app/controllers/infodocs/trees_controller.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Infodocs
+  # Drag & drop target: moves a page/folder and rewrites `_tree.yml` files.
+  class TreesController < ApplicationController
+    before_action :ensure_editable!
+
+    def create
+      slug = TreeEditor.new(docs_tree).create(parent: params[:parent].to_s, title: params[:title], kind: params[:kind])
+      Infodocs.reload!
+      redirect_to(Infodocs.tree.find(slug) ? edit_page_path(slug) : page_path(slug), status: :see_other)
+    rescue TreeEditor::Invalid => error
+      redirect_back fallback_location: root_path, alert: error.message, status: :see_other
+    end
+
+    def destroy
+      parent = TreeEditor.new(docs_tree).delete(slug: params.require(:slug))
+      Infodocs.reload!
+      render json: { deleted: true, redirect: parent.empty? ? root_path : page_path(parent) }
+    rescue TreeEditor::Invalid, ActionController::ParameterMissing => error
+      render json: { deleted: false, error: error.message }, status: :unprocessable_entity
+    end
+
+    def tags
+      saved = TreeEditor.new(docs_tree).tag(slug: params[:slug].to_s, tags: params[:tags].to_s)
+      Infodocs.reload!
+      render json: { tags: saved }
+    rescue TreeEditor::Invalid => error
+      render json: { error: error.message }, status: :unprocessable_entity
+    end
+
+    def move
+      TreeEditor.new(docs_tree).move(slug: params.require(:slug), parent: params[:parent].to_s, before: params[:before].presence)
+      Infodocs.reload!
+      render json: { moved: true }
+    rescue TreeEditor::Invalid, ActionController::ParameterMissing => error
+      render json: { moved: false, error: error.message }, status: :unprocessable_entity
+    end
+  end
+end

data/app/helpers/infodocs/application_helper.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Infodocs
+  module ApplicationHelper
+    # Rouge theme as CSS classes: GitHub light, GitHub dark under prefers-color-scheme.
+    # Edit controls: opt-in via config and only for requests from this machine.
+    def infodocs_editable?
+      Infodocs.editing_enabled? && request.local?
+    end
+
+    # Branding options may be a value or a lambda that receives the view
+    # (handy for asset helpers: `->(view) { view.image_path("logo.svg") }`).
+    def infodocs_option(name)
+      value = Infodocs.config.public_send(name)
+      value.respond_to?(:call) ? value.call(self) : value
+    end
+
+    def infodocs_header_links
+      Infodocs.config.header_links.map { |link| link.to_hash.transform_keys(&:to_sym) }
+    end
+
+    # Tag the sidebar is filtered by (?tag=…), if it is a known one.
+    def infodocs_active_tag
+      tag = Page.normalize_tags(params[:tag]).first
+      tag if tag && Infodocs.tree.tags.key?(tag)
+    end
+
+    # Sidebar nodes the visitor may see (and, when filtering, only those with the tag).
+    def infodocs_filter_nodes(nodes, tag)
+      return nodes if tag.nil? && Infodocs.config.page_authorize.nil?
+
+      nodes.select { |node| infodocs_node_visible?(node, tag) }
+    end
+
+    def infodocs_node_visible?(node, tag)
+      if node.leaf?
+        page = node.page
+        page_allowed?(page) && (tag.nil? || page.tags.include?(tag))
+      else
+        node.children.reject(&:hidden).any? { |child| infodocs_node_visible?(child, tag) } ||
+          (tag.nil? && node.page && page_allowed?(node.page))
+      end
+    end
+
+    # [label, slug] for every folder a new page can be created in.
+    def infodocs_folder_options(node = Infodocs.tree.root, depth = 0, options = [])
+      unless node.slug.empty? && Infodocs.tree.multiple_roots?
+        options << [("— " * depth) + (node.slug.empty? ? "Top level" : node.title), node.slug]
+      end
+      node.children&.each { |child| infodocs_folder_options(child, depth + 1, options) if child.folder? }
+      options
+    end
+
+    # Attributes for a delete button handled by the delegated listener in application.js.
+    def infodocs_delete_attributes(node)
+      pages = node.folder? ? Infodocs.tree.pages.count { |page| page.slug.start_with?("#{node.slug}/") || page.slug == node.slug } : 1
+      what = node.folder? ? "the folder \"#{node.title}\" with #{pages} #{'page'.pluralize(pages)} inside" : "\"#{node.title}\""
+      { "data-infodocs-delete": "", "data-url": delete_tree_path, "data-slug": node.slug,
+        "data-message": "Delete #{what} from disk? Files tracked by git can be restored with git." }
+    end
+
+    def infodocs_deletable?(node)
+      infodocs_editable? && !(Infodocs.tree.multiple_roots? && Infodocs.tree.children.include?(node))
+    end
+
+    def infodocs_highlight_css
+      Infodocs::CodeTheme.css(Infodocs.config.code_theme)
+    end
+  end
+end

data/app/javascript/infodocs/application.js

@@ -0,0 +1,74 @@
+import { Application } from "@hotwired/stimulus"
+import SidebarController from "infodocs/controllers/sidebar_controller"
+import SearchController from "infodocs/controllers/search_controller"
+import MermaidController from "infodocs/controllers/mermaid_controller"
+import EditorController from "infodocs/controllers/editor_controller"
+import TreeEditorController from "infodocs/controllers/tree_editor_controller"
+import TreeStateController from "infodocs/controllers/tree_state_controller"
+import HighlightController from "infodocs/controllers/highlight_controller"
+import TocController from "infodocs/controllers/toc_controller"
+
+const application = Application.start()
+application.register("infodocs-sidebar", SidebarController)
+application.register("infodocs-search", SearchController)
+application.register("infodocs-mermaid", MermaidController)
+application.register("infodocs-toc", TocController)
+application.register("infodocs-tree-state", TreeStateController)
+application.register("infodocs-highlight", HighlightController)
+application.register("infodocs-editor", EditorController)
+application.register("infodocs-tree-editor", TreeEditorController)
+
+// "Copy Markdown" in the page header: fetches the page source and copies it.
+document.addEventListener("click", async (event) => {
+  const button = event.target.closest("[data-infodocs-copy-markdown]")
+  if (!button) return
+
+  const label = button.querySelector("[data-label]")
+  try {
+    const response = await fetch(button.dataset.infodocsCopyMarkdown, { credentials: "same-origin" })
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+    await navigator.clipboard.writeText(await response.text())
+    label.textContent = "Copied"
+  } catch {
+    label.textContent = "Copy failed"
+  }
+  setTimeout(() => { label.textContent = "Copy Markdown" }, 1500)
+})
+
+// Copy buttons on code blocks (also inside the editor preview).
+document.addEventListener("click", async (event) => {
+  const button = event.target.closest("[data-infodocs-copy]")
+  if (!button) return
+
+  const code = button.closest(".infodocs-code")?.querySelector("pre code")
+  if (!code) return
+  try {
+    await navigator.clipboard.writeText(code.textContent)
+    button.textContent = "Copied"
+  } catch {
+    button.textContent = "Press ⌘C"
+  }
+  setTimeout(() => { button.textContent = "Copy" }, 1500)
+})
+
+// Delete buttons (development only): confirm, DELETE the page/folder, go to its parent.
+document.addEventListener("click", async (event) => {
+  const button = event.target.closest("[data-infodocs-delete]")
+  if (!button) return
+  event.preventDefault()
+  event.stopPropagation()
+  if (!window.confirm(button.dataset.message)) return
+
+  try {
+    const response = await fetch(button.dataset.url, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json", "Accept": "application/json", "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content || "" },
+      body: JSON.stringify({ slug: button.dataset.slug })
+    })
+    const data = await response.json()
+    if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`)
+    window.location.assign(data.redirect)
+  } catch (error) {
+    window.alert(`Delete failed: ${error.message}`)
+  }
+}, true)

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

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus"
+
+const WRAP = {
+  bold: ["**", "**", "bold"],
+  italic: ["_", "_", "italic"],
+  code: ["`", "`", "code"]
+}
+const LINE = { h1: "# ", h2: "## ", h3: "### ", list: "- ", task: "- [ ] ", quote: "> " }
+const BLOCK = { ruby: "ruby", js: "js", mermaid: "mermaid" }
+
+// Markdown source editor with live server-rendered preview. Saves the raw
+// text to the .md file through PATCH (development only).
+export default class extends Controller {
+  static targets = ["input", "preview", "status", "pane", "tab", "tags"]
+  static values = { saveUrl: String, previewUrl: String, backUrl: String, tagsUrl: String, slug: String }
+
+  connect() {
+    this.dirty = false
+    this.render()
+    this.onKey = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault()
+        this.save()
+      }
+    }
+    this.onUnload = (event) => { if (this.dirty) { event.preventDefault(); event.returnValue = "" } }
+    document.addEventListener("keydown", this.onKey)
+    window.addEventListener("beforeunload", this.onUnload)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.onKey)
+    window.removeEventListener("beforeunload", this.onUnload)
+    clearTimeout(this.timer)
+  }
+
+  changed() {
+    this.dirty = true
+    this.#status("Unsaved changes")
+    clearTimeout(this.timer)
+    this.timer = setTimeout(() => this.render(), 300)
+  }
+
+  keydown(event) {
+    if (event.key !== "Tab" || event.metaKey || event.ctrlKey) return
+    event.preventDefault()
+    this.#insert("  ")
+  }
+
+  show({ params: { pane } }) {
+    this.tabTargets.forEach((tab) => tab.setAttribute("aria-selected", tab.dataset.pane === pane))
+    const preview = pane === "preview"
+    this.inputTarget.classList.toggle("hidden", preview)
+    this.inputTarget.classList.toggle("lg:block", true)
+    this.paneTarget.classList.toggle("hidden", !preview)
+    this.paneTarget.classList.add("lg:block")
+  }
+
+  format({ params: { kind } }) {
+    const input = this.inputTarget
+    const { selectionStart: start, selectionEnd: end, value } = input
+    const selected = value.slice(start, end)
+
+    if (WRAP[kind]) {
+      const [before, after, placeholder] = WRAP[kind]
+      this.#replace(start, end, `${before}${selected || placeholder}${after}`, before.length, selected ? null : placeholder.length)
+    } else if (kind === "link") {
+      const text = selected || "text"
+      this.#replace(start, end, `[${text}](https://)`, text.length + 3, 8)
+    } else if (LINE[kind]) {
+      const lineStart = value.lastIndexOf("\n", start - 1) + 1
+      this.#replace(lineStart, lineStart, LINE[kind], LINE[kind].length, 0)
+      input.setSelectionRange(start + LINE[kind].length, end + LINE[kind].length)
+    } else if (BLOCK[kind]) {
+      const body = selected || ""
+      this.#replace(start, end, `\n\`\`\`${BLOCK[kind]}\n${body}\n\`\`\`\n`, 5 + BLOCK[kind].length, body.length)
+    }
+    this.changed()
+    input.focus()
+  }
+
+  async save() {
+    this.#status("Saving…")
+    try {
+      const response = await fetch(this.saveUrlValue, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json", "Accept": "application/json", "X-CSRF-Token": this.#csrf() },
+        body: JSON.stringify({ content: this.inputTarget.value })
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      if (this.hasTagsTarget) await this.#saveTags()
+      this.dirty = false
+      this.#status("Saved — commit the change with git")
+    } catch (error) {
+      this.#status(`Save failed: ${error.message}`)
+    }
+  }
+
+  async #saveTags() {
+    const response = await fetch(this.tagsUrlValue, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "Accept": "application/json", "X-CSRF-Token": this.#csrf() },
+      body: JSON.stringify({ slug: this.slugValue, tags: this.tagsTarget.value })
+    })
+    if (!response.ok) throw new Error(`tags: HTTP ${response.status}`)
+  }
+
+  async render() {
+    const token = (this.renderToken = (this.renderToken || 0) + 1)
+    try {
+      const response = await fetch(this.previewUrlValue, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-CSRF-Token": this.#csrf() },
+        body: JSON.stringify({ content: this.inputTarget.value })
+      })
+      if (token !== this.renderToken || !response.ok) return
+      this.previewTarget.innerHTML = await response.text()
+    } catch { /* offline: keep the last preview */ }
+  }
+
+  #replace(start, end, text, selectOffset, selectLength) {
+    const input = this.inputTarget
+    input.setRangeText(text, start, end, "end")
+    if (selectLength != null) input.setSelectionRange(start + selectOffset, start + selectOffset + selectLength)
+  }
+
+  #insert(text) {
+    const input = this.inputTarget
+    input.setRangeText(text, input.selectionStart, input.selectionEnd, "end")
+    this.changed()
+  }
+
+  #status(text) { this.statusTarget.textContent = text }
+  #csrf() { return document.querySelector("meta[name=csrf-token]")?.content || "" }
+}

data/app/javascript/infodocs/controllers/highlight_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Marks the words of the search (?q=…) that led here and scrolls to the first.
+export default class extends Controller {
+  connect() {
+    const terms = this.#terms(new URLSearchParams(window.location.search).get("q") || "")
+    if (terms.length === 0) return
+
+    const pattern = new RegExp(`(${terms.map((term) => term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "gi")
+    const walker = document.createTreeWalker(this.element, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => node.parentElement.closest("pre, script, style, mark, button") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+    })
+    const texts = []
+    while (walker.nextNode()) texts.push(walker.currentNode)
+
+    let first = null
+    texts.forEach((node) => {
+      if (!pattern.test(node.nodeValue)) return
+      pattern.lastIndex = 0
+      const fragment = document.createDocumentFragment()
+      node.nodeValue.split(pattern).forEach((part, index) => {
+        if (index % 2 === 1) {
+          const mark = document.createElement("mark")
+          mark.className = "rounded bg-yellow-200 px-0.5 text-inherit dark:bg-yellow-700"
+          mark.textContent = part
+          first ||= mark
+          fragment.append(mark)
+        } else {
+          fragment.append(part)
+        }
+      })
+      node.replaceWith(fragment)
+    })
+    first?.scrollIntoView({ block: "center" })
+  }
+
+  // Words from a search query: no exclusions, operators or field filters.
+  #terms(query) {
+    return query.split(/\s+/)
+      .filter((word) => word && !word.startsWith("-") && !/^(tag|path):/i.test(word) && word.toUpperCase() !== "OR")
+      .map((word) => word.replace(/^(title|heading):/i, "").replace(/["*]/g, ""))
+      .filter((word) => word.length > 1)
+  }
+}

data/app/javascript/infodocs/controllers/mermaid_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Lazy-loads mermaid only when diagrams exist; follows dark mode and re-runs
+// when the content changes (editor preview).
+export default class extends Controller {
+  connect() {
+    this.#run()
+    this.observer = new MutationObserver(() => this.#run())
+    this.observer.observe(this.element, { childList: true, subtree: true })
+  }
+
+  disconnect() { this.observer?.disconnect() }
+
+  async #run() {
+    const nodes = [...this.element.querySelectorAll("pre.mermaid:not([data-processed])")]
+    if (nodes.length === 0) return
+
+    // `config.mermaid_url` overrides the CDN build pinned by the engine.
+    const custom = document.querySelector("meta[name=infodocs-mermaid-url]")?.content
+    const { default: mermaid } = await import(custom || "mermaid")
+    const dark = window.matchMedia("(prefers-color-scheme: dark)").matches || document.documentElement.classList.contains("dark")
+    mermaid.initialize({ startOnLoad: false, theme: dark ? "dark" : "default", securityLevel: "strict" })
+    try { await mermaid.run({ nodes }) } catch { /* invalid diagram while typing */ }
+  }
+}

data/app/javascript/infodocs/controllers/search_controller.js

@@ -0,0 +1,125 @@
+import { Controller } from "@hotwired/stimulus"
+
+const HISTORY_KEY = "infodocs:search-history"
+
+// Cmd/Ctrl+K or "/" focuses the search field. Typing shows live results in a
+// dropdown (arrow keys + Enter); Enter without a selection opens the full page.
+export default class extends Controller {
+  static targets = ["input", "results"]
+
+  connect() {
+    this.index = -1
+    this.onKey = (event) => {
+      const typing = /^(input|textarea|select)$/i.test(event.target.tagName) || event.target.isContentEditable
+      if ((event.key === "k" && (event.metaKey || event.ctrlKey)) || (event.key === "/" && !typing)) {
+        event.preventDefault()
+        this.inputTarget.focus()
+        this.inputTarget.select()
+      }
+    }
+    this.onClick = (event) => { if (!this.element.contains(event.target)) this.hide() }
+    document.addEventListener("keydown", this.onKey)
+    document.addEventListener("click", this.onClick)
+    this.inputTarget.addEventListener("input", () => this.schedule())
+    this.inputTarget.addEventListener("focus", () => { if (!this.inputTarget.value.trim()) this.showHistory() })
+    this.inputTarget.addEventListener("keydown", (event) => this.navigate(event))
+    this.element.addEventListener("submit", () => this.remember())
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.onKey)
+    document.removeEventListener("click", this.onClick)
+    clearTimeout(this.timer)
+  }
+
+  schedule() {
+    clearTimeout(this.timer)
+    const query = this.inputTarget.value.trim()
+    if (!query) return this.showHistory()
+    this.timer = setTimeout(() => this.fetchResults(query), 150)
+  }
+
+  async fetchResults(query) {
+    const url = `${this.element.dataset.infodocsSearchUrl}?q=${encodeURIComponent(query)}`
+    try {
+      const response = await fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" })
+      if (!response.ok || query !== this.inputTarget.value.trim()) return
+      this.render(await response.json(), query)
+    } catch { this.hide() }
+  }
+
+  render(results, query) {
+    this.resultsTarget.replaceChildren()
+    if (results.length === 0) {
+      const empty = document.createElement("li")
+      empty.className = "px-3 py-2 text-sm text-gray-500"
+      empty.textContent = `No results for "${query}"`
+      this.resultsTarget.append(empty)
+    }
+    results.forEach((result) => {
+      const item = document.createElement("li")
+      const link = document.createElement("a")
+      link.href = `${result.url}?q=${encodeURIComponent(this.inputTarget.value.trim())}`
+      link.className = "block px-3 py-2 text-sm aria-selected:bg-blue-50 hover:bg-gray-50 dark:aria-selected:bg-gray-800 dark:hover:bg-gray-800"
+      const title = document.createElement("span")
+      title.className = "block font-medium"
+      title.textContent = result.title
+      const snippet = document.createElement("span")
+      snippet.className = "block truncate text-xs text-gray-500 [&_mark]:bg-yellow-200 dark:[&_mark]:bg-yellow-700"
+      snippet.innerHTML = result.snippet // built server-side: escaped text + <mark>
+      link.append(title, snippet)
+      item.append(link)
+      this.resultsTarget.append(item)
+    })
+    this.index = -1
+    this.resultsTarget.hidden = false
+  }
+
+  showHistory() {
+    const items = this.history()
+    if (items.length === 0) return this.hide()
+    this.resultsTarget.replaceChildren()
+    items.forEach((query) => {
+      const item = document.createElement("li")
+      const link = document.createElement("a")
+      link.href = `${this.element.action}?q=${encodeURIComponent(query)}`
+      link.className = "block px-3 py-2 text-sm text-gray-600 aria-selected:bg-blue-50 hover:bg-gray-50 dark:text-gray-300 dark:aria-selected:bg-gray-800 dark:hover:bg-gray-800"
+      link.textContent = query
+      item.append(link)
+      this.resultsTarget.append(item)
+    })
+    this.index = -1
+    this.resultsTarget.hidden = false
+  }
+
+  navigate(event) {
+    const links = [...this.resultsTarget.querySelectorAll("a")]
+    if (event.key === "Escape") return this.hide()
+    if (this.resultsTarget.hidden || links.length === 0) return
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault()
+      this.index = (this.index + (event.key === "ArrowDown" ? 1 : -1) + links.length) % links.length
+      links.forEach((link, i) => link.setAttribute("aria-selected", String(i === this.index)))
+      links[this.index].scrollIntoView({ block: "nearest" })
+    } else if (event.key === "Enter" && this.index >= 0) {
+      event.preventDefault()
+      this.remember()
+      window.location.href = links[this.index].href
+    }
+  }
+
+  hide() { this.resultsTarget.hidden = true; this.index = -1 }
+
+  history() {
+    try { return JSON.parse(localStorage.getItem(HISTORY_KEY)) || [] } catch { return [] }
+  }
+
+  remember() {
+    const query = this.inputTarget.value.trim()
+    if (!query) return
+    try {
+      const items = [query, ...this.history().filter((item) => item !== query)].slice(0, 5)
+      localStorage.setItem(HISTORY_KEY, JSON.stringify(items))
+    } catch { /* storage unavailable */ }
+  }
+}

data/app/javascript/infodocs/controllers/sidebar_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+const KEY = "infodocs:sidebar-collapsed"
+const desktop = () => window.matchMedia("(min-width: 1024px)").matches
+
+// Below `lg` the sidebar is a drawer; from `lg` up it is a column that can be
+// collapsed (state remembered per browser).
+export default class extends Controller {
+  static targets = ["panel", "backdrop"]
+
+  connect() {
+    try { this.#collapse(localStorage.getItem(KEY) === "true") } catch { /* storage unavailable */ }
+  }
+
+  toggle() {
+    if (desktop()) {
+      const collapsed = this.panelTarget.dataset.collapsed !== "true"
+      this.#collapse(collapsed)
+      try { localStorage.setItem(KEY, collapsed) } catch { /* storage unavailable */ }
+    } else {
+      this.#open(this.panelTarget.dataset.open !== "true")
+    }
+  }
+
+  close() { this.#open(false) }
+
+  #collapse(collapsed) { this.panelTarget.dataset.collapsed = collapsed }
+
+  #open(open) {
+    this.panelTarget.dataset.open = open
+    this.backdropTarget.classList.toggle("hidden", !open)
+    document.body.classList.toggle("overflow-hidden", open)
+  }
+}

data/app/javascript/infodocs/controllers/toc_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Highlights the TOC entry of the heading currently in view.
+export default class extends Controller {
+  static targets = ["link"]
+
+  connect() {
+    const headings = this.linkTargets.map((link) => document.getElementById(link.hash.slice(1))).filter(Boolean)
+    this.observer = new IntersectionObserver((entries) => {
+      const visible = entries.find((entry) => entry.isIntersecting)
+      if (!visible) return
+      this.linkTargets.forEach((link) => link.toggleAttribute("aria-current", link.hash === `#${visible.target.id}`))
+    }, { rootMargin: "0px 0px -70% 0px" })
+    headings.forEach((heading) => this.observer.observe(heading))
+  }
+
+  disconnect() { this.observer?.disconnect() }
+}

data/app/javascript/infodocs/controllers/tree_editor_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Development-only drag & drop of pages and folders. Sortable is loaded on
+// first use; every drop is persisted by the server (files + _tree.yml).
+export default class extends Controller {
+  static targets = ["nav", "list", "toggle", "status"]
+  static values = { url: String }
+
+  disconnect() { this.#destroy() }
+
+  async toggle() {
+    const on = this.navTarget.dataset.reordering !== "true"
+    this.navTarget.dataset.reordering = on
+    this.toggleTarget.setAttribute("aria-pressed", on)
+    if (on) await this.#enable()
+    else this.#destroy()
+    this.#message(on ? "Drag the handles to move pages and folders." : "")
+  }
+
+  async #enable() {
+    const { default: Sortable } = await import("sortablejs")
+    this.sortables = this.listTargets.map((list) => Sortable.create(list, {
+      group: "infodocs-tree",
+      handle: ".infodocs-handle",
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      onEnd: (event) => this.#persist(event)
+    }))
+    this.element.querySelectorAll("details").forEach((details) => { details.open = true })
+  }
+
+  #destroy() {
+    this.sortables?.forEach((sortable) => sortable.destroy())
+    this.sortables = null
+  }
+
+  async #persist({ item }) {
+    const body = {
+      slug: item.dataset.slug,
+      parent: item.parentElement.dataset.parentSlug || "",
+      before: item.nextElementSibling?.dataset.slug || null
+    }
+    try {
+      const response = await fetch(this.urlValue, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "Accept": "application/json", "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content || "" },
+        body: JSON.stringify(body)
+      })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`)
+      this.#message("Moved. Commit the changes with git.")
+      window.location.reload()
+    } catch (error) {
+      this.#message(`Move failed: ${error.message}`)
+      setTimeout(() => window.location.reload(), 1500)
+    }
+  }
+
+  #message(text) {
+    if (!this.hasStatusTarget) return
+    this.statusTarget.textContent = text
+    this.statusTarget.classList.toggle("hidden", text === "")
+  }
+}