Add ul/ol support

Author: emilos

ui/markdown/index.js

@@ -9,6 +9,7 @@ const {
   P,
   Blockquote,
   Ul,
+  Ol,
   Li,
 } = require("../..")
 
@@ -20,54 +21,81 @@ function Markdown(params, children) {
       .map((line) => line.trim())
       .filter(Boolean)
 
+    const items = lines.map((line) => {
+      if (line.startsWith("- ") || line.startsWith("— ")) {
+        return { type: "li", list: "ul", content: line.substring(2) }
+      } else if (/^\d+\.\s/.test(line)) {
+        return { type: "li", list: "ol", content: line.replace(/^\d+\.\s/, "") }
+      } else if (line.startsWith("# ")) {
+        return { type: "h1", content: line.substring(2) }
+      } else if (line.startsWith("## ")) {
+        return { type: "h2", content: line.substring(3) }
+      } else if (line.startsWith("### ")) {
+        return { type: "h3", content: line.substring(4) }
+      } else if (line.startsWith("#### ")) {
+        return { type: "h4", content: line.substring(5) }
+      } else if (line.startsWith("##### ")) {
+        return { type: "h5", content: line.substring(6) }
+      } else if (line.startsWith("###### ")) {
+        return { type: "h6", content: line.substring(7) }
+      } else if (line.startsWith("> ")) {
+        return { type: "blockquote", content: line.substring(2) }
+      } else {
+        return { type: "p", content: line }
+      }
+    })
+
     const nodes = []
-    let list = null
+    let i = 0
 
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i]
+    while (i < items.length) {
+      const item = items[i]
 
-      if (line.startsWith("- ") || line.startsWith("— ")) {
-        if (!list) {
-          list = []
+      if (item.type === "li") {
+        const list = []
+        const parent = item.list
+
+        while (i < items.length && items[i].type === "li" && items[i].list === parent) {
+          list.push(Li(params, items[i].content))
+          i++
         }
 
-        list.push(Li(params, line.substring(2)))
-      } else {
-        if (list) {
+        if (parent === "ul") {
           nodes.push(Ul(params, list))
-          list = null
+        } else if (parent === "ol") {
+          nodes.push(Ol(params, list))
         }
+      } else {
+        const { type, content } = item
 
-        if (line.startsWith("# ")) {
-          const text = line.substring(2)
-          nodes.push(H1(params, text))
-        } else if (line.startsWith("## ")) {
-          const text = line.substring(3)
-          nodes.push(H2(params, text))
-        } else if (line.startsWith("### ")) {
-          const text = line.substring(4)
-          nodes.push(H3(params, text))
-        } else if (line.startsWith("#### ")) {
-          const text = line.substring(5)
-          nodes.push(H4(params, text))
-        } else if (line.startsWith("##### ")) {
-          const text = line.substring(6)
-          nodes.push(H5(params, text))
-        } else if (line.startsWith("###### ")) {
-          const text = line.substring(7)
-          nodes.push(H6(params, text))
-        } else if (line.startsWith("> ")) {
-          const text = line.substring(2)
-          nodes.push(Blockquote(params, text))
-        } else {
-          nodes.push(P(params, line))
+        switch (type) {
+          case "h1":
+            nodes.push(H1(params, content))
+            break
+          case "h2":
+            nodes.push(H2(params, content))
+            break
+          case "h3":
+            nodes.push(H3(params, content))
+            break
+          case "h4":
+            nodes.push(H4(params, content))
+            break
+          case "h5":
+            nodes.push(H5(params, content))
+            break
+          case "h6":
+            nodes.push(H6(params, content))
+            break
+          case "blockquote":
+            nodes.push(Blockquote(params, content))
+            break
+          default:
+            nodes.push(P(params, content))
         }
-      }
-    }
 
-    // Close any remaining list
-    if (list) {
-      nodes.push(Ul(params, list))
+        i++
+      }
     }
 
     return nodes

ui/markdown/index.test.js

@@ -98,3 +98,66 @@ test("handles both dash types in same list", async () => {
   assert(html.includes("<li>Regular again</li>"))
   assert(html.includes("</ul>"))
 })
+
+test("renders ordered list", async () => {
+  const { template } = await compile(__dirname)
+  const markdown = `
+1. First item
+2. Second item
+3. Third item
+  `
+  const html = template(markdown)
+  assert(html.includes("<ol>"))
+  assert(html.includes("<li>First item</li>"))
+  assert(html.includes("<li>Second item</li>"))
+  assert(html.includes("<li>Third item</li>"))
+  assert(html.includes("</ol>"))
+})
+
+test("renders mixed unordered and ordered lists", async () => {
+  const { template } = await compile(__dirname)
+  const markdown = `
+# Shopping List
+
+Buy these items:
+
+- Apples
+- Bananas
+- Oranges
+
+Follow these steps:
+
+1. Go to store
+2. Buy items
+3. Return home
+  `
+  const html = template(markdown)
+  assert(html.includes("<h1>Shopping List</h1>"))
+  assert(html.includes("<p>Buy these items:</p>"))
+  assert(html.includes("<ul>"))
+  assert(html.includes("<li>Apples</li>"))
+  assert(html.includes("</ul>"))
+  assert(html.includes("<p>Follow these steps:</p>"))
+  assert(html.includes("<ol>"))
+  assert(html.includes("<li>Go to store</li>"))
+  assert(html.includes("</ol>"))
+})
+
+test("handles transition from ordered to unordered list", async () => {
+  const { template } = await compile(__dirname)
+  const markdown = `
+1. First ordered
+2. Second ordered
+- First unordered
+- Second unordered
+  `
+  const html = template(markdown)
+  assert(html.includes("<ol>"))
+  assert(html.includes("<li>First ordered</li>"))
+  assert(html.includes("<li>Second ordered</li>"))
+  assert(html.includes("</ol>"))
+  assert(html.includes("<ul>"))
+  assert(html.includes("<li>First unordered</li>"))
+  assert(html.includes("<li>Second unordered</li>"))
+  assert(html.includes("</ul>"))
+})