boxwood 2.9.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/markdown/index.js

@@ -14,10 +14,17 @@ const {
   Strong,
   Em,
   Code,
+  A,
+  Hr,
+  Img,
+  Pre,
 } = require("../..")
 
+const { format } = require("./utilities/format")
+
 const ORDERED_LIST_REGEXP = /^\d+\.\s/
 const UNORDERED_MARKERS = ["- ", "— ", "– ", "• "]
+const HORIZONTAL_RULE_REGEXP = /^(?:\*\s*\*\s*\*+|-\s*-\s*-+|_\s*_\s*_+)\s*$/
 const HEADINGS = [
   { prefix: "###### ", type: "h6" },
   { prefix: "##### ", type: "h5" },
@@ -34,130 +41,161 @@ const COMPONENTS = {
   h5: H5,
   h6: H6,
   blockquote: Blockquote,
+  hr: Hr,
 }
 
-function format(text) {
-  if (!text.includes("*") && !text.includes("`")) {
-    return text
+const INLINE_COMPONENTS = { A, Img, Code, Strong, Em }
+
+function Markdown(params, children) {
+  if (Array.isArray(children)) {
+    return children.map((child) => Markdown(params, child))
+  }
+
+  if (typeof children !== "string") {
+    return null
   }
 
-  const result = []
+  // First pass: detect code blocks before processing lines
+  const allLines = children.trim().split("\n")
+  const items = []
   let i = 0
-  while (i < text.length) {
-    if (text[i] === "`") {
-      const start = i + 1
-      const end = text.indexOf("`", start)
-      if (end === -1) {
-        result.push(text[i])
+
+  while (i < allLines.length) {
+    const line = allLines[i]
+    const trimmed = line.trim()
+
+    // Check for code block start
+    if (trimmed.startsWith("```")) {
+      const language = trimmed.substring(3).trim()
+      const codeLines = []
+      i++ // Move past the opening ```
+
+      // Collect code block lines until closing ```
+      while (i < allLines.length) {
+        const codeLine = allLines[i]
+        if (codeLine.trim().startsWith("```")) {
+          // Found closing ```, don't include it
+          i++
+          break
+        }
+        codeLines.push(codeLine)
         i++
-      } else {
-        result.push(Code({}, text.substring(start, end)))
-        i = end + 1
       }
-    } else if (text[i] === "*" && text[i + 1] === "*") {
-      const start = i + 2
-      const end = text.indexOf("**", start)
-      if (end === -1) {
-        result.push(text[i])
-        i++
-      } else {
-        result.push(Strong(text.substring(start, end)))
-        i = end + 2
+
+      items.push({
+        type: "pre",
+        content: codeLines.join("\n"),
+        language: language || undefined,
+        indent: 0,
+      })
+      continue
+    }
+
+    // Skip empty lines
+    if (trimmed.length === 0) {
+      i++
+      continue
+    }
+
+    const leadingSpaces = line.length - line.trimStart().length
+
+    // Check for other block types
+    if (HORIZONTAL_RULE_REGEXP.test(trimmed)) {
+      items.push({ type: "hr", indent: leadingSpaces })
+    } else if (UNORDERED_MARKERS.some((marker) => trimmed.startsWith(marker))) {
+      const content = trimmed.substring(2)
+      if (content) {
+        items.push({ type: "li", list: "ul", content, indent: leadingSpaces })
       }
-    } else if (text[i] === "*") {
-      const start = i + 1
-      const end = text.indexOf("*", start)
-      if (end === -1) {
-        result.push(text[i])
-        i++
-      } else {
-        result.push(Em(text.substring(start, end)))
-        i = end + 1
+    } else if (ORDERED_LIST_REGEXP.test(trimmed)) {
+      const content = trimmed.replace(ORDERED_LIST_REGEXP, "")
+      if (content) {
+        items.push({ type: "li", list: "ol", content, indent: leadingSpaces })
       }
     } else {
-      let next = text.length
-      const nextCode = text.indexOf("`", i)
-      const nextStar = text.indexOf("*", i)
-      if (nextCode !== -1 && nextCode < next) next = nextCode
-      if (nextStar !== -1 && nextStar < next) next = nextStar
-      if (next === text.length) {
-        result.push(text.substring(i))
-        break
+      let matched = false
+      for (const { prefix, type } of HEADINGS) {
+        if (trimmed.startsWith(prefix)) {
+          items.push({
+            type,
+            content: trimmed.substring(prefix.length),
+            indent: leadingSpaces,
+          })
+          matched = true
+          break
+        }
+      }
+
+      if (!matched) {
+        if (trimmed.startsWith("> ")) {
+          items.push({
+            type: "blockquote",
+            content: trimmed.substring(2),
+            indent: leadingSpaces,
+          })
+        } else {
+          items.push({ type: "p", content: trimmed, indent: leadingSpaces })
+        }
       }
-      result.push(text.substring(i, next))
-      i = next
     }
-  }
-  return result.length > 0 ? result : text
-}
 
-function Markdown(params, children) {
-  if (Array.isArray(children)) {
-    return children.map((child) => Markdown(params, child))
+    i++
   }
 
-  if (typeof children !== "string") {
-    return null
-  }
+  const nodes = []
+  i = 0
+
+  function parseList(startIndex, parentIndent) {
+    const list = []
+    let currentIndex = startIndex
+    const parentListType = items[startIndex].list
 
-  const lines = children
-    .trim()
-    .split("\n")
-    .map((line) => line.trim())
-    .filter(Boolean)
-
-  const items = lines
-    .map((line) => {
-      if (UNORDERED_MARKERS.some((marker) => line.startsWith(marker))) {
-        const content = line.substring(2)
-        if (!content) return null
-        return { type: "li", list: "ul", content }
+    while (currentIndex < items.length) {
+      const item = items[currentIndex]
+
+      // Stop if not a list item or indent is less than expected
+      if (item.type !== "li" || item.indent < parentIndent) {
+        break
       }
 
-      if (ORDERED_LIST_REGEXP.test(line)) {
-        const content = line.replace(ORDERED_LIST_REGEXP, "")
-        if (!content) return null
-        return { type: "li", list: "ol", content }
+      // Stop if indent matches but list type differs
+      if (item.indent === parentIndent && item.list !== parentListType) {
+        break
       }
 
-      for (const { prefix, type } of HEADINGS) {
-        if (line.startsWith(prefix)) {
-          return { type, content: line.substring(prefix.length) }
-        }
+      // Skip items with greater indent (they belong to nested lists)
+      if (item.indent > parentIndent) {
+        break
       }
 
-      if (line.startsWith("> ")) {
-        return { type: "blockquote", content: line.substring(2) }
+      // Process current item at the correct indent level
+      const content = [format(item.content, INLINE_COMPONENTS)]
+      currentIndex++
+
+      // Check if next item is a nested list
+      const nextItem = items[currentIndex]
+      if (nextItem?.type === "li" && nextItem.indent > item.indent) {
+        const nestedResult = parseList(currentIndex, nextItem.indent)
+        content.push(nestedResult.list)
+        currentIndex = nestedResult.nextIndex
       }
 
-      return { type: "p", content: line }
-    })
-    .filter(Boolean)
+      list.push(Li(params, content))
+    }
 
-  const nodes = []
-  let i = 0
+    const listElement =
+      parentListType === "ul" ? Ul(params, list) : Ol(params, list)
+
+    return { list: listElement, nextIndex: currentIndex }
+  }
 
   while (i < items.length) {
     const item = items[i]
 
     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, format(items[i].content)))
-        i++
-      }
-
-      if (parent === "ul") {
-        nodes.push(Ul(params, list))
-      } else if (parent === "ol") {
-        nodes.push(Ol(params, list))
-      }
+      const result = parseList(i, item.indent)
+      nodes.push(result.list)
+      i = result.nextIndex
     } else if (item.type === "blockquote") {
       const lines = []
 
@@ -166,11 +204,26 @@ function Markdown(params, children) {
         i++
       }
 
-      nodes.push(Blockquote(params, P(params, format(lines.join("\n")))))
+      nodes.push(
+        Blockquote(
+          params,
+          P(params, format(lines.join("\n"), INLINE_COMPONENTS)),
+        ),
+      )
+    } else if (item.type === "hr") {
+      nodes.push(Hr(params))
+      i++
+    } else if (item.type === "pre") {
+      // Code blocks - wrap in <pre><code>
+      const codeParams = item.language
+        ? { class: `language-${item.language}` }
+        : {}
+      nodes.push(Pre(params, Code(codeParams, item.content)))
+      i++
     } else {
       const { type, content } = item
       const Component = COMPONENTS[type] || P
-      nodes.push(Component(params, format(content)))
+      nodes.push(Component(params, format(content, INLINE_COMPONENTS)))
       i++
     }
   }

package/ui/markdown/utilities/brackets.js

@@ -0,0 +1,21 @@
+// Find the matching closing bracket, accounting for nested brackets
+function findMatchingBracket(text, startPos) {
+  let depth = 1
+  let i = startPos + 1
+
+  while (i < text.length && depth > 0) {
+    if (text[i] === "[" && text[i - 1] !== "\\") {
+      depth++
+    } else if (text[i] === "]" && text[i - 1] !== "\\") {
+      depth--
+      if (depth === 0) {
+        return i
+      }
+    }
+    i++
+  }
+
+  return -1
+}
+
+module.exports = { findMatchingBracket }

package/ui/markdown/utilities/format.js

@@ -0,0 +1,181 @@
+const { findMatchingBracket } = require("./brackets")
+
+/**
+ * Format inline markdown elements within text
+ * Handles: images, links, code, bold, italic
+ * @param {string} text - The text to format
+ * @param {Object} components - HTML component functions (A, Img, Code, Strong, Em)
+ * @returns {Array|string} - Formatted content as array of components and strings
+ */
+function format(text, components) {
+  const { A, Img, Code, Strong, Em } = components
+
+  if (
+    !text.includes("*") &&
+    !text.includes("`") &&
+    !text.includes("[") &&
+    !text.includes("!") &&
+    !text.includes("<") &&
+    !text.includes("\\")
+  ) {
+    return text
+  }
+
+  const result = []
+  let i = 0
+
+  while (i < text.length) {
+    // Handle escape characters
+    if (text[i] === "\\") {
+      if (i + 1 < text.length) {
+        const nextChar = text[i + 1]
+        // Check if next char is a special markdown character
+        if (
+          nextChar === "*" ||
+          nextChar === "`" ||
+          nextChar === "[" ||
+          nextChar === "]" ||
+          nextChar === "(" ||
+          nextChar === ")" ||
+          nextChar === "!" ||
+          nextChar === "<" ||
+          nextChar === ">" ||
+          nextChar === "\\"
+        ) {
+          // Escape the next character - just add it as literal text
+          result.push(nextChar)
+          i += 2 // Skip both \ and the escaped character
+          continue
+        }
+        // If not a special char, keep both the backslash and the next character
+        result.push(text[i])
+        result.push(nextChar)
+        i += 2
+        continue
+      } else {
+        // Backslash at end of string
+        result.push(text[i])
+        i++
+        continue
+      }
+    }
+    
+    if (text[i] === "!" && text[i + 1] === "[") {
+      // Try to parse markdown image ![alt](url)
+      const altEnd = text.indexOf("]", i + 2)
+
+      if (altEnd !== -1 && text[altEnd + 1] === "(") {
+        const urlEnd = text.indexOf(")", altEnd + 2)
+
+        if (urlEnd !== -1) {
+          const alt = text.substring(i + 2, altEnd)
+          const src = text.substring(altEnd + 2, urlEnd)
+          result.push(Img({ src, alt }))
+          i = urlEnd + 1
+          continue
+        }
+      }
+
+      // Not a valid image, treat as regular text (skip both ! and [)
+      result.push(text[i])
+      i++
+    } else if (text[i] === "[") {
+      // Try to parse markdown link [text](url)
+      const textEnd = findMatchingBracket(text, i)
+
+      if (textEnd !== -1 && text[textEnd + 1] === "(") {
+        const urlEnd = text.indexOf(")", textEnd + 2)
+
+        if (urlEnd !== -1) {
+          const linkText = text.substring(i + 1, textEnd)
+          const url = text.substring(textEnd + 2, urlEnd)
+          // Recursively format the link text to support images, bold, italic inside links
+          result.push(A({ href: url }, format(linkText, components)))
+          i = urlEnd + 1
+          continue
+        }
+      }
+
+      // Not a valid link, treat as regular text
+      result.push(text[i])
+      i++
+    } else if (text[i] === "<") {
+      // Try to parse autolink <url> or <email>
+      const end = text.indexOf(">", i + 1)
+      
+      if (end !== -1) {
+        const content = text.substring(i + 1, end)
+        
+        // Check if it's a URL (starts with http:// or https://)
+        if (content.startsWith("http://") || content.startsWith("https://")) {
+          result.push(A({ href: content }, content))
+          i = end + 1
+          continue
+        }
+        
+        // Check if it's an email (contains @ and looks like email)
+        if (content.includes("@") && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(content)) {
+          result.push(A({ href: `mailto:${content}` }, content))
+          i = end + 1
+          continue
+        }
+      }
+      
+      // Not a valid autolink, treat as regular text
+      result.push(text[i])
+      i++
+    } else if (text[i] === "`") {
+      const end = text.indexOf("`", i + 1)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Code({}, text.substring(i + 1, end)))
+        i = end + 1
+      }
+    } else if (text[i] === "*" && text[i + 1] === "*") {
+      const end = text.indexOf("**", i + 2)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Strong(format(text.substring(i + 2, end), components)))
+        i = end + 2
+      }
+    } else if (text[i] === "*") {
+      const end = text.indexOf("*", i + 1)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Em(format(text.substring(i + 1, end), components)))
+        i = end + 1
+      }
+    } else {
+      // Find next special character
+      const positions = [
+        text.indexOf("`", i),
+        text.indexOf("*", i),
+        text.indexOf("[", i),
+        text.indexOf("<", i),
+        text.indexOf("\\", i),
+      ].filter((pos) => pos !== -1)
+
+      // Look for image pattern ![
+      const exclamPos = text.indexOf("!", i)
+      if (exclamPos !== -1 && text[exclamPos + 1] === "[") {
+        positions.push(exclamPos)
+      }
+
+      const next = positions.length > 0 ? Math.min(...positions) : text.length
+
+      result.push(text.substring(i, next))
+      if (next === text.length) break
+      i = next
+    }
+  }
+
+  return result.length > 0 ? result : text
+}
+
+module.exports = { format }