Fix ordered list rendering in markdown preview (#645)

static/js/markdown.js

@@ -580,8 +580,9 @@ export function mdToHtml(src) {
   s = s.replace(/(?:^|\n)(<oli>[\s\S]*?)(?=\n(?!<oli>)|$)/g, m => `<ol>${m.trim().replace(/<\/?oli>/g, (t) => t === '<oli>' ? '<li>' : '</li>')}</ol>`);
 
   // Unordered lists
-  s = s.replace(/^(?:- |\* )(.*)$/gm, '<li>$1</li>');
-  s = s.replace(/(?:^|\n)(<li>[\s\S]*?)(?=\n(?!<li>)|$)/g, m => `<ul>${m.trim()}</ul>`);
+  s = s.replace(/^(?:- |\* )(.*)$/gm, '<uli>$1</uli>');
+  s = s.replace(/(^|\n)((?:<uli>[^\n]*<\/uli>(?:\n|$))+)/g, (_, prefix, block) =>
+    `${prefix}<ul>${block.trim().replace(/<\/?uli>/g, (t) => t === '<uli>' ? '<li>' : '</li>')}</ul>`);
 
   // Blockquotes
   s = s.replace(/^&gt; (.*)$/gm, '<bq>$1</bq>');

tests/test_markdown_rendering_js.py

@@ -0,0 +1,82 @@
+"""Regression coverage for the browser markdown renderer."""
+
+import json
+import shutil
+import subprocess
+import textwrap
+from pathlib import Path
+
+import pytest
+
+_REPO = Path(__file__).resolve().parent.parent
+_HAS_NODE = shutil.which("node") is not None
+
+
+@pytest.fixture(scope="module")
+def node_available():
+    if not _HAS_NODE:
+        pytest.skip("node binary not on PATH")
+
+
+def _run_markdown_case(markdown: str) -> str:
+    script = textwrap.dedent(
+        """
+        import fs from 'node:fs';
+
+        globalThis.window = { location: { origin: 'http://localhost' }, katex: null };
+        globalThis.document = {
+          readyState: 'loading',
+          addEventListener() {},
+        };
+        globalThis.MutationObserver = class { observe() {} };
+
+        let source = fs.readFileSync('./static/js/markdown.js', 'utf8');
+        source = source.replace(
+          "import uiModule from './ui.js';\\n\\nvar escapeHtml = uiModule.esc;",
+          `var escapeHtml = (value) => String(value ?? '')
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');`
+        );
+
+        const moduleUrl = 'data:text/javascript;base64,' + Buffer.from(source).toString('base64');
+        const mod = await import(moduleUrl);
+        const input = JSON.parse(process.argv[1]);
+        console.log(JSON.stringify({ html: mod.mdToHtml(input) }));
+        """
+    )
+    result = subprocess.run(
+        ["node", "--input-type=module", "-e", script, json.dumps(markdown)],
+        cwd=_REPO,
+        capture_output=True,
+        timeout=15,
+        text=True,
+    )
+    if result.returncode != 0:
+        raise AssertionError(f"node failed:\nSTDERR:\n{result.stderr}\nSTDOUT:\n{result.stdout}")
+    return json.loads(result.stdout.splitlines()[-1])["html"]
+
+
+def test_ordered_lists_render_as_one_unwrapped_ol(node_available):
+    html = _run_markdown_case(
+        "Before\n\n"
+        "1. **Check against the home page** — that's the visual reference for how things should feel.\n"
+        "2. **Open DevTools** and inspect the element — check fonts, colors, and spacing against this guide.\n"
+        "3. **Flag it** — note the page, the section, what's wrong, and what CSS rule you suspect.\n"
+        "4. **Small fixes** — if you know the fix (e.g. wrong CSS variable, wrong font), go ahead and change it in the CSS Module file.\n"
+        "5. **Big changes** — Talk it through before making wide changes across many pages.\n\n"
+        "After"
+    )
+
+    assert html.count("<ol>") == 1
+    assert html.count("</ol>") == 1
+    assert html.count("<li>") == 5
+    assert "<ul>" not in html
+    assert "<oli>" not in html
+    assert "<uli>" not in html
+    assert "<p><ol>" not in html
+    assert "<p><li>" not in html
+    assert "<p>Before</p>" in html
+    assert "<p>After</p>" in html