boxwood 2.13.0 → 2.15.0

package/ui/markdown/utilities/format.js

@@ -4,11 +4,11 @@ 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)
+ * @param {Object} allComponents - HTML component functions (contains a, img, code, strong, em, etc.)
  * @returns {Array|string} - Formatted content as array of components and strings
  */
-function format(text, components) {
-  const { A, Img, Code, Strong, Em } = components
+function format(text, allComponents) {
+  const { a: A, img: Img, code: Code, strong: Strong, em: Em } = allComponents
 
   if (
     !text.includes("*") &&
@@ -59,7 +59,7 @@ function format(text, components) {
         continue
       }
     }
-    
+
     if (text[i] === "!" && text[i + 1] === "[") {
       // Try to parse markdown image ![alt](url)
       const altEnd = text.indexOf("]", i + 2)
@@ -90,7 +90,7 @@ function format(text, components) {
           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)))
+          result.push(A({ href: url }, format(linkText, allComponents)))
           i = urlEnd + 1
           continue
         }
@@ -102,25 +102,28 @@ function format(text, components) {
     } 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)) {
+        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++
@@ -139,7 +142,7 @@ function format(text, components) {
         result.push(text[i])
         i++
       } else {
-        result.push(Strong(format(text.substring(i + 2, end), components)))
+        result.push(Strong(format(text.substring(i + 2, end), allComponents)))
         i = end + 2
       }
     } else if (text[i] === "*") {
@@ -148,7 +151,7 @@ function format(text, components) {
         result.push(text[i])
         i++
       } else {
-        result.push(Em(format(text.substring(i + 1, end), components)))
+        result.push(Em(format(text.substring(i + 1, end), allComponents)))
         i = end + 1
       }
     } else {

package/ui/markdown/utilities/params.js

@@ -0,0 +1,29 @@
+/**
+ * Extracts HTML parameters from params object by filtering out special keys
+ */
+function extractHtmlParams(params) {
+  if (!params) return {}
+
+  return Object.keys(params).reduce((acc, key) => {
+    if (key !== "components" && key !== "data") {
+      acc[key] = params[key]
+    }
+    return acc
+  }, {})
+}
+
+/**
+ * Merges builtin HTML tags with custom components
+ * Custom components can override builtin tags if needed
+ */
+function mergeComponents(builtinHtmlTags, customComponents) {
+  return {
+    ...builtinHtmlTags,
+    ...customComponents,
+  }
+}
+
+module.exports = {
+  extractHtmlParams,
+  mergeComponents,
+}

package/ui/markdown/utilities/parseBlock.js

@@ -0,0 +1,284 @@
+const { parseCustomTag } = require("./parseCustomTag")
+const { replaceVariables } = require("./replaceVariables")
+const { format } = require("./format")
+
+// Markdown patterns
+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" },
+  { prefix: "#### ", type: "h4" },
+  { prefix: "### ", type: "h3" },
+  { prefix: "## ", type: "h2" },
+  { prefix: "# ", type: "h1" },
+]
+
+/**
+ * Checks if a line is a code block delimiter (```)
+ */
+function isCodeBlockDelimiter(trimmedLine) {
+  return trimmedLine.startsWith("```")
+}
+
+/**
+ * Parses a code block starting from the current index
+ * Returns the code block item and the next index to process
+ */
+function parseCodeBlock(allLines, startIndex) {
+  const line = allLines[startIndex]
+  const language = line.trim().substring(3).trim()
+  const codeLines = []
+  let i = startIndex + 1
+
+  // Collect lines until closing ```
+  while (i < allLines.length) {
+    const codeLine = allLines[i]
+    if (isCodeBlockDelimiter(codeLine.trim())) {
+      i++ // Skip closing delimiter
+      break
+    }
+    codeLines.push(codeLine)
+    i++
+  }
+
+  return {
+    item: {
+      type: "pre",
+      content: codeLines.join("\n"),
+      language: language || undefined,
+      indent: 0,
+    },
+    nextIndex: i,
+  }
+}
+
+/**
+ * Collects content lines for a multi-line custom component
+ */
+function collectComponentContent(allLines, startIndex, tagName, allComponents) {
+  const contentLines = []
+  let i = startIndex
+  let depth = 1
+
+  while (i < allLines.length && depth > 0) {
+    const contentLine = allLines[i]
+    const contentTag = parseCustomTag(contentLine, allComponents)
+
+    if (contentTag && contentTag.tagName === tagName) {
+      if (contentTag.type === "custom-component-open") {
+        depth++
+        contentLines.push(contentLine)
+      } else if (contentTag.type === "custom-component-close") {
+        depth--
+        if (depth === 0) {
+          i++
+          break
+        }
+        contentLines.push(contentLine)
+      }
+    } else {
+      contentLines.push(contentLine)
+    }
+    i++
+  }
+
+  return {
+    content: contentLines.join("\n"),
+    nextIndex: i,
+  }
+}
+
+/**
+ * Processes a custom component tag and returns the appropriate item
+ */
+function processCustomComponent(
+  line,
+  allLines,
+  currentIndex,
+  customTag,
+  data,
+  allComponents,
+) {
+  const indent = line.length - line.trimStart().length
+
+  // Single-line component with content
+  if (customTag.type === "custom-component-single-line") {
+    const processedContent = replaceVariables(customTag.content, data)
+    const formattedContent = format(processedContent, allComponents)
+    return {
+      item: {
+        type: "custom-component",
+        tagName: customTag.tagName,
+        component: customTag.component,
+        attributes: customTag.attributes,
+        content: formattedContent,
+        selfClosing: false,
+        singleLine: true,
+        indent,
+      },
+      nextIndex: currentIndex + 1,
+    }
+  }
+
+  // Self-closing component
+  if (customTag.type === "custom-component" && customTag.selfClosing) {
+    return {
+      item: {
+        type: "custom-component",
+        tagName: customTag.tagName,
+        component: customTag.component,
+        attributes: customTag.attributes,
+        selfClosing: true,
+        indent,
+      },
+      nextIndex: currentIndex + 1,
+    }
+  }
+
+  // Multi-line component
+  if (customTag.type === "custom-component-open") {
+    const { content, nextIndex } = collectComponentContent(
+      allLines,
+      currentIndex + 1,
+      customTag.tagName,
+      allComponents,
+    )
+
+    return {
+      item: {
+        type: "custom-component",
+        tagName: customTag.tagName,
+        component: customTag.component,
+        attributes: customTag.attributes,
+        content,
+        selfClosing: false,
+        indent,
+      },
+      nextIndex,
+    }
+  }
+
+  return null
+}
+
+/**
+ * Determines the type and content of a markdown line
+ */
+function parseMarkdownLine(line) {
+  const trimmed = line.trim()
+  const leadingSpaces = line.length - line.trimStart().length
+
+  // Horizontal rule
+  if (HORIZONTAL_RULE_REGEXP.test(trimmed)) {
+    return { type: "hr", indent: leadingSpaces }
+  }
+
+  // Unordered list
+  const unorderedMarker = UNORDERED_MARKERS.find((marker) =>
+    trimmed.startsWith(marker),
+  )
+  if (unorderedMarker) {
+    const content = trimmed.substring(2)
+    if (content) {
+      return { type: "li", list: "ul", content, indent: leadingSpaces }
+    }
+  }
+
+  // Ordered list
+  if (ORDERED_LIST_REGEXP.test(trimmed)) {
+    const content = trimmed.replace(ORDERED_LIST_REGEXP, "")
+    if (content) {
+      return { type: "li", list: "ol", content, indent: leadingSpaces }
+    }
+  }
+
+  // Headings
+  for (const { prefix, type } of HEADINGS) {
+    if (trimmed.startsWith(prefix)) {
+      return {
+        type,
+        content: trimmed.substring(prefix.length),
+        indent: leadingSpaces,
+      }
+    }
+  }
+
+  // Blockquote
+  if (trimmed.startsWith("> ")) {
+    return {
+      type: "blockquote",
+      content: trimmed.substring(2),
+      indent: leadingSpaces,
+    }
+  }
+
+  // Default to paragraph
+  return { type: "p", content: trimmed, indent: leadingSpaces }
+}
+
+/**
+ * Parses all lines of markdown into structured items
+ */
+function parseMarkdownLines(children, allComponents, data) {
+  const allLines = children.trim().split("\n")
+  const items = []
+  let i = 0
+
+  while (i < allLines.length) {
+    const line = allLines[i]
+    const trimmed = line.trim()
+
+    // Skip empty lines
+    if (trimmed.length === 0) {
+      i++
+      continue
+    }
+
+    // Check for custom component tags
+    const customTag = parseCustomTag(line, allComponents)
+    if (customTag) {
+      const result = processCustomComponent(
+        line,
+        allLines,
+        i,
+        customTag,
+        data,
+        allComponents,
+      )
+      if (result) {
+        items.push(result.item)
+        i = result.nextIndex
+        continue
+      }
+    }
+
+    // Check for code blocks
+    if (isCodeBlockDelimiter(trimmed)) {
+      const { item, nextIndex } = parseCodeBlock(allLines, i)
+      items.push(item)
+      i = nextIndex
+      continue
+    }
+
+    // Parse regular markdown line
+    const item = parseMarkdownLine(line)
+    if (item) {
+      items.push(item)
+    }
+
+    i++
+  }
+
+  return items
+}
+
+module.exports = {
+  isCodeBlockDelimiter,
+  parseCodeBlock,
+  collectComponentContent,
+  processCustomComponent,
+  parseMarkdownLine,
+  parseMarkdownLines,
+}

