reviw 0.17.0 → 0.17.2

package/cli.cjs

@@ -126,6 +126,13 @@ function sanitizeHtml(html) {
 }
 
 marked.use({
+  hooks: {
+    // テーブルをスクロールラッパーで囲む（後処理）
+    postprocess: function(html) {
+      return html.replace(/<table>/g, '<div class="table-scroll-container"><span class="scroll-hint">← scroll →</span><div class="table-scroll-wrapper"><table>')
+                 .replace(/<\/table>/g, '</table></div></div>');
+    }
+  },
   renderer: {
     // 生HTMLブロックをサニタイズ
     html: function(token) {
@@ -159,7 +166,8 @@ marked.use({
       if (videoExtensions.test(href)) {
         // For videos, render as video element with controls and thumbnail preview
         var displayText = text || href.split('/').pop();
-        return '<video src="' + escapeHtmlForXss(href) + '" controls preload="metadata" class="video-preview"' + titleAttr + '>' +
+        var dataAlt = text ? ' data-alt="' + escapeHtmlForXss(text) + '"' : "";
+        return '<video src="' + escapeHtmlForXss(href) + '" controls preload="metadata" class="video-preview"' + titleAttr + dataAlt + '>' +
                '<a href="' + escapeHtmlForXss(href) + '">📹' + escapeHtmlForXss(displayText) + '</a></video>';
       }
       return '<img src="' + escapeHtmlForXss(href) + '"' + altAttr + titleAttr + '>';
@@ -2729,7 +2737,8 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       flex: 1;
       min-width: 0;
       overflow-y: auto;
-      overflow-x: hidden;
+      overflow-x: auto;
+      overscroll-behavior: contain;
     }
     .md-left .md-preview {
       max-height: none;
@@ -2739,6 +2748,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       min-width: 0;
       overflow-y: auto;
       overflow-x: auto;
+      overscroll-behavior: contain;
     }
     .md-right .table-box {
       max-width: none;
@@ -2769,8 +2779,6 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       display: block;
       width: 100%;
       height: auto;
-      min-width: 120px;
-      max-width: 250px;
     }
     .md-preview code { background: rgba(255,255,255,0.08); padding: 2px 4px; border-radius: 4px; }
     .md-preview pre {
@@ -2896,12 +2904,38 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     [data-theme="light"] .frontmatter-table tbody th {
       color: #7c3aed;
     }
+    /* Table scroll container and indicator */
+    .table-scroll-container {
+      position: relative;
+      margin: 16px 0;
+    }
+    .table-scroll-wrapper {
+      overflow-x: auto;
+      border-radius: 8px;
+    }
+    .scroll-hint {
+      text-align: right;
+      font-size: 12px;
+      color: var(--accent);
+      padding: 4px 8px;
+      margin-bottom: 4px;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease;
+    }
+    .table-scroll-container.can-scroll .scroll-hint {
+      opacity: 0.8;
+      visibility: visible;
+    }
+    .table-scroll-container.scrolled-end .scroll-hint {
+      opacity: 0;
+      visibility: hidden;
+    }
     /* Markdown tables in preview */
     .md-preview table:not(.frontmatter-table table) {
-      width: 100%;
+      min-width: 100%;
+      width: max-content;
       border-collapse: collapse;
-      table-layout: fixed;
-      margin: 16px 0;
       border: 1px solid var(--border);
       border-radius: 8px;
     }
@@ -2913,17 +2947,12 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       vertical-align: top;
       word-break: break-word;
       overflow-wrap: anywhere;
+      width: auto;
     }
-    .md-preview table:not(.frontmatter-table table) th:first-child,
-    .md-preview table:not(.frontmatter-table table) td:first-child {
-      width: 30%;
-      min-width: 200px;
-    }
-    .md-preview table:not(.frontmatter-table table) th:last-child,
-    .md-preview table:not(.frontmatter-table table) td:last-child {
-      width: 180px;
-      min-width: 180px;
-      max-width: 180px;
+    /* Force equal column widths when colgroup is not specified */
+    .md-preview table:not(.frontmatter-table table) colgroup ~ * th,
+    .md-preview table:not(.frontmatter-table table) colgroup ~ * td {
+      width: auto;
     }
     .md-preview table:not(.frontmatter-table table) td:has(video),
     .md-preview table:not(.frontmatter-table table) td:has(img) {
@@ -4033,6 +4062,48 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     themeToggle.addEventListener('click', toggleTheme);
   })();
 
+  // --- Table Scroll Indicator ---
+  (function initTableScrollIndicators() {
+    function updateScrollIndicator(wrapper) {
+      const container = wrapper.closest('.table-scroll-container');
+      if (!container) return;
+
+      const canScroll = wrapper.scrollWidth > wrapper.clientWidth;
+      const isAtEnd = wrapper.scrollLeft + wrapper.clientWidth >= wrapper.scrollWidth - 5;
+
+      container.classList.toggle('can-scroll', canScroll && !isAtEnd);
+      container.classList.toggle('scrolled-end', isAtEnd);
+    }
+
+    function initWrapper(wrapper) {
+      updateScrollIndicator(wrapper);
+      wrapper.addEventListener('scroll', () => updateScrollIndicator(wrapper));
+    }
+
+    // Initialize existing wrappers
+    document.querySelectorAll('.table-scroll-wrapper').forEach(initWrapper);
+
+    // Watch for dynamically added wrappers
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === 1) {
+            if (node.classList?.contains('table-scroll-wrapper')) {
+              initWrapper(node);
+            }
+            node.querySelectorAll?.('.table-scroll-wrapper').forEach(initWrapper);
+          }
+        });
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // Update on resize
+    window.addEventListener('resize', () => {
+      document.querySelectorAll('.table-scroll-wrapper').forEach(updateScrollIndicator);
+    });
+  })();
+
   // --- History Management ---
   // History is now server-side (file-based), HISTORY_DATA is provided by server
 
@@ -6117,8 +6188,46 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
           .trim();
       }
 
-      // Helper: find matching source line for text
-      function findSourceLine(text) {
+      // Helper: find matching source line for text or element
+      // If element is provided, also searches by media src attributes
+      function findSourceLine(text, element = null) {
+        // First, try to find by media src (images, videos) in the element
+        if (element) {
+          const mediaElements = element.querySelectorAll('img, video');
+          for (const m of mediaElements) {
+            const src = m.getAttribute('src');
+            if (!src) continue;
+
+            const fileName = src.split('/').pop();
+            const alt = m.getAttribute('alt') || m.getAttribute('data-alt') || m.getAttribute('title') || '';
+
+            // Search for lines containing this media file (![...](path) syntax)
+            // Prioritize exact match with alt text
+            let bestMatch = -1;
+            for (let i = 0; i < DATA.length; i++) {
+              const lineText = (DATA[i][0] || '');
+              if (!lineText.includes(fileName)) continue;
+
+              // Check if it's an image/video markdown syntax
+              const match = lineText.match(/!\\[([^\\]]*)\\]\\(([^)]+)\\)/);
+              if (!match) continue;
+
+              const [, mdAlt, mdPath] = match;
+
+              // Exact path match
+              if (mdPath.includes(fileName)) {
+                // If alt text matches exactly, this is definitely the right one
+                if (alt && mdAlt && mdAlt === alt) {
+                  return i + 1;
+                }
+                // Otherwise, remember as fallback (prefer first match)
+                if (bestMatch === -1) bestMatch = i + 1;
+              }
+            }
+            if (bestMatch !== -1) return bestMatch;
+          }
+        }
+
         if (!text) return -1;
         const normalized = text.trim().replace(/\\s+/g, ' ').slice(0, 100);
         if (!normalized) return -1;
@@ -6358,9 +6467,9 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         const target = e.target.closest('p, h1, h2, h3, h4, h5, h6, li, blockquote, td, th');
         if (!target) return;
 
-        // Use table-specific search for table cells
+        // Use table-specific search for table cells, otherwise use element-aware search
         const isTableCell = target.tagName === 'TD' || target.tagName === 'TH';
-        const line = isTableCell ? findTableSourceLine(target.textContent) : findSourceLine(target.textContent);
+        const line = isTableCell ? findTableSourceLine(target.textContent) : findSourceLine(target.textContent, target);
         if (line <= 0) return;
 
         e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {