fix: markdown table renders separator row as visible data (#1252)

* fix: markdown table renders separator row as visible data

The alignment separator (|---|---|) at row index 1 was rendered as a
<td> row with dashes as cell content. Skip it and only open <tbody>
at that point, so tables render as header + data without the garbage
separator row in between.

* test: add regression test for table separator row rendering

Verifies that the markdown table renderer skips the separator row
(|---|---|) instead of rendering it as a visible data row. Also
updates the test harness to handle the splitTableRow import.

static/js/markdown.js

@@ -536,16 +536,18 @@ export function mdToHtml(src) {
     let html = '<table style="border-collapse: collapse; width: 100%; margin: 10px 0;">';
 
     rows.forEach((row, idx) => {
+      if (idx === 1 && /^[\s|:\-]+$/.test(row)) {
+        html += '<tbody>';
+        return;
+      }
       const cells = splitTableRow(row);
       if (cells.length === 0) return;
 
-      html += idx === 1 ? '<tbody>' : '';
       html += '<tr>';
 
       cells.forEach(cell => {
         const tag = idx === 0 ? 'th' : 'td';
-        const style = idx === 1 ? 'style="border-top: 2px solid var(--red);"' : '';
+        html += `<${tag} style="padding: 8px; text-align: left; border-bottom: 1px solid var(--border);">${cell.trim()}</${tag}>`;
-        html += `<${tag} ${style} style="padding: 8px; text-align: left; border-bottom: 1px solid var(--border);">${cell.trim()}</${tag}>`;
       });
 
       html += '</tr>';

tests/test_markdown_rendering_js.py

@@ -20,7 +20,7 @@ def node_available():
 
 def _run_markdown_case(markdown: str) -> str:
     script = textwrap.dedent(
-        """
+        r"""
         import fs from 'node:fs';
 
         globalThis.window = { location: { origin: 'http://localhost' }, katex: null };
@@ -32,7 +32,17 @@ def _run_markdown_case(markdown: str) -> str:
 
         let source = fs.readFileSync('./static/js/markdown.js', 'utf8');
         source = source.replace(
-          "import uiModule from './ui.js';\\n\\nvar escapeHtml = uiModule.esc;",
+          /import uiModule from ['"]\.\/ui\.js['"];/,
+          ''
+        );
+        source = source.replace(
+          /import \{ splitTableRow \} from ['"]\.\/markdown\/tableRow\.js['"];/,
+          `function splitTableRow(row) {
+            return (row || '').replace(/^\\s*\\|/, '').replace(/\\|\\s*$/, '').split('|').map(c => c.trim());
+          }`
+        );
+        source = source.replace(
+          /var escapeHtml = uiModule\.esc;/,
           `var escapeHtml = (value) => String(value ?? '')
             .replace(/&/g, '&')
             .replace(/</g, '&lt;')
@@ -80,3 +90,12 @@ def test_ordered_lists_render_as_one_unwrapped_ol(node_available):
     assert "<p><li>" not in html
     assert "<p>Before</p>" in html
     assert "<p>After</p>" in html
+
+
+def test_table_separator_row_not_rendered_as_data(node_available):
+    html = _run_markdown_case("| A | B |\n|---|---|\n| 1 | 2 |")
+
+    assert html.count("<tr>") == 2
+    assert "<th" in html
+    assert "<td" in html
+    assert "---" not in html