boxwood 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.10.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,62 +41,10 @@ const COMPONENTS = {
   h5: H5,
   h6: H6,
   blockquote: Blockquote,
+  hr: Hr,
 }
 
-function format(text) {
-  if (!text.includes("*") && !text.includes("`")) {
-    return text
-  }
-
-  const result = []
-  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])
-        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
-      }
-    } 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 {
-      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
-      }
-      result.push(text.substring(i, next))
-      i = next
-    }
-  }
-  return result.length > 0 ? result : text
-}
+const INLINE_COMPONENTS = { A, Img, Code, Strong, Em }
 
 function Markdown(params, children) {
   if (Array.isArray(children)) {
@@ -100,47 +55,95 @@ function Markdown(params, children) {
     return null
   }
 
-  const lines = children
-    .trim()
-    .split("\n")
-    .filter((line) => line.trim().length > 0)
-    .map((line) => {
-      // Preserve leading spaces for indentation tracking
-      const trimmed = line.trim()
-      const leadingSpaces = line.length - line.trimStart().length
-      return { text: trimmed, indent: leadingSpaces }
-    })
-
-  const items = lines
-    .map(({ text, indent }) => {
-      if (UNORDERED_MARKERS.some((marker) => text.startsWith(marker))) {
-        const content = text.substring(2)
-        if (!content) return null
-        return { type: "li", list: "ul", content, indent }
-      }
+  // First pass: detect code blocks before processing lines
+  const allLines = children.trim().split("\n")
+  const items = []
+  let i = 0
 
-      if (ORDERED_LIST_REGEXP.test(text)) {
-        const content = text.replace(ORDERED_LIST_REGEXP, "")
-        if (!content) return null
-        return { type: "li", list: "ol", content, indent }
+  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++
       }
 
+      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 (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 matched = false
       for (const { prefix, type } of HEADINGS) {
-        if (text.startsWith(prefix)) {
-          return { type, content: text.substring(prefix.length), indent }
+        if (trimmed.startsWith(prefix)) {
+          items.push({
+            type,
+            content: trimmed.substring(prefix.length),
+            indent: leadingSpaces,
+          })
+          matched = true
+          break
         }
       }
 
-      if (text.startsWith("> ")) {
-        return { type: "blockquote", content: text.substring(2), indent }
+      if (!matched) {
+        if (trimmed.startsWith("> ")) {
+          items.push({
+            type: "blockquote",
+            content: trimmed.substring(2),
+            indent: leadingSpaces,
+          })
+        } else {
+          items.push({ type: "p", content: trimmed, indent: leadingSpaces })
+        }
       }
+    }
 
-      return { type: "p", content: text, indent }
-    })
-    .filter(Boolean)
+    i++
+  }
 
   const nodes = []
-  let i = 0
+  i = 0
 
   function parseList(startIndex, parentIndent) {
     const list = []
@@ -166,7 +169,7 @@ function Markdown(params, children) {
       }
 
       // Process current item at the correct indent level
-      const content = [format(item.content)]
+      const content = [format(item.content, INLINE_COMPONENTS)]
       currentIndex++
 
       // Check if next item is a nested list
@@ -201,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 }