package/ui/markdown/utilities/parseCustomTag.js

@@ -12,6 +12,26 @@ function parseCustomTag(line, customComponents) {
 
   const trimmed = line.trim()
 
+  // Check for single-line tag: <tag>content</tag> or <tag attr="value">content</tag>
+  const singleLineMatch = trimmed.match(
+    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?>(.+?)<\/\1>\s*$/,
+  )
+  if (singleLineMatch) {
+    const [, tagName, attributesStr, content] = singleLineMatch
+    const component = customComponents[tagName]
+    if (component) {
+      const attributes = parseAttributes(attributesStr || "")
+      return {
+        type: "custom-component-single-line",
+        tagName,
+        component,
+        attributes,
+        content,
+        selfClosing: false,
+      }
+    }
+  }
+
   // Check for self-closing tag: <ComponentName ... /> (space before / is optional)
   const selfClosingMatch = trimmed.match(
     /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?\s*\/>\s*$/,

package/ui/markdown/utilities/replaceVariables.js

@@ -1,5 +1,40 @@
+/**
+ * Resolve a path like "images[0].src" or "user.name" from a data object
+ * @param {Object} data - The data object to resolve the path from
+ * @param {string} path - The path to resolve (e.g., "images[0].src", "user.name")
+ * @returns {*} - The resolved value or undefined
+ */
+function resolvePath(data, path) {
+  // Handle simple variable names (backwards compatibility)
+  if (!/[.\[]/.test(path)) {
+    return data[path]
+  }
+
+  // Split the path into parts, handling both dot notation and bracket notation
+  // e.g., "images[0].src" -> ["images", "0", "src"]
+  const parts = path
+    .replace(/\[(\d+)\]/g, ".$1") // Convert [0] to .0
+    .split(".")
+    .filter(Boolean)
+
+  let current = data
+  for (const part of parts) {
+    if (current === null || current === undefined) {
+      return undefined
+    }
+    current = current[part]
+  }
+
+  return current
+}
+
 /**
  * Replace {variableName} placeholders in text with actual values from data
+ * Supports:
+ * - Simple variables: {name}
+ * - Array indexing: {images[0]}
+ * - Property access: {user.name}
+ * - Combined: {images[0].src}
  * @param {string} text - Text containing variable placeholders
  * @param {Object} data - Data object with variable values
  * @returns {string|Array} - Text with variables replaced, or array if mixed content
@@ -37,16 +72,16 @@ function replaceVariables(text, data) {
 
       if (closeIndex !== -1) {
         // Found a variable placeholder
-        const variableName = text.substring(i + 1, closeIndex).trim()
+        const variablePath = text.substring(i + 1, closeIndex).trim()
 
-        if (variableName) {
+        if (variablePath) {
           // Add text before the variable
           if (i > lastIndex) {
             result.push(text.substring(lastIndex, i))
           }
 
-          // Add the variable value
-          const value = data[variableName]
+          // Resolve the variable value (supports paths like "images[0].src")
+          const value = resolvePath(data, variablePath)
           if (value !== undefined && value !== null) {
             result.push(String(value))
           } else {

package/ui/normalize.js

@@ -47,7 +47,7 @@ function normalizeGap(gap) {
   if (!gap) {
     return "1rem"
   }
-  
+
   if (GAP_MAP.hasOwnProperty(gap)) {
     return GAP_MAP[gap]
   }