Attachment action buttons and card view

[jondkinney]

Summary

• Preview, download, edit, and collapse/expand action buttons on attachment overlay
• Collapsed card view layout with icon, name, caption, and file size
• Toggle between preview and card via attachment--collapsed class
• Download button on toolbar with caption pass-through

Integration

The edit and preview buttons dispatch custom events that bubble up from the <lexxy-editor> element. The consuming application must listen for these to provide behavior.

Events

Event	Detail	Purpose
lexxy:edit-attachment	{ fileUrl, fileName, contentType, caption }	Open the attachment in an editor
lexxy:preview-attachment	{ fileUrl, fileName, contentType, caption }	Open a read-only preview

The download button works standalone (native <a download>). The collapse/expand toggle works standalone (toggles attachment--collapsed class and persists via node property).

Example: Preview handler

document.addEventListener("lexxy:preview-attachment", (event) => {
  const { fileUrl, fileName, contentType, caption } = event.detail

  if (contentType.startsWith("image/")) {
    // Show image in a modal
    const img = document.createElement("img")
    img.src = fileUrl
    img.style.maxWidth = "100%"
    openModal(img)
  } else if (contentType === "application/pdf") {
    // Render PDF in an iframe
    const iframe = document.createElement("iframe")
    iframe.src = fileUrl
    openModal(iframe)
  } else {
    // Fetch and render text content
    const response = await fetch(fileUrl)
    const text = await response.text()
    const container = document.createElement("pre")
    container.textContent = text
    openModal(container)
  }
})

Example: Edit handler with CodeMirror

document.addEventListener("lexxy:edit-attachment", async (event) => {
  const { fileUrl, fileName, contentType, caption } = event.detail

  // Only allow editing text-based files
  const editable = contentType.startsWith("text/") ||
    contentType === "application/json" ||
    contentType === "application/csv"
  if (!editable) return

  // Fetch current content
  const response = await fetch(fileUrl)
  const content = await response.text()

  // Create an overlay editor
  const overlay = document.createElement("div")
  overlay.style.cssText = "position:fixed;inset:0;z-index:10000;background:white;padding:1rem;"

  // Initialize CodeMirror (lazy-loaded)
  const { basicSetup } = await import("codemirror")
  const { EditorView, keymap } = await import("@codemirror/view")
  const { indentWithTab } = await import("@codemirror/commands")
  const { markdown } = await import("@codemirror/lang-markdown")

  const extensions = [
    basicSetup,
    keymap.of([indentWithTab]),
    EditorView.lineWrapping,
  ]
  if (fileName.endsWith(".md")) extensions.push(markdown())

  const view = new EditorView({
    doc: content,
    extensions,
    parent: overlay
  })

  // Save button
  const saveBtn = document.createElement("button")
  saveBtn.textContent = "Save"
  saveBtn.addEventListener("click", async () => {
    const newContent = view.state.doc.toString()
    await fetch(fileUrl, {
      method: "PUT",
      headers: {
        "Content-Type": contentType,
        "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content
      },
      body: newContent
    })
  })

  // Close button
  const closeBtn = document.createElement("button")
  closeBtn.textContent = "Close"
  closeBtn.addEventListener("click", () => {
    view.destroy()
    overlay.remove()
  })

  overlay.prepend(saveBtn, closeBtn)
  document.body.appendChild(overlay)
})

Test plan

• Hover over attachment — action buttons appear
• Click collapse — switches to card view
• Click expand — returns to preview
• Download button downloads the file
• Edit button fires lexxy:edit-attachment event with correct detail
• Preview button fires lexxy:preview-attachment event with correct detail
• Without event listeners, buttons are no-ops (no errors)

🤖 Generated with Claude Code