collavre 0.14.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e56759c8d6833552a9d5e49b19745aca7d0a58d56ad3c3a7e6d502ea54d6b156
-  data.tar.gz: 37a2481e6fc5abc1077167d481abb51b118f256de05c704cdd64381eb090562a
+  metadata.gz: 617bf6c7eda577396e21384c92f4655c44eb0f433ef2cfeba05f6c47ab00f2c9
+  data.tar.gz: b3cd87f98abf7a7cd2e1c1876a33d8eab6c993993933d23c021c59c6663cb525
 SHA512:
-  metadata.gz: 9261164e029e28e9303f30879740f5dbd3ccbb6779b0767cd8488920e56f0037f63159fcdf64bd12dbb7788a22f5e1718fc468f616a02f59553a67713dfa422c
-  data.tar.gz: 5856204cfe3ff27016d1e0f5a54f3de43cf839911fae1dba656200679c941c837b4f30ded9e9f94153ecea2972c8797a0554f81c58df27123f1dc0d66ed7b30a
+  metadata.gz: bcdda91582a8b87d3ba5f890f22a0df72c9aed567860c14e06eb85dca5980c2adc735a29a0fa1bbcd9aea3e8b8bdf79d8d88aa6ee88b7231afc9dbdc11edc6d8
+  data.tar.gz: 289e1667b14dd0b578c46d7623fc751489ddb4c8d9dfd09f6024d4355fe69a4b5e375275c3395c541c6f97c26e7ce953b378c1e44d2fd8eda03e5346fa319b8c

data/app/assets/stylesheets/collavre/comments_popup.css

@@ -352,6 +352,68 @@ body.chat-fullscreen {
     margin: 0;
 }
 
+/* Table styling */
+.comment-content table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.85em;
+    margin: 0;
+}
+
+.comment-content table th,
+.comment-content table td {
+    border: 1px solid var(--color-border);
+    padding: 0.3em 0.6em;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.comment-content table th {
+    background: var(--color-section-bg);
+    font-weight: 600;
+}
+
+.comment-content table tr:hover td {
+    background: color-mix(in srgb, var(--color-section-bg) 40%, transparent);
+}
+
+/* Table download wrapper */
+.table-download-wrapper {
+    position: relative;
+    overflow-x: auto;
+    margin: 0.4em 0;
+}
+
+.table-download-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.3em;
+    padding: 0.15em 0;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.table-download-wrapper:hover .table-download-toolbar {
+    opacity: 1;
+}
+
+.table-download-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-2);
+    color: var(--color-muted);
+    font-size: 0.75em;
+    padding: 0.15em 0.5em;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.table-download-btn:hover {
+    color: var(--color-active);
+    border-color: var(--color-active);
+}
+
 /* Quote indicator in form */
 .comment-quote-indicator {
     display: flex;

data/app/javascript/controllers/comment_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { renderCommentMarkdown } from '../lib/utils/markdown'
+import { addTableDownloadButtons } from '../lib/utils/table_download'
 import CommonPopup from '../lib/common_popup'
 
 // Global tracker: persists streaming state across Turbo replacements
@@ -110,6 +111,7 @@ export default class extends Controller {
           this._resetStreamingTimeout()
         } else {
           contentElement.innerHTML = renderCommentMarkdown(text)
+          addTableDownloadButtons(contentElement)
           contentElement.classList.remove('streaming')
           if (this._isStreaming) this._cleanupStreaming()
         }

data/app/javascript/lib/utils/markdown.js

@@ -1,5 +1,6 @@
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
+import { addTableDownloadButtons } from './table_download'
 import hljs from 'highlight.js/lib/core'
 
 // Register only commonly used languages to keep the bundle small
@@ -129,5 +130,6 @@ export function renderMarkdownInContainer(container) {
     if (element.dataset.rendered === 'true') return
     element.innerHTML = renderCommentMarkdown(element.textContent)
     element.dataset.rendered = 'true'
+    addTableDownloadButtons(element)
   })
 }

data/app/javascript/lib/utils/table_download.js

@@ -0,0 +1,163 @@
+/**
+ * Table Download Utility
+ *
+ * Detects rendered <table> elements within comment content and adds
+ * download buttons (CSV / Excel) above each table.
+ */
+
+function getI18n(commentEl) {
+  const popup = commentEl.closest('#comments-popup')
+  return {
+    csv: popup?.dataset?.tableDownloadCsvText || 'CSV',
+    excel: popup?.dataset?.tableDownloadExcelText || 'Excel',
+  }
+}
+
+function parseTable(table) {
+  const rows = []
+  table.querySelectorAll('tr').forEach((tr) => {
+    const cells = []
+    tr.querySelectorAll('th, td').forEach((cell) => {
+      cells.push(cell.textContent.trim())
+    })
+    rows.push(cells)
+  })
+  return rows
+}
+
+function escapeCsvCell(value) {
+  if (/[",\n\r]/.test(value)) {
+    return `"${value.replace(/"/g, '""')}"`
+  }
+  return value
+}
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+function downloadCsv(rows, filename) {
+  const csv = rows.map((row) => row.map(escapeCsvCell).join(',')).join('\r\n')
+  // BOM for Excel UTF-8 compatibility
+  const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' })
+  downloadBlob(blob, filename)
+}
+
+function downloadExcel(rows, filename) {
+  const escapeXml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+
+  const headerRow = rows[0] || []
+  const dataRows = rows.slice(1)
+
+  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n'
+  xml += '<?mso-application progid="Excel.Sheet"?>\n'
+  xml += '<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"\n'
+  xml += '  xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">\n'
+  xml += '  <Styles>\n'
+  xml += '    <Style ss:ID="header"><Font ss:Bold="1"/></Style>\n'
+  xml += '  </Styles>\n'
+  xml += '  <Worksheet ss:Name="Sheet1">\n'
+  xml += '    <Table>\n'
+
+  // Header row
+  if (headerRow.length) {
+    xml += '      <Row>\n'
+    headerRow.forEach((cell) => {
+      xml += `        <Cell ss:StyleID="header"><Data ss:Type="String">${escapeXml(cell)}</Data></Cell>\n`
+    })
+    xml += '      </Row>\n'
+  }
+
+  // Data rows
+  dataRows.forEach((row) => {
+    xml += '      <Row>\n'
+    row.forEach((cell) => {
+      const type = isNaN(cell) || cell === '' ? 'String' : 'Number'
+      xml += `        <Cell><Data ss:Type="${type}">${escapeXml(cell)}</Data></Cell>\n`
+    })
+    xml += '      </Row>\n'
+  })
+
+  xml += '    </Table>\n'
+  xml += '  </Worksheet>\n'
+  xml += '</Workbook>'
+
+  const blob = new Blob([xml], { type: 'application/vnd.ms-excel;charset=utf-8' })
+  downloadBlob(blob, filename)
+}
+
+function generateFilename(table, index) {
+  // Try to use the first header cell as a hint for the filename
+  const firstHeader = table.querySelector('th')
+  if (firstHeader) {
+    const hint = firstHeader.textContent.trim().slice(0, 30).replace(/[^a-zA-Z0-9가-힣_-]/g, '_')
+    if (hint) return `table_${hint}`
+  }
+  return `table_${index + 1}`
+}
+
+function createToolbar(table, index, i18n) {
+  const toolbar = document.createElement('div')
+  toolbar.className = 'table-download-toolbar'
+
+  const csvBtn = document.createElement('button')
+  csvBtn.type = 'button'
+  csvBtn.className = 'table-download-btn'
+  csvBtn.textContent = `\u2913 ${i18n.csv}`
+  csvBtn.addEventListener('click', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const rows = parseTable(table)
+    const filename = generateFilename(table, index)
+    downloadCsv(rows, `${filename}.csv`)
+  })
+
+  const excelBtn = document.createElement('button')
+  excelBtn.type = 'button'
+  excelBtn.className = 'table-download-btn'
+  excelBtn.textContent = `\u2913 ${i18n.excel}`
+  excelBtn.addEventListener('click', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const rows = parseTable(table)
+    const filename = generateFilename(table, index)
+    downloadExcel(rows, `${filename}.xls`)
+  })
+
+  toolbar.appendChild(csvBtn)
+  toolbar.appendChild(excelBtn)
+  return toolbar
+}
+
+/**
+ * Scans the given content element for <table> tags and adds download
+ * toolbars. Call this after markdown has been rendered into HTML.
+ */
+export function addTableDownloadButtons(contentElement) {
+  if (!contentElement) return
+
+  const tables = contentElement.querySelectorAll('table')
+  if (!tables.length) return
+
+  const i18n = getI18n(contentElement)
+
+  tables.forEach((table, index) => {
+    // Skip if already wrapped
+    if (table.parentElement?.classList.contains('table-download-wrapper')) return
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'table-download-wrapper'
+
+    const toolbar = createToolbar(table, index, i18n)
+    table.parentNode.insertBefore(wrapper, table)
+    wrapper.appendChild(toolbar)
+    wrapper.appendChild(table)
+  })
+}

data/app/views/collavre/comments/_comments_popup.html.erb

@@ -59,7 +59,9 @@
      data-review-type-review-label="<%= t('collavre.comments.review_type_review') %>"
      data-review-type-question-label="<%= t('collavre.comments.review_type_question') %>"
      data-remove-from-history-label="<%= t('collavre.comments.remove_from_history') %>"
-     data-inbox-reply-button="<%= t('collavre.comments.inbox_reply_button') %>">
+     data-inbox-reply-button="<%= t('collavre.comments.inbox_reply_button') %>"
+     data-table-download-csv-text="<%= t('collavre.comments.table_download.csv') %>"
+     data-table-download-excel-text="<%= t('collavre.comments.table_download.excel') %>">
   <div class="resize-handle resize-handle-left" data-comments--popup-target="leftHandle"></div>
   <div class="resize-handle resize-handle-right" data-comments--popup-target="rightHandle"></div>
   <div class="comments-popup-header" data-comments--popup-target="header">

data/config/locales/comments.en.yml

@@ -196,6 +196,9 @@ en:
       stop_agent: Stop
       read_by: Read by %{name}
       activity_logs_summary: Activity Logs
+      table_download:
+        csv: CSV
+        excel: Excel
       lightbox:
         close: Close
         previous: Previous

data/config/locales/comments.ko.yml

@@ -193,6 +193,9 @@ ko:
       stop_agent: 중지
       read_by: "%{name} 님이 읽음"
       activity_logs_summary: 활동 기록
+      table_download:
+        csv: CSV
+        excel: Excel
       lightbox:
         close: 닫기
         previous: 이전

data/lib/collavre/version.rb

@@ -1,3 +1,3 @@
 module Collavre
-  VERSION = "0.14.0"
+  VERSION = "0.15.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: collavre
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.15.0
 platform: ruby
 authors:
 - Collavre
@@ -321,6 +321,7 @@ files:
 - app/javascript/lib/touch_drag.js
 - app/javascript/lib/turbo_stream_actions.js
 - app/javascript/lib/utils/markdown.js
+- app/javascript/lib/utils/table_download.js
 - app/javascript/modules/__tests__/creative_progress.test.js
 - app/javascript/modules/command_args_form.js
 - app/javascript/modules/command_menu.js