Sync minimap markdown list rendering

Author: rore

tools/minimap/ui/app.js

@@ -171,99 +171,205 @@ function renderInlineMarkdown(value) {
 
 function renderMarkdownToHtml(markdown) {
   const normalized = String(markdown || "").replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-  const lines = normalized.split("\n");
+  const sourceLines = normalized.split("\n");
   const blocks = [];
-  let paragraphLines = [];
-  let listItems = [];
-  let orderedListItems = [];
-  let codeLines = [];
-  let inCodeBlock = false;
-
-  function flushParagraph() {
-    if (paragraphLines.length === 0) {
-      return;
-    }
-    blocks.push(`<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`);
-    paragraphLines = [];
+
+  function expandIndentation(value) {
+    return String(value || "").replace(/\t/g, "    ");
+  }
+
+  function getIndentation(value) {
+    const expanded = expandIndentation(value);
+    const match = expanded.match(/^(\s*)/);
+    return match ? match[1].length : 0;
   }
 
-  function flushList() {
-    if (listItems.length > 0) {
-      blocks.push(`<ul>${listItems.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ul>`);
-      listItems = [];
+  function getListMarker(value) {
+    const expanded = expandIndentation(value);
+    let match = expanded.match(/^(\s*)([-*])\s+(.+)$/);
+    if (match) {
+      return { indent: match[1].length, ordered: false, content: match[3] };
     }
 
-    if (orderedListItems.length > 0) {
-      blocks.push(`<ol>${orderedListItems.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ol>`);
-      orderedListItems = [];
+    match = expanded.match(/^(\s*)(\d+)\.\s+(.+)$/);
+    if (match) {
+      return { indent: match[1].length, ordered: true, content: match[3] };
     }
+
+    return null;
   }
 
-  function flushCodeBlock() {
-    if (codeLines.length === 0) {
-      return;
+  function parseCodeBlock(startIndex) {
+    const codeLines = [];
+    let index = startIndex + 1;
+
+    while (index < sourceLines.length && !sourceLines[index].startsWith("```")) {
+      codeLines.push(sourceLines[index]);
+      index += 1;
     }
-    blocks.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
-    codeLines = [];
-  }
-  for (const line of lines) {
-    if (line.startsWith("```")) {
-      flushParagraph();
-      flushList();
-      if (inCodeBlock) {
-        flushCodeBlock();
-      }
-      inCodeBlock = !inCodeBlock;
-      continue;
+
+    if (index < sourceLines.length && sourceLines[index].startsWith("```")) {
+      index += 1;
     }
 
-    if (inCodeBlock) {
-      codeLines.push(line);
-      continue;
+    return {
+      html: `<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`,
+      nextIndex: index,
+    };
+  }
+
+  function parseParagraph(startIndex) {
+    const paragraphLines = [];
+    let index = startIndex;
+
+    while (index < sourceLines.length) {
+      const rawLine = sourceLines[index];
+      const trimmed = rawLine.trim();
+      if (!trimmed) {
+        break;
+      }
+      if (trimmed.startsWith("```") || trimmed.match(/^(#{1,6})\s+(.+)$/) || getListMarker(rawLine)) {
+        break;
+      }
+
+      paragraphLines.push(trimmed);
+      index += 1;
     }
 
-    const trimmed = line.trim();
+    return {
+      html: `<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`,
+      nextIndex: index,
+    };
+  }
+
+  function parseList(startIndex, baseIndent, ordered) {
+    const tagName = ordered ? "ol" : "ul";
+    const items = [];
+    let index = startIndex;
 
-    if (trimmed === "") {
-      flushParagraph();
-      flushList();
-      continue;
+    while (index < sourceLines.length) {
+      const marker = getListMarker(sourceLines[index]);
+      if (!marker || marker.indent !== baseIndent || marker.ordered !== ordered) {
+        break;
+      }
+
+      const paragraphLines = [marker.content.trim()];
+      const children = [];
+      index += 1;
+
+      while (index < sourceLines.length) {
+        const rawLine = sourceLines[index];
+        const trimmed = rawLine.trim();
+
+        if (!trimmed) {
+          let lookahead = index + 1;
+          while (lookahead < sourceLines.length && !sourceLines[lookahead].trim()) {
+            lookahead += 1;
+          }
+          if (lookahead >= sourceLines.length) {
+            index = lookahead;
+            break;
+          }
+
+          const nextMarker = getListMarker(sourceLines[lookahead]);
+          const nextIndent = getIndentation(sourceLines[lookahead]);
+          const nextTrimmed = sourceLines[lookahead].trim();
+          if ((nextMarker && nextMarker.indent <= baseIndent) || (!nextMarker && nextIndent <= baseIndent && !nextTrimmed.startsWith("```") && !nextTrimmed.match(/^(#{1,6})\s+(.+)$/))) {
+            index = lookahead;
+            break;
+          }
+
+          index = lookahead;
+          continue;
+        }
+
+        if (trimmed.startsWith("```")) {
+          const parsedCode = parseCodeBlock(index);
+          children.push(parsedCode.html);
+          index = parsedCode.nextIndex;
+          continue;
+        }
+
+        const nestedMarker = getListMarker(rawLine);
+        if (nestedMarker) {
+          if (nestedMarker.indent > baseIndent) {
+            const parsedList = parseList(index, nestedMarker.indent, nestedMarker.ordered);
+            children.push(parsedList.html);
+            index = parsedList.nextIndex;
+            continue;
+          }
+
+          break;
+        }
+
+        const indent = getIndentation(rawLine);
+        if (trimmed.match(/^(#{1,6})\s+(.+)$/) && indent <= baseIndent) {
+          break;
+        }
+
+        if (indent > baseIndent) {
+          paragraphLines.push(trimmed);
+          index += 1;
+          continue;
+        }
+
+        break;
+      }
+
+      const paragraphHtml = renderInlineMarkdown(paragraphLines.join(" "));
+      if (children.length > 0) {
+        items.push(`<li><p>${paragraphHtml}</p>${children.join("")}</li>`);
+      } else {
+        items.push(`<li>${paragraphHtml}</li>`);
+      }
     }
 
-    const unorderedMatch = trimmed.match(/^[-*]\s+(.+)$/);
-    if (unorderedMatch) {
-      flushParagraph();
-      orderedListItems = [];
-      listItems.push(unorderedMatch[1]);
+    return {
+      html: `<${tagName}>${items.join("")}</${tagName}>`,
+      nextIndex: index,
+    };
+  }
+
+  let index = 0;
+  while (index < sourceLines.length) {
+    const rawLine = sourceLines[index];
+    const trimmed = rawLine.trim();
+
+    if (!trimmed) {
+      index += 1;
       continue;
     }
 
-    const orderedMatch = trimmed.match(/^\d+[.]\s+(.+)$/);
-    if (orderedMatch) {
-      flushParagraph();
-      listItems = [];
-      orderedListItems.push(orderedMatch[1]);
+    if (trimmed.startsWith("```")) {
+      const parsedCode = parseCodeBlock(index);
+      blocks.push(parsedCode.html);
+      index = parsedCode.nextIndex;
       continue;
     }
 
     const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
     if (headingMatch) {
-      flushParagraph();
-      flushList();
       const level = headingMatch[1].length;
       blocks.push(`<h${level}>${renderInlineMarkdown(headingMatch[2])}</h${level}>`);
+      index += 1;
       continue;
     }
 
-    paragraphLines.push(trimmed);
+    const listMarker = getListMarker(rawLine);
+    if (listMarker) {
+      const parsedList = parseList(index, listMarker.indent, listMarker.ordered);
+      blocks.push(parsedList.html);
+      index = parsedList.nextIndex;
+      continue;
+    }
+
+    const paragraph = parseParagraph(index);
+    blocks.push(paragraph.html);
+    index = paragraph.nextIndex;
   }
 
-  flushParagraph();
-  flushList();
-  flushCodeBlock();
   return blocks.join("");
 }
-
 function ensureSelectValue(select, value) {
   if (!Array.from(select.options).some((option) => option.value === value)) {
     const option = document.createElement("option");

tools/minimap/ui/styles.css

@@ -1208,6 +1208,20 @@ h3 {
   padding-left: 1.3rem;
 }
 
+.preview-markdown li + li {
+  margin-top: 0.22rem;
+}
+
+.preview-markdown li > p {
+  margin: 0;
+}
+
+.preview-markdown li > ul,
+.preview-markdown li > ol {
+  margin-top: 0.45rem;
+  margin-bottom: 0.2rem;
+}
+
 .preview-markdown code {
   padding: 0.1rem 0.34rem;
   border-radius: 999px